5步从需求文档到产品原型/设计稿Skill
核心工作流：五步从想法到原型
Step 1：准备设计系统
Step 2：写第一个项目提示词
高质量提示词的四个要素：
代码块
JavaScript
[角色] + [要做什么] + [具体约束] + [参考输入]
# 示例：产品落地页
"为一个 B2B SaaS 库存管理工具设计落地页。
目标用户是中小零售企业主。
页面需要包含：Hero 区域（主标题+副标题+CTA 按钮）、
三个核心功能展示、客户评价 3 条、定价表（3 档）、底部 FAQ。
色调参考上传的品牌截图，导航风格简洁深色。"
# 示例：Pitch Deck
"制作一份 10 页的 Series A 融资演示文稿，
公司是 AI 驱动的供应链优化平台，
受众是工业领域 VC，
风格参考上传的品牌手册，
包含：问题、解决方案、市场规模、产品演示、竞争壁垒、商业模式、团队、财务预测、募资计划。"
50%
50%
✅ Codex 默认会生成 3 个设计变体，这是最重要的 UX 设计之一——给你一个起点方向而不是强迫你从单一版本迭代。
Step 3：在画布中迭代
生成第一版后，有四种精细化方式：
代码块
Python
# 方式 1：对话修改（适合结构性变化）
"把 Hero 区域改成视频背景，CTA 按钮改成渐变橙色"
"在定价表下方增加一个对比竞品的功能矩阵"
# 方式 2：内联评论（适合定点修改）
→ 鼠标悬浮在某个元素 → 点击评论图标 → 写具体指令
"这个按钮太小，至少 44px 高"
"这段文案改成更口语化的语气"
# 方式 3：直接编辑文字
→ 双击文字元素 → 直接在画布修改文案
# 方式 4：调整旋钮（Tweaks Panel）
最容易出效果的迭代顺序： 先确定整体布局和内容结构 → 再精调视觉细节 → 最后处理响应式断点。
56%
44%
Step 4：协作与分享
代码块
JavaScript
# 三种分享模式
1. 私有（Private）— 仅自己可见
2. 组织内可查看（View）— 持链接可看，不能编辑
3. 组织内可编辑（Edit）— 多人同时在画布上协作 + 一起与 Claude 对话
组织内协作时，团队成员可以在画布上留评论，也可以在左侧对话框中共同向 Codex 发送修改请求，所有人实时看到变化。
Step 5：导出和交付
代码块
Markdown
# 导出格式
- PDF → 印刷版本、发送给外部客户
- PPTX → 导入到 PowerPoint 继续编辑
- HTML → 独立原型文件，可托管
- Canva 同步 → 设计师在 Canva 中继续精修
- 组织内链接 → 分享给利益相关方点击体验
- Codex → 一键生成实现规格，交给开发落地
进阶：Figma 集成工作流
Codex 和 Figma 不是竞争关系，而是分工配合：
代码块
JavaScript
设计系统输出质量问题：最常见卡点和解法
问题：生成的设计太"通用"，看不出品牌特色
这是最高频的投诉。根本原因是没有给足上下文，Codex 会退回到通用设计风格。
代码块
JavaScript
# 解法：先定义设计系统，再要第一个屏幕
💡开源技巧：GitHub 上的 ui-ux-pro-max 社区 Skill（137,000+ Star）提供 50 种以上风格、161 套调色板、57 种字体搭配，可以作为设计系统的启动模板直接导入 Claude Design 项目。
问题：复杂的多状态 UI 生成效果差（如 Dashboard、条件判断表单）
对于复杂交互，用"分屏拆解"策略：先生成单个状态（空态、加载态、填充态分别生成），再合并讨论交互逻辑。不要在一个提示词里要求全部状态。
前沿功能：语音、3D 和着色器原型
Codex 支持生成超出常规 HTML 的"前沿原型"，这是相比 Figma 和 v0 的差异化能力：
代码块
JSON
// 语音驱动原型
// 在提示词中指定：
"这个演示需要语音朗读功能，
点击播放按钮时用 Web Speech API 朗读产品描述文案"
// 3D 元素（基于 Three.js）
"Hero 区域需要一个低多边形风格的旋转 3D 地球，
用 Three.js 实现，颜色使用品牌蓝色系"
// WebGL 着色器背景
"背景使用流体光效着色器，
颜色在深蓝和品牌紫之间渐变流动，
鼠标移动时有视差响应"
这类原型无法在 Figma 中原生实现，是 Codex 对创意密集型团队（游戏、娱乐、高端品牌）的独特价值。
FAQ
Q：Codex 能替代 Figma 吗？ 不能，也没有设计成这个目标。Figma 的多人协作、组件库管理和矢量精度是 Codex 不具备的。两者最佳状态是组合使用：Codex 负责快速出方向，Figma 负责精修和团队协作。
Q：Enterprise 账号下属用户能各自独立用 Claude Design 吗？ 可以，但需管理员在 Admin 控制台启用功能。启用后，组织成员各自的 claude.ai 账号均可访问，且设计文件支持组织内共享。组织管理员可以看到 Codex 的独立使用统计，便于成本管控。
Q：生成的 HTML 原型能直接上线吗？ 技术上可以，实际上不建议。Codex 生成的是展示用原型，没有经过性能优化、无障碍审计和安全加固。正确做法是用它验证方向，然后通过 Codex 重新实现生产级代码。
Q：能不能批量生成多个页面？ 目前每次生成是单个画布。跨页面的方案是：先生成首页，确认设计系统，然后在同一项目里新建画布生成第二个页面，Codex 会记住之前建立的设计系统并自动应用。
Q：我没有现成的品牌设计文件，能用 Claude Design 从零开始吗？ 完全可以。在设计系统建立阶段，不上传任何文件，直接在对话中描述你的品牌调性（"科技感、深色、面向年轻开发者"），Codex 会根据描述生成一套设计系统。之后的生成会基于这套系统保持一致性。
作者：七牛云行业应用 著作权归作者所有。