AI 生成 UI 组件实践：从提示词到可用代码的完整指南

用 Vue 3 + TypeScript + Tailwind CSS 写一个用户管理表格组件：

数据结构：
- id: 用户ID (number)
- name: 姓名 (string)
- email: 邮箱 (string)  
- status: 状态 ('active' | 'inactive' | 'pending')
- createdAt: 创建时间 (Date)

功能要求：
1. 支持按姓名和邮箱搜索
2. 支持按状态筛选（下拉选择）
3. 支持按创建时间排序（点击表头切换升降序）
4. 分页（每页 10 条，显示总条数）
5. 点击行显示详情弹窗

UI 要求：
- 使用 <script setup> 语法
- 暗色主题，背景 gray-900
- 状态列用不同颜色的标签显示
- 响应式：移动端隐藏邮箱列
- 加载中显示骨架屏

这个提示词具体在哪？

技术栈明确：Vue 3 + TS + Tailwind，不会给你 React 代码
数据结构清晰：字段名、类型都定义好了
功能点穷举：搜索、筛选、排序、分页，一个不落
UI 细节到位：颜色、响应式、状态显示、加载态

提示词模板

我常用的组件生成提示词模板：

## 技术栈
[框架] + [语言] + [CSS方案] + [UI库(可选)]

## 组件信息
- 组件名：[PascalCase]
- 用途：[一句话描述]

## 数据结构
[TypeScript interface 或具体字段列表]

## Props
[列出可配置的属性及默认值]

## 功能需求
1. [功能点1]
2. [功能点2]
...

## UI 规范
- 布局：[描述]
- 配色：[描述或直接给色值]
- 特殊状态：[loading/error/empty 的处理]
- 响应式：[断点及变化]

## 代码规范
- [你们项目的特殊要求，如命名规范、注释要求等]

多轮对话：渐进式生成更靠谱

一次性让 AI 生成完整组件，往往结果不理想。更好的方式是多轮对话，逐步完善。

第一轮：骨架

先生成组件的基本结构和布局，暂时用 mock 数据，不需要实现具体逻辑

AI 会给你一个能渲染的骨架，你可以先看看布局对不对、样式大方向对不对。

第二轮：核心功能

现在给这个表格添加排序功能：
- 点击"姓名"列表头，按姓名排序
- 点击"创建时间"列表头，按时间排序
- 首次点击升序，再次点击降序
- 当前排序列显示箭头图标

专注于一个功能，AI 更容易做对。

第三轮：边界情况

补充以下边界情况的处理：
- 数据为空时显示空状态（插画 + "暂无数据" 文案）
- 加载中显示 5 行骨架屏
- 搜索无结果时显示 "未找到匹配项"

边界情况单独处理，避免一开始就把 AI 整晕。

第四轮：代码审查

帮我检查这个组件的代码质量：
1. 有没有潜在的性能问题？
2. TypeScript 类型是否完整？
3. 是否有明显的 bug 或遗漏？
4. 有哪些可以优化的地方？

让 AI 自己审自己，有时候能发现一些问题。但别完全依赖，人工 review 还是必须的。

与设计稿对接：从图到代码

更常见的场景是：设计师给了设计稿，你要把它实现成代码。

方式一：截图 + 描述

直接把设计稿截图发给 AI（支持图片输入的模型如 GPT-4V、Claude 3）：

[附上设计稿截图]

请根据这个设计稿，用 Vue 3 + Tailwind CSS 实现：
- 保持设计稿的颜色、间距、字体大小
- 卡片是可点击的，hover 时加阴影
- 右上角的按钮是"更多操作"，点击显示下拉菜单

GPT-4V 和 Claude 3 都能"看懂"设计稿，生成的代码还原度还不错。但复杂设计还是会有偏差，需要手动调整。

方式二：Design Token 映射

如果你们有设计系统，把 Design Token 告诉 AI 效果更好：

我们的设计系统：
- 主色：primary-500 (#3B82F6)
- 圆角：rounded-lg (8px)
- 阴影：shadow-md
- 间距遵循 4px 基准
- 字体大小：sm(12px) base(14px) lg(16px) xl(18px)

请用这些 token 实现以下组件...

AI 生成的代码会直接用你的 token，而不是硬编码具体数值。

方式三：参考组件

参考我们已有的 UserCard.vue 组件的代码风格：
[贴上现有组件代码]

请用同样的风格实现一个 ProductCard 组件...

给 AI 一个"榜样"，它会模仿代码组织方式、命名习惯、注释风格。这是保持项目一致性的好方法。

质量把控：AI 生成的代码能直接用吗？

答案是：大多数时候不能。至少要过以下几关：

1. 语法检查

AI 生成的代码偶尔会有语法错误——括号不匹配、导入遗漏、变量未定义。先让 ESLint/TypeScript 跑一遍，把这些低级错误清掉。

2. 类型完整性

AI 生成的 TypeScript 代码，类型往往不够严格：

用了 any
事件参数没有正确类型
复杂对象直接断言

检查一遍类型定义，该加的加上。

3. 边界情况

AI 通常只实现"正常流程"，边界情况容易遗漏：

空数据怎么显示？
加载失败怎么处理？
输入超长文本会不会溢出？
用户疯狂点击会不会重复提交？

4. 性能考量

问自己几个问题：

列表很长时会不会卡？（考虑虚拟滚动）
组件频繁更新时有没有不必要的渲染？（考虑 memo/useMemo）
有没有在渲染函数里做重计算？（应该用 computed/useMemo）

5. 无障碍

AI 通常不会主动加无障碍支持。检查：

交互元素有没有合适的 aria-* 标签
图标按钮有没有 aria-label
表单输入有没有关联的 label
颜色对比度是否足够

6. 样式隔离

Tailwind 还好，但如果用普通 CSS，检查类名是否会冲突。Vue 的 scoped 和 React 的 CSS Modules 是你的朋友。

工程化集成：让 AI 融入你的工作流

IDE 集成

最顺滑的体验是直接在编辑器里用 AI：

Cursor：AI 原生编辑器，Cmd + K 内联编辑，Cmd + I 多文件生成。适合大量生成代码的场景。

GitHub Copilot：VS Code/JetBrains 插件，写注释触发补全。适合"写几行，补几行"的节奏。

Codeium：免费的 Copilot 替代品，质量差点但不花钱。

代码片段库

常用的组件模板可以保存为代码片段。VS Code Snippets 或 IDE 的 Live Templates，输入触发词自动展开。

比如我有个 vfc 片段，展开就是 Vue 3 组件的完整模板，包括 script setup、类型定义、props、emits 的标准结构。这比每次让 AI 生成快多了。

组件文档

AI 生成的组件，记得补上文档：

Props 说明
Events 说明
Slots 说明
使用示例

Storybook 或 VitePress 都可以。文档既是给人看的，也是下次让 AI 参考的素材。

实际案例：从需求到组件

举个完整的例子。

需求

产品说：我们需要一个"会员等级卡片"，展示用户的会员信息。

第一步：明确设计

和设计师确认：

卡片有渐变背景，不同等级不同颜色
显示：等级名称、等级图标、到期日期、特权列表
可点击，跳转到会员中心

第二步：写提示词

用 Vue 3 + TypeScript + Tailwind CSS 实现会员等级卡片组件：

数据结构：
interface MemberInfo {
  level: 'bronze' | 'silver' | 'gold' | 'platinum'
  levelName: string
  expireDate: string
  privileges: string[]
}

样式要求：
- 卡片宽度 300px，圆角 16px
- 背景渐变：
  - bronze: from-amber-600 to-amber-800
  - silver: from-gray-400 to-gray-600
  - gold: from-yellow-500 to-yellow-700
  - platinum: from-purple-600 to-purple-900
- 等级名称白色大字居中
- 到期日期用小字显示
- 特权列表用图标+文字，最多显示3条
- hover 时轻微上浮

交互：
- 点击整个卡片触发 @click 事件
- 鼠标悬停显示"查看详情 →"