🌿 Garden Skills：5k★ 的开源 AI Agent 技能合集，npx 一行命令给你的 Coding Agent 装上设计/搜索/绘图能力

Garden Skills: 5k★ Open-Source AI Agent Skills Collection — npx skills add to Give Your Coding Agent Design/Search/Image Skills

为什么需要它？ / Why Garden Skills?

AI Coding Agent（Claude Code、Cursor、Codex）默认只会写代码——你要它做个好看的前端页面？它给你一个灰底白字。你要它画张图？它说「我没办法生成图像」。

Garden Skills 就是来解决这个问题的。ConardLi 开源的 4 个技能包，覆盖了 Agent 最缺的能力：

• web-design-engineer → 让 Agent 像设计工程师一样干活，告别「一眼 AI」的灰底白字
• web-video-presentation → 把文章/教程转成可录屏的 16:9 网页幻灯片
• gpt-image-2 → 基于 GPT Image 2 的图片生成，80+ 提示词模板
• kb-retriever → 本地知识库检索，让 Agent 从你的文档里找答案

装一个试试 / Try It

# 装全部 4 个技能
npx skills add ConardLi/garden-skills

# 或只装你需要的
npx skills add ConardLi/garden-skills -s web-design-engineer

# 指定 Agent（默认自动检测）
npx skills add ConardLi/garden-skills -s gpt-image-2 -a claude-code

装完重启 Agent，告诉它「帮我做一个 landing page」——它就会走完整的设计流程：需求分析 → 设计系统声明 → v0 草图 → 完整构建 → 验证。

看看装了什么：

npx skills list

四个技能包 / The Four Skills

🎨 web-design-engineer（设计/前端）

不只是「写个好看的页面」。它自带六步设计工作流：先理解产品上下文，再声明设计系统（颜色/字体/间距 token），然后出 v0，最后构建并验证。还有一个 anti-cliché 黑名单——那些千篇一律的渐变背景、居中大字、毛玻璃效果，它自动避开。

🎬 web-video-presentation（视频/幻灯片）

把一篇文章变成可录屏的 Vite + React + TypeScript 幻灯片。1920×1080 固定画幅、点击驱动的章节/步骤指针、隐藏式进度控件——录屏时画面干净。

🖼️ gpt-image-2（图片生成）

80+ 结构化提示词模板，覆盖海报/UI 原型/信息图/漫画/技术图解 18 个分类。支持三种运行模式：本地 Garden 生成、宿主工具委托、仅写提示词。

📚 kb-retriever（知识库检索）

按层渐进搜索——先看目录索引文件缩小范围，再用精确关键词 + 同义词 + 窗口读取，最多 5 轮搜索就给出带来源的答案。

# 用法：告诉 Agent
# 「从 knowledge/ 里查一下 RAG 的架构设计」

支持哪些 Agent？ / Compatibility

一个技能长什么样？ / What's Inside a Skill?

web-design-engineer/
├── SKILL.md      ← Agent 读取的指令文件（必需）
├── README.md     ← 给人看的文档
├── references/   ← Agent 按需加载的参考文档
├── scripts/      ← 可执行的辅助脚本
└── assets/       ← 模板、字体、图标

SKILL.md 是核心——YAML 头部声明技能名称和用途，正文是给 Agent 的详细指令。Agent 根据你的需求自动判断是否激活这个技能。

总结 / TL;DR

Garden Skills 让你不用再造一遍轮子：别人已经写好了经过验证的 Agent 技能，npx skills add 就能用。开源、MIT 协议、PR welcome。

如果你想让你的 Coding Agent 从「只写代码」进化到「会设计、会画图、会做演示、会查文档」——装它。

npx skills add ConardLi/garden-skills

GitHub: ConardLi/garden-skills — 5,059★, MIT License

链接: Install via skills CLI · Agent Skills Spec