garden-skills 上手指途：ConardLi 的开源 Agent 技能花园
garden-skills 上手指途：ConardLi 的开源 Agent 技能花园
如果你正在使用 Claude Code、Cursor、Codex 等 AI 编码 Agent，有没有想过——能不能把优质的「技能包」像插件一样一行命令装上，让 Agent 自动获得某类专业能力？
ConardLi/garden-skills 正是为此而生。这是一个专注生产级的 Agent Skills 开源集合，目前收录了 4 个技能，覆盖网页设计、视频演示、图像生成和本地知识库检索四大场景。
先搞懂：什么是 Skill？
简单说，Skill 是 Agent 可以按需加载的「自包含技能包」。它的标准结构如下：
<skill-name>/ ├── SKILL.md ← 必需：什么时候用 + 怎么用 ├── README.md ← 给人看的文档 ├── references/ ← 可选：Agent 按需加载的扩展文档 ├── scripts/ ← 可选：确定性可执行脚本 └── assets/ ← 可选：模板、字体、图标等
一个 SKILL.md（YAML frontmatter + 指令）配合可选的辅助文件，就构成了一个完整的技能单元。Agent 会根据 frontmatter 里的 description 决定是否激活这个 Skill——所以 description 就是你和 Agent 之间的契约。
四个核心 Skill，总有一款适合你
🌐 web-design-engineer：设计工程师级别的网页构建
类别：设计 / 前端
适合场景：网页、落地页、仪表盘、交互原型、HTML 幻灯片、动画、UI 样机、数据可视化
这是整个仓库我最关注的一个 Skill。它的核心理念是：把 AI 当作「设计工程师」而非「工具人」来用——先理解产品上下文，再声明设计系统，尽早展示 v0，然后完整构建并验证结果。
六步设计工作流：
需求：理解用户要什么
上下文：建立产品感知
设计系统：声明颜色、字体、间距等 token
v0：快速出早期原型
完整构建：响应式布局 + 动效 + 交互细节
验证：检查与设计系统的偏差
亮点功能：
内置「反 AI 俗套清单」，避免千篇一律的生成式 UI
覆盖 HTML / CSS / JavaScript / React 原型
支持 oklch() 配色、container queries、reduced-motion 等现代 CSS 特性
提供高级模式参考（设备框、幻灯片引擎、动画时间线、仪表盘等）
如果你经常需要让 AI 生成「拿得出手」的网页界面，这个 Skill 几乎是必装的。
🎬 web-video-presentation：录屏级的网页演示构建
类别：网页视频 / 演示工程
适合场景：口播稿转视频、课程、产品演示、talk 录制
这个 Skill 把文章或口播稿变成可录屏的网页演示（Vite + React + TypeScript），核心亮点是「口播节拍」与「视觉 Step」的精准对齐——每个视觉暂停点都对应一段口播内容，方便录课或做演示视频。
亮点功能：
固定 1920×1080 舞台，按视口缩放，录屏效果稳定
点击 / 键盘驱动的 chapter/step 游标
硬 checkpoint 在稿子、主题、outline、开发模式、可选音频合成前强制暂停确认
悬浮才出现的进度控制，录屏时画面干净
基于 token 的多主题架构（paper-press / terminal-green 等视觉风格）
🖼️ gpt-image-2：结构化图像生成提示词工程
类别：图像生成 / Prompt 工程
适合场景：海报、UI 样机、产品图、信息图、学术图、技术架构图、漫画、头像、分镜、品牌板
面向 GPT Image 2 与 OpenAI 兼容图像接口的聚焦型 Skill，最大特点是对「运行模式」的三段式探测：
Mode A：Garden 本地生图，完整保存 prompt 与生成图片
Mode B：委托宿主原生图像工具出图
Mode C：纯提示词顾问模式（无图像工具时降级）
内置 18 大类、80+ 个结构化提示词模板，覆盖图像生成和编辑全场景，并配套专门工作流与脚本。
📚 kb-retriever：本地知识库检索
类别：检索 / 本地知识库
适合场景：从本地 knowledge/ 目录回答问题，从 Markdown、文本、PDF、Excel 中提取证据
这个 Skill 的核心哲学是「谨慎、渐进、可溯源」——不直接加载整文件，而是先走分层索引缩小候选范围，再带来源回答问题。
亮点功能：
通过 data_structure.md 分层文件先导航知识库，再进入内容检索
PDF 和 Excel 强制「先学习再处理」，必须先读 reference 文档
最多 5 轮检索轮次，探索有边界、不发散
内置 grep、pdftotext、pdfplumber、pandas 工作流
答案带来源标注，方便回查原文
五种安装方式，总有一款适合你
| 方式 | 说明 | 推荐场景 |
|---|---|---|
| A. skills CLI（npx） | 一行命令，自动识别 Agent 类型 | 任意场景，推荐默认 |
| B. Claude Code 插件市场 | 订阅插件包，一键装一组 | Claude Code 用户 |
| C. Releases 钉版本 .zip | SHA-256 校验，不可变版本 | CI / 内网 / 可复现部署 |
| D. git clone 手动拷贝 | 直接复制 skill 文件夹 | 本地 hack / 二次开发 |
| E. Git Submodule | 作为上游依赖引入 | 嵌进更大项目 |
最推荐的方式是用 npx skills add：
# 一次装上整个仓库（4 个 Skill） npx skills add ConardLi/garden-skills # 只装某一个 Skill npx skills add ConardLi/garden-skills -s web-design-engineer # 装到全局而不是当前项目 npx skills add ConardLi/garden-skills -s gpt-image-2 --global # 指定目标 Agent npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code
CI / 生产环境建议钉版本：
SKILL=web-design-engineer VERSION=1.1.0 curl -fsSL -o "${SKILL}.zip" \ "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip" # 校验后解压 shasum -a 256 -c "${SKILL}.zip.sha256" unzip -q "${SKILL}.zip" -d .claude/skills/
Agent 兼容性一览
| Agent / Runtime | Skill 路径 | 状态 |
|---|---|---|
| Claude Code | .claude/skills/<name>/ |
✅ 已验证 |
| Claude.ai 网页端 | Settings → Capabilities → Skills | ✅ 已验证 |
| Cursor | .agents/skills/<name>/ |
✅ 已验证 |
| Codex CLI | .codex/skills/<name>/ |
✅ 已验证 |
| Gemini CLI | extension manifest | ✅ 已验证 |
| OpenCode | .opencode/skills/<name>/ |
✅ 已验证 |
SKILL.md 格式本身是跨 Agent 可移植的——只要你的 Agent 支持 Skill 体系，把文件夹放进它扫描的目录就行。
写在最后
garden-skills 是一个难得的开源 Agent Skills 集合，作者 ConardLi 不仅提供了高质量的 Skill 实现，还有完善的文档、版本管理（SHA-256 校验的不可变 release）和多语言 README（中文/英文/日文）。
如果你想让 AI Agent 在特定任务上更专业、更稳定，与其反复在 System Prompt 里写规则，不如试试直接装一个 Skill。
GitHub 地址：https://github.com/ConardLi/garden-skills[1]
如果觉得有帮助，欢迎去 GitHub 点个 Star ⭐