🚀 我的 AI 编程工具流：从立项到复盘的完整项目实战指南

本文覆盖一个软件项目从「业务立项」到「上线复盘」的完整生命周期。所有 Skill 均可在 Claude Code、Cursor、Windsurf、Continue 等平台使用，部分 MCP 通过 npm 安装。

⭐ 我的开源项目

顺便宣传一下我的几个开源项目，觉得有用的话欢迎点个 Star：

Argus — 基于 RAG 架构的开源知识库平台，Java + Vue3 + Spring AI，支持向量检索和 AI 问答。
IntelliHub — 企业级 API 开放平台，提供全生命周期管理、多租户鉴权和流量治理。
DataLoom — 像搭积木一样把在线 Excel 嵌入你的项目，前后端分离，两分钟跑通。

skill仓库： Anthropic Skills（https://github.com/anthropics/skills）

📋 总览：十阶段项目生命周期

▼
text
复制代码
立项评估 → 需求分析 → 原型设计 → 技术方案 → 编码开发（后端/前端）
    → 测试调试 → 联调验收 → 代码审查 → 发布上线 → 复盘沉淀

第一阶段：立项评估

核心目标：验证这件事「值不值得做」——客户痛不痛点？有没有价值？能不能赚钱？

立项评估这一步很多人会跳过，觉得"反正要做，评估个啥"。但我的经验是，立项阶段省的时间，后期会十倍还回来。特别是做外包或者接私活的时候，立项评估直接决定这个项目是赚钱还是赔本。

我通常的做法是：接到需求后，先用 brainstorming 让 AI 帮我梳理清楚几个问题——客户真正的痛点是什么？不解决会怎样？市面上有没有现成的解决方案？我们比竞品强在哪？投入产出比是多少？这些问题想清楚了，再决定要不要接。如果 ROI 算不过来，我会直接跟客户说「这个需求建议先不做」，而不是闷头开工。

🛠️ Skill

Skill 名称	作用	安装方式
brainstorming (Superpowers)	苏格拉底式提问，逼你把客户是谁、痛点是什么、竞品怎么做、差异化在哪、ROI 怎么算，全部盘清楚	`/plugin marketplace add obra/superpowers-marketplace` `/plugin install superpowers@superpowers-marketplace`
		📎 GitHub 源码
Web Access	自动调研竞品、行业报告、市场规模数据，不用你手动打开十个网页	`git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access`
		📎 GitHub 源码

🔧 MCP（可选）

MCP 名称	作用	安装命令
Brave Search MCP	联网搜索竞品、市场规模、行业趋势	`npm install -g @modelcontextprotocol/server-brave-search`
		📎 GitHub 源码
Firecrawl MCP	把竞品官网扒下来转成 Markdown，逐条分析	`npm install -g @mendableai/mcp-server-firecrawl`
		📎 GitHub 源码

💡 我的工作流

brainstorming 启动，AI 连续追问：
- "这个需求的提出者是谁？他具体遇到什么问题了？"
- "没有我们的方案，他现在怎么解决的？"
- "竞品有类似功能吗？做得怎么样？"
- "预估投入多少人天？预期收益是什么？"
Web Access + Brave Search 自动调研竞品和市场数据
Firecrawl 把竞品功能列表扒下来做对比分析
输出：《立项评估报告》（含痛点分析、竞品对比、投入产出预估、Go / No-Go 建议）

第二阶段：需求分析

核心目标：把"一句话需求"拆成「用户故事 + 边界条件 + 优先级 + 隐含需求 + 反例」，输出可落地的 PRD。

其实这各部分在工作中基本上是听取客户的想法，以及开会+AI的头脑风暴，很多时候是需要产品+研发反复经过多轮打磨进行最终确认的。

所有很多时候需要吧开会过程中讲的内容和想法记录下来，这部分我基本上是把腾讯会议总结下来的内容保存下来，使用这份会议纪要搭配相关的skill，生成对应的PRD文档，这部分完全可以是根据需要产出的内容描述，让skill-creator帮助我们去生成合适的skill

🛠️ Skill

Skill 名称	作用	安装方式
writing-plans (Superpowers)	把模糊需求拆成可执行的用户故事，每个故事 2-5 分钟能验证	随 Superpowers 自动安装
		📎 GitHub 源码
skill-creator	如果分析过程中发现缺某个专用 Skill（比如"电商订单状态机分析"），当场造一个	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator ~/.claude/skills/skill-creator`
		📎 GitHub 源码

🔧 MCP（可选）

MCP 名称	作用	安装命令
Filesystem MCP	直接写 PRD、用户故事、Scope 文档到本地	`npm install -g @modelcontextprotocol/server-filesystem`
		📎 GitHub 源码
SQLite MCP	用数据库梳理实体关系，验证业务规则是否自洽	`npm install -g @modelcontextprotocol/server-sqlite`
		📎 GitHub 源码

💡 我的工作流

writing-plans 输出用户故事列表（格式：As a [角色], I want [功能], so that [价值]）
AI 自动识别隐含需求（比如"用户注册"隐含"手机号格式验证""重复注册判断""短信发送失败重试"）
AI 自动列举反例（比如"注册时手机号已存在""短信验证码过期""网络超时"）
按 MoSCoW 法排优先级（Must have / Should have / Could have / Won't have）
输出：
- PRD.md（产品需求文档）
- Scope.md（项目范围，明确做什么、不做什么）
- AC.md（验收标准，每个用户故事的 Done Criteria）

第三阶段：原型设计

核心目标：把 PRD 变成可视化的原型页面和交互流程，让开发、测试、客户都能看懂。

这是不仅是可以使用AI变成工具生成html的原型图，还可以使用Open Design （https://github.com/nexu-io/open-design）进行原型设计

Open Design 是这样一种产物：Anthropic 随 Claude Design 推出的 Agent 原生循环——发现需求、锁定方向、流式输出工件、评审、交付——不再封闭，而是变成了一个由技能、设计系统和插件组成的文件系统，你笔记本电脑上已有的编码 Agent 就能读取、编写和混搭。你的 CLI 变成设计引擎，你的笔记本变成工作坊，团队的 DESIGN.md 变成品牌契约。

它也是 Agent 时代的 Figma 替代品——不再在画布上推像素，而是用真实 CSS、真实字体、真实组件交付单页工件，直接导出 HTML / PDF / PPTX / MP4——已经由你的设计系统塑形，已经可以在你日常使用的 Agent 中运行。

Open Design 可以自定义设计规范，生成的HTML页面更加符合AI理解范围，所以还原度会更高

自定义设计规范：可以使用这个开源的 awesome-design-md 的skill来生成DESIGN.md

🛠️ Skill

Skill 名称	作用	安装方式
UI UX Pro Max	一键生成设计系统（Design System）+ 完整页面原型。你说"做一个 SaaS 后台管理页面"，它自动推理出配色、字体、布局、组件规范	`/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill` `/plugin install ui-ux-pro-max@ui-ux-pro-max-skill`
		📎 GitHub 源码
frontend-design	Anthropic 官方轻量设计 Skill，适合快速出低保真原型	`git clone https://github.com/anthropics/skills/tree/main/skills/frontend-design ~/.claude/skills/frontend-design`
		📎 GitHub 源码
html-anything	快速生成可交互的 HTML 原型，直接能在浏览器里点	在 Skill 市场搜索 "html-anything" 安装
		📎 更多 Skill 见 ClawHub
frontend-presentation-slides	把原型和设计思路生成 PPT，给客户或团队演示	`git clone https://github.com/chouraycn/frontend-presentation-slides ~/.claude/skills/frontend-presentation-slides`
		📎 GitHub 源码
awesome-design-md	原型设计skill，我们也可以根据自己的喜好来根据这个项目生成自己的design-generator	https://github.com/VoltAgent/awesome-design-md

我理想中的原型设计skill

▼
text
复制代码
design-generator 是什么
简单说，design-generator 是一个给 AI 编程工具使用的 skill。它的作用是：根据一个产品的源码、页面截图、网站 URL，或者一段产品需求，自动提取或生成这个产品的设计系统。
它最终会输出一个 DESIGN 文件夹，里面包含几类文件：
第一，DESIGN.md。它是最核心的设计规范文件，记录产品的颜色、字体、间距、圆角、组件规则、页面模板和 AI 生成页面时必须遵守的规则。
第二，preview.html 和 preview-dark.html。它们用来把 DESIGN.md 里的设计系统可视化展示出来，方便我们检查 token、组件和页面模式是否合理。
第三，example.html。它相当于一个样例页面，用来验证 AI 只拿着 DESIGN.md，能不能生成一个符合这个设计系统的页面。
第四，DESIGN_GAPS.md。它用来记录暂时无法确认的信息，比如截图看不准的颜色、源码里有冲突的 token、或者需要人工确认的设计规则。
所以，design-generator 不是单纯生成一份文档，而是把一个产品的设计语言整理成一套可以被人检查、也可以被 AI 继续使用的设计系统包。

🔧 MCP（可选）

MCP 名称	作用	安装命令
Filesystem MCP	直接生成 HTML 原型文件到本地	`npm install -g @modelcontextprotocol/server-filesystem`
		📎 GitHub 源码
Playwright MCP	自动打开浏览器预览原型，检查交互是否流畅	`npm install -g @modelcontextprotocol/server-playwright`
		📎 GitHub 源码

💡 我的工作流

UI UX Pro Max 生成设计系统和配色方案
html-anything 输出可点击的 HTML 原型（含页面跳转、表单交互）
Playwright MCP 自动打开浏览器截图，检查视觉效果
frontend-presentation-slides 生成演示 PPT
输出：
- prototype/ 目录（可交互 HTML 原型）
- design-system.md（设计规范文档）
- demo.pptx（演示文稿）

第四阶段：技术方案设计

核心目标：确定架构、技术选型、接口定义、数据库设计、任务拆解、排期。

技术方案的设计一定要详细，因为这里直接关乎到我们后续AI生成代码的质量和速度。如果技术方案写得模棱两可，AI 生成代码的时候就会「猜」，猜着猜着就偏了。

我通常是先跟 AI 确认整体架构（单体还是微服务？前后端分离还是 SSR？），然后让它输出详细的技术方案文档，包含接口定义、数据库设计、任务拆解和排期。特别是接口定义，一定要在这个阶段定下来，不然后端改接口、前端跟着改，效率极低。我倾向于让 AI 用 OpenAPI/Swagger 格式输出接口文档，这样前后端都能直接用。

还有一点很重要：技术方案要留有余量。排期的时候不要排得太满，预留 20% 的缓冲时间应对突发情况。如果方案里写死了「3 天完成」，第 4 天发现做不完就会很被动。

🛠️ Skill

Skill 名称	作用	安装方式
writing-plans (Superpowers)	把 PRD 拆解成技术任务清单，每个任务包含文件路径、代码片段、验证步骤	随 Superpowers 自动安装
		📎 GitHub 源码
using-git-worktrees (Superpowers)	为技术调研创建隔离分支，不影响主分支	随 Superpowers 自动安装
		📎 GitHub 源码
skill-creator	如果技术方案涉及特殊领域（如"微服务拆分策略""缓存一致性方案"），造一个专用 Skill 指导实现	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator ~/.claude/skills/skill-creator`
		📎 GitHub 源码

🔧 MCP（可选）

MCP 名称	作用	安装命令
Filesystem MCP	写架构文档、画流程图、生成接口定义	`npm install -g @modelcontextprotocol/server-filesystem`
		📎 GitHub 源码
Git MCP	查看现有代码结构，避免重复造轮子	`npm install -g @modelcontextprotocol/server-git`
		📎 GitHub 源码
Database MCP	设计数据库表结构，写 SQL 验证关系	`npm install -g @executeautomation/mcp-database-server`
		📎 GitHub 源码

💡 我的工作流

writing-plans 输出技术任务清单（含前后端任务拆分、依赖关系）
确定技术选型（框架、数据库、缓存、消息队列）
Database MCP 设计表结构并验证
Filesystem MCP 写《技术方案文档》和接口定义（OpenAPI / Swagger）
输出：
- tech-spec.md（技术方案文档）
- api-spec.yaml（接口定义）
- db-schema.sql（数据库设计）
- schedule.md（排期计划，含里程碑和责任人）

第五阶段：编码开发

核心目标：高效、高质量地写代码。

编码开发是整个流程中耗时最长的阶段，但也是 AI 辅助效果最明显的阶段。我现在基本上不自己从零写代码了，而是让 AI 帮我生成骨架，我来 review 和调整。

后端开发的习惯： 我坚持先用 test-driven-development 写测试，再写实现。虽然一开始会慢一些，但到后期改需求的时候，有测试兜底心里特别有底。特别是接口层和核心业务逻辑，测试覆盖率一定要高。subagent-driven-development 我主要用在需要同时改多个模块的时候，比如重构一个通用组件，让子 Agent 并行处理不同模块的替换，效率提升很明显。

前端开发的习惯： 前端我一般不自己写样式，而是用 UI UX Pro Max 先生成设计系统，然后让 AI 按设计系统输出组件代码。这样可以保证整个项目的视觉一致性。如果项目对设计要求不高，用 frontend-design 做轻量设计就够了。

🔹 后端开发

Skill 名称	作用	安装方式
using-git-worktrees (Superpowers)	每个功能独立 worktree，互不干扰	随 Superpowers 自动安装
		📎 GitHub 源码
test-driven-development (Superpowers)	红-绿-重构，先写测试再写实现	随 Superpowers 自动安装
		📎 GitHub 源码
subagent-driven-development (Superpowers)	派发子 Agent 并行开发多个模块，自动审查	随 Superpowers 自动安装
		📎 GitHub 源码
executing-plans (Superpowers)	批量执行重复任务（如 CRUD、DTO、Service 生成）	随 Superpowers 自动安装
		📎 GitHub 源码
Everything Claude Code	多角色协作（规划 Agent、架构 Agent、TDD Agent），防失忆	`/plugin marketplace add affaan-m/everything-claude-code-marketplace`
		📎 GitHub 源码
sanyuan-skills / Skill Forge	封装业务通用 Skill（如"统一异常处理""日志规范"）	`npx skills add sanyuan0704/sanyuan-skills --path skills/skill-forge`
		📎 GitHub 源码

🔹 前端开发

Skill 名称	作用	安装方式
UI UX Pro Max	按设计系统生成组件代码和页面	`/plugin install ui-ux-pro-max@ui-ux-pro-max-skill`
		📎 GitHub 源码
frontend-design	轻量设计指导，避免 AI 味套路	`git clone https://github.com/anthropics/skills/tree/main/skills/frontend-design ~/.claude/skills/frontend-design`
		📎 GitHub 源码
html-anything	快速生成 HTML 页面和组件	在 Skill 市场搜索安装
		📎 ClawHub

🔧 MCP（可选）

MCP 名称	作用	安装命令
Filesystem MCP	边聊边改代码文件	`npm install -g @modelcontextprotocol/server-filesystem`
		📎 GitHub 源码
Database MCP	写 SQL 实时验证	`npm install -g @executeautomation/mcp-database-server`
		📎 GitHub 源码
Playwright MCP	前端实时预览和调试	`npm install -g @modelcontextprotocol/server-playwright`
		📎 GitHub 源码

💡 我的工作流

后端：

using-git-worktrees 创建隔离分支
test-driven-development 红→绿→重构
subagent-driven-development 并行处理多个模块
executing-plans 批量生成骨架代码

前端：

UI UX Pro Max 按设计系统输出组件代码
frontend-design 把关设计质量
html-anything 快速搭建页面
Playwright MCP 实时预览

第六阶段：测试调试

核心目标：确保代码质量，Bug 早发现早修复。

测试是我以前最头疼的环节，经常写完代码就急着往下跑，结果联调的时候一堆 Bug 爆出来。现在我的原则是：没写测试的代码等于没写。不是追求完美覆盖，而是核心逻辑必须有测试兜底。

systematic-debugging 这个 Skill 特别好用，它不是让 AI 瞎猜 Bug 在哪，而是按四步法系统排查——先复现问题，再缩小范围，再定位根因，最后验证修复。比我自己 Debug 快多了。dispatching-parallel-agents 我主要用在回归测试的时候，同时跑单元测试、集成测试、E2E 测试，一次性知道哪些地方有问题。

遇到搞不定的 Bug，我会启动 sigma 这个 AI 导师 Skill，它不是直接给答案，而是像导师一样一步步引导我思考，最后往往自己就能想出解决方案。

🛠️ Skill

Skill 名称	作用	安装方式
test-driven-development (Superpowers)	持续补测试，边开发边验证	随 Superpowers 自动安装
		📎 GitHub 源码
systematic-debugging (Superpowers)	四步法定位 Bug 根因	随 Superpowers 自动安装
		📎 GitHub 源码
dispatching-parallel-agents	并行跑单元测试、集成测试、E2E 测试	在 Skill 市场搜索 "parallel-agents" 安装
		📎 ClawHub
sanyuan-skills / Sigma	Bug 搞不定时，AI 导师苏格拉底式提问带你深入理解	`npx skills add sanyuan0704/sanyuan-skills --path skills/sigma`
		📎 GitHub 源码

🔧 MCP（可选）

MCP 名称	作用	安装命令
Playwright MCP	浏览器自动化测试	`npm install -g @modelcontextprotocol/server-playwright`
		📎 GitHub 源码
Fetch MCP	API 接口测试	`npm install -g @modelcontextprotocol/server-fetch`
		📎 GitHub 源码
SQLite MCP	本地数据测试	`npm install -g @modelcontextprotocol/server-sqlite`
		📎 GitHub 源码

💡 我的工作流

test-driven-development 补全遗漏的测试用例
dispatching-parallel-agents 并行跑三种测试
systematic-debugging 定位失败的测试
sigma 遇到不会的 Bug 启动 AI 导师模式

第七阶段：联调验收

核心目标：前后端接口对齐，端到端流程跑通，满足验收标准（AC）。

联调验收是整个项目最容易「翻车」的阶段。很多时候前后端各自测都没问题，一连起来就报错——字段名对不上、数据格式不一致、状态码定义不同。所以我现在联调前，会先让前后端对着接口文档对一遍，确认字段名、数据类型、返回格式、错误码定义完全一致。

verification-before-completion 这个 Skill 是我的「最后守门员」，它会强制要求提供测试通过截图、接口响应数据、数据库验证结果，否则不允许标记完成。这个机制看起来有点「反人性」，但真的帮我避免了很多「我以为我做完了，其实没做完」的情况。联调通过之后，再用 finishing-a-development-branch 合并分支、清理环境，确保代码库干净。

🛠️ Skill

Skill 名称	作用	安装方式
verification-before-completion (Superpowers)	强制验证：没有证据不能说完成。必须提供测试通过截图、接口返回数据、覆盖率报告	随 Superpowers 自动安装
		📎 GitHub 源码
Web Access	模拟真实用户在浏览器里完整走一遍流程	`git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access`
		📎 GitHub 源码
finishing-a-development-branch	联调通过后合并分支、清理环境	在 Skill 市场搜索 "branch" 安装
		📎 ClawHub

🔧 MCP（可选）

MCP 名称	作用	安装命令
Fetch MCP	逐条调用接口，验证请求参数和返回值	`npm install -g @modelcontextprotocol/server-fetch`
		📎 GitHub 源码
Database MCP	验证数据库数据是否正确写入	`npm install -g @executeautomation/mcp-database-server`
		📎 GitHub 源码
Playwright MCP	端到端自动化验收，模拟用户操作	`npm install -g @modelcontextprotocol/server-playwright`
		📎 GitHub 源码

💡 我的工作流

对照 AC.md 逐条验收
Fetch MCP 验证每个接口的输入输出
Playwright MCP 跑端到端流程（注册→登录→下单→支付）
verification-before-completion 要求提供：
- 测试通过截图
- 接口响应数据
- 数据库数据验证结果
- 覆盖率报告
全部通过 → finishing-a-development-branch 合并代码

第八阶段：代码审查

核心目标：团队协作，确保代码规范、安全、性能。

代码审查不仅仅是找 Bug，更是知识传递的过程。我 review 别人的代码时，会特别关注三点：第一，有没有潜在的安全问题（SQL 注入、XSS、敏感信息硬编码）；第二，有没有性能隐患（N+1 查询、内存泄漏、算法复杂度）；第三，代码是否符合团队的规范（命名、注释、异常处理）。

requesting-code-review 这个 Skill 帮我省了很多事——它自动整理 PR 描述、变更说明、测试覆盖率，审查者一眼就能看懂改了什么、为什么改。Code Review Expert 则是我的「资深搭档」，它从 SOLID 原则、安全性、性能、错误处理、代码质量五个维度审查，经常能发现我自己没注意到的问题。收到反馈后，receiving-code-review 会自动分类优先级，哪些是阻塞问题必须改，哪些是建议可以排后。

🛠️ Skill

Skill 名称	作用	安装方式
requesting-code-review	自动整理 PR 描述、变更说明、测试覆盖率，让审查者一目了然	在 Skill 市场搜索 "code-review" 安装
		📎 ClawHub
receiving-code-review	接收反馈后自动分类（阻塞/建议/提醒），给出修改方案	在 Skill 市场搜索 "code-review" 安装
		📎 ClawHub
sanyuan-skills / Code Review Expert	资深工程师级审查，覆盖 SOLID、安全、性能、错误处理、代码质量 5 大维度	`npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert`
		📎 GitHub 源码
skill-vetter	审查 Skill 本身质量，确保不误导 AI	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-vetter ~/.claude/skills/skill-vetter`
		📎 GitHub 源码

🔧 MCP（可选）

MCP 名称	作用	安装命令
GitHub MCP	读取 PR 差异、发 Review 评论	`npm install -g @modelcontextprotocol/server-github`
		📎 GitHub 源码
Git MCP	查看提交历史辅助审查	`npm install -g @modelcontextprotocol/server-git`
		📎 GitHub 源码

💡 我的工作流

requesting-code-review 自动整理 PR 上下文
Code Review Expert 从 5 个维度审查
receiving-code-review 接收反馈并分类
修改后再次审查 → 通过 → 合并

第九阶段：发布上线

核心目标：自动化部署，降低上线风险，确保服务稳定。

上线是整个项目最紧张的环节，也是最不能出错的环节。我的经验是：永远要有回滚方案。哪怕是再小的改动，上线前也要想好「如果出问题了，怎么在 5 分钟内回滚」。

我现在的发布流程是：先 finishing-a-development-branch 合并代码、打 Tag、写 CHANGELOG；然后用 Everything Claude Code 的 Hooks 自动检查有没有遗留的调试日志、未关闭的数据库连接、硬编码的测试数据；最后做蓝绿部署或者金丝雀发布，先放 10% 的流量观察 30 分钟，没问题再全量。部署后立即用 Fetch MCP 调健康检查接口，再用 Database MCP 验证数据库迁移有没有问题。

🛠️ Skill

Skill 名称	作用	安装方式
finishing-a-development-branch	合并代码、打 Tag、更新 CHANGELOG	在 Skill 市场搜索 "branch" 安装
		📎 ClawHub
Everything Claude Code	Hooks 自动检查遗留问题（调试日志、未关闭连接等）	`/plugin marketplace add affaan-m/everything-claude-code-marketplace`
		📎 GitHub 源码

🔧 MCP（可选）

MCP 名称	作用	安装命令
Fetch MCP	部署后调健康检查接口	`npm install -g @modelcontextprotocol/server-fetch`
		📎 GitHub 源码
Database MCP	验证数据库迁移	`npm install -g @executeautomation/mcp-database-server`
		📎 GitHub 源码

💡 我的工作流

finishing-a-development-branch 合并、打 Tag、写 CHANGELOG
Everything Claude Code Hooks 检查遗留问题
蓝绿部署 / 金丝雀发布
Fetch MCP 调 /health 确认服务正常
Database MCP 验证迁移成功

第十阶段：复盘沉淀

核心目标：项目结束后复盘得失，沉淀文档和知识库，下次做得更好。

复盘是我认为最有价值但最容易被忽略的环节。项目做完了，庆祝完就散了，下次遇到同样的问题还是踩同样的坑——这是最亏的。

我现在每个项目结束都会做三件事：第一，brainstorming 复盘——原计划是什么，实际结果是什么，差距在哪，最大的三个坑是什么，下次怎么避免；第二，把复盘内容写成文档——lessons-learned.md（经验教训）、tech-debt.md（技术债清单）、architecture-decisions.md（架构决策记录 ADR）；第三，用 skill-creator 把通用的经验教训封装成 Skill，下次遇到类似场景直接调用。

比如上次一个项目因为没考虑高并发，上线就挂了，复盘后我封装了一个「高并发场景设计检查清单」Skill，后面每个项目都会自动触发检查。这才是真正的「一次踩坑，终身免疫」。

🛠️ Skill

Skill 名称	作用	安装方式
brainstorming (Superpowers)	项目复盘：哪些地方做得好？哪里踩坑了？下次怎么避免？	`/plugin install superpowers@superpowers-marketplace`
		📎 GitHub 源码
skill-creator	把复盘中的经验教训封装成新的 Skill（如"Redis 缓存穿透处理规范"）	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator ~/.claude/skills/skill-creator`
		📎 GitHub 源码
frontend-presentation-slides	把复盘成果生成 PPT，给团队分享	`git clone https://github.com/chouraycn/frontend-presentation-slides ~/.claude/skills/frontend-presentation-slides`
		📎 GitHub 源码
writing-argus-tech-doc	自定义文档编写skill	根据项目生成的每个阶段，生成不同的项目结构化文档，我的项目https://github.com/DevYangJC/Argus 文档都是通过这个文档生成的

🔧 MCP（可选）

MCP 名称	作用	安装命令
Filesystem MCP	整理文档到知识库目录	`npm install -g @modelcontextprotocol/server-filesystem`
		📎 GitHub 源码
GitHub MCP	把复盘文档提交到 Wiki 或知识库仓库	`npm install -g @modelcontextprotocol/server-github`
		📎 GitHub 源码

💡 我的工作流

brainstorming 复盘：
- 原计划 vs 实际结果
- 最大的三个坑 + 怎么避免
- 最值得复用的三个经验
Filesystem MCP 整理沉淀文档：
- lessons-learned.md（经验教训）
- tech-debt.md（技术债清单）
- architecture-decisions.md（架构决策记录 ADR）
skill-creator 把通用经验封装成 Skill，下次直接用
GitHub MCP 提交到团队知识库
frontend-presentation-slides 生成复盘 PPT，团队分享

🧰 速查总表

Skill 总表（按阶段 + 前后端）

阶段	类型	Skill	作用	安装命令
立项评估	调研	`brainstorming`	苏格拉底式提问验证价值	`/plugin install superpowers@superpowers-marketplace`
	调研	`Web Access`	自动调研竞品和市场	`git clone https://github.com/eze-is/web-access`
需求分析	拆解	`writing-plans`	拆用户故事、AC、Scope	随 Superpowers 安装
	扩展	`skill-creator`	缺啥造啥	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator`
原型设计	设计	`UI UX Pro Max`	生成设计系统 + 原型	`/plugin install ui-ux-pro-max@ui-ux-pro-max-skill`
	设计	`frontend-design`	轻量设计指导	`git clone https://github.com/anthropics/skills/tree/main/skills/frontend-design`
	原型	`html-anything`	快速生成可交互原型	在 Skill 市场搜索安装
	演示	`frontend-presentation-slides`	生成演示 PPT	`git clone https://github.com/chouraycn/frontend-presentation-slides`
技术方案	拆解	`writing-plans`	技术任务拆解 + 排期	随 Superpowers 安装
	隔离	`using-git-worktrees`	技术调研隔离分支	随 Superpowers 安装
	扩展	`skill-creator`	造专用技术 Skill	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator`
编码-后端	隔离	`using-git-worktrees`	Git worktree 隔离	随 Superpowers 安装
	开发	`test-driven-development`	TDD 红绿重构	随 Superpowers 安装
	开发	`subagent-driven-development`	子 Agent 并行	随 Superpowers 安装
	开发	`executing-plans`	批量执行	随 Superpowers 安装
	协作	`Everything Claude Code`	多角色防失忆	`/plugin marketplace add affaan-m/everything-claude-code-marketplace`
	封装	`Skill Forge`	封装业务通用 Skill	`npx skills add sanyuan0704/sanyuan-skills --path skills/skill-forge`
编码-前端	设计	`UI UX Pro Max`	按设计系统输出代码	`/plugin install ui-ux-pro-max@ui-ux-pro-max-skill`
	设计	`frontend-design`	设计把关	`git clone https://github.com/anthropics/skills/tree/main/skills/frontend-design`
	开发	`html-anything`	快速搭页面	在 Skill 市场搜索安装
测试调试	测试	`test-driven-development`	持续补测试	随 Superpowers 安装
	排查	`systematic-debugging`	四步定位 Bug	随 Superpowers 安装
	并行	`dispatching-parallel-agents`	并行跑多种测试	在 Skill 市场搜索安装
	学习	`Sigma`	AI 导师深入理解	`npx skills add sanyuan0704/sanyuan-skills --path skills/sigma`
联调验收	验证	`verification-before-completion`	强制验证才能标记完成	随 Superpowers 安装
	验收	`Web Access`	模拟真实用户走流程	`git clone https://github.com/eze-is/web-access`
	收尾	`finishing-a-development-branch`	合并分支	在 Skill 市场搜索安装
代码审查	发起	`requesting-code-review`	自动整理审查上下文	在 Skill 市场搜索安装
	审查	`Code Review Expert`	5 维度专业审查	`npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert`
	接收	`receiving-code-review`	自动分类反馈	在 Skill 市场搜索安装
	验证	`skill-vetter`	审查 Skill 质量	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-vetter`
发布上线	收尾	`finishing-a-development-branch`	合并、打 Tag、CHANGELOG	在 Skill 市场搜索安装
	检查	`Everything Claude Code`	Hooks 检查遗留问题	`/plugin marketplace add affaan-m/everything-claude-code-marketplace`
复盘沉淀	复盘	`brainstorming`	项目复盘得失	`/plugin install superpowers@superpowers-marketplace`
	沉淀	`skill-creator`	经验封装成 Skill	`git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator`
	分享	`frontend-presentation-slides`	复盘 PPT	`git clone https://github.com/chouraycn/frontend-presentation-slides`

MCP 总表（可选）

阶段	MCP	作用	安装命令
立项评估	`@modelcontextprotocol/server-brave-search`	联网搜索竞品	`npm install -g @modelcontextprotocol/server-brave-search`
	`@mendableai/mcp-server-firecrawl`	竞品网页扒取	`npm install -g @mendableai/mcp-server-firecrawl`
需求分析	`@modelcontextprotocol/server-filesystem`	写 PRD/Scope/AC	`npm install -g @modelcontextprotocol/server-filesystem`
	`@modelcontextprotocol/server-sqlite`	验证实体关系	`npm install -g @modelcontextprotocol/server-sqlite`
原型设计	`@modelcontextprotocol/server-filesystem`	生成原型文件	`npm install -g @modelcontextprotocol/server-filesystem`
	`@modelcontextprotocol/server-playwright`	预览原型	`npm install -g @modelcontextprotocol/server-playwright`
技术方案	`@modelcontextprotocol/server-filesystem`	写技术文档	`npm install -g @modelcontextprotocol/server-filesystem`
	`@modelcontextprotocol/server-git`	查看代码结构	`npm install -g @modelcontextprotocol/server-git`
	`@executeautomation/mcp-database-server`	设计数据库	`npm install -g @executeautomation/mcp-database-server`
编码开发	`@modelcontextprotocol/server-filesystem`	边聊边改代码	`npm install -g @modelcontextprotocol/server-filesystem`
	`@executeautomation/mcp-database-server`	写 SQL 验证	`npm install -g @executeautomation/mcp-database-server`
	`@modelcontextprotocol/server-playwright`	前端实时预览	`npm install -g @modelcontextprotocol/server-playwright`
测试调试	`@modelcontextprotocol/server-playwright`	浏览器自动化测试	`npm install -g @modelcontextprotocol/server-playwright`
	`@modelcontextprotocol/server-fetch`	API 测试	`npm install -g @modelcontextprotocol/server-fetch`
	`@modelcontextprotocol/server-sqlite`	数据测试	`npm install -g @modelcontextprotocol/server-sqlite`
联调验收	`@modelcontextprotocol/server-fetch`	接口联调	`npm install -g @modelcontextprotocol/server-fetch`
	`@executeautomation/mcp-database-server`	数据验证	`npm install -g @executeautomation/mcp-database-server`
	`@modelcontextprotocol/server-playwright`	端到端验收	`npm install -g @modelcontextprotocol/server-playwright`
代码审查	`@modelcontextprotocol/server-github`	PR 审查	`npm install -g @modelcontextprotocol/server-github`
	`@modelcontextprotocol/server-git`	提交历史	`npm install -g @modelcontextprotocol/server-git`
发布上线	`@modelcontextprotocol/server-fetch`	健康检查	`npm install -g @modelcontextprotocol/server-fetch`
	`@executeautomation/mcp-database-server`	迁移验证	`npm install -g @executeautomation/mcp-database-server`
复盘沉淀	`@modelcontextprotocol/server-filesystem`	整理文档	`npm install -g @modelcontextprotocol/server-filesystem`
	`@modelcontextprotocol/server-github`	提交知识库	`npm install -g @modelcontextprotocol/server-github`

📦 安装指南

安装 Claude Code

▼
bash
复制代码
npm install -g @anthropic-ai/claude-code

安装 Superpowers（核心 Skill 套件）

▼
bash
复制代码
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

从 GitHub 克隆 Skill

▼
bash
复制代码
git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access
git clone https://github.com/chouraycn/frontend-presentation-slides ~/.claude/skills/frontend-presentation-slides
git clone https://github.com/anthropics/skills/tree/main/skills/skill-creator ~/.claude/skills/skill-creator
git clone https://github.com/anthropics/skills/tree/main/skills/frontend-design ~/.claude/skills/frontend-design
git clone https://github.com/anthropics/skills/tree/main/skills/skill-vetter ~/.claude/skills/skill-vetter

安装 sanyuan-skills

▼
bash
复制代码
npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert
npx skills add sanyuan0704/sanyuan-skills --path skills/sigma
npx skills add sanyuan0704/sanyuan-skills --path skills/skill-forge

安装 UI UX Pro Max

▼
bash
复制代码
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

安装 MCP Server

▼
bash
复制代码
npm install -g @modelcontextprotocol/server-brave-search
npm install -g @modelcontextprotocol/server-filesystem
npm install -g @modelcontextprotocol/server-fetch
npm install -g @modelcontextprotocol/server-playwright
npm install -g @modelcontextprotocol/server-github
npm install -g @modelcontextprotocol/server-git
npm install -g @modelcontextprotocol/server-sqlite
npm install -g @mendableai/mcp-server-firecrawl
npm install -g @executeautomation/mcp-database-server

🖥️ 各平台 Skill 使用指南

不同 AI 编码工具放 Skill 的目录和使用方式不一样。

1. Claude Code（官方 CLI）

Skill 目录：

▼
text
复制代码
# macOS / Linux
~/.claude/skills/

# Windows
%USERPROFILE%\.claude\skills\

使用方法：

▼
bash
复制代码
# 方式一：git clone
git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access

# 方式二：Plugin 市场
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

# 方式三：skills 工具
npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert

2. Cursor

Skill 目录：

▼
text
复制代码
# macOS
~/.cursor/skills/

# Windows
%USERPROFILE%\.cursor\skills\

使用方法：

▼
bash
复制代码
git clone https://github.com/eze-is/web-access ~/.cursor/skills/web-access

配置启用：

打开 Cursor Settings（Ctrl/Cmd + ,）
找到 AI Rules 或 Skills
开启 Enable Custom Skills

注意事项：

Cursor 的 Skill 系统叫 Rules 或 Project Rules
也可以把 Skill 放到 .cursorrules 或 .cursor/rules/ 目录

3. Windsurf / Trae

Skill 目录：

▼
text
复制代码
~/.windsurf/skills/        # macOS
%USERPROFILE%\.windsurf\skills\  # Windows

使用方法：

▼
bash
复制代码
git clone https://github.com/eze-is/web-access ~/.windsurf/skills/web-access

注意事项：

支持 .windsurfrules 文件（项目根目录）
Cascade Memory 会自动记忆 Skill

4. VS Code + Continue

Skill 目录：

▼
text
复制代码
~/.continue/skills/                    # 全局
<项目根目录>/.continue/skills/          # 项目级

使用方法：

▼
bash
复制代码
git clone https://github.com/eze-is/web-access ~/.continue/skills/web-access

config.json 配置：

▼
json
复制代码
{
  "skills": [
    { "name": "web-access", "path": "~/.continue/skills/web-access" }
  ]
}

5. Roo Code（原 Cline）

Skill 目录：

▼
text
复制代码
~/.roo/skills/               # 全局
<项目根目录>/.roo/skills/     # 项目级

使用方法：

▼
bash
复制代码
git clone https://github.com/anthropics/skills/tree/main/skills/frontend-design ~/.roo/skills/frontend-design

触发方式： 在聊天中输入 @skill-name

6. GitHub Copilot

Skill 存放方式（无独立目录）：

▼
text
复制代码
<项目根目录>/.github/copilot-instructions.md

VS Code settings.json：

▼
json
复制代码
{
  "github.copilot.chat.codeGeneration.instructions": [
    { "file": "path/to/your/skill.md" }
  ]
}

7. WorkBuddy / CodeBuddy

Skill 目录：

▼
text
复制代码
~/.workbuddy/skills/                    # 用户级
<项目根目录>/.workbuddy/skills/          # 项目级

使用方法：

▼
bash
复制代码
git clone https://github.com/chouraycn/frontend-presentation-slides ~/.workbuddy/skills/frontend-presentation-slides
clawhub install pmwalkercao/codebuddy-code

📋 各平台速查表

平台	Skill 目录	项目级配置	触发方式
Claude Code	`~/.claude/skills/`	不支持	自动匹配 / `/skill-name`
Cursor	`~/.cursor/skills/`	`.cursorrules`	自动读取
Windsurf	`~/.windsurf/skills/`	`.windsurfrules`	自动读取
Continue	`~/.continue/skills/`	`.continue/skills/`	config.json
Roo Code	`~/.roo/skills/`	`.clinerules`	`@skill-name`
Copilot	无	`.github/copilot-instructions.md`	自动读取
WorkBuddy	`~/.workbuddy/skills/`	`.workbuddy/skills/`	`/skill-name`
Codex	`~/.codex/skills/`	`AGENTS.md（根目录）`	`自动读取`

🎯 总结

Skill vs MCP 的区别

维度	Skill	MCP
本质	AI 的"经验包"，教 AI 怎么做事	AI 的"手脚"，让 AI 能操作外部系统
来源	GitHub / Claude Code 插件市场 / ClawHub	npm / GitHub
安装	`git clone` / `/plugin install` / `npx skills add`	`npm install -g`
作用	编码方法论、设计系统、审查标准、工作流程	文件操作、数据库查询、API 调用、浏览器控制

完整工作流（一键复制）

▼
bash
复制代码
# 1. 装 Claude Code
npm install -g @anthropic-ai/claude-code

# 2. 装 Superpowers（核心骨架）
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

# 3. 装前端设计
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# 4. 装代码审查
npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert

# 5. 装 AI 导师
npx skills add sanyuan0704/sanyuan-skills --path skills/sigma

# 6. 装浏览器自动化
git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access

# 7. 装演示工具
git clone https://github.com/chouraycn/frontend-presentation-slides ~/.claude/skills/frontend-presentation-slides

# 8. 装 MCP（按需）
npm install -g @modelcontextprotocol/server-brave-search
npm install -g @modelcontextprotocol/server-filesystem
npm install -g @modelcontextprotocol/server-fetch
npm install -g @modelcontextprotocol/server-playwright
npm install -g @modelcontextprotocol/server-github
npm install -g @modelcontextprotocol/server-git
npm install -g @modelcontextprotocol/server-sqlite
npm install -g @mendableai/mcp-server-firecrawl
npm install -g @executeautomation/mcp-database-server

三条核心心法

立项决定成败
- brainstorming 不让你盲目开干，先验证价值
- 如果 ROI 算不过来，宁可不做
需求决定边界
- writing-plans 把模糊需求拆成用户故事 + AC
- 边界条件和反例不写清楚，开发阶段全是坑
复盘决定成长
- 每个项目结束必须复盘
- 踩过的坑要封装成 Skill，下次自动避开
- 经验不沉淀，等于白干

最后：工具只是手段，核心还是人对业务的理解。立项时想清楚「为什么做」，需求阶段想清楚「做什么」，开发时想清楚「怎么做」，上线后想清楚「怎么做得更好」——这才是完整的项目管理闭环。