用AI提示快速搭建网站用户界面的方法

过去，手写网站用户界面（UI）的 HTML、CSS 和组件代码需要花费数小时。现在，你只需用自然语言描述页面，让 AI 编码工具生成初稿。

但结果取决于你的提示词。简短模糊的提示词会得到一个颜色随机、代码重复的通用页面。清晰且包含你的技术栈、文件和规则的提示词则能生成可直接使用的代码。

在本教程中，你将学习如何编写这种提示词。你将使用它来构建一个全屏 hero 区块，包含粘性动画导航栏，使用 Next.js、Tailwind CSS 和 shadcn/ui 组件。

学完后，你将知道如何：

编写涵盖布局、组件、颜色、间距和响应式行为的 UI 提示词。
根据提示词生成 UI 并检查工具生成的代码。
使用可复用的 shadcn/ui 组件和现成的块，而不是重复的 AI 生成代码。
通过小的后续提示词改进结果。
运行、测试并自定义最终页面。

前置条件
为什么选择 shadcn/ui？
ShadcnSpace 是什么？
你将构建什么
步骤 1：如何编写有效的 UI 提示词
步骤 2：如何生成首个 UI
步骤 3：如何使用可复用的 shadcn/ui 组件进行构建
步骤 4：如何通过后续提示词改进结果
步骤 5：如何运行并自定义最终 UI
我如何在部署前检查 AI 生成的代码
关键概念回顾
结论
资源

前置条件

开始之前，请确保你已具备：

已安装当前 LTS 版本的 Node.js
一个代码编辑器
拥有 Cursor、Claude 或 v0 等 AI 编码工具的账户
了解 React 和 TypeScript 基础
了解 Tailwind CSS 类名基础

无需了解 Motion，这是本教程中使用的动画库。你会在学习过程中看到它的工作原理。

为什么选择 shadcn/ui？

Shadcn UI 是一套使用 Tailwind CSS 样式的可访问 React 组件集合。它与普通组件库的工作方式不同。你不是通过安装包来使用它，而是使用 CLI 将组件源文件复制到你的项目中。

这在你使用 AI 工具时尤为重要。代码位于你的 components/ui 文件夹中，这样工具能够读取它，你也能够读取。当你让工具「使用下拉菜单」时，它可以直接使用你项目中的对应组件，而不是凭空创建一个新的。

主要优势如下：

默认可访问，菜单和按钮可处理键盘操作和焦点
基于 Tailwind CSS 构建，无需额外样式文件
共享主题变量，所有组件颜色保持一致
无锁定，代码在你的项目中，可自由编辑

什么是 ShadcnSpace？

ShadcnSpace 是一个包含 1000+ 个精美设计、可访问且可组合的免费和专业 Shadcn UI 块、组件和模板的集合，适用于你的 React/Next.js 应用。它同时支持 Base UI 和 Radix UI，采用 Tailwind CSS 样式，可直接复制粘贴或通过 Shadcn CLI 安装。

一个块是一个较大的 UI 片段，例如 hero 区块、导航栏或完整页面布局，由 shadcn/ui 组件 构成。

每个块页面都展示实时预览。你可以查看任意免费或专业块并复制其提示词。随后将该提示词粘贴到任何 AI 工具中，该工具会在你的项目中生成相应文件。

本教程以 hero 块为例进行演示。你将看到完整提示词的确切形式以及它为何有效。

你将构建什么

你将构建一个包含以下部分的 hero 页面：

Hero 区块

一个带有循环背景视频的全屏区块
一个深色覆盖层，确保文字可读
一个旋转图标位于短文本旁边
大标题在进入屏幕时会淡入显现

导航栏

一个带有左侧 logo 和右侧圆形菜单按钮的粘性头部
滚动 80px 后背景会填充
包含五个链接、深色模糊覆盖层和联系信息的下拉菜单

导航链接

悬停时显示旋转图标的链接
当前页面的激活状态

项目需要以下技术栈：

shadcn/ui 项目结构
React
Next.js
Tailwind CSS
TypeScript

如果你还没有项目，先创建一个并设置 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。

步骤 1：如何编写有效的 UI 提示词

一个好的提示词就像一个简短的规格说明。它告诉工具要构建什么，使用哪些部件，以及遵循哪些规则。

请覆盖以下五点：

布局：说明各元素的位置。例如，“顶部有一个固定的导航栏，左下角有一个标题”。
组件：说明你需要的部件，例如移动导航的下拉菜单。
颜色：给出主要颜色及其出现位置。在可能的情况下请求主题标记，如 text-foreground。
间距：给出一个规则，例如“将内容限制在最大宽度 7xl 内，并加上水平内边距”。
响应式行为：说明在手机上会有哪些变化。

获取页面提示词有两种方式。

选项 1：使用 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.

注意这个提示词遗漏了什么。它既没说‘让它现代化’，也没说‘让它美观’。这些话对工具没有任何可操作的内容。

选项 2：从块页面复制提示词

当块已经接近你所需时，第二种方式更快。打开 ShadcnSpace 网站，从 Shadcn 库中挑选任意免费或专业块。复制该块的提示词，粘贴到任何 AI 工具中。

该提示词已包含你的项目需求、每个文件路径以及完整代码。下一步将展示它的样子。

步骤 2：如何生成第一个 UI

本教程使用选项 2，这样你可以研究一个完整的提示词。将类似下面的提示词粘贴到你的 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。
它在最后一行定义了“完成”，因此工具知道何时停止。

您可以为自己的提示词复用此模式。

生成的文件

工具完成后，您应得到五个文件。在运行页面之前，请先阅读每个文件。

app/hero-03/page.tsx

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

const Page = () => {
  return (
    
  );
};

export default Page;

此文件创建 /hero-03 路由并渲染该块。

components/shadcn-space/blocks/hero-03/hero.tsx

"use client";

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

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

  return (
    
      {/* Background Video */}
      

      {/* Overlay to improve text readability */}
      

      {/* Content */}
      
        
          
            
              
            
            
              We create high-performing{" "}
              digital designs that elevate brands and enhance conversions.
            
          
          
            
              SHADCN®SPACE
            
            
              
                
                  
                
              
            
          
        
      
    
  );
};

export default HeroSection;

英雄的工作方式：

1. 视频背景： video 元素使用 loop、autoPlay、muted 和 playsInline。只有在视频静音时，浏览器才允许自动播放；playsInline 可阻止 iPhone 在全屏中打开视频。object-cover 类让视频填充该区域而不产生拉伸。

2. 覆盖层： bg-black/50 层位于视频之上。这样可以确保白色文字在视频的任何帧上都清晰可读。

3. 滚动进入视图时的动画： 当区域可见度达到 10%（amount: 0.1）时，useInView 钩子返回 true。选项 once: true 确保它只触发一次，这样标题在你向上滚动时不会再次淡入。

4. 响应式标题： 标题大小随断点变化，在手机上从 text-4xl 开始，在大屏幕上达到 xl:text-9xl。在小屏幕上，标题和箭头以列形式堆叠（flex-col）；从 sm 断点起，它们并排排列。

5. 为什么 "use client" 需要： 该文件使用了钩子（useRef、useInView）和 Motion，它们都需要浏览器环境。在 Next.js App Router 中，需要在文件顶部添加 "use client" 指令。

components/shadcn-space/blocks/hero-03/navbar.tsx

"use client";

import { useEffect, useState, useRef } from "react";
import NavLink from "@/components/shadcn-space/blocks/hero-03/navlink";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Equal, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { motion, useInView, AnimatePresence } from "motion/react";

type navData = {
  title: string;
  href: string;
};

type NavbarProps = {
  navigationData: navData[];
};

const Header = ({ navigationData }: NavbarProps) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const [sticky, setSticky] = useState(false);
  const headerRef = useRef(null);
  const isInView = useInView(headerRef, { once: true, amount: 0.1 });

  const handleScroll = () => {
    setSticky(window.scrollY >= 80);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    
      
        
          
        
        
          
            {menuOpen && (
               setMenuOpen(false)}
                className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm"
              />
            )}
          
            
              {/* Trigger */}
              
                
              
              {/* Content */}
              
                
                  {/* Header */}
                  
                    Menu
                    
                  
                  
                  {/* Navigation */}
                  
                    {navigationData.map((menuItem, index) => (
                      
                    ))}
                  
                  {/* Contact */}
                  
                    
                      +1-212-456-7890
                    
                    
                      info@wrappixel.com
                    
                  
                
              
            
        
      
    
  );
};

export default Header;

导航栏的工作原理：

1. 具有渐变背景的粘性头部： 头部使用 sticky top-0。一个 before: 伪元素从 before:h-0 开始，在 sticky 为 true 时增长到 before:h-full。这使得青蓝背景滑下来，而不是瞬间切换。

2. 带清理的滚动检测： handleScroll 函数在滚动 80px 后将 sticky 设置为 true。useEffect 添加监听器，并在清理函数中移除它。如果没有清理，监听器在组件卸载后仍会保持活跃。

3. 受控下拉菜单： open 和 onOpenChange 属性将菜单与 menuOpen 状态绑定。这就是为什么关闭按钮和遮罩层可以从外部关闭菜单。

4. 动画遮罩层： AnimatePresence 使深色遮罩层在离开页面前淡出。没有它，遮罩层会直接消失，没有退出动画。

5. 菜单中的主题令牌： 菜单使用 bg-background、text-foreground、text-muted-foreground 和 border-border。这些来自你的 shadcn/ui 主题，因此菜单会跟随你的亮色和暗色配色。

components/shadcn-space/blocks/hero-03/navlink.tsx

import { cn } from "@/lib/utils";

export type NavLinkItem = {
  title: string;
  href: string;
  isActive?: boolean;
};

export interface NavLinkProps {
  item: NavLinkItem;
  onClick?: () => void;
}

const NavLink: React.FC = ({ item, }) => {
  const { title, href, isActive } = item;

  return (
    
      
        
      
      
        {title}
      
    
  );
};

export default NavLink;

导航链接的工作原理：

1. 组悬停： 在 li 上加入 group 类，整个项被悬停时，图标包装器会作出响应，使用 group-hover: 类。

2. 无布局跳动的显现： 图标包装器的宽度从 max-w-0 过渡到 max-w-6，间距从 gap-0 过渡到 gap-3。overflow-hidden 类在有足够空间前隐藏图标；激活链接会一直显示图标。

3. 类型化项： NavLinkItem 类型已导出，父组件可用它为自身数据添加类型。

components/shadcn-space/blocks/hero-03/index.tsx

import Navbar from "@/components/shadcn-space/blocks/hero-03/navbar";
import { NavLinkItem } from "@/components/shadcn-space/blocks/hero-03/navlink";
import HeroSection from "@/components/shadcn-space/blocks/hero-03/hero";

const HeroPage = () => {
  const navigationData: NavLinkItem[] = [
    { title: "Home", href: "#", isActive: true },
    { title: "Properties", href: "#", isActive: false },
    { title: "Blog", href: "#", isActive: false },
    { title: "Contact", href: "#", isActive: false },
    { title: "Docs", href: "#", isActive: false },
  ];
  return (
    <>
      
      
        
      
    
  );
};

export default HeroPage;

索引文件的工作方式：

1. 数据存放在一个位置： navigationData 数组保存链接。导航栏只会显示它收到的数据，所以你可以在不改动导航栏的前提下修改链接。

2. 负边距把英雄区拉到导航栏下方： 导航栏的高度是 h-20（80px）。-mt-20 类在 main 上将英雄区向上移动相同距离，使视频填满粘性标头后方的全屏。

运行前需要检查的事项

在打开页面前，请阅读代码并检查：

导入： 每个导入路径应与你的 components.json 别名匹配。
依赖： 该工具应已安装 motion 和 lucide-react。
shadcn/ui 组件： dropdown-menu 组件应位于 components/ui 目录中。如果不存在，请运行 npx shadcn@latest add dropdown-menu。
类名： Tailwind 会忽略它不认识的类，因此拼写错误不会报错。在 navbar.tsx 中，nav 元素使用了 item-center，正确的类应为 items-center。你将在步骤 4 中修复此问题。

花几分钟做这个检查，后续能省下更多时间。

步骤 3：如何使用可复用的 shadcn/ui 组件进行构建

AI 工具经常重复相同的标记。菜单、按钮和卡片各自拥有手写样式，导致两者外观不一致。共享组件可以解决此问题。

此代码块展示了三个你可以采用的习惯。

为每项任务使用单一组件

菜单使用 shadcn/ui 的 DropdownMenu 替代手工构建的菜单。你可以从这一经测试的组件获得键盘支持、焦点处理和正确的可访问性属性。如果你在另一页面添加第二个下拉菜单，它的外观和行为将保持一致。

使用 `cn()` 处理条件类名

导航栏和导航链接均使用来自 @/lib/utils 的 cn()。它会合并类名并处理条件，例如 sticky && "before:h-full"。它还会移除冲突的 Tailwind 类，而普通模板字符串则不会这样做。

将数据与标记分离

链接保存在 navigationData 数组中，由 NavLink 组件渲染。要添加页面，只需向数组中添加一个对象。你无需编写任何新的 JSX。

何时从代码块开始

hero 区块和导航栏只是开始。真正的产品还需要侧边栏、表格和图表。根据提示词编写这些部分需要时间，而且输出在不同页面之间往往不一致。

一个块提供经过测试的起点，提示词负责处理变化。如果你要构建管理后台，可以参考 shadcn dashboard 块。它们提供侧边栏、页眉和内容区域的布局。

本教程中的 hero 使用 Motion 实现淡入效果、旋转图标以及基于滚动的显现。如果你的页面需要更多动画效果，shadcn animated blocks 集合展示了在此类块中动画如何组织。

在使用任何块之前，先阅读其代码并检查许可证，就像对待其他软件包一样。

步骤 4：如何通过后续提示词改进结果

将第一个结果视为草稿。每次提示词只改动一项，这样你就能看到每个提示词的作用。如果某次更改导致问题，用 Git 撤销，然后让后续提示词更具体。

修正拼写错误

从步骤 2 中的类名开始：

In components/shadcn-space/blocks/hero-03/navbar.tsx, change the class "item-center" to "items-center" on the motion.nav element.
Do not change anything else.

保持颜色一致

该块在多个位置使用了固定的 teal-400 类。使用主题令牌以后更容易修改：

Replace every teal-400 class in the hero-03 block files with the primary theme token. If needed, add the color to the CSS variables in globals.css. Do not change anything else.

此次更改后，只需编辑一个 CSS 变量即可重新设置整个块的样式。

改进响应式行为

In hero.tsx, make the headline wrap on screens narrower than 640px and keep the arrow button below the headline. Keep desktop styles unchanged.

处理加载缓慢的视频

视频从远程 URL 加载。在加载完成之前，用户会看到区块背景。请提供一个明确的回退方案：

In hero.tsx, add a poster attribute to the video element. Keep the
bg-black background on the section so the text stays readable while the video loads or if it fails.

导航栏会遍历 navigationData。如果数组为空，菜单将打开且没有链接。请让工具处理这种情况：

In navbar.tsx, if navigationData is empty, do not render the menu button.

工具应像这样把下拉菜单包裹在检查中：

{navigationData.length > 0 && (
  
    {/* trigger and content stay the same */}
  
)}

将固定内容移入属性

导航栏内部写死了一个电话号码和一个电子邮件地址。使用属性可以让导航栏可复用：

In navbar.tsx, add two props: phone and email. Use them in place of the hard-coded phone number and email address. Update index.tsx to pass the values. Keep all styles unchanged.

每次提示词后，检查已更改的文件，运行页面，并在正常工作时提交。

步骤 5：如何运行并自定义最终 UI

启动开发服务器：

npm run dev

打开 http://localhost:3000/hero-03 在浏览器中。这是 app/hero-03/page.tsx 创建的路由。

运行这些检查

将窗口宽度调整至约 375px: 标题应缩小，内容应保持在屏幕上。
打开菜单： 使用关闭按钮、遮罩层或 Esc 键关闭它。
使用键盘： 按 Tab 键，确认菜单按钮显示可见的焦点状态。
向下滚动： 导航栏应保持在顶部，其青蓝色背景应在滚动 80px 后滑入。
悬停链接： 旋转图标应出现在其旁边。
检查错误： 运行以下两条命令：

npx tsc --noEmit
npm run lint

自定义页面

可以通过更新导航、内容、资源、联系信息和主题样式来自定义页面。

打开 index.tsx 并编辑 navigationData 数组以更改菜单标签和 URL。

const navigationData = [
  { title: "Home", href: "/" },
  { title: "Features", href: "/features" },
  { title: "Pricing", href: "/pricing" },
  { title: "Contact", href: "/contact" },
];

确保每个链接指向应用中的有效路由。

2. 更改标题和文本

打开 hero.tsx 并将现有的标题、描述和按钮标签替换为您的内容。

Build Your Next Project Faster
Explore reusable UI components for your next web application.

保持现有布局和组件结构不变。

3. 替换图片、视频和图标

将您的资源添加到 public 目录，并在相关组件中更新路径。

例如， public/images/logo.svg 可访问路径为 /images/logo.svg。

4. 更新联系方式

打开 navbar.tsx 并替换现有的电话号码和电子邮件地址。

+1 (555) 123-4567
hello@example.com

使用您的实际联系信息，并更新任何显示这些信息的其他组件。

5. 更改主题颜色

在 globals.css 中编辑 CSS 变量以更新页面颜色。

:root {
  --primary: #2563eb;
  --background: #ffffff;
  --foreground: #111827;
}

使用项目中已定义的变量名，若应用支持深色模式则更新深色主题变量。

打开 components/ui/dropdown-menu.tsx 并更新相关的 Tailwind CSS 类。

例如，将 rounded-sm px-2 py-1.5 改为 rounded-md px-3 py-2，调整下拉菜单项的圆角和间距。

修改此共享组件可能影响所有使用它的下拉菜单，因此需在整个应用中测试菜单。

7. 运行并测试您的更改

启动开发服务器，检查一切是否按预期运行。

npm run dev
npm run lint
npm run build

在运行 lint 和 build 命令之前，检查 package.json 中的可用脚本。

在发布之前，一定要测试 AI 生成的代码。看起来正确的代码仍可能构建失败、加载资源出错或在浏览器中表现异常（更多内容见下文）。

实时预览：

我如何在部署前检查 AI 生成的代码

AI 编码 Agent 可以创建或修改多个文件，安装依赖，并运行终端命令。我将 Agent 的输出视为起点，而非生产就绪代码。在部署之前，我会审查更改并验证应用程序的行为符合预期。

以下是我在发布 AI 生成的代码前推荐的检查：

1. 检查更改

检查 Agent 创建或修改了哪些文件。审查代码以了解所做更改，是否符合现有项目结构，以及是否引入不必要依赖或无关修改。

使用 Git，您可以通过以下方式检查更改：

git diff
git status

如果你不理解某个更改，在接受之前请让 Agent 解释其目的和潜在副作用。

2. 运行应用并测试关键交互

启动开发服务器并在浏览器中打开应用。测试你所修改的功能，而不仅仅是检查页面是否加载。

例如，验证导航链接是否正常工作，下拉菜单能否打开和关闭，按钮是否执行预期操作，表单是否验证输入，图片或视频是否正确加载。还要检查页面在移动端和桌面端屏幕尺寸下的表现。

打开浏览器开发者控制台，查找 JavaScript 错误、失败网络请求和缺失资源。

3. 运行自动化检查

使用 package.json 中提供的脚本检查代码质量、运行测试并验证生产构建。

npm run lint
npm test
npm run build

这些是常见的例子，不是通用命令。你的项目可能没有定义 test 脚本，所以先检查可用的脚本。在继续之前，先修复任何相关错误。

4. Check Security and Configuration

检查新依赖、API 调用、环境变量以及任何处理用户输入或敏感数据的代码。永远不要在客户端代码中暴露 API 密钥或机密，也不应在不了解其作用的情况下运行来自 AI 智能体的不熟悉命令。

对于处理身份验证、支付或用户数据的应用，应根据这些功能执行额外的安全检查。

5. Verify Before Deploying

在发布之前，确认生产构建成功，主要用户流程正常工作，且没有重要功能回退。再次审查最终更改，并在有可用的预发布环境时先部署到预发布环境。

我的规则很简单：如果我无法解释生成的代码是做什么的，我就不准备发布它。AI 智能体可以加速开发，但审查、测试以及对最终代码负责仍然是开发者的工作。

Key Concepts Recap

A Prompt Is a Spec

一个好的 UI 提示词会说明布局、组件、颜色、间距和响应式行为。它还会命名技术栈，列出文件路径，给出有序步骤，并定义"done"意味着什么。

Two Ways to Get a Prompt

你可以使用 AI 工具编写提示词，也可以从免费或专业块页面复制提示词并粘贴到任何 AI 工具中。

Read Before You Run

检查生成的代码是否有错误的导入、缺失的依赖、类名拼写错误以及固定值。Tailwind 会忽略未知的类，因此拼写错误会静默失败。

Reuse Components

共享的 shadcn/ui 组件 提供一致的行为和样式。使用 cn() 来处理条件类，并将数据保存在数组中，与标记分离。

Group Hover and Logical Layout

group 类允许子元素响应父元素的悬停状态。导航链接使用它来显示图标，而不会造成布局跳跃。

Scroll-Based Animation

useInView 搭配 once: true 时，当元素进入视口时会触发一次动画。

`"use client"` in Next.js

任何使用钩子、浏览器事件或 Motion 的文件都需要在顶部添加 "use client" 指令。

Small Follow-Up Prompts

每次提示词只改动一项，检查差异，并在得到满意结果后提交。

结论

在本教程中，你学会了如何使用 AI 提示词构建网站用户界面。你编写了一个涵盖布局、组件、颜色、间距和响应式行为的提示词。你生成了一个带动画导航栏的 hero 区段，检查了每个文件，并通过小的后续提示词改进了结果。

你也看到共享组件为什么重要。下拉菜单、cn() 辅助函数以及数据驱动链接保持代码一致性，而块为更大页面提供坚实起点。

在下一个页面上，先写规格，命名你的技术栈和文件，然后在继续之前阅读输出。这个习惯能让你从任何 AI 编码工具中获得更好的结果。

资源

Shadcn UI：提供可直接复制的 shadcn/ui 组件、块、模板和仪表盘布局。
Shadcn Space：提供免费和专业的块库，附带可复制的提示词。
Shadcn 仪表盘块：提供带侧边栏和内容区域的现成管理员布局。
Shadcn 动画块：使用运动的块。
Next.js 文档
Tailwind CSS 文档
Motion 文档
Lucide 图标

目录