AI Skill Hub收藏值得用的 AI Skill

怎么搭配使用? ​

skill 不是孤立工具,而是一条 SDD(Spec-Driven Development) 全链路流水线 —— 从"一句话想法"到"上线代码",由 8 个 skill 接力跑完,分 product / engineer / qa 三个角色,靠 2 个门控把住「对齐需求」和「确认交付」两个关键拍板点。

下面先给流水线总览大图,再按角色拆开讲每段配哪个 skill、产出什么。

💡 这套流水线沉淀自真实工程项目的 SDD 实践,这里提炼出跨项目通用的骨架 —— skill 编排顺序 + 角色分工 + 门控位置。落地到你自己的项目时,把测试 / 构建 / 分支命令换成对应技术栈即可。

🔭 SDD 全链路流水线总览 ​

┌─ product 角色 · 🗣️ 确认型(每步都要你参与对齐方向)
│   ① brainstorming     发散探索方案空间
│   ② grill-me          决策树逐分支追问收敛
│   ③ synthesize-prd    合成 PRD        →  prd.md
│   ④ baoyu-diagram     画流程图        →  diagrams/*.svg
└─

   ═══ 门控 G1 · AskUserQuestion:「PRD + 图 OK?是否启动开发?」═══
            ↓  你点选「是」

┌─ 自动化通道 · G1 拍板后一口气跑完 ⑤⑥⑦,中间不打断
│
│   engineer 角色 · 🤖 自动型
│     ⑤ writing-plans          拆 TDD 任务     →  plan.md
│     ⑥ executing-plans + TDD  逐任务红绿实现 + 每任务 1 commit
│        └ 前端任务叠加双底座 frontend-design + react-best-practices
│
│   qa 角色 · 🤖 自动型
│     ⑦ web-design-guidelines  静态质检(a11y / 对比度 / 空状态)
│        + agent-browser       真跑浏览器过验收  →  verify-log.md
└─

   ═══ 门控 G3 · AskUserQuestion:「全绿,是否 push?」═══
            ↓  你点选「是」

   ⑧ 交付 push  ·  你主导(AI 自动 commit,绝不自动 push)

三个核心认知:

1. 前半确认、后半自动 —— product(①-④) 是 🗣️ 确认型,每步都要你参与对齐方向;engineer + qa(⑤-⑦) 是 🤖 自动型,G1 拍板后可一口气跑完,中间不打断。
2. 只有 2 个对外拍板点 —— G1(启动开发) 和 G3(推送交付) 是仅有的两个强门控,都用 AskUserQuestion 让你点选,不用敲命令;其余环节 AI 自动衔接。
3. 每段都落盘成 artifact —— 想法不飘在聊天里:PRD → prd.md、流程图 → diagrams/、任务 → plan.md、验收 → verify-log.md,全部入仓。任何 AI 接手都能从文件起步,这正是 SDD 的精髓。

💡 为什么 ③ 用 synthesize-prd 落规格? —— 它把 brainstorming + grill-me 的对话共识直接合成本地 PRD markdown(双段式:需求设计 + 系统设计 + DDL),不再二次采访、不推外部 issue tracker,是这条流水线的「规格锚点」。另一种结构化 SDD 框架 OpenSpec 也能落规格,按喜好二选一,本流水线默认用前者。

💡 自动化通道怎么跑起来? —— 在 Claude Code 里可用 /goal 这类「设定目标、持续执行直到条件达成」的机制驱动 ⑤⑥⑦ 无人值守跑完;把目标条件设为「qa 验收全绿」即可。这是通用思路,不依赖特定命令。

🗣️ product 角色:从想法到 PRD(① → ④) ​

🗣️ 确认型 —— 每步都要你参与,不可全自动。这是整条流水线唯一「慢下来对齐」的地方;需求磨清楚,后面才能放手自动跑。

brainstorming(发散) → grill-me(收敛) → synthesize-prd(落 PRD) → baoyu-diagram(画图)

• ① brainstorming —— 把模糊想法铺开成可讨论的方案空间,一次问一个问题,提 2-3 个方案 + 推荐。
• ② grill-me —— 决策树每个分支追问到底,「嗯 / 差不多」不算数,要明确「OK 这样定了」才推进。
• ③ synthesize-prd —— 把前两步的对话共识合成结构化 PRD,不再采访,直接产 prd.md(含验收标准 AC 列表 + 字段表 + DDL)。
• ④ baoyu-diagram —— 把 PRD 里纯文字讲不清的部分(状态机 / 跨角色时序 / 数据流)画成 SVG,典型 3-7 张;简单需求可跳过。

Prompt 示例

用 brainstorming skill 帮我精炼这个想法:
"我想做一个能自动整理小红书爆文规律的工具"

用 grill-me skill 把上面方案的每个决策都问到底,
还有哪些没拍板的地方一次性暴露

用 synthesize-prd skill 把刚才 brainstorming + grill-me 的共识合成 PRD,
双段式(需求设计 + 系统设计 + DDL),不要再问我问题

用 baoyu-diagram skill 把这份 PRD 的核心用户路径 + 状态机画成流程图,
给非技术 stakeholder 看

⚓ 门控 G1:④ 完成后,AI 输出 PRD 简报(任务数 / AC 数 / 图张数 / 文件路径),用 AskUserQuestion 问你是否启动开发。选「是」→ 进入自动化通道;选「PRD 还要改」→ 回 ①②③ 重谈。未经你点「是」,AI 不擅自进入开发。

🤖 engineer 角色:从 plan 到代码(⑤ → ⑥) ​

🤖 自动型 —— G1 拍板后自动启动,逐任务 TDD 跑完,中间不问你。只在 3 种异常停下:失败重试超限 / 发现 plan 漏点(范围扩张) / plan 质量过低。

writing-plans(拆任务) → executing-plans + test-driven-development(TDD 执行)

• ⑤ writing-plans —— 把 PRD 拆成 2-5 分钟粒度的 TDD 任务清单,预规划文件结构 → plan.md。
• ⑥ executing-plans + test-driven-development —— 按 plan 逐任务执行,每个任务走「红(写失败测试)→ 绿(最小实现)→ 重构」,每任务 1 commit、同步勾掉 plan 复选框。

前端任务:双底座永远同步生效

如果 ⑥ 做的是前端 UI,不是裸写代码,而是叠加前端 skill 组合:

💡 frontend-design + react-best-practices 是永远同步生效的双底座,不是「先出感觉再写代码」的先后阶段 —— 编码过程中持续参考。「等写完再审」会让 cascading useEffect / 过重 import 等返工成本翻倍。

Prompt 示例

用 writing-plans skill 基于这份 PRD 拆实施计划:
任务切到 2-5 分钟粒度、每个任务内置 TDD 红绿步骤,输出到 plan.md

用 executing-plans + test-driven-development 按 plan.md 逐任务实现:
- 每个任务先写失败测试,再最小实现,绿了再重构
- 前端任务:frontend-design 自动激活 + 严格遵守 react-best-practices,
  叠加 ui-ux-pro-max(产品类型=B2B SaaS)

💡 G2 默认跳过:plan 写完只输出简报,默认继续 ⑥ 执行;你若发现 plan 严重偏差,主动叫停即可。

🤖 qa 角色:静态质检 + 运行时验证(⑦) ​

🤖 自动型 —— engineer 跑完自动衔接,不问你。跑完输出 3 份判定(commit 清单 / 验收摘要 / 完成度自检)停在 G3 前。

web-design-guidelines(静态质检) → agent-browser(运行时真跑)

• ⑦-1 web-design-guidelines —— 按 file:line 审可访问性 / 对比度 / 键盘导航 / 错误态 / 空状态,退出条件 0 critical。
• ⑦-2 agent-browser —— AI 真打开浏览器,模拟登录不同角色、真点按钮真填表单、过跨页面流程,逐条验 PRD 的验收标准 → verify-log.md。补上 SDD 闭环最后一公里:不是「看一眼应该没问题」,而是真跑给你看。

Prompt 示例

用 web-design-guidelines skill 审刚才的代码,
重点看可访问性、表单交互、空状态,按 file:line 给反馈

用 agent-browser skill 起 dev server 打开页面,
模拟登录 → 切角色 → 提交表单过一遍真实流程,
逐条验 PRD 的验收标准,有视觉 / 交互异常截图给我

💡 Windows 启动 agent-browser 见 前端 → agent-browser(connect 9222 模式,绕过 daemon 自启 Chrome 失败)。

⚓ 门控 G3:⑦ 全绿后,AI 输出 commit 清单 + 验收摘要 + 完成度自检,用 AskUserQuestion 问你是否 push。选「是」→ AI 执行推送(⑧)。这是仅有的另一个对外动作确认点 —— AI 自动 commit,但绝不自动 push。

流水线之外:横向能力 ​

上面 8 段是软件开发主线。下面几类场景不在这条流水线上,按需单独用。

📣 内容创作者:把内容变可视化 ​

baoyu-infographic(信息图) · baoyu-image-cards(社媒图卡) · HyperFrames / Remotion(程序化视频)

按平台与形式选,都不需要 PS / Figma / 剪辑软件。

用 baoyu-infographic skill 把这篇技术文章做成 1 张信息图,
layout=hierarchy,style=minimal,适合发公众号

用 baoyu-image-cards skill 把"一周 AI 工具盘点"做成 7 张图卡,
style=fresh,palette=warm

🔗 与主线衔接:product 角色走完流水线交付后,可延伸用 frontend-slides 做汇报 PPT、baoyu-image-cards 做上线种草图卡 —— 同一份 PRD 喂给不同输出物 skill。

🛠️ 运维:线上排查 + VPS 管理 ​

elk(自然语言查 ES 日志) · setup-transfer-clash(一键部署 VPS 代理节点) · tech-stack-setup(从零搭微服务基建)

按「问题域」选用 —— 排查线上问题用 elk,搭 / 维护 VPS 节点用 setup-transfer-clash,从零起一整套 Spring Cloud + K3s 基建用 tech-stack-setup。

用 elk skill 查一下 my-service 项目最近 1 小时有没有 NullPointerException,
按 traceId 关联完整调用链

⚠️ setup-transfer-clash 仅供学习和研究使用,请遵守当地法律法规。

🔍 找现成 · 🛠 自己造 skill ​

找不到合适的搭配?让 find-skills 自己搜寻推荐(兜底入口);要从零造就用 skill-creator,提供创建 → 打 description → 跑 eval → benchmark 的完整工程化流程。

用 find-skills skill 帮我找一下:
有没有专门做"代码安全审查"的 skill?

用 skill-creator 帮我从零造一个 skill:
功能 = "把 figma 设计稿转 React 组件",
按工程化流程(描述优化 → eval → benchmark)走一遍

还有别的搭配场景值得收录?欢迎在 仓库 Issues 提建议。