🎉 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 个阶段概览

阶段	命令	作用
Phase 1	`/prd-highlevel`	🧠 高层需求收集 - 从零开始，收集你的想法，生成宏观需求文档
Phase 2	`/prd-detailed`	📝 详细 PRD 设计 - 逐个功能细化，定义页面、元素、交互和状态
Phase 3	`/prd-ui-prompts`	✍️ Stitch Prompt 生成 - 为每个页面生成 Google Stitch 可用的提示词
Phase 4	`/prd-ui-generate`	🎨 自动 UI 生成 - 调用 Stitch MCP 自动生成 UI，下载截图和代码
Phase 5	`/prd-finalize`	📦 文档收尾 - 回填 UI 资源到 PRD，完成最终交付文档

准备好了吗？让我们从 /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 调用)

流程:

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

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

阶段二: /prd-detailed

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

命令:

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

闭环工作流:

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

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

阶段三: /prd-ui-prompts

功能: 生成 Google Stitch 提示词。

命令: /prd-ui-prompts

流程:

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

详细指南: 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 (重试下载)

流程:

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

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

阶段五: /prd-finalize

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

命令: /prd-finalize

流程:

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

详细指南: 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

idea-stitch