不画草图、不写 PRD，我用 Codex + Figma 一天搞定 UI 设计

传统 UI 设计流程：产品经理写 PRD → 设计师画草图 → 原型评审 → 视觉设计 → 交互细节 → 开发对接。

一个页面跑下来，至少一周。

现在有了 Codex + Figma 的组合拳，我一天搞定了 8 个页面的完整设计。

---

🎯 传统流程的痛点

在设计团队工作时，最常见的问题是：

痛点 1：PRD 写不完

产品经理在文档上纠结："

• "这个按钮文案是'确认'还是'提交'？"
• "这里要不要加个引导弹窗？"
• "用户画像到底是 C 端还是 B 端？"

结果： PRD 改了 8 版，设计师还在等需求定稿。

痛点 2：草图画了就废

设计师手绘草图：

• 画了 3 张草图，产品说"感觉不对"
• 改完 2 版，老板说"要更科技感一点"
• 最后推翻重来，前面 5 张草图白费

结果： 设计师在草图阶段就耗尽了创造力。

痛点 3：评审会变成撕逼会

原型评审会上：

• 产品说"交互不流畅"
• 老板说"颜色太俗"
• 开发说"这效果实现不了"

结果： 评审 3 小时，结论是"再改一版"。

痛点 4：设计到开发的断层

设计师交付给开发：

• 标注不清晰，开发问"这间距是多少？"
• 没有组件库，每个按钮都要重新切图
• 没有交互原型，开发猜"点击后怎么跳转？"

结果： 设计和开发不断返工，上线延期。

---

🚀 Codex + Figma 的解决方案

我的新流程是这样的：

给 Codex 一个提示词
    ↓
AI 生成界面（图标、IP、插画、原型图）
    ↓
反复批注微调，定稿 Demo
    ↓
一键导出到 Figma（全矢量可编辑）
    ↓
设计师/开发直接在 Figma 中继续工作

时间对比：

• 传统流程：7-10 天
• Codex + Figma：1 天

---

💡 核心一：AI 生成界面，不用草图、不用 PRD

第一步：给 Codex 提示词

我不写 PRD，我直接给 Codex 一个场景描述：

设计一个健身 APP 的用户注册页面：

目标用户：25-35 城市白领，注重健康管理
使用场景：早晨通勤时快速注册，不要超过 3 步
核心需求：手机号注册 + 验证码 + 设置密码

视觉风格：简洁、活力、运动感
主色调：橙色（活力）+ 白色（清爽）

Codex 会做什么：

1. 分析目标用户和使用场景
2. 提炼核心需求，去除冗余
3. 根据视觉风格生成配色方案
4. 直接输出界面设计

第二步：AI 生成设计元素

Codex 不是"一键生成图片"，它是逐步构建设计系统：

1️⃣ 生成品牌元素

我：生成一个健身 APP 的 Logo 和品牌色

Codex：
🎨 品牌色方案：
- 主色：#FF6B35（活力橙）
- 辅助色：#00D9A3（健康绿）
- 中性色：#F8F9FA（浅灰）、#212529（深灰）
- 功能色：#DC3545（错误）、#28A745（成功）

🎭 Logo 设计方案：
- 方案 1：抽象的跑步人物剪影 + 圆形背景
- 方案 2：动态感的闪电符号 + 品牌名称
- 方案 3：极简的哑铃图形 + 现代 sans-serif 字体

2️⃣ 生成图标库

我：生成底部导航栏的 5 个图标

Codex：
生成完成，图标包括：
- 首页：房子轮廓 + 简洁线条
- 训练：哑铃侧视图 + 动态感
- 发现：放大镜 + 星光点缀
- 我的：用户头像抽象图
- 设置：齿轮图标 + 圆润边角

风格：线性图标，2px 线宽，圆角连接

3️⃣ 生成插画

我：需要一个用户引导的空状态插画

Codex：
生成场景插画：
- 主题：首次打开 APP 的欢迎页
- 元素：一个在做伸展运动的人物 + 欢迎文字
- 风格：扁平化插画，柔和渐变，符合品牌色系

4️⃣ 搭建页面原型

我：根据之前的元素，生成注册页面的原型

Codex：
页面结构：

┌─────────────────────────────┐
│  [Logo]   FitLife            │
├─────────────────────────────┤
│                             │
│   欢迎加入 FitLife          │
│   开启你的健康之旅          │
│                             │
│  ┌─────────────────────┐   │
│  │ 📱 手机号           │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 🔒 验证码    [获取]  │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 🔑 设置密码         │   │
│  └─────────────────────┘   │
│                             │
│      [立即注册]            │
│                             │
│   已有账号？ [登录]         │
└─────────────────────────────┘

交互细节：
- 输入框聚焦时，边框变为品牌橙色
- 点击"获取验证码"，按钮变灰并倒计时 60 秒
- 密码框支持显示/隐藏切换
- 注册按钮在所有字段填写后才高亮可点击

第三步：反复批注微调

我不会一次就满意，我会反复让 Codex 调整：

我：输入框太窄了，改成全宽

Codex：已调整，输入框宽度从 80% 改为 92%，左右 padding 4%

我：注册按钮颜色太鲜艳，换个渐变

Codex：已改为从 #FF6B35 到 #FF8C42 的柔和渐变

我：底部登录链接太不起眼，加个图标

Codex：已添加一个小的用户图标在"登录"文字前面

关键优势：

• 每次"修改"只需一句话
• 不需要重新画图，Codex 直接调整代码
• 可以无限次迭代，直到满意

---

🎨 核心二：一键导出 Figma，全矢量可编辑

当我对 Codex 生成的界面满意后，点击"导出到 Figma"：

导出效果

元素类型	导出格式	可编辑性
按钮、卡片、输入框	矢量（Shape）	✅ 完全可编辑
文字	文本层	✅ 可修改文案、字号、字体
图标	矢量（Vector）	✅ 可调整路径、颜色
插画、生图	PNG	❌ 位图，但可重新着色
布局、间距	自动标注	✅ 可调整
颜色	样式库	✅ 可替换主题色

设计师接管

导出到 Figma 后，设计师可以：

1. 调整细节

   • 微调间距、圆角、阴影
   • 修改文案、字号
   • 替换颜色方案

2. 建立设计系统

   • 将按钮、输入框创建为组件
   • 定义颜色变量、文字样式
   • 建立响应式布局规范

3. 交付开发

   • 直接导出代码（CSS / Swift / Kotlin）
   • 生成切图（@1x, @2x, @3x）
   • 提供交互原型链接

开发接管

开发拿到 Figma 文件后：

1. 查看标注

   • 间距、字号、颜色一目了然
   • 响应式断点清晰标注
   • 动画参数可复制

2. 复用代码

   • 直接复制 CSS / 代码片段
   • 颜色值、尺寸值无需猜测
   • 减少设计与开发的沟通成本

3. 快速迭代

   • 产品修改需求，直接在 Figma 调整
   • 重新导出代码，覆盖即可
   • 不用重新切图、重新标注

---

📋 核心三：固定 6 要素写提示词

我用 Codex 设计时，提示词永远包含这 6 个要素：

1️⃣ 产品定调

明确目标用户和核心价值：

目标用户：25-35 岁城市白领，注重健康管理
核心价值：让用户在通勤时也能完成碎片化健身
使用场景：早高峰地铁上，单手操作，时间紧张

2️⃣ 屏幕布局

描述信息架构和视觉层次：

布局原则：
- 核心功能（开始训练）占据屏幕上方 1/3
- 次要功能（历史记录、计划）在下方
- 底部导航固定，方便切换
- 关键按钮（开始）用颜色和位置突出

3️⃣ 交互动效

定义动态效果和反馈：

交互动效：
- 点击按钮：轻微缩放（0.95 倍）+ 涟漪效果
- 页面切换：右侧滑入，300ms 缓动
- 下拉刷新：加载动画使用品牌橙色
- 长按卡片：弹出操作菜单，背景模糊

4️⃣ 页面跳转

描述用户路径和导航逻辑：

页面跳转：
- 首页 → 训练详情：右侧滑入
- 训练详情 → 开始训练：底部弹出全屏
- 我的 → 设置：右侧滑入
- 所有返回按钮：左侧滑出

5️⃣ 视觉风格

定义配色、字体、图标风格：

视觉风格：
- 配色：活力橙（#FF6B35）+ 健康绿（#00D9A3）+ 中性灰
- 字体：中文使用思源黑体，英文使用 Inter
- 图标：线性风格，2px 线宽，圆角连接
- 插画：扁平化，柔和渐变，人物风格统一

6️⃣ 代码规范

指定技术栈和实现方式：

代码规范：
- 前端框架：React + Tailwind CSS
- 组件库：使用 Ant Design Mobile
- 响应式：支持 iPhone SE（320px）到 iPad Pro（1024px）
- 动画：使用 Framer Motion
- 代码风格：ESLint + Prettier

---

🎯 实战案例：一天设计 8 个页面

上午 9:00 - 10:30：定品牌和框架

我：给一个健身 APP 定义品牌色、Logo、底部导航图标

Codex：生成 3 套方案，我选第 2 套

耗时：1.5 小时

上午 10:30 - 12:00：核心页面

我：设计首页、训练详情页、开始训练页

Codex：生成 3 个页面的完整原型
我：批注调整 5 次（间距、颜色、文案）

耗时：1.5 小时

下午 14:00 - 15:30：次要页面

我：设计历史记录页、我的页面、设置页面、登录注册页

Codex：生成 4 个页面
我：批注调整 3 次

耗时：1.5 小时

下午 15:30 - 17:00：导出和打磨

我：导出到 Figma

设计师在 Figma 中：
- 创建组件库（按钮、输入框、卡片）
- 定义颜色变量和文字样式
- 生成响应式断点

耗时：1.5 小时

晚上 17:00 - 18:00：交付开发

开发在 Figma 中：
- 复制 CSS 代码
- 导出切图
- 查看标注

耗时：1 小时

---

总计：8 小时，完成 8 个页面的完整设计

---

💎 对比：传统流程 vs Codex + Figma

维度	传统流程	Codex + Figma
时间	7-10 天	1 天
PRD	需要 10+ 页文档	只需场景描述
草图	手绘 5-10 版	直接生成原型
评审	3+ 次评审会	实时批注调整
设计资源	需要 2 名设计师	1 名设计师 + Codex
修改成本	每次重画	一句话调整
开发对接	标注、切图、反复沟通	直接导出代码
可维护性	修改需重新画	在 Figma 中直接调

---

🛠️ 如何开始使用

第一步：配置 Codex

# 安装 Codex CLI
npm install -g @openai/codex

# 配置 API Key
codex config set api_key YOUR_API_KEY

# 启动设计模式
codex design --mode figma

第二步：写第一个提示词

使用 6 要素框架：

设计一个咖啡点单 APP 的首页

产品定调：
- 目标用户：20-30 岁都市白领
- 核心价值：快速点单，减少等待
- 使用场景：早高峰排队时，单手操作

屏幕布局：
- 顶部：搜索栏 + 用户头像
- 中间：推荐商品（横向滚动）
- 下方：分类导航（图标 + 文字）

交互动效：
- 点击商品：底部弹出详情页
- 加入购物车：按钮变绿 + 震动反馈

页面跳转：
- 商品详情：底部弹出全屏
- 购物车：右侧滑入

视觉风格：
- 配色：咖啡棕（#6F4E37）+ 奶油白（#FFF8DC）
- 字体：中文使用苹方，英文使用 SF Pro
- 图标：填充风格，圆角

代码规范：
- 前端框架：Flutter
- 组件库：使用 Material Design 3

第三步：迭代优化

不要期望一次完美：

第一版：Codex 生成基础布局
第二版：调整间距和颜色
第三版：优化交互动效
第四版：微调文案和图标
第五版：导出到 Figma 打磨

第四步：建立设计系统

导出到 Figma 后，做这几件事：

1. 创建组件库

   • 按钮（主要、次要、文字按钮）
   • 输入框（默认、聚焦、错误状态）
   • 卡片（商品卡片、订单卡片）

2. 定义样式变量

   • 颜色（主色、辅助色、功能色）
   • 文字（标题、正文、说明）
   • 间距（4px 基准）

3. 建立响应式规范

   • 手机（320px - 480px）
   • 平板（768px - 1024px）
   • 桌面（1024px+）

---

🚨 注意事项

⚠️ Codex 不是万能的

1. 生图是 PNG

   • AI 生成的插画、IP 形象是位图
   • 在 Figma 中不能直接编辑路径
   • 解决方案：用矢量工具重新描摹，或接受位图

2. 需要人工把关

   • Codex 会犯错，比如配色冲突、间距不均
   • 必须有设计师审查输出结果
   • 不要盲目信任 AI 的审美

3. 复杂交互动画需要手写

   • 简单动画（淡入淡出、滑动）Codex 能生成
   • 复杂动画（物理效果、粒子系统）需要人工编写代码

4. 品牌一致性需要维护

   • 每次给 Codex 提示词，都要强调品牌元素
   • 建议：建立品牌指南，在提示词中引用

✅ 最佳实践

1. 先建立品牌系统

   先用 Codex 生成 Logo、品牌色、图标库
   导出到 Figma，创建为组件
   后续所有页面都复用这些组件

2. 使用版本控制

   Figma 文件用 Git 管理
   每次重大修改创建新版本
   方便回溯和对比

3. 建立提示词模板

   将 6 要素写成模板
   每次设计时只需填写具体内容
   提高效率，保证质量

4. 与设计师协作

   Codex 生成原型 → 设计师打磨 → 建立组件库 → Codex 后续复用组件
   形成人机协作的闭环

---

🎊 总结

核心价值

价值点	说明
效率提升	从 7 天缩短到 1 天
降低门槛	产品经理也能直接出设计
减少返工	实时调整，不用重画
无缝对接	导出 Figma，设计开发共用
可维护性	全矢量，随时调整

适用场景

✅ 推荐使用：

• MVP 产品快速验证
• 原型设计、Demo 制作
• A/B 测试多版界面
• 内部工具、后台系统

❌ 不推荐使用：

• 需要高度品牌定制的 C 端产品
• 复杂的游戏 UI
• 需要手绘插画风格的界面

下一步行动

1. 今天就开始：用 Codex 生成你的第一个界面
2. 建立模板：将 6 要素写成你的提示词模板
3. 组建组件库：导出到 Figma 后，建立可复用的设计系统
4. 迭代优化：根据团队反馈，不断优化提示词

---

💬 结语

Codex + Figma 不是要取代设计师，而是：

让设计师从重复劳动中解放出来，专注于更有价值的创意和策略。

让产品经理直接将想法可视化，减少沟通成本。

让开发者拿到完整的设计规范，减少返工。

这不是一场革命，而是一次进化。

---

想学习更多 AI 设计技巧？ 关注公众号「Fen9Pi」，获取实战教程和案例解析 🎨