加载中…
创作者 · Nil_phy_dreamer
查看原始来源 ↗复刻提示词保留原文，另附运行环境、素材与验收要求；附加说明不是原作者原话。
我正在做一个动画加载器和图标库，这是我的第二个项目。这个周末我尝试为它构建一个落地页。但我做了一个实验，完全用 claude code：Sonnet 4.6 来构建它。
我对它第一次生成的结果相当满意。
这是我使用的确切提示词
> 我想让你为这个库创建一个落地页。
1. hero 区域 2. 带 CTA 按钮的功能展示，以及任何你认为重要的版块，从 components 文件夹里取用所有组件，例如 Heading.tsx、paragraph.tsx
使用 `max-w-5xl`，
颜色：以白色和黑色为基础（使用 tailwindcss 中的 neutral、stone 和 white）
我想在落地页中使用一种特定的图案，让它成为受 tailwindplus 主页启发的用心设计
下面是这个网格图案，请像专业设计工程师一样有目的、有品味地使用它
<div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
<div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
<div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
<img src="/img/logo.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" />
<img src="/img/logo-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" />
<hr class="my-6 w-full border-(--pattern-fg)" />
<p class="mb-3">Want to dig deeper into Tailwind?</p>
<p class="font-semibold">
<a href="" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs →</a>
</p>
</div>
</div>
<div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
<div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
<div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
<div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
</div>
这是结果
@mannupaaji 有什么改进提示词的建议吗？
你希望在这里加入什么，才能获得更好的输出？适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
多人复现
继续探索
@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 实现高级网站那种丝滑的平滑滚动
提示语
提示词： 构建一个高级电动车落地页，具有深色电影感美学。整个网站使用黑色背景（hsl(0,0%,0%)），配浅色文字（主色 hsl(0,0%,95%)）和橙色强调色（hsl(25,100%,50%)）。不使用默认字体——保持极简和编辑感。使用 shadcn/ui 设计令牌。以下是按顺序排列的各版块： 设计系统（index.css） --background: 0 0% 0% --foreground: 0 0% 12%（用于 CTA 按钮内圆等深色元素） --primar
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。
