🎉 Welcome to IdeaStitch!

Hi there! I’m Marcus.Yuan, the Product Manager behind IdeaStitch.
If you have any questions, feedback, or just want to say hi, feel free to reach out:
📧 008byebye@gmail.com

✨ What is IdeaStitch?

IdeaStitch 是一个端到端的产品需求与 UI 设计工作流工具。它能够帮助你将模糊的产品想法，一步步转化为：

• 📋 完整的产品需求文档 (PRD)
• 🎨 可用于开发的 UI 设计资源（通过 Google Stitch 自动生成）

无论你是产品经理、设计师还是开发者，IdeaStitch 都能让你的创意落地变得更简单、更高效！

🚀 5 个阶段概览

准备好了吗？让我们从 /prd-highlevel 开始，把你的想法变成现实！ 🚀

IdeaStitch Skill

Hooks 集成

本 Skill 使用 Hooks 实现自动化状态管理：

• SessionStart: 检测并恢复进行中项目，检查 Phase 4 生成状态
• PreToolUse (Write): 验证阶段状态
• PostToolUse (Write|Edit): 自动同步 tracker
• Stop: 检查未完成任务，提示继续

Overview

From Idea to Stitch-ready PRD. IdeaStitch 是一个将用户想法转化为完整产品需求文档和 Google Stitch UI 设计资源的专业工作流。它通过五个阶段实现从模糊想法到可开发文档的完整闭环。

核心特性：

• 角色驱动: Marcus (Product Manager) 引导全程
• 全流程追踪: 独立的 _tracker.md 实时记录 P1-P5 完整状态
• 自动化生成: Phase 4 自动调用 Stitch MCP 生成 UI 并下载资源
• 闭环迭代: 详细设计阶段支持随时修改高层需求
• 断点续传: 通用任务追踪支持跨对话、跨阶段的工作恢复
• 系统化: 高层需求 → 详细 PRD → UI Prompts → 自动生成 → 完整文档

核心文件结构

project/
├── docs/
│   ├── _tracker.md               # 过程追踪文件（通用状态管理）
│   ├── {feature}-highlevel.md    # 阶段一输出
│   ├── {feature}-prd.md          # 阶段二/五输出
│   └── {feature}-ui/             # 阶段三/四输出
│       ├── README.md
│       ├── 01-login/
│       │   ├── prompt.md         # P3 生成
│       │   ├── screenshot.png    # P4 下载
│       │   └── code.html         # P4 下载
│       └── ...
└── design-system/
    └── MASTER.md                 # 阶段一输出

五阶段工作流

阶段一: /prd-highlevel

功能: 从零开始收集想法，生成高层需求。

命令:

• /prd-highlevel (创建模式)
• /prd-highlevel --update (更新模式 – 由 Phase 2 调用)

流程:

1. 初始化 _tracker.md
2. 收集需求/用户/竞品
3. 调用 /ui-ux-pro-max 确定风格
4. 生成 highlevel.md 和 MASTER.md

详细指南: references/phase-1-highlevel.md

阶段二: /prd-detailed

功能: 详细功能设计与闭环细化。

命令:

• /prd-detailed (创建模式)
• /prd-detailed --update (更新模式 – 由 Phase 3/4/5 调用)

闭环工作流:

1. 读取 tracker，获取待细化功能
2. 逐个功能细化（页面/元素/交互/状态）
3. 闭环检查: 发现需要修改 HL 需求 → 调用 Phase 1 Update → 记录变更 → 继续
4. 生成带 UI 占位符的 prd.md

详细指南: references/phase-2-detailed.md

阶段三: /prd-ui-prompts

功能: 生成 Google Stitch 提示词。

命令: /prd-ui-prompts

流程:

1. 读取 tracker，同步 P3 页面列表
2. 提取 PRD 页面结构和设计系统风格
3. 为每个页面生成 prompt.md 并更新 tracker 状态
4. 完成阶段三追踪

详细指南: references/phase-3-ui-prompts.md

阶段四: /prd-ui-generate

功能: 自动调用 Stitch MCP 生成 UI 并下载资源。

命令:

• /prd-ui-generate (全量生成)
• /prd-ui-generate --page <name> (单页面生成)
• /prd-ui-generate --model pro (使用 Pro 模型)
• /prd-ui-generate --resume (恢复中断)
• /prd-ui-generate --retry-download (重试下载)

流程:

1. 创建/获取 Stitch 项目
2. 遍历 prompt.md，调用 mcp__stitch__generate_screen_from_text
3. 下载截图和代码到 prompt.md 同目录
4. 追踪生成和下载状态，支持重试

详细指南: references/phase-4-stitch-generate.md

阶段五: /prd-finalize

功能: 回填 UI 资源，完成文档。

命令: /prd-finalize

流程:

1. 读取 tracker，检查 Phase 4 完成状态
2. 验证资源完整性
3. 回填图片和代码链接到 PRD
4. 更新最终状态，标记项目完成

详细指南: references/phase-5-finalize.md

快速开始示例

用户: 我想做一个健身打卡 App

[阶段一]
用户: /prd-highlevel
Marcus: 收到，让我们开始...
→ 初始化 _tracker.md
→ 输出 highlevel.md

[阶段二]
用户: /prd-detailed
Marcus: 好的，根据 tracker，我们需要细化 3 个核心功能...
→ 细化功能 F1
→ 细化中发现需要增加新功能 -> 自动调用 Phase 1 更新
→ 完成所有细化 -> 输出 prd.md

[阶段三]
用户: /prd-ui-prompts
→ 生成 Stitch Prompts

[阶段四]
用户: /prd-ui-generate
→ 自动调用 Stitch MCP 生成 UI
→ 下载 screenshot.png 和 code.html 到本地

[阶段五]
用户: /prd-finalize
→ 回填资源到 PRD，项目交付

依赖

• /ui-ux-pro-max 技能（阶段一调用）
• Stitch MCP 工具（阶段四调用）
  • mcp__stitch__create_project
  • mcp__stitch__generate_screen_from_text

Tracker 模板

assets/_tracker-template.md