ConardLi(花园)在 GitHub 一次性放出 4 个 Agent Skills,MIT 协议、可商用。四个方向:把文章做成可录屏的"伪视频"、让 AI 写出去掉 AI 味的网页、用结构化 prompt 出图、本地知识库带溯源问答。
Skill 1:web-video-presentation — 把文章变成可录屏的"伪视频"
把你写好的脚本、文章或者产品介绍拆成一小段一小段的 narration,每段对应一屏 16:9 的画面,键盘点一下就往前推,录屏出来就是视频。
适用场景:技术分享、产品发布、知识付费、不想碰 Premiere 但又想要"视频感"的人。
核心卖点:
- 1920×1080 固定舞台——录屏不会跳尺寸,自动适配任意屏幕
- 23 个内置主题——editorial、terminal、engineering、Swiss International 每个风格都不一样
- 5 个硬协作 checkpoint——脚本、主题、大纲、实现模式、音频,每一步都卡住等你确认
- TTS 引擎可换——内置 MiniMax 和 OpenAI,预留了 ElevenLabs、edge-tts、Azure、Google Cloud、macOS say 的接口
23 个主题听起来多,实际大部分人可能 editorial 和 terminal 两个就够了。TTS 那边 MiniMax 和 OpenAI 直接能用,换其他引擎要自己配。
安装:npx skills add ConardLi/garden-skills -s web-video-presentation
Skill 2:web-design-engineer — 让 AI 写出去掉 AI 味的网页
把 Agent 从"生成能跑的代码"拉到"做出有品味的前端"。落地页、Dashboard、原型、幻灯片、动画——前端能见的它基本都管。
适用场景:被吐槽"一眼 AI 拼的网页"的开发者、做独立产品的全栈、需要快速出 v0 的前端。
核心卖点:
- 6 步工作流——需求→上下文→设计系统→v0→完整构建→验证,每一步有明确的产出
- 6 大设计流派 + 25 个风格菜谱——Linear、Aesop、Pentagram、Bloomberg、Stripe Press、Mid-Century 都有,每个菜谱直接给了配色、字体、签名手法和反例清单
- 反 AI 套路的 blocklist——通用 AI UI 习气在 v0 阶段就会被拦下来
25 个菜谱理论上都能用,但试下来 Linear、Aesop、Mid-Century 这几个主流风格效果最稳。偏实验的流派落地门槛不低。
安装:npx skills add ConardLi/garden-skills -s web-design-engineer
Skill 3:gpt-image-2 — 结构化 prompt 出图
这 Skill 我装的时候以为就是个提示词收藏夹——80 多个模板塞在 references/ 里,谁不会翻啊?用了一周发现我想错了。它真正值钱的地方不是模板多,是它知道什么时候用哪个模板。你扔一句"帮我出张信息图",它会先判断你有没有图像 API、再选分类、再套结构——而不是一股脑把 80 个模板全塞进上下文。
上次做技术架构图,自己写 prompt 憋了十分钟出来的东西还是像"科技峰会背景板"。换它走了一遍流程,出来的图直接能用。
三个小毛病:
- 必须有 API key。Mode C(纯文字顾问)能帮你写 prompt,但拿不到图。
- 模板太多反而不好翻。80 个模板放在 references/ 里,不知道自己要什么得一个个翻目录。
- 图像编辑那条流水线成功率比生成低不少。
安装:npx skills add ConardLi/garden-skills -s gpt-image-2
Skill 4:kb-retriever — 本地知识库带溯源问答
给你本地的 knowledge/ 目录加一个问答入口。能读 Markdown、纯文本、PDF、Excel,不靠把整份文件塞进上下文。
适用场景:本地有结构化文档库、要从 PDF 或 Excel 里抽证据、不想被大文件撑爆上下文窗口。
核心卖点:
- 先用 data_structure.md 索引文件导航,找到目标再搜,避免一上来就加载整份文件
- 碰到 PDF 和 Excel 会先学处理方法再动手抽数据
- 检索最多跑 5 轮,不会无限试探下去
- 工具链用了 grep、pdftotext、pdfplumber 加 pandas,答案会标注来源
不过没在超大型知识库上跑过,上千个文件不知道会不会卡。
安装:npx skills add ConardLi/garden-skills -s kb-retriever
5 种安装方式
仓库支持 5 种装法,按场景对号入座:
| 方式 | 入口 | 适合谁 |
|---|---|---|
| A | skills CLI(npx) | 默认推荐。自动识别 Agent 并落到对应目录 |
| B | Claude Code 插件市场 | 只用 Claude Code、习惯插件管理 |
| C | Releases 的 .zip + SHA-256 | CI、内网、需要锁定版本 |
| D | git clone 后手动复制 | 想 fork 自己改 |
| E | git submodule + tag ping | 大型工程要 vendor 并跟随上游 |
三个常用 flag:-s 单装某一个;--global 装到 ~/.skills 而非当前项目;-a claude-code 指定目标 Agent(默认自动识别)。
拿不准的话先用 A。大部分场景下 CLI 已经够用,CI 和生产环境再换到 C 做版本固定。
实操:一行命令装 web-design-engineer
走一遍最小可复现路径:
- 终端运行安装命令:
npx skills add ConardLi/garden-skills -s web-design-engineer - 确认落点:Claude Code → .claude/skills/web-design-engineer/;Cursor → .agents/skills/web-design-engineer/;Codex CLI → .codex/skills/web-design-engineer/
- 验证 Skill 已激活:在 AI 里说"用 web-design-engineer 帮我做一个 SaaS Landing 的 design system",如果 AI 主动列出六步流程、开始列 design tokens(颜色、字体、间距、动效),说明 Skill 已被加载。
- 生产环境固定到 tag:
npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.1.0/skills/web-design-engineer
6 种 Agent 兼容性
据仓库文档,以下环境已测试通过:
| Agent / 运行时 | Skill 安装目录 |
|---|---|
| Claude Code | .claude/skills/ 或插件市场 |
| Claude.ai(Web) | Settings → Capabilities → Skills |
| Cursor | .agents/skills/ |
| Codex CLI | .codex/skills/ |
| Gemini CLI | extension manifest |
| OpenCode | .opencode/skills/ |
Skill 格式本身是通用的——你的 Agent 只要支持 Skills 规范,把文件夹拷过去就能用。
按场景选 Skill
MIT,可商用、可 fork。
按你手头的活儿对号入座:
- 做技术分享 / 课程 / 产品 demo 视频 → web-video-presentation
- 做产品页 / Landing / Dashboard → web-design-engineer
- 量产配图 / UI 稿 / 信息图 → gpt-image-2
- 本地有知识库要带溯源问答 → kb-retriever
仓库地址:github.com/ConardLi/garden-skills