AI 编程助手不好用?可能是你没装对 Skill

4 组 garden-skills 覆盖网页设计、视频演示、图像生成和知识库检索，让 AI Agent 真正进入生产流。

如果你还在让 AI 写「千篇一律」的网页、手动一张张生图、对着知识库不知所措，这篇文章就是为你准备的。

先说结论

真正让 AI 编程助手变强的，不是无脑堆插件，而是给它装上能被稳定复用的工作方法。

garden-skills 的价值就在这里：它不是一个「大而全」的工具包，而是把网页设计、视频演示、图像生成、知识库检索这 4 个高频场景，分别打磨成可复用的生产级 Skill。

这篇适合谁看？

• 你正在用 Claude Code、Cursor、Codex CLI 等 AI 编程助手。
• 你觉得 AI 写页面、做图、查资料时质量不稳定。
• 你想知道 Skill 到底应该怎么选、怎么装、怎么用。
• 你不想乱装一堆插件，只想先挑最有用的几个。

阅读路线

2. 先看「隐藏技能系统」，理解 Skill 是什么。
4. 再看 4 个核心 Skill 分别解决什么问题。
6. 最后看安装指南和避坑建议，按自己的平台选择一种方式落地。

先理解：AI 编程助手的隐藏技能系统

用过 Claude Code、Cursor 的朋友都知道，AI 编程确实爽。但你有没有发现一个问题：

每次让AI写个页面，出来的都是圆角卡片 + 毛玻璃 + 居中布局 —— 千篇一律。

这不是AI不行，而是你没装对Skill。

什么是 Skill？简单说，它就是一份给 AI Agent 的说明书。你把 Skill 文件放到指定目录，AI 在遇到相关任务时，就会自动加载这份说明书，按照里面的规范来工作。

Skill 的文件夹结构长这样：

my-skill/
├── SKILL.md      ← 核心：告诉AI什么时候用 + 怎么用
├── README.md     ← 给人看的文档
├── references/   ← 可选的参考文档（AI按需加载）
├── scripts/      ← 可选的辅助脚本
└── assets/       ← 可选的模板、字体、图标

其中最核心的就是 SKILL.md 文件——它用清晰的 frontmatter 元数据和指令，告诉AI：

• 什么时候触发这个Skill（通过 description 字段匹配）
• 具体该怎么干活（正文中的详细指令）

今天要介绍的 garden-skills，就是这样一个精心打磨的 Skill 合集。作者 ConardLi 把它完全开源在了 GitHub 上（4.1k+ Stars），包含 4 个生产级 Skill，兼容 Claude Code、Cursor、Codex CLI 等六大平台。

先上一张整体架构图，让你一目了然：

Skill ①：web-design-engineer，让网页不再像模板

它解决什么问题？

AI 生成的网页有个通病：**看起来都像是一个模子刻出来的**。圆角卡片、毛玻璃效果、居中大标题……虽然能用，但谈不上设计感。

web-design-engineer 内置了一份 “反AI俗套黑名单” 和 520行高级模式参考库，专门解决这个问题。

六步设计工作流

这个 Skill 将 AI 视为一名"设计工程师"，执行严格的设计流程：

技术亮点

• oklch() 配色体系：比传统 HSL/RGB 更符合人眼感知，颜色更和谐
• Container Queries：容器查询，实现真正精细的响应式设计
• CSS Tokens：统一的样式变量管理
• inline React + Babel：无需构建工具即可运行 React 组件原型
• reduced-motion 处理：尊重用户无障碍偏好

Skill ②：web-video-presentation，把脚本变成视频演示

它解决什么问题？

做视频内容最痛苦的是什么？**剪辑**。写稿 1 小时，剪辑 3 小时。这个 Skill 直接把你的文字稿变成可录屏的交互式网页演示。

工作流程

核心特性

• 1920×1080 固定舞台：按视口缩放，录屏画面清晰统一
• 点击/键盘驱动：每按一次前进一个 Step，完美匹配口播节奏
• 悬浮才显示进度控制：录屏时画面干干净净，没有多余 UI
• 多种视觉主题：从"纸媒风格"到"终端绿"多种设计语言可选
• 关键节点暂停确认：脚本、主题、大纲、实现模式、音频——每一步都让你把关
• 可选音频合成：支持在关键节点加入口播音频

简单说：你负责写稿，AI 负责把所有视觉呈现搞定，你只需要打开录屏软件，一键点击播放，一个高质量的视频就出来了。

Skill ③：gpt-image-2，用模板稳定生成专业图片

它解决什么问题？

AI 生图大家都会，但 Prompt 写得好不好，效果天差地别。这个 Skill 内置了 80+ 个结构化 Prompt 模板，覆盖 18 大视觉类别，让你每次生图都是专业级水准。

三种运行模式

18 大视觉类别

这 80+ 个模板覆盖了几乎所有常见生图场景：

每个模板都经过结构化设计，你只需要说出需求（比如"帮我生成一张科技产品海报"），AI 就会自动匹配最佳模板并填充内容。

Skill ④：kb-retriever，让知识库检索不爆上下文

它解决什么问题？

想让 AI 基于本地知识库回答问题，最常见的做法是：**直接把整个文件塞给 AI**。但文件一多，上下文窗口立刻爆炸，不仅费钱，效果还差。

kb-retriever 采用了一种渐进式、可溯源的检索策略，聪明地解决这个问题。

渐进式检索流程

核心机制

2. 先导航，再搜索：通过分层的 data_structure.md 文件，先了解知识库里有什么，再决定搜哪里
4. “先学习后处理”：对于 PDF 和 Excel 文件，强制 AI 先阅读内置的处理文档，确保用正确的方法解析
6. 关键词 + 同义词 + 多轮迭代：找不到就换词再找，但严格限制最多 5 轮
8. 局部窗口读取：只读匹配到的段落，绝不加载整个文件
10. 来源可追溯：每条答案都标注来自哪个文件的哪个位置

内置工具链

这个 Skill 特别适合：**技术文档库、产品手册、研究报告、法律文书**等需要在大篇幅文档中精准定位信息的场景。

怎么安装：5 种方式一次列全

下面把这五种安装方式的所有命令完整列出，你根据自己的场景选一种即可。

🚀 方式 A：skills CLI（npx）⭐ 推荐

一行命令，全自动安装（自动识别 Agent 类型）：

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
npx skills add ConardLi/garden-skills -s web-video-presentation
npx skills add ConardLi/garden-skills -s kb-retriever

安装到全局（所有项目可用）：

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/生产环境）：

npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer

管理命令：

npx skills list
npx skills find web-design
npx skills update
npx skills remove kb-retriever

🚀 方式 B：Claude Code 插件市场

在 Claude Code 会话中执行以下命令：

/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills

插件包与 Skill 对照表：

🚀 方式 C：Release .zip 钉版本安装

适用于 CI/CD、Docker 部署、内网环境等需要固定版本的场景：

SKILL=web-design-engineer
VERSION=1.0.0
curl -fsSL -o "${SKILL}.zip" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"
curl -fsSL -o "${SKILL}.zip.sha256" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"
unzip -q "${SKILL}.zip" -d .claude/skills/

各 Skill 最新稳定版本：

🚀 方式 D：手动拷贝（Git Clone）

git clone https://github.com/ConardLi/garden-skills.git
cp -r garden-skills/skills/web-design-engineer  your-project/.claude/skills/
cp -r garden-skills/skills/web-design-engineer  your-project/.agents/skills/

Agent 下次扫描工作目录时，会自动发现 Skill。

🚀 方式 E：Git Submodule（团队协作推荐）

git submodule add https://github.com/ConardLi/garden-skills.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer
cd vendor/garden-skills
git checkout web-design-engineer-v1.0.0

这种方式的好处是：**整个团队使用相同版本的 Skill**，且可以随主仓库一起更新。

能在哪些平台用？

这套 Skill 不挑 Agent，六大主流平台全部验证通过：

跨平台迁移超级简单： 把 .claude/skills/web-design-engineer 文件夹直接复制到 .agents/skills/web-design-engineer，就能从 Claude Code 迁移到 Cursor。

避坑指南：Skill 不是装得越多越好

⚠️ 不要犯这些错

2. 别一上来装一堆 Skill：每个 Skill 都会占用上下文空间，装多了反而让 AI"分心"
4. 别装"大而全"的包：你不知道里面装了啥，可能混入高权限的 Skill
6. 别用自动 commit/push 的 Skill：尤其是新手，容易失控
8. 建议从 1-2 个开始：熟练后再逐步添加

✅ 推荐的入门路径

如果你是第一次接触 Agent Skill，建议这样开始：

第一步，装上你最需要的那个 Skill：

npx skills add ConardLi/garden-skills -s web-design-engineer

第二步，试试让 AI 写一个落地页，感受设计质量的提升。

第三步，按需补充其他 Skill：

npx skills add ConardLi/garden-skills -s gpt-image-2
npx skills add ConardLi/garden-skills -s kb-retriever

第四步，定期更新：

npx skills update

总结：先装对，再装多

garden-skills 这 4 组 Skill，每一组解决一个核心痛点：

Skill 选对，效率翻倍。 别再乱装了，把这 4 组用好，顶得上 20 个吃灰的 Skill。