← 返回蜂巢洞察

如何利用人工智能提示更快地构建网站用户界面

栏目 技术实践
分类 大数据
标签 页面 组件 使用 文件 代码

过去，创建网站的用户界面需要花费数小时的时间来手动编写HTML、CSS代码以及各种组件代码。但现在，你只需用简单的文字描述页面的结构，就可以让人工智能编码工具生成最初的代码版本。 不过，最终生成的代码质量取决于你提供的指令。如果指令过于简短或模糊，那么生成的代码可能只是包含随机颜色和重复代码的简单页面；而如果你能提供详细的说明——包括所使用的技术栈、文件结构以及设计规则，那么工具就能生成可实际使用的代码。 在本教程中，你将学习如何编写这样的指令。通过这些指令，你可以使用Next.js、Tailwind CSS以及shadcn/ui组件来构建一个带有固定导航栏的全屏页面。 完成本教程后，你将能够

过去，创建网站的用户界面需要花费数小时的时间来手动编写HTML、CSS代码以及各种组件代码。但现在，你只需用简单的文字描述页面的结构，就可以让人工智能编码工具生成最初的代码版本。

不过，最终生成的代码质量取决于你提供的指令。如果指令过于简短或模糊，那么生成的代码可能只是包含随机颜色和重复代码的简单页面；而如果你能提供详细的说明——包括所使用的技术栈、文件结构以及设计规则，那么工具就能生成可实际使用的代码。

在本教程中，你将学习如何编写这样的指令。通过这些指令，你可以使用Next.js、Tailwind CSS以及shadcn/ui组件来构建一个带有固定导航栏的全屏页面。

完成本教程后，你将能够：

  1. 编写涵盖布局、组件选择、颜色设置、间距调整以及响应式设计要求的用户界面指令。

  2. 根据提供的指令生成用户界面代码，并检查工具生成的代码质量。

  3. 使用可复用的shadcn/ui组件及现成的代码块，而不是重复让人工智能生成代码。

  4. 通过添加额外的细节性指令来优化最终结果。

  5. 运行生成的页面并进行测试，然后根据需要对其进行定制。

目录

先决条件

在开始之前，请确保你已经具备以下条件：

  • 已安装当前版本的LTS版Node.js。

  • 拥有一款代码编辑器。

  • 拥有Cursor、Claude或v0等人工智能编码工具的账户。

  • 具备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进行安装。

“组件块”是指由shadcn/ui组件构成的较大规模的UI元素，例如页头区域、导航栏或整页布局。

每个组件块页面都会提供实时预览效果。你可以查看任何免费或高级组件块，复制其使用说明，然后将其粘贴到任何AI工具中，该工具会自动在你的项目中生成相应的代码文件。

本教程以一个页头组件块为例进行讲解，你将清楚地看到一个完整的使用说明是什么样的，以及它为何能够正常工作。

你将构建什么

通过以下这些组件，你将构建出一个完整的页面：

页头区域

  • 一个全屏显示的区域，其中会播放循环背景视频

  • 一层深色遮罩层，以确保文字清晰可见

  • 一个旋转图标，旁边配有一条简短的文字描述

  • 一个大标题，在页面显示时会逐渐淡入

导航栏

  • 左侧有Logo，右侧有一个圆形菜单按钮的固定式导航栏

  • 当你滚动到80像素位置时，背景颜色会开始显示

  • 一个包含五个链接的下拉菜单，以及一层深色模糊遮罩层和联系信息

导航链接

  • 悬停时会显示旋转图标的链接

  • 当前页面会显示活跃状态标识

该项目需要使用以下技术栈进行开发：

  • 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提示信息

一份优秀的提示信息应该像一份简短的规范一样，明确告诉工具需要构建什么、使用哪些组件以及遵循哪些规则。

请涵盖以下五个方面：

  1. 布局：说明各个元素应放置的位置。例如：“顶部设置固定导航栏，左下角显示标题。”

  2. 组件：指定你需要的组件名称，比如用于移动端导航的下拉菜单。

  3. 颜色：指定主色及其使用位置。在合适的地方可以使用主题相关代码，如text-foreground。

  4. 间距：规定内容布局规则，例如“保持内容宽度不超过7xl，并添加水平内边距。”

  5. 响应式设计：说明在手机屏幕上页面应如何变化。

有两种方法可以获得适合你项目的提示信息。

选项1：使用AI工具生成提示信息

用你自己的话描述页面需求，并遵循上述五个要点。以下是一个示例：

为使用TypeScript和Tailwind CSS的Next.js项目创建一个全屏标题栏区域。

布局要求：
- 固定导航栏，左侧有Logo，右侧有圆形菜单按钮。
- 点击菜单按钮会弹出包含五个链接的下拉列表。
- 背景视频采用循环播放模式，并添加深色遮罩层以确保文字可读。
- 左下角显示大标题和简短说明文本。

规则：
- 使用shadcn/ui的DropdownMenu组件来实现菜单功能。
- 为标题栏和导航栏应用Motion效果实现淡入效果。
- 保持内容宽度不超过max-w-7xl，并添加水平内边距。
- 在小屏幕设备上，缩小标题大小并将所有内容排列在同一列中。

将代码拆分为多个文件：page、navbar、nav link、hero和index。

注意，这个示例中的提示信息并没有提到“让设计看起来现代”或“让页面美观”，因为这些要求无法被工具直接执行。

选项2：从模板页面复制提示信息

如果现有的模板已经接近你的需求，第二种方法会更快。打开ShadcnSpace网站，从Shadcn模板库中选择任意免费或付费模板，然后复制其中的提示信息并粘贴到AI工具中。

这种提示信息已经包含了你的项目需求、所有文件路径以及完整的代码。下一步会展示使用这些信息生成的实际页面效果。

步骤2：如何生成第一个用户界面组件

本教程使用的是第二种方法，因此你可以学习到一个完整的示例代码。将如下代码粘贴到你的AI工具中，并打开项目文件夹，这样工具就能开始创建相应的文件了：

在代码库中创建一个“hero-03”组件块。
该代码库应支持以下技术栈：
- Shadcn项目结构
- React ^19
- Tailwind CSS ^4
- TypeScript ^5

如果代码库不支持这些技术栈，请提供通过shadcn CLI设置项目、安装Tailwind CSS v4或TypeScript的详细说明。

该组件块所需的文件如下：

文件路径：app/hero-03/page.tsx
（此文件的代码）

文件路径：components/shadcn-space/blocks/hero-03/hero.tsx
（此文件的代码）

文件路径：components/shadcn-space/blocks/hero-03navbar.tsx
（此文件的代码）

文件路径：components/shadcn-space/blocks/hero-03/navlink.tsx
（此文件的代码）

文件路径：components/shadcn-space/blocks/hero-03/index.tsx
（此文件的代码）

## 实施步骤
1. 查看components.json文件，确定components、utils、ui、lib以及hooks这些组件的正确路径别名。在创建任何文件之前，确保上述代码中的所有导入语句和文件路径都是正确的。
2. 安装依赖项。使用项目所使用的包管理器（npm / yarn / pnpm / bun），安装组件块文件中列出的所有依赖项及开发依赖项。
3. 安装shadcn/ui组件。根据项目的实际需求，使用相应的shadcn CLI命令来安装所需的shadcn/ui组件。
4. 添加全局样式。只需将此组件块所引用的CSS变量和自定义样式添加到globals.css文件中，不要添加其他无关的样式。
5. 创建组件文件。将每个文件的代码写入上述指定的目标路径中，切勿重新命名或调整文件结构。
6. 验证导入路径是否正确。确保所有导入语句都能根据项目配置的正确路径别名来获取相应的资源文件。在完成这些步骤之前，务必修复任何错误的路径引用。

生成后的组件必须能够正常运行，并且其外观要与提供的代码描述完全一致。当所有步骤都完成后，这个组件块就可以在项目中使用了。

在实际的示例代码中，每个文件的完整代码都会放在其对应的文件路径下。下面你会看到这五个文件。

这种编写方式之所以有效，原因有四个：

  • 它明确指出了所需的技术栈，因此工具不会自行猜测版本号。

  • 它列出了具体的文件路径，这样工具就不会改变你的项目结构。

  • 它提供了有序的步骤说明，因此工具会在编写任何文件之前先检查你的components.json文件。

  • 它在最后一行定义了“完成”的标准，因此工具知道何时应该停止操作。

你可以将这种编写模式应用到自己编写的示例代码中。

生成的文件

当工具完成生成工作后，你应该会得到五个文件。在运行程序之前，请先仔细阅读这些文件的内容。

app/hero-03/page.tsx

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

const Page = () => {
  return (

这个文件用于创建 `/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<HTMLElement>>(null);
  const isInView = useInView(sectionRef, { once: true, amount: 0.1 });

  return (
    

      {/* 背景视频 */}
{/* 增加文本可读性的覆盖层 */}
{/* 内容区域 */}

我们致力于打造高性能的数字设计作品，这些设计能够提升品牌影响力并促进转化率。

SHADCN®SPACE

); }; export default HeroSection;

英雄功能的实现方式：

1. 视频背景： `video` 元素使用了 `loop`、`autoPlay`、`muted` 和 `playsInline` 这些属性。浏览器仅会在视频处于静音状态时允许自动播放，而 `playsInline` 属性可以防止 iPhone 在全屏模式下打开视频。`object-cover` 类确保视频能够填充整个区域而不会被拉伸。

2. 覆盖层： `bg-black/50` 这一层覆盖在视频上方，这样无论视频显示在哪个帧上，白色的文字都能清晰可见。

3. 滚动到视野内时触发的动画效果： 当页面有 10% 的内容进入视野时，`useInView` 钩子会返回 `true`（`amount` 参数为 0.1）。选项 `once: true` 确保动画只触发一次，这样每次滚动回去时标题就不会再次淡入。

4. 自适应的标题显示： 标题的大小会根据屏幕尺寸的变化而调整：在手机上使用 `text-4xl`，在大屏幕上则使用 `xl:text-9xl`。在小屏幕上，标题和箭头会并排显示（使用 `flex-col`），而在大屏幕上它们会排成一行。

5. 为什么需要 “use client”： 该组件使用了某些浏览器特有的钩子函数（如 `useRef`、`useInView`）以及第三方库 Motion，因此必须在 Next.js 应用的顶部添加 “use client” 指令才能正常运行。

components/shadcn-space/blocks/hero-03navbar.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 && (
                
              
              
                  
                
                
                  
菜单

                      
                    

                    

                    
    
                      ))}
); }; export default Header;

导航栏的工作原理：

1. 固定标题与渐变背景： 导航栏标题使用了 `sticky top-0` 样式。当 `sticky` 属性设置为 `true` 时，`before:h-0` 的伪元素会扩展到 `before:h-full`，这样一来，青绿色的背景会逐渐向下移动，而不会立即消失。

2. 滚动检测与资源清理： `handleScroll` 函数在页面滚动 80 像素后会将 `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 interfaceNavLinkProps {
  item: NavLinkItem;
  onClick?: () => void;
}

const NavLink: React.FC<NavLinkProps>> = ({ 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-03navbar」;
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: "首页", href: "#", isActive: true },
    { title: "属性", href: "#",isActive: false },
    { title: "博客", href: "#", isActive: false },
    { title: "联系我们", href: "#", isActive: false },
    { title: "文档", href: "#", isActive: false },
  ];
  return (
    <>>

    索引文件的工作原理：

    1. 数据都存储在同一个地方： `navigationData` 数组中保存了所有的链接信息。导航栏只会显示这些链接，因此你可以在不修改导航栏代码的情况下更改链接内容。

    2. 通过负边距使标题区域位于导航栏下方： 导航栏的高度为 `h-20`（即80像素），而 `main` 元素上应用的 `-mt-20` 类会使得标题区域向上移动相同的距离，这样视频就能覆盖整个屏幕，同时导航栏仍能保持固定位置。

    运行之前需要检查的内容

    在打开页面之前，请先阅读代码并检查以下内容：

    花几分钟时间进行这些检查，以后会节省很多时间。

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

    AI工具经常需要重复编写相同的标记代码。菜单、按钮和卡片等元素通常都需要单独编写样式，因此它们的外观往往各不相同。而使用共享组件就可以解决这个问题。

    这一部分介绍了三种你可以借鉴的开发习惯。

    每个功能都使用同一个组件

    在这个示例中，菜单使用了 shadcn/ui 提供的 `DropdownMenu` 组件，而不是手动编写的代码。这样，你就可以从一个经过测试的组件中获得键盘支持、焦点处理功能以及正确的无障碍访问属性。即使在其他页面上添加第二个下拉菜单，它的外观和行为也会保持一致。

    使用cn()

    导航栏和导航链接都使用了来自@/lib/utils的cn()函数。该函数能够合并类名，并处理诸如sticky && "before:h-full"这样的条件逻辑。此外，它还能消除那些会导致冲突的Tailwind CSS类名，而普通的模板字符串是无法实现这一点的。

    将数据与标记内容分开存储

    所有的链接都存储在navigationData数组中，而NavLink组件会负责渲染这些链接。要添加一个新的页面，只需向该数组中添加一个对象即可，无需编写任何新的JSX代码。

    何时应该从“块”结构开始开发

    标题栏和导航栏仅仅只是开始而已。一个真正完整的产品还需要侧边栏、表格和图表等功能。如果完全通过提示来编写这些内容，会耗费大量时间，而且不同页面上的样式往往也会不一致。

    使用“块”结构能够为你提供一个经过测试的起点，而后续的修改则可以通过提示来完成。如果你需要构建管理员区域，可以参考shadcn管理面板模板中的示例块。这些模板提供了侧边栏、页眉和内容区域的布局方案。

    在本教程中，标题栏的动画效果使用了Motion库来实现淡入效果、旋转图标以及基于滚动条的显示机制。如果你的页面需要更多的动态效果，shadcn动画块组件系列资源会向你展示如何在这种结构中添加动画效果。

    在使用任何模板块之前，请先阅读其代码并查看许可证信息，就像对待任何软件包一样。

    步骤4：如何通过后续提示来优化结果

    将最初得到的结果视为草稿。对于每个提示，只修改其中的一项内容，这样你就能清楚地了解每个提示具体起到了什么作用。如果某项修改导致了问题，可以使用Git撤销之前的操作，然后再尝试下一个提示。

    修正拼写错误

    从步骤2中提到的类名开始进行修改：

    在components/shadcn-space/blocks/hero-03navbar.tsx文件中，将motion.nav元素上的“item-center”类名改为“items-center”。
其他内容请保持不变。

    使颜色保持一致

    该模板块在多个地方使用了固定的teal-400类名。如果以后需要更改主题颜色，使用主题令牌会更加方便：

    将hero-03模板文件中所有的teal-400类名替换为默认的主题令牌。如果有必要，可以在globals.css文件中添加相应的颜色值。其他内容请保持不变。

    完成这些修改后，你只需调整一个CSS变量，就能重新设置整个模板的样式了。

    优化响应式设计

    在hero.tsx文件中，设置当屏幕宽度小于640像素时，标题栏能够自动换行，并确保箭头按钮始终位于标题下方。桌面版本的样式保持不变。

    处理加载速度较慢的视频

    视频是从远程URL加载的。在视频加载完成之前，用户会看到该区域的背景内容。因此，需要为这种情况提供明确的解决方案：

    在hero.tsx文件中，为video元素添加poster属性。保持该区域的背景颜色为黑色，这样在视频加载中或加载失败时，文本仍然能够被清晰地显示出来。

    处理菜单为空的情况

    导航栏的内容是根据navigationData数组来生成的。如果这个数组为空，那么菜单打开时将不会显示任何链接。因此，需要让工具能够处理这种情况：

    在navbar.tsx文件中，如果navigationData为空，就不要渲染菜单按钮。

    该工具应该通过以下方式来处理这种情况：

     0 && (

    将固定内容移至属性中

    在导航栏中，电话号码和电子邮件地址是直接写在组件内部的。如果将这些信息放在属性中，那么导航栏就可以被重复使用了：

    在navbar.tsx文件中，添加两个属性：phone和email。使用这些属性来替代那些硬编码的电话号码和电子邮件地址。同时更新index.tsx文件，以便传递这些值。所有样式保持不变。

    在完成每一步修改后，都需要检查相关文件是否发生了变化，运行页面进行测试，确认一切正常后再提交更改。

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

    启动开发服务器：

    npm run dev

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

    进行这些测试

    • 将窗口宽度调整到约375像素：此时标题应该会缩小，而内容仍然能够完整显示在屏幕上。

    • 打开菜单：使用关闭按钮、覆盖层或Escape键来关闭菜单。

    • 使用键盘操作：按Tab键，确认菜单按钮是否会出现高亮状态。

    • 向下滚动页面：导航栏应该会保持在页面顶部，而其青绿色背景会在滚动80像素后才会显示出来。

    • 将鼠标悬停在链接上：此时链接旁边应该会出现旋转图标。

    • 检查是否存在错误：运行以下两条命令进行测试：

    npx tsc --noEmit
npm run lint

    自定义页面内容

    你可以通过修改页面的导航结构、内容、资源文件、联系信息以及主题样式来对其进行个性化定制。

    打开index.tsx文件，编辑navigationData数组，从而更改菜单标签和对应的URL地址。

    const navigationData = [
  { title: "首页", href: "/" },
  { title: "功能介绍", href: "/features" },
  { title: "价格信息", href: "/pricing" },
  { title: "联系我们", href: "/contact" },
];

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

    2. 更改标题和文字内容

    打开hero.tsx文件，将现有的标题、描述以及按钮标签替换为您自己的内容。

    <h1>更快地构建您的下一个项目探索可用于您下一个网页应用的可复用UI组件。

    请保持原有的布局和组件结构不变。

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

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

    
</video>

    例如，public/images/logo.svg这个文件可以通过/images/logo.svg路径访问。

    4. 更新联系信息

    打开navbar.tsx文件，将现有的电话号码和电子邮件地址替换为实际的信息。

    hello@example.com

    请使用您真实的联系信息，并更新所有显示这些信息的组件。

    5. 更改主题颜色

    编辑globals.css文件中的CSS变量，以更改页面的颜色设置。

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

    请使用项目中已定义的变量名称进行修改；如果您的应用程序支持深色模式，还需要更新相应的深色主题相关变量。

    6. 自定义下拉菜单样式

    打开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文件中列出的可用脚本。

    在任何情况下，在发布代码之前都务必对其进行测试。即使代码看起来没有问题，也可能会在构建过程中出现错误，或者导致资源加载失败、在浏览器中表现异常（具体细节请参见下文）。

    实时预览：

    数字代理英雄专区

    在部署之前如何检查人工智能生成的代码

    人工智能编码工具可以创建或修改多个文件、安装依赖项，并执行终端命令。我会将这些工具生成的结果视为一个起点，而非可直接投入生产的代码。在部署之前，我会仔细审查这些更改内容，确保应用程序能够按照预期正常运行。

    以下是我建议在发布由人工智能生成的代码之前进行的一些检查步骤：

    1. 审查更改内容

    确认这些工具修改了哪些文件，仔细检查代码变化，确保这些修改符合你现有的项目结构，同时避免引入不必要的依赖项或无关的改动。

    使用Git，你可以通过以下命令来查看这些更改：

    git diff
git status

    如果你不理解某项更改的具体含义，请让生成代码的工具说明其用途及可能产生的副作用，然后再接受这项更改。

    2. 运行应用程序并测试关键功能

    启动开发服务器，在浏览器中打开应用程序。不仅要检查页面是否能够正常加载，还要测试那些被修改的功能是否能够按预期运行。

    例如，要验证导航链接是否有效、下拉菜单能否正常打开和关闭、按钮是否能执行预期的操作、表单能否正确验证用户输入的数据，以及图片或视频是否能正常显示。同时，也要检查页面在移动设备和桌面设备上的显示效果是否一致。

    打开浏览器的开发者控制台，查看是否存在JavaScript错误、网络请求失败的情况，或者是否有缺失的文件资源。

    3. 运行自动化检测

    利用`package.json`中提供的脚本来检查代码质量、运行测试，并验证最终生成的部署版本是否正确。

    npm run lint
npm test
npm run build

    这些只是常见的示例，并非通用的命令。你的项目可能没有定义`test`脚本，因此请先查看项目中可用的脚本。在继续下一步之前，务必修复所有存在的错误。

    4. 检查安全性和配置设置

    仔细审查新添加的依赖项、API调用方式、环境变量，以及任何处理用户输入或敏感数据的代码。切勿在客户端代码中暴露API密钥或敏感信息，也不要在不了解其作用的情况下让人工智能工具执行陌生的命令。

    对于那些需要处理身份验证、支付功能或用户数据的应用程序，还需要根据具体需求进行额外的安全检查。

    5. 在部署前进行最终验证

    在将代码正式部署到生产环境中之前，务必进行最后的验证工作，确保一切都没有问题。

    在发布之前，请确认生产环境的构建过程是否成功，主要用户流程是否能正常运行，以及没有任何重要的功能出现退化。再次审查最终的修改内容，一旦有可供使用的测试环境，就先将其部署到该环境中进行测试。

    我的原则很简单：如果我无法解释生成的代码具体实现了什么功能，那么我就还不适合发布它。虽然人工智能工具可以加快开发速度，但审核代码、进行测试以及对最终结果负责仍然是开发者的职责。

    关键概念回顾

    提示文档其实就是设计规范

    一份优秀的用户界面提示文档会明确指定布局结构、使用的组件、颜色搭配、间距设置以及页面的响应式行为。它还会说明所使用的技术栈，列出文件路径，提供操作步骤，并明确“完成”标准是什么。

    获取提示文档的两种方法

    你可以使用人工智能工具来编写提示文档，或者从免费的/付费的模板页面中复制相关内容，然后将其粘贴到任何人工智能工具中。

    运行前请务必阅读

    检查生成的代码是否存在导入错误、依赖项缺失、类名拼写错误或固定值设置不正确的问题。Tailwind框架会忽略未知的类，因此这些拼写错误不会导致任何明显的错误提示。

    重用组件

    共享的shadcn/ui组件能够确保代码的一致性和样式统一性。对于条件性的样式设置，可以使用cn()函数；数据应该存储在数组中，而标记内容则应保持独立。

    组合使用悬停效果与逻辑布局

    group类可以让子元素跟随父元素的悬停状态发生变化。导航链接就是利用这一特性来显示图标，而不会导致页面布局混乱。

    基于滚动的动画效果

    当元素首次出现在屏幕上时，使用useInView配合once: true选项可以一次性触发动画效果。

    "use client"在Next.js中的应用

    任何使用了钩子函数、浏览器事件或Motion库的文件，都必须在文件顶部添加"use client"指令。

    小规模的后续修改建议

    每次修改时只改动一个方面，完成修改后请检查差异并提交代码。只有当每次修改都能得到预期的效果时，才能继续进行下一步操作。

    总结

    通过本教程，你学会了如何利用人工智能提示文档来构建网站的用户界面。你编写了一份涵盖了布局、组件、颜色、间距及响应式行为等方面的提示文档，生成了包含动画导航栏的页面元素，仔细检查了每一份代码文件，并通过小规模的后续修改不断优化最终结果。

    你也明白了为什么共享组件如此重要：下拉菜单、cn()辅助函数以及数据驱动的链接设计都能确保代码的一致性，而模块化的结构则为构建更复杂的页面提供了坚实的基础。

    在接下来的学习中，请先编写详细的规范文档，明确所使用的技术栈和文件结构，在开始实际开发之前先阅读生成的代码结果。养成这样的习惯，能够帮助你更好地利用任何人工智能编码工具来提升工作效率。

    资源

    相关文章

    技术实践

    如何使用Next.js、AWS以及沙箱环境来构建属于自己的、类似于Lovable这样的AI应用开发工具

    像Lovable、Bolt这样的工具，第一次使用的时候真的会让人觉得像是魔法一样。说实话，我第一次看到这类东西的时候简直惊呆了……而且这一切都是通过聊天窗口来完成的！真是太不可思议了。第一次尝试使用Lovable的时候，我甚至产生了一场关于“存在意义”的哲学思考。 但你们有没有想过，其实这些工具内部到底发生了什么？比如说，究竟是怎么让一个应用程序能够生成另一个可以用于测试、分享或下载的应用程序的呢？ 显然，在某个地方有一个AI模型在编写代码。但这个过程具体是如何进行的呢？那些代码需要被安装、编译并运行才行。而我有点怀疑的是，现在似乎没有人会在这些代码运行之前去仔细检查它们。这些代码可能会出现错

    阅读全文
    技术实践

    如何阻止人工智能代理生成尼日利亚的邮政编码

    2026年10月1日，尼日利亚的邮政编码从六位数字改为由11个字符组成的代码，这种编码能够唯一标识某栋建筑，例如 EK-01-A03-FK-01 。 在此之前训练的语言模型仍然会自信地使用旧格式来处理邮政编码。这会影响两种类型的程序：一种是负责生成验证代码的编程程序，另一种是在运行时从客户信息中读取邮政编码或填写配送表格的程序。 本文将介绍如何解决这个问题。对于那些生成验证代码的程序，你需要检测它们目前生成的代码是否存在错误，并为它们提供相应的规则来纠正这些错误；而对于在运行时处理邮政编码的程序，则需要为它们设定明确的边界：当模型提出一个邮政编码时，由特定的程序来判断该编码是否符合规范、是否已

    阅读全文
    技术实践

    面向初学者的Node.js与Express.js使用指南——服务器、路由机制以及视图处理方法的详细讲解

    Node.js是一种用于在浏览器之外执行JavaScript的运行时环境。无论是小型脚本还是大规模的后端应用程序，Node.js都提供了构建适用于各种环境的JavaScript应用所需的API和工具。 然而，学习Node.js可能会让人感到不知所措。由于有太多需要理解的API、包、工具和概念，人们很容易迷失方向。 正因为如此，这本书重点讲解了构建实际应用所需的基础Node.js知识，避免了不必要的干扰。你将了解到Node.js的工作原理，如何使用其内置的API，以及如何创建能够处理文件、URL、事件、HTTP请求等功能的应用程序。 你还会学习到Express.js是如何简化许多常见的服务器端任

    阅读全文
    技术实践

    如何在JavaScript中使用全屏API（并通过“唤醒锁API”使屏幕保持处于唤醒状态）

    迟早，大多数前端开发人员都会遇到这样一个问题： "这个内容能覆盖整个屏幕吗？" 无论是幻灯片、视频播放器、信息亭的控制面板、游戏界面、绘图工具，还是教室投影仪上的计时器，当浏览器标签页和地址栏还显示在屏幕边缘时，这些界面看起来总是不完整。 好消息是，浏览器本身提供了解决方案： 全屏API 。不过坏消息是，这个API存在一些问题，在实际使用中很可能会遇到麻烦——比如用户的手势操作、Safari浏览器特有的前缀、某些iPhone设备的不兼容性，以及屏幕在进入全屏状态两分钟后就会自动变暗的问题。 在本教程中，你将学习如何： 将任何元素（或整个页面）设置为全屏显示，然后再恢复正常视图 当用户按下 Es

    阅读全文