AI 辅助 UI 设计实战：从 PRD 到可交互原型

前言

上一篇 全链路指南 中，我们在"PRD → UI/设计"环节点到为止——介绍了三种路径和主流工具。这篇是那个环节的深度篇。

传统的 UI 设计流程是这样的：产品经理写完 PRD，交给设计师，设计师用 Figma 画线框图，评审，改，画高保真，再评审，再改。一个中等复杂度的页面，从 PRD 到设计定稿通常需要 3-5 天。

AI 设计工具正在压缩这个周期。你可以用一段文字描述生成一个可交互的 UI 原型，10 分钟内拿到一个"80 分"的起点，然后把精力花在从 80 分到 95 分的精修上。

这篇文章会覆盖：

• 三种 AI 设计路径的详细对比和适用场景
• v0 实战演示：从工单系统 PRD 生成完整界面
• Prompt 工程：怎么写描述才能得到好的 UI 输出
• 工具横评：v0、Figma AI、Galileo AI、即时设计 AI 的优劣
• 局限性和最佳实践

延续 PRD 深度篇 的工单系统案例，让你看到从需求到界面的完整链路。

一、AI 设计工具能做什么（和不能做什么）

先校准预期。2026 年的 AI 设计工具能做到：

能做的：

• 从文字描述生成布局合理的 UI 界面
• 生成可运行的前端代码（React/Vue/HTML）
• 从截图还原界面并生成代码
• 快速生成多个设计方案供选择
• 理解常见的 UI 模式（表格、表单、仪表盘、卡片列表）

做不到的：

• 自动匹配你的品牌设计系统（颜色、字体、间距）
• 处理复杂的交互逻辑（多步表单、拖拽、动画）
• 生成像素级精确的设计稿
• 理解业务上下文（为什么这个按钮要放在这里）
• 保证无障碍访问合规

定位很清楚：AI 是原型生成器，不是设计师替代品。它帮你跳过空白画布阶段，但最终的设计决策仍然需要人。

二、三种路径详解

路径一：文字描述 → UI

最直接的方式。你用自然语言描述想要的界面，AI 生成代码和预览。

适用场景：

• 快速验证产品想法
• 内部工具和管理后台
• 独立开发者没有设计师资源
• 技术评审前需要一个可视化参考

代表工具：

v0 的优势在于它生成的不是图片，而是真实的 React 代码。你可以直接 npx shadcn add 把组件集成到项目中。

路径二：线框图/草图 → 高保真

先画一个粗糙的线框图（手绘、白板、或简单工具），然后让 AI 转换为高保真设计。

适用场景：

• 设计师想加速从草图到高保真的过程
• 团队白板讨论后快速出原型
• 已有大致布局想法，需要视觉填充

代表工具：

这条路径的优势是保留了设计师的布局意图，AI 只负责视觉填充和细节完善。

路径三：截图 → 代码

把现有的设计稿、竞品界面或任何截图转换为前端代码。

适用场景：

• 快速复刻参考设计
• 把 Figma 设计稿转为代码
• 竞品分析时快速搭建原型

代表工具：

注意：这条路径生成的代码通常是"视觉还原"级别——看起来像，但代码结构、语义化、响应式适配都需要大量清理。适合快速原型，不适合直接用于生产。

三种路径对比

三、v0 实战：从工单系统 PRD 到界面

延续 PRD 深度篇 的工单系统案例。假设我们已经有了 PRD，现在要生成 UI。

第一步：提取 PRD 中的界面需求

从 PRD 中提取与 UI 相关的信息：

工单系统界面需求摘要：

用户角色：
- 普通员工：提交工单、查看自己的工单
- IT 管理员：查看所有工单、分配工单、处理工单
- 超级管理员：以上全部 + 用户管理 + 系统设置

核心页面：
1. 工单列表页（支持筛选、搜索、分页）
2. 工单详情页（状态流转、评论、附件）
3. 提交工单页（表单）
4. 仪表盘（统计数据、待处理工单）

工单状态：待分配 → 处理中 → 待验证 → 已完成 / 已关闭
优先级：低、中、高、紧急

第二步：分页面生成

不要一次让 v0 生成整个系统。按页面拆分，逐个生成。

工单列表页的 Prompt：

生成一个工单管理系统的列表页面，使用 React + Tailwind + shadcn/ui：

布局：
- 顶部：页面标题"工单管理"，右侧有"新建工单"按钮
- 筛选栏：状态下拉（全部/待分配/处理中/待验证/已完成/已关闭）、
  优先级下拉（全部/低/中/高/紧急）、搜索框
- 主区域：表格，列包括：
  - 工单号（#001 格式）
  - 标题（可点击进入详情）
  - 提交人（头像 + 姓名）
  - 状态（彩色标签：待分配=灰色，处理中=蓝色，待验证=橙色，已完成=绿色，已关闭=红色）
  - 优先级（紧急=红色，高=橙色，中=黄色，低=灰色）
  - 创建时间（相对时间，如"2小时前"）
  - 处理人（头像，未分配时显示"—"）
- 底部：分页器

设计要求：
- 支持深色模式
- 响应式布局（移动端表格改为卡片列表）
- 使用中文界面

第三步：迭代优化

v0 第一次生成的结果通常是 70-80 分。你需要通过追加指令来优化：

优化建议：
1. 表格行添加 hover 效果和点击整行跳转
2. 状态标签改用 Badge 组件，带图标
3. 紧急优先级的行添加左侧红色边框提示
4. 添加批量操作：选中多个工单后可批量分配
5. 空状态：没有工单时显示插图和引导文案

第四步：其他页面

用同样的方式生成其他页面。关键是保持描述的一致性——相同的组件库、相同的颜色方案、相同的布局模式。

工单详情页的 Prompt 要点：

生成工单详情页，与列表页保持一致的设计风格：

布局：
- 面包屑导航：工单管理 > #001 网络连接问题
- 左侧主区域（70%）：
  - 工单标题、状态标签、优先级标签
  - 描述内容（支持 Markdown 渲染）
  - 附件列表（文件名、大小、下载按钮）
  - 评论区（时间线样式，支持 @ 提及）
- 右侧边栏（30%）：
  - 状态流转按钮（根据当前状态显示可用操作）
  - 工单信息：提交人、处理人、创建时间、更新时间
  - 分配处理人（下拉选择）

实战心得

经过多次使用 v0，总结几个关键经验：

1. 描述布局用"区域"而非"像素"：说"左侧 70%，右侧 30%"比"左侧 840px"好，AI 更容易理解语义化的布局描述
2. 指定组件库：明确说"用 shadcn/ui 的 Badge 组件"比"用彩色标签"生成的代码质量高得多
3. 给出具体数据：不要说"一些工单"，给出具体的示例数据（工单号、标题、状态），AI 会用这些数据填充界面
4. 分页面生成，保持风格一致：在每个页面的 Prompt 中引用"与列表页保持一致的设计风格"

四、Prompt 工程：怎么写描述才能得到好的 UI

好 Prompt 的结构

[页面名称和用途]

布局：
- [区域划分，从上到下、从左到右描述]
- [每个区域的具体内容]

数据：
- [具体的示例数据]
- [状态和枚举值]

设计要求：
- [组件库]
- [颜色方案/主题]
- [响应式要求]
- [特殊交互]

常见错误

错误 1：描述太模糊

❌ "生成一个好看的工单管理页面"
✅ "生成工单列表页，包含筛选栏（状态、优先级）、数据表格（7列）、分页器，使用 shadcn/ui"

错误 2：一次生成太多

❌ "生成整个工单管理系统的所有页面"
✅ "生成工单列表页"（然后逐个生成其他页面）

错误 3：描述视觉而非结构

❌ "标题用 24px 加粗蓝色字体，下面有一条 1px 的灰色分割线"
✅ "页面标题使用 h1 样式，下方有分割线"

错误 4：忽略状态和边界情况

❌ 只描述正常状态
✅ "空状态显示引导文案，加载中显示骨架屏，错误状态显示重试按钮"

进阶技巧

1. 用参考图辅助文字描述

如果你有参考设计（竞品截图、Dribbble 上的灵感），可以同时上传图片和文字描述。v0 支持图片输入：

参考这张截图的布局风格，生成一个工单列表页。
保留整体布局结构，但使用 shadcn/ui 组件库，配色改为中性灰色调。

2. 指定设计系统变量

使用以下设计变量：
- 主色：slate（shadcn 默认）
- 圆角：rounded-lg
- 间距：使用 Tailwind 的 space-y-4 和 gap-4
- 字体大小：标题 text-2xl，正文 text-sm

3. 描述交互行为

交互要求：
- 表格行 hover 时背景变为 muted
- 点���行展开详情预览（不跳转页面）
- 筛选条件变化时表格自动刷新，显示加载状态
- 支持键盘导航（Tab 切换行，Enter 打开详情）

五、工具横评

v0 (Vercel)

优势：

• 生成的代码质量是目前最高的——使用 shadcn/ui + Tailwind，结构清晰，可直接集成到项目
• 支持多轮对话迭代，可以逐步优化
• 支持图片输入（截图转代码）
• 生成的组件支持深色模式和响应式

劣势：

• 仅支持 React 生态
• 复杂交互（拖拽、动画）处理一般
• 免费额度有限

最适合：React 项目的开发者和独立开发者

Figma AI

优势：

• 在 Figma 内原生集成，不需要切换工具
• 理解现有设计上下文，能与你的设计系统配合
• 设计师友好，输出是设计稿而非代码

劣势：

• 功能还在快速迭代中，稳定性一般
• 需要 Figma 付费版
• 不直接输出代码

最适合：已经使用 Figma 的设计团队

Galileo AI

优势：

• 视觉效果好，生成的设计稿质量高
• 支持导出到 Figma
• 理解复杂的布局描述

劣势：

• 等待列表/邀请制
• 不输出代码
• 品牌定制能力有限

最适合：需要高保真原型的产品团队

即时设计 AI

优势：

• 中文支持最好
• 国内访问无障碍
• 与即时设计生态集成

劣势：

• AI 能力相比 v0 和 Galileo 还有差距
• 生态相对小

最适合：国内团队，特别是已经使用即时设计的团队

选择建议

你是开发者，想要可用的代码？ → v0
你是设计师，想在 Figma 中工作？ → Figma AI
你需要高保真视觉原型？ → Galileo AI
你的团队在国内？ → 即时设计 AI
你想生成全栈应用？ → bolt.new

六、从原型到生产：弥合差距

AI 生成的原型和生产级 UI 之间有一道鸿沟。以下是弥合这道鸿沟的实践。

1. 设计系统适配

AI 生成的组件使用默认样式。要融入你的项目，需要：

// AI 生成的（使用默认 shadcn 主题）
<Badge variant="default">处理中</Badge>
 
// 适配你的设计系统后
<Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
  处理中
</Badge>

建议：在 Prompt 中提前指定你的设计变量，减少后续适配工作。

2. 响应式完善

AI 通常能生成基本的响应式布局，但细节需要调整：

• 移动端的表格通常需要改为卡片列表
• 侧边栏需要改为抽屉或底部导航
• 触摸目标大小需要确保至少 44x44px

3. 无障碍补充

AI 生成的代码在无障碍方面通常不够完善：

• 添加 aria-label 到图标按钮
• 确保颜色对比度符合 WCAG AA 标准
• 添加键盘导航支持
• 为状态变化添加 aria-live 区域

4. 真实数据替换

AI 使用的是示例数据。接入真实 API 后，需要处理：

• 加载状态（骨架屏）
• 空状态
• 错误状态
• 数据量极大时的性能（虚拟滚动）
• 数据格式不一致的边界情况

七、最佳实践清单

总结一份可直接使用的清单：

Prompt 编写：

• ✅ 描述布局结构，不描述像素值
• ✅ 指定组件库和设计系统
• ✅ 提供具体的示例数据
• ✅ 分页面生成，每次一个
• ✅ 描述空状态、加载状态、错误状态
• ❌ 不要一次生成整个系统
• ❌ 不要只描述正常路径

工具使用：

• ✅ 用 v0 生成代码原型，用 Figma AI 生成设计稿
• ✅ 多轮迭代，每轮聚焦一个方面（布局 → 样式 → 交互 → 状态）
• ✅ 保存好用的 Prompt 模板，团队共享
• ❌ 不要期望一次生成完美结果
• ❌ 不要跳过人工审查直接用于生产

从原型到生产：

• ✅ 适配设计系统（颜色、字体、间距）
• ✅ 完善响应式布局
• ✅ 补充无障碍支持
• ✅ 处理所有数据状态（加载、空、错误）
• ✅ 用真实数据替换示例数据

八、总结

AI 设计工具在 2026 年的定位很清晰：快速原型生成器。

它解决的核心问题是"空白画布"——从零开始设计一个页面是最耗时的部分。AI 帮你在 10 分钟内拿到一个 80 分的起点，然后你把精力花在真正需要人类判断的地方：品牌一致性、用户体验细节、无障碍访问、复杂交互逻辑。

三个关键要点：

1. 选对路径：开发者用"文字 → 代码"（v0），设计师用"草图 → 高保真"（Figma AI），快速复刻用"截图 → 代码"
2. Prompt 决定质量：描述结构而非像素，指定组件库，提供示例数据，分页面生成
3. 原型 ≠ 生产：AI 生成的原型需要设计系统适配、响应式完善、无障碍补充和真实数据处理

推荐阅读

• 用大模型将需求转换成 PRD 文档 — 本文的上游环节
• AI 辅助产品开发全链路指南 — 全链路概览
• Claude Code 完全指南 — 下游环节：AI 辅助代码实现