一个基于 Claude Code 的完整产品设计工作流项目，用于将产品创意快速转化为详细的产品规格文档（PRD）和可交互的 UI 原型。
本项目提供了一套端到端的产品设计工作流，通过 AI 驱动的方式帮助产品经理、设计师和创业者：
- ✨ 将初步的产品创意结构化为专业的 PRD
- 🎨 从参考 App 截图中提取设计系统
- 🚀 自动生成完整的 React UI 原型
- 🔄 实现从创意到可视化原型的端到端闭环
将产品创意转化为详细的 PRD 文档。
特点：
- 专业的产品思维：基于资深产品专家的思维模型
- 协作式咨询：通过苏格拉底式提问引导深化思考
- 结构化输出：完整的产品定位、功能规划、技术架构、商业模式
从参考图片生成设计系统并实现完整 UI 原型。
特点：
- 自动提取设计模式：颜色、字体、组件、布局等
- 多方案设计：每个功能提供多个设计方案供选择
- 即时可视化：生成可运行的 React 组件
- 响应式设计：支持移动端和 Web 端
.
├── .claude/
│ ├── commands/ # 自定义斜杠命令
│ │ ├── pm.md # /pm 命令：生成 PRD
│ │ └── ux.md # /ux 命令：生成 UI 设计
│ └── scripts/ # 执行脚本
│ ├── prepare_pm.py # PM 工作流脚本
│ └── prepare_ux.py # UX 工作流脚本
├── agent-prompts/ # Agent 提示词模板
│ ├── product-manager.md # 产品经理 Agent 模板
│ └── ux-designer/ # UX 设计师 Agent 模板
│ ├── design-system.md # 设计系统提取
│ ├── app-overview-generator.md # PRD 生成
│ └── vibe-design-template.md # UI 实现
├── documents/
│ ├── designs/ # 生成的设计系统
│ ├── prds/ # 生成的 PRD 文档
│ └── ux-design/ # 最终 UI 提示词
├── ideas/ # 产品创意输入文件
│ └── image_to_ds.md # 示例：图片转设计系统
├── images/ # 参考图片（按 App 名称分目录）
│ └── cherrypick/ # Cherrypick App 参考截图
├── my-app/ # React UI 展示应用
│ ├── src/
│ │ ├── App.js
│ │ └── GoalAchievementShowcase.js
│ └── package.json
├── CLAUDE.md # 项目指南（给 Claude Code 的说明）
└── README.md # 本文件
- 安装 Claude Code
- Python 3.x（用于运行辅助脚本）
- Node.js 和 npm（用于运行 React 应用）
在 ideas/ 目录下创建一个 markdown 文件：
# 创意描述
[描述你的产品创意、目标用户、核心价值]
# MVP 功能范围
1. 功能 1
2. 功能 2
...在 Claude Code 中运行：
/pm --file ideas/your-idea.md系统会启动一个 AI 产品经理与你对话，最终生成完整的 PRD 文档到 documents/prds/ 目录。
将参考 App 的截图放到 images/app-name/ 目录下（支持 PNG、JPG、WebP 等格式）。
运行 UX 设计工作流：
/ux --dir images/app-name --idea ideas/your-idea.md --prd documents/prds/your-prd.md系统会：
- 从参考图片中提取设计系统
- 基于 PRD 生成 UI 实现提示词
- 在 React 项目中实现完整的 UI 组件
启动 React 开发服务器：
cd my-app
npm start在浏览器中访问 http://localhost:3000 查看生成的 UI 原型。
生成的 PRD 文档包含以下章节：
-
产品核心定位
- 电梯演讲
- 问题陈述
- 目标用户
- 独特价值主张
- 核心用户体验
-
产品规划
- 目标平台
- 功能架构（用户故事 + 验收标准）
- UX/UI 设计要点
-
技术与架构
- 技术栈建议
- 架构设计要点
-
商业模式
- 变现策略
- 定价方案
-
MVP 与迭代路线图
- MVP 范围
- 产品演进路径
-
风险与挑战
-
成功衡量标准
-
项目里程碑与资源需求
UX 工作流会从参考图片中自动提取：
- 色彩调色板：主色、辅色、功能色
- 排版系统：字体、字号、字重、行高
- 组件样式：按钮、卡片、输入框、导航等
- 间距系统：基础单位、内外边距、网格
- 圆角和阴影：视觉层次和深度
- 交互动效：过渡时间、缓动曲线
一个完整的示例项目，展示从创意到 UI 的全过程：
- 创意文件：
ideas/image_to_ds.md - PRD 文档：
documents/prds/1-prd-image-to-design-system.md - 设计系统：
documents/designs/cherrypick_design_system.md（基于 Cherrypick App） - UI 原型：
my-app/src/GoalAchievementShowcase.js
功能模块：
- 认证与引导（登录、注册、引导流程）
- 目标管理（创建、编辑、追踪目标）
- AI 路径规划（智能学习路径生成）
- 学习日志记录（记录学习过程）
- 智能总结（AI 生成学习总结）
- 进度可视化（数据统计和图表）
每个模块提供 3 个不同的设计方案（共 18 个移动端界面）。
- React 19.2.0 - UI 框架
- Tailwind CSS 3.4.18 - 样式框架
- Lucide React 0.545.0 - 图标库
- Create React App - 项目脚手架
# 启动开发服务器
cd my-app && npm start
# 构建生产版本
cd my-app && npm run build
# 运行测试
cd my-app && npm test- 专业的产品思维：基于资深产品专家的思维模型，提供深度分析
- 结构化输出：生成的 PRD 包含完整的产品定位、功能规划、技术架构、商业模式等
- 协作式咨询：通过提问引导，而非直接给出答案，帮助深化思考
- 可执行性强：文档包含明确的验收标准、优先级和迭代路线
- 智能设计系统提取：自动识别设计模式和视觉规范
- 多方案设计：为每个功能提供多个设计变体供选择
- 即时可视化：生成可运行的 React 代码，立即查看效果
- 设计一致性：确保所有界面遵循统一的设计系统
- 响应式支持：移动端和 Web 端适配
编辑 agent-prompts/product-manager.md 来自定义产品经理的角色定位和输出格式。
编辑 agent-prompts/ux-designer/ 下的模板文件来调整：
- 设计系统提取的详细程度
- PRD 生成的结构和内容
- UI 实现的要求和规范
修改 .claude/scripts/ 下的 Python 脚本来调整工作流逻辑。
- 创意阶段：尽可能详细地描述产品创意，包括目标用户、核心价值、主要功能
- PRD 生成：与 AI 产品经理充分对话，澄清所有关键问题
- 参考图片：选择设计风格接近的 App 截图作为参考（6-10 张为宜）
- 设计系统：检查生成的设计系统，确保符合品牌调性
- UI 原型：基于生成的原型进行迭代优化
Q: 可以使用多个 App 的截图作为参考吗？ A: 建议使用单一 App 的截图以保持设计一致性。如需混合风格，可以手动编辑生成的设计系统。
Q: 生成的 UI 代码可以直接用于生产环境吗？ A: 生成的代码主要用于原型展示和设计验证，建议经过重构和优化后再用于生产。
Q: 如何修改已生成的 UI？
A: 可以直接编辑 my-app/src/ 下的组件文件，或者调整设计系统后重新生成。
Q: 支持哪些设计风格？ A: 支持任何风格，只要提供相应的参考图片。系统会自动提取设计模式。
欢迎提交 Issue 和 Pull Request 来改进这个工作流！
- 新的 Agent 提示词模板
- 更多的设计系统示例
- UI 组件库扩展
- 工作流优化建议
- 文档改进
MIT
如有问题或建议，请提交 Issue。
本项目基于 Claude Code 构建，感谢 Anthropic 提供强大的 AI 能力。