用 AI 提示词快速搭出网站 UI：一份可复用的提示词模板

freeCodeCamp 的这篇教程把「让 AI 写前端」拆成可操作的提示词结构：先说清技术栈、文件路径和规则，再让工具按步骤生成。作者用 Next.js、Tailwind CSS 和 shadcn/ui 做一个带吸顶导航和全屏 hero 的页面，并给出生成后如何检查、追问和定制的完整流程。

为什么提示词决定成败

• 短而模糊的提示词（比如「做得现代一点」）只会得到配色随机、代码重复的通用页面，工具没有可执行的信息。
• 有效提示词相当于一份短规格书，至少覆盖五点：布局（谁在哪个位置）、组件（用哪个现成组件）、颜色（主色和出现位置，尽量用主题 token）、间距（如内容限制在 max-w-7xl 并加水平内边距）、响应式（手机上怎么变）。
• 把代码拆成小文件（page、navbar、nav link、hero、index），比让 AI 一次吐一个大文件更好维护。

为什么选 shadcn/ui

• shadcn/ui 不是 npm 包，而是用 CLI 把组件源码复制进项目的 components/ui 目录，代码在你自己仓库里。
• 这对 AI 工具有实际好处：工具能读到真实组件文件，你说「用 dropdown menu」时它会照着项目里的组件写，而不是自己发明一个。
• 组件默认带无障碍支持（键盘操作、焦点管理），样式走 Tailwind，主题变量共享，颜色在各组件间保持一致，也没有锁定风险。

一份能直接复用的提示词结构

• 开头写明技术栈和版本：shadcn 项目结构、React 19、Tailwind CSS 4、TypeScript 5，并说明不满足时先给安装步骤。
• 逐个文件给出路径和完整代码，例如 app/hero-03/page.tsx、components/shadcn-space/blocks/hero-03/hero.tsx 等五个文件。
• 给出有序执行步骤：先读 components.json 确定别名路径并改好 import，再装依赖、用 shadcn CLI 加组件、只追加本块用到的全局样式、按原路径写文件、最后校验所有 import 能解析。
• 结尾明确「完成」的标准：组件功能完整、视觉与给定代码一致，工具才知道何时停。

生成后怎么检查与追问

• 工具跑完后先逐个读五个文件再运行页面，重点看 import 路径是否匹配项目的别名配置。
• 用小的追问提示词逐步修正，而不是重新生成整页，比如单独调整导航栏滚动后的背景、标题字号或移动端堆叠方式。
• 作者建议在部署前人工过一遍 AI 生成的代码，确认依赖、样式变量和文件结构没有被动过。

这个案例做了什么

• 全屏 hero：循环背景视频、深色遮罩保证文字可读、标题进入视口时淡入、旁边一个旋转图标配一行短文字。
• 吸顶导航：左侧 logo、右侧圆形菜单按钮，滚动超过 80px 后背景填充，点开是五个链接的下拉菜单，带深色模糊遮罩和联系方式。
• 导航链接 hover 时出现旋转图标，当前页有激活态；动画用 Motion 库，教程不要求提前会用它。