Codex-Claude-Figma工作流专题综述
这一专题关注从想法、PRD、原型、设计稿到代码实现的协作链路。重点不是某个工具更强，而是交付物如何在工具之间传递。
主题流程图
主题边界
- 设计探索可以用多模态工具；工程实现需要可运行代码、测试和审查。
- AI 可以生成方案和改代码，但产品边界、交互标准、视觉验收和上线责任仍由人定义。
知识树
- 需求：目标、用户、页面状态、验收标准。
- 设计：信息架构、组件、状态、响应式、可访问性。
- 实现：代码结构、数据流、测试、错误处理。
- 协作：截图、设计 token、PRD、任务分解、review。
阅读顺序
- 先把 PRD 写成明确验收标准。
- 再让设计工具或模型生成可评审原型。
- 最后让 Codex/Claude/Cursor 读项目并小步实现、跑测试、截图验证。
常见误区
- 只看首屏好不好看，不验证状态、边界和移动端。
- 让 AI 一次改太多文件，难以 review。
- 设计稿没有组件规范，落代码时大量返工。
实战任务
- 把一个功能写成“PRD -> 组件状态表 -> 验收截图清单”。
- 用 AI 生成两个设计方案，再按用户任务而非审美投票。
- 让编码 Agent 只负责一个明确文件范围，并要求测试结果。
必读资料
- AICoding实战：从Prd到代码生成
- Claude Code + Figma：AI 画原型完整教程，从 PRD 到设计稿只要 5 分钟
- Claude Code + Mermaid 一键生成架构图、时序图、流程图
- Claude Design 提示词，拿走即用
- Claude Design 系统提示词完整版（中文版）
- Claude Design：5分钟画完一个 APP
- Claude Design：一句话生成可交互原型
- Claude Design：对话即设计
- Claude Design：小白也能做出专业级设计｜附最全玩法+官方实用技巧
- Claude+Cursor+Figma/MasterGo四步生成高端的产品原型图（附提示词和步骤）
- Codex怎么用？国内如何使用？最全CLI使用教程与高效技巧
- FigmaMCP实现代码⇄设计稿实时双向同步（实测）
- GPT Image 2 来了，今天起，你看到的每一张图都不可信
- GPT Image 2多场景实测，没有一张图让人失望
- GPT image 2的正确打开方式！
后置阅读
- 具体工具按钮和套餐能力变化快，以当前官方文档为准。