加载中…
创作者 · arjunkshah21
复刻提示词保留原文，另附运行环境、素材与验收要求；附加说明不是原作者原话。
Vibe coding 对战第二部分！
我使用的提示词：
为 Claude Code 和 Codex 等 AI 编程代理的 Skill 设计一个多版块、极其优雅且漂亮的落地页；这个 Skill 能消除 AI UI 中的模板化和粗糙感，基本上就是设计漂亮的 UI。展示它可以与多种不同类型的编程代理集成。落地页本身必须干净、极简但仍然优雅——留出最大限度的空白，同时保持好看、不俗气。再加入一个功能：按下键盘上的 C 键即可切换网站主题，并确保主题切换有完整动画。这里是仓库链接：，请参考其中的信息。
竞争者 1（左侧截图）：
竞争者 2（右侧截图）：
结果如下适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
多人复现
继续探索
@viktoroddy 使用 Google Stitch · Claude完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词： 复刻这个落地页的完整提示词 为一家名为「APEX」的虚构公司创建一个深色、高级的 SaaS 落地页——一个营收加速平台。设计采用「液态玻璃」美学，超深色背景、半透明玻璃拟态元素，配绿色强调色。页面使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui 构建，视频流使用 hls.js。 全局设计系统 字体：Geist Sans（安装 @fontsource/geist-sans，字重 400
@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
提示词： 构建一个 Hero 区域，具体规格如下： 整体布局： 全宽版块，背景色 #000000（纯黑） overflow hidden 所有内容背后播放背景视频（详情见下） 背景视频： 来源： 自动播放、循环、静音、playsInline 缩放到容器的 120%（宽度和高度均为 120%） 水平居中，焦点锚定在底部 位于所有内容之下（最低层级） 模糊背景元素： 绝对定位，水平居中，顶部偏移约 215px 尺寸：宽 801px × 高 384px，完全圆角（药丸
@Oluwaphilemon1 使用 Claude · Three.js · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
我如何用 Claude 构建它 👇 1. Prompt：“构建一个叙事网站，每个滚动区块都通过流畅的色彩过渡揭示一个新的章节” 2. 使用 Three.js 制作会响应光标的绘画质感背景 3. Prompt：“加入 GSAP ScrollTrigger，让每个区块像电影场景一样进入动画” 4. 使用 Lenis.js 实现高级网站那种丝滑的平滑滚动
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。
