用 AI 提示词搭建网站首页：Next.js + Tailwind CSS + shadcn/ui 实战教程

手写一个网站首页的 HTML、CSS 和组件代码，过去往往要花上几个小时。现在你可以用自然语言描述页面，让 AI 编码工具先写出一版初稿。但结果好坏几乎完全取决于提示词：一句含糊的「做个现代感首页」，通常换来配色随机、代码重复的通用页面；而把技术栈、文件路径、组件选择和规则都写清楚的提示词，能直接产出可以落地的代码。这篇教程讲的就是后者——如何为 Next.js + Tailwind CSS + shadcn/ui 项目写出一份可复用的 UI 提示词，并用它生成一个全屏 Hero 区块加粘性动画导航栏的首页，再通过后续小提示词逐步修正、运行和定制。

适合阅读的人群：有 React 与 TypeScript 基础、熟悉 Tailwind CSS 类名、准备用 AI 工具搭页面的前端开发者。文中涉及的动画库 Motion 不需要提前掌握，跟着代码读即可理解。读完你应当掌握四件事：写出覆盖布局、组件、颜色、间距与响应式行为的 UI 提示词；生成 UI 并逐文件检查工具产出的代码；用可复用的 shadcn/ui 组件与现成区块替代 AI 重复手写的代码；用小的追问提示词迭代结果，最后跑起来并做定制。

准备工作

开始之前，先确认环境与账号条件齐备：

安装当前 LTS 版本的 Node.js。
准备一个代码编辑器。
准备一个 AI 编码工具的账号，例如 Cursor、Claude 或 v0 这类工具。
具备 React 与 TypeScript 的基础知识。
熟悉 Tailwind CSS 的类名写法。

如果手上还没有项目，用官方脚手架创建一个带 TypeScript、Tailwind CSS 与 App Router 的 Next.js 项目，然后初始化 shadcn/ui：

npx create-next-app@latest hero-demo --typescript --tailwind --eslint --app
cd hero-demo
npx shadcn@latest init

较新版本的 create-next-app 默认会带上 React 19 与 Tailwind CSS 4。具体版本、依赖与初始化选项请以各项目官网当前信息为准，不同时间创建的项目可能不一致。

本项目需要的基础结构是：shadcn/ui 项目结构、React、Next.js、Tailwind CSS、TypeScript。这五项缺一不可，因为后文的提示词会直接声明这套技术栈，让 AI 工具不去猜版本。

为什么选 shadcn/ui

shadcn/ui 是一组用 Tailwind CSS 设置样式的可访问 React 组件。它和普通组件库的工作方式不同：它不是以 npm 包的形式安装，而是通过 CLI 把组件源码复制进你的项目。这一点在配合 AI 工具时非常关键——代码就躺在你自己的 components/ui 目录里，AI 工具能读到，你也能读到。当你要求工具「使用下拉菜单」时，它可以照着项目里已有的那个组件实现，而不是凭空发明一个。

具体好处包括：默认具备可访问性，菜单和按钮天然处理键盘操作与焦点；样式由 Tailwind CSS 承担，不产生额外的样式文件；共享主题变量，各组件颜色保持一致；没有锁定，代码在你项目里，随时可改。

关于现成区块

除了单个组件，还有一类资源叫「区块」（block）：由 shadcn/ui 组件拼成的较大块 UI，比如一个 Hero 区块、一个导航栏，或者一整页布局。一些区块库提供上千个免费与付费的 shadcn UI 区块、组件和模板，同时支持 Base UI 与 Radix UI，用 Tailwind CSS 设置样式，可以复制粘贴，也可以通过 shadcn CLI 安装。每个区块页面都有实时预览，并且可以复制该区块的提示词——把提示词粘进任意 AI 工具，工具就会在你的项目里创建对应文件。本教程以一个 Hero 区块为例，展示一份完整提示词长什么样、为什么有效。

操作步骤

第一步：写出有效的 UI 提示词

好的提示词相当于一份简短的规格说明。它要告诉工具：建什么、用哪些部件、遵守哪些规则。至少覆盖以下五点：

布局：说清什么放在哪里。例如「顶部一个粘性导航栏，左下角一个大标题」。
组件：点名要用的部件，例如移动端导航使用下拉菜单组件。
颜色：指定一个主色以及它出现的位置；能用主题令牌（如 text-foreground）就用令牌。
间距：给一条规则，例如「内容限制在 max-w-7xl 内并保留水平内边距」。
响应式行为：说明手机上哪些东西会变化。

获取提示词有两条路。第一条是自己用 AI 工具生成：按上面五点描述页面即可。下面是一份示例：

Create a full-screen hero section for a Next.js project with TypeScript and Tailwind CSS.

Layout:
- A sticky navbar with a logo on the left and a round menu button on the right.
- The menu button opens a dropdown with five links.
- A looping background video with a dark overlay so the text stays readable.
- A large headline and a short line of text at the bottom left.

Rules:
- Use the shadcn/ui DropdownMenu for the menu.
- Use Motion for a fade-in on the headline and the navbar.
- Keep content inside max-w-7xl with horizontal padding.
- On small screens, reduce the headline size and stack the content in one column.

Split the code into small files: page, navbar, nav link, hero, and index.

注意这份提示词刻意省略了什么：它没有写「做得现代一点」「做得漂亮一点」。这类形容词对工具没有任何可执行的信息，只会让输出更随机。

第二条路更快：如果现成区块已经接近你要的效果，直接打开区块库，从免费或付费区块中挑一个，复制它的提示词，粘进任意 AI 工具。这类提示词通常已经包含项目要求、每个文件的路径以及完整代码。下一步会展示它具体长什么样。

第二步：生成第一版 UI

本教程走第二条路，方便你研究一份完整提示词。把类似下面的内容粘进 AI 工具，并先打开你的项目文件夹，让工具能在其中创建文件：

Create a Shadcn block in the codebase.

The codebase should support following:
- Shadcn project structure
- React ^19
- Tailwind CSS ^4
- TypeScript ^5
If it doesn't, provide instructions on how to setup project via shadcn CLI,
install Tailwind CSS v4 or Typescript.

Here are the files for the block:
File path: app/hero-03/page.tsx (code for this file)
File path: components/shadcn-space/blocks/hero-03/hero.tsx (code for this file)
File path: components/shadcn-space/blocks/hero-03/navbar.tsx (code for this file)
File path: components/shadcn-space/blocks/hero-03/navlink.tsx (code for this file)
File path: components/shadcn-space/blocks/hero-03/index.tsx (code for this file)

## Implementation Steps
1. Inspect components.json. Determine the correct aliased paths for components,
   utils, ui, lib, and hooks. Update all import statements and file paths in the
   code above to match before creating any files.
2. Install dependencies. Using the project's package manager (npm / yarn / pnpm /
   bun), install any dependencies and devDependencies listed in the block files.
3. Install shadcn/ui components. Using the appropriate shadcn CLI runner for the
   project (npx / pnpm dlx / bunx --bun), add any required shadcn/ui components.
4. Add global styles. Append only the CSS variables and custom styles referenced
   by this block to globals.css. Do not add unrelated styles.
5. Create block files. Write each file to the exact target path shown above.
   Do not rename or restructure files.
6. Verify imports. Ensure every import resolves correctly against the project's
   alias configuration. Fix any broken paths before finishing.

The component must be fully functional and visually match the provided code.
Once all steps are complete, the block is ready to use in the project.

真实提示词里，每个文件路径下面会跟着该文件的完整代码。这份提示词之所以有效，有四个原因：

它声明了确切的技术栈，工具不会去猜版本。
它列出了确切的文件路径，工具不会擅自重构你的项目结构。
它给出了有序步骤，工具在写任何文件之前会先检查 components.json。
最后一行定义了「完成」的标准，工具知道何时停下。

这个模式可以复用到你自己的提示词里：先声明栈，再给路径，再给步骤，最后给验收条件。

第三步：检查生成的文件

工具跑完后，你应当得到五个文件。运行页面之前，逐个读一遍。入口文件负责创建路由并渲染区块：

import HeroPage from "@/components/shadcn-space/blocks/hero-03/index";

const Page = () => {
  return (
    <HeroPage />
  );
};

export default Page;

Hero 组件是客户端组件，用到了 useRef、useInView 与 Motion 的 motion：

"use client";

import { useRef } from "react";
import { ArrowUpRight } from "lucide-react";
import { motion, useInView } from "motion/react";

const HeroSection: React.FC = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const isInView = useInView(sectionRef, { once: true, amount: 0.1 });

  return (
    <section
      ref={sectionRef}
      className="relative flex items-end text-white bg-black h-full min-h-screen overflow-hidden"
    >
      {/* Background Video */}
      <video
        className="absolute top-0 left-0 w-full h-full object-cover"
        loop
        autoPlay
        muted
        playsInline
      >
        <source src="" type="video/mp4" />
      </video>

      {/* Overlay to improve text readability */}
      <div className="absolute inset-0 bg-black/50"></div>

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-7xl px-4 xl:px-16">
        <div className="flex flex-col gap-4 sm:gap-6 py-10 sm:py-16">
          <div className="flex items-start gap-2.5 md:gap-4">
            <div className="w-10 h-10 sm:w-11 sm:h-11 shrink-0">
              <motion.img
                src={ "" }
                alt="icon"
                width={44}
                height={44}
                animate={{ rotate: 360 }}
                transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
              />
            </div>
            <p className="sm:text-base text-sm sm:leading-6 leading-5 font-normal text-white sm:max-w-sm">
              We create <span className="text-teal-400">high-performing</span>{" "}
              digital designs that elevate brands and enhance conversions.
            </p>
          </div>

          <motion.div
            initial={{ opacity: 0, y: 32 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
            transition={{ duration: 0.3, ease: "easeInOut", delay: 0.2 }}
            className="flex sm:flex-row flex-col items-start lg:items-baseline gap-4"
          >
            <h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl xl:text-9xl leading-10 lg:leading-32 font-bold">
              SHADCN®SPACE
            </h1>
            <div>
              <div className="bg-teal-400 rounded-full p-1 pl-8">
                <div className="lg:p-3 p-2 bg-white text-black rounded-full">
                  <ArrowUpRight size={24} />
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;

这段 Hero 的实现要点值得逐条理解：

视频背景：video 元素同时使用 loop、autoPlay、muted、playsInline。浏览器只允许静音视频自动播放，playsInline 则阻止 iPhone 把视频全屏打开。object-cover 让视频铺满区块且不被拉伸。
遮罩层：bg-black/50 覆盖在视频之上，保证白色文字在任何一帧画面上都可读。
滚动进入动画：useInView 在区块有 10% 可见时返回 true（amount: 0.1）；once: true 让它只触发一次，往回滚动时标题不会反复淡入。
响应式标题：字号随断点递增，从手机上的 text-4xl 一直到超大屏的 xl:text-9xl。小屏时标题与箭头改为纵向排列（flex-col），从 sm 起恢复横向。

导航栏组件负责粘性定位、滚动 80px 后填充背景，以及右侧圆形菜单按钮打开的下拉菜单。下拉菜单里包含五个链接、一层深色模糊遮罩和联系方式区域。导航链接组件负责悬停时显示旋转图标，以及当前页面的激活态。这些文件同样应当逐个读过再运行，重点看导入路径是否与你的 components.json 别名配置一致。

第四步：用后续提示词改进结果

第一版几乎不可能完全符合预期，但不要推倒重来。用小的、聚焦的追问提示词逐项修正，每次只改一件事，例如：

「把导航栏滚动后的背景从纯色改成半透明加背景模糊。」
「下拉菜单在移动端改为全屏抽屉，链接间距加大。」
「标题在 md 断点下字号偏大，缩小一档。」
「把硬编码的颜色替换成主题令牌，保持与其他页面一致。」

每次追问后重新读一遍被改动的文件，确认工具没有顺手改动无关代码。如果一次追问牵涉多个文件，要求工具先列出将要修改的文件清单，再动手。

第五步：运行与定制

文件检查无误后启动开发服务器：

npm run dev

打开浏览器访问 /hero-03 路由，逐项验证：视频是否自动循环播放、遮罩是否让文字清晰可读、标题是否在进入视口时淡入且只淡入一次、导航栏滚动 80px 后背景是否出现、菜单按钮能否打开下拉菜单、键盘 Tab 能否在链接间移动、手机宽度下标题与箭头是否纵向堆叠。

定制通常集中在几处：把 <source src=""> 换成你自己的视频地址；把图标与标题文案换成品牌内容；把 text-teal-400 这类硬编码颜色替换为项目主题令牌；调整 max-w-7xl 与 px-4 xl:px-16 以匹配站点栅格。改动后重新跑一遍上面的验证清单。

一个完整示例

把前面的步骤串起来，从零到可访问页面是这样一条路径：

创建项目并初始化 shadcn/ui：npx create-next-app@latest hero-demo --typescript --tailwind --eslint --app，进入目录后执行 npx shadcn@latest init。
在编辑器中打开 hero-demo 文件夹，让 AI 工具获得项目上下文。
粘贴第二步那份带文件路径与实现步骤的提示词，把每个路径下的完整代码一并附上。
等待工具完成六步：检查 components.json 别名、安装依赖、安装所需 shadcn/ui 组件、向 globals.css 追加本区块用到的 CSS 变量、按原路径创建五个文件、校验导入。
逐个阅读 app/hero-03/page.tsx、hero.tsx、navbar.tsx、navlink.tsx、index.tsx，确认导入路径与别名一致。
执行 npm run dev，访问 /hero-03，按第五步的清单逐项验证。
用两到三条聚焦的追问提示词修正配色、断点字号与移动端菜单形态。
替换视频地址、图标与文案，完成定制。

这条路径的最小可运行版本，就是「一个路由文件 + 一个 Hero 组件 + 一个导航栏组件 + 一个导航链接组件 + 一个汇总导出文件」。只要这五个文件路径正确、导入能解析、依赖装齐，页面就能跑起来。

注意事项

部署前检查 AI 生成代码时，有几类问题最容易漏掉，值得单独过一遍：

导入路径与别名：AI 工具常按它见过的项目结构写导入，而你的 components.json 别名可能不同。提示词里要求先读 components.json 再改导入，就是为了堵住这个坑。
依赖遗漏：区块代码引用的包（例如动画库、图标库）不一定已经在 package.json 里，需要按项目所用包管理器补装。
全局样式污染：只追加本区块引用到的 CSS 变量与自定义样式，不要整段粘贴无关样式，否则会影响其他页面。
文件被重命名或重组：提示词明确要求按原路径写入、不得改名或重构，检查时确认这一点。
自动播放限制：视频必须静音才能自动播放，playsInline 不能省，否则移动端会全屏播放。
动画重复触发：useInView 不设 once: true 时，来回滚动会让标题反复淡入。
硬编码颜色：示例中的 text-teal-400 之类颜色应替换为主题令牌，否则与站点其他部分不一致。
版本与配额：React、Tailwind CSS、TypeScript 的版本，以及 AI 工具与区块库的免费额度、付费方案、可用地区，都可能随时间变化，使用前请以各项目官网当前信息为准。

最后一条经验性的原则：把提示词当成代码来维护。技术栈、文件路径、实现步骤、验收条件这四段结构固定下来，每次换页面只改内容，生成质量会稳定得多。