传统 UI 设计流程：需求分析 → 手动画线框图 → 在 Figma 中做高保真稿 → 标注交付给开发 → 开发还原设计。这套流程做一屏至少 2-3 小时。2026 年的 AI 工具可以把这个过程压缩到 15 分钟——你用文字描述需求，AI 直接给你可用的设计稿甚至可运行的前端代码。本教程用 V0（前端代码生成）和 Galileo AI（设计稿生成）两件武器，走完整流程。

工具定位和分工

  • V0（Vercel 出品）：文字描述 → 生成 React + Tailwind 前端代码，可直接预览和部署
  • Galileo AI：文字描述 → 生成 Figma 可编辑的设计稿，适合做设计交付
  • 两者配合：V0 做「快速可用原型」，Galileo 做「可交付设计稿」
  • 前提条件：需要 Figma 账号（免费版即可）和 Vercel 账号

第一步：用 V0 从文字生成 UI

打开 v0.dev（用 Vercel 账号登录）。在输入框用自然语言描述你要做的界面：

设计一个 SaaS 产品的定价页面。要求：
- 三个定价方案卡片（免费/专业版/企业版），中间方案高亮推荐
- 每个卡片包含：方案名、价格、功能列表（5-6 条带勾选图标）、CTA 按钮
- 顶部有切换月付/年付的 Toggle 组件，年付打 8 折
- 底部有 FAQ 折叠面板，4-5 个常见问题
- 整体风格：现代简约，白色背景，主色用 indigo，卡片有柔和阴影和圆角

V0 会在 10-15 秒内生成完整的 React + Tailwind CSS 代码，并在右侧实时预览效果。你可以直接看到渲染后的页面。

V0 的优势在于它生成的是真正可运行的代码——不是图片，不是静态稿，而是带交互逻辑的前端组件。Toggle 可以点，FAQ 可以展开，按钮有 hover 效果。

第二步：迭代修改

对生成结果不满意，直接用自然语言追加修改：

把定价卡片的阴影改淡一点，专业版卡片的边框改成 indigo 色突出。FAQ 改成手风琴样式，同一时间只展开一个。底部加一个信任标识区域，放 4-5 个客户 Logo 的占位图。

V0 会基于之前的上下文增量修改代码。你可以连续迭代 5-10 轮，直到效果满意。

迭代技巧：

  • 一次只提 1-2 个修改点，不要一次说太多导致 AI 混乱
  • 说具体属性：「圆角改 12px」「阴影用 shadow-md」比「好看一点」有效
  • 可以贴参考截图：V0 支持图片输入，上传一张竞品截图说「参考这个布局」
  • 不满意可以点 Regenerate 重新生成，每次结果不同

第三步：用 Galileo AI 生成 Figma 设计稿

V0 生成的代码可以直接用，但如果你的团队流程需要 Figma 设计稿做交付和标注，用 Galileo AI。

  1. 打开 usegalileo.ai，用 Figma 账号登录
  2. 点击 New Design，输入界面描述（可以复用给 V0 的那段描述）
  3. 选择设计风格：Minimal / Material / Glassmorphism / Brutalism 等
  4. 点击 Generate，等待 20-30 秒
  5. 生成的结果是一个完整的 Figma 文件，所有图层都是可编辑的

Galileo 和 V0 的核心区别：Galileo 输出的是 Figma 矢量设计稿，每个元素都是独立的图层——文字、图标、按钮、容器都可以单独移动和修改。适合需要精确调整设计细节的场景。

第四步：在 Figma 中精修

从 Galileo 导入 Figma 后，常见的精修操作：

  • 检查字体层级：标题、正文、辅助文字的字号和粗细是否一致
  • 调整间距：Figma 的 Auto Layout 功能可以一键调整元素间距
  • 替换占位图：用 Unsplash 插件（Figma Community 免费）替换图片占位
  • 检查无障碍：用 Stark 插件检查颜色对比度是否达到 WCAG AA 标准
  • 组件化：将按钮、输入框等重复元素转为 Figma Component 方便复用

第五步：设计标注和交付

设计稿完成后，用 Figma 的 Dev Mode（开发者模式）自动生成标注：

  1. 在 Figma 右上角切换到 Dev Mode
  2. 选中任意元素，右侧自动显示：尺寸、颜色、字体、间距、CSS 代码
  3. 开发者可以直接复制 CSS 或 Tailwind 类名
  4. 导出切图：选中图标/图片 → Export 面板 → 选择格式（SVG/PNG/PDF）

如果你的团队用的是 Storybook 或者 Zeplin，Figma 也可以通过插件同步设计稿到这些平台。

第六步：V0 代码 → 实际项目

回到 V0，把满意的代码集成到实际项目中：

  • 点击 V0 界面右上角的「Open in StackBlitz」→ 在线编辑和预览
  • 或点击「Download」获取完整项目文件（package.json + 组件代码）
  • 或用 npx v0 add <component-name> 直接安装到本地 Next.js 项目
  • V0 生成的组件基于 shadcn/ui，和 Tailwind + Radix UI 生态完全兼容

实际项目集成示例：把 V0 生成的定价页面组件复制到你的 Next.js 项目 components/ 目录下，直接 import 使用。如果样式需要微调，改 Tailwind 类名即可。

设计系统维护建议

  • 用 V0 做快速原型：从需求到可预览原型 5 分钟，适合验证想法
  • 用 Galileo 做 Figma 交付稿：需要团队评审和标注时用
  • 最终代码以 V0 为准：V0 输出的是可运行代码，Figma 只是设计参考
  • 积累 Prompt 库：把效果好的界面描述存下来，下次改改就能复用
  • 风格一致性：在提示词中固定配色和字体（如「主色 #6366F1，字体 Inter」）保证多次生成风格统一

到这里，你已经能用 AI 在 15 分钟内完成从需求到设计稿到代码的全流程。对于简单的营销页、后台界面、Landing Page，这套流程完全可以替代传统设计交付。复杂产品界面仍然需要设计师做信息架构和交互设计，但执行层的效率已经提升了 5-10 倍。