四个 Skill 让 AI 编程助手变身设计师、导演、图片大师和知识库

garden-skills 是一个开源的 Agent Skill 合集，包含四个精心打磨的 Skill，装进 Claude Code / Cursor / Codex 后，让 AI 助手获得四种专业能力：做演示视频、做精致网页、生成高质量图片、检索本地知识库。一行命令安装，立刻升级你的 AI 助手。

AI 编程助手生成的网页千篇一律、图片 prompt 写不好、演示视频不知道怎么做、本地文档检索总是撑爆上下文——garden-skills 用四个 Skill 逐一解决这些问题，每个都附带完整的方法论、模板库和质量检查机制。

四个 Skill 一览

1. web-video-presentation：口播稿变演示视频

把文章、口播稿、课程、产品演示变成可录屏的全屏视觉演示。

• 固定 1920×1080 舞台，按视口缩放，录屏画面稳定
• 一个口播节拍对应一个视觉 step，点击/键盘驱动
• 内置 23 套主题：覆盖编辑、终端、工程、瑞士国际主义等风格
• 可插拔 TTS：MiniMax / OpenAI / ElevenLabs / edge-tts / macOS say
• 硬 checkpoint：稿子、主题、outline、开发模式逐步确认，不会跑偏
• 产出 Vite + React + TypeScript 项目，附带舞台原语与录屏指南

2. web-design-engineer：AI 生成网页告别"千篇一律"

把 AI 生成的 Web 产物从"能用"推进到"精致、克制、有设计判断"。

• 六步设计工作流：需求 → 上下文 → 设计系统 → v0 → 完整构建 → 验证
• 反 AI 俗套清单：专门避免千篇一律的生成式 UI
• 25 套有 anchor 的风格配方：Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century 等，含 palette / typography / signature moves / 反模式
• 设计方向顾问：6 个学派差异化推荐
• 覆盖落地页、仪表盘、交互原型、HTML 幻灯片、动画、数据可视化

3. gpt-image-2：结构化 Prompt 生成高质量图片

面向 GPT Image 2 与 OpenAI 兼容图像接口的图像生成 Skill。

• 三种运行模式：本地生图 / 委托宿主出图 / 纯 prompt 顾问
• 18 大类、79 个结构化提示词模板：海报、UI 样机、产品图、信息图、学术图、架构图、漫画、头像、分镜、品牌板……
• 同时覆盖图像生成和图像编辑工作流
• 160+ 公开案例库：人像背景替换、直播带货界面、iPhone 拆解图、ViT 架构图、美食地图……

4. kb-retriever：不撑爆上下文的本地知识库检索

从 knowledge/ 目录检索文档，按证据回答问题。

• 分层索引：先导航知识库结构，再进入内容检索，不直接加载整文件
• 支持 Markdown、文本、PDF、Excel
• 组合关键词检索 + 局部窗口读取 + 同义词扩展 + 多轮迭代
• 最多 5 轮检索，有边界不发散
• 答案带来源，可溯源

安装方法

方式一：skills CLI（推荐，一行命令）

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

# 只装某一个
npx skills add ConardLi/garden-skills -s web-design-engineer

# 装到全局（所有项目可用）
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

方式二：Claude Code 插件市场

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

方式三：手动克隆

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

兼容性

Agent	状态
Claude Code	✅ 已验证
Claude.ai（网页端）	✅ 已验证
Cursor	✅ 已验证
Codex CLI	✅ 已验证
Gemini CLI	✅ 已验证
OpenCode	✅ 已验证

应用场景

场景 1：技术分享演示视频

传统痛点：想把博客文章做成视频演示，要学 Keynote/PPT 动画，录屏还要后期

解决方案：web-video-presentation 把文章转成口播稿 → 视觉 step，23 套主题选一个，录屏即出片

场景 2：产品落地页设计

传统痛点：让 AI 生成的网页全长一个样——圆角卡片、渐变按钮、stock photo hero

解决方案：web-design-engineer 反 AI 俗套清单 + 25 套差异化配方，Linear 风、Bloomberg 风、Mid-Century 风任选

场景 3：社交媒体图片素材

传统痛点：GPT Image 生成图片质量波动大，prompt 不知道怎么写才好

解决方案：gpt-image-2 提供 79 个结构化模板 + 160+ 真实案例参考，从架构图到海报到产品图都有对应方法

场景 4：项目文档 Q&A

传统痛点：本地文档丢给 AI，长文件直接撑爆上下文，或者 AI 瞎编答案

解决方案：kb-retriever 分层索引 + 渐进检索 + 5 轮上限 + 来源标注，不撑爆、不瞎编

常见问题

Q：什么是 Skill？

Skill 是 Agent 可以按需加载的自包含文件夹，核心是一个 SKILL.md（描述什么时候用、怎么用），配上参考文档、脚本和素材。Agent 根据描述决定是否激活。

Q：这四个 Skill 可以单独安装吗？

可以。npx skills add ConardLi/garden-skills -s <skill-name> 只装你要的那个。

Q：web-design-engineer 的 25 套配方具体是什么？

每套都有真实 anchor（对标 Linear、Aesop、Pentagram、Bloomberg Terminal、Stripe Press、Muji、Monocle 等知名设计），包含配色方案、字体选择、标志性手法和反模式。不是随机组合，是有设计判断的完整体系。

Q：gpt-image-2 需要 OpenAI API Key 吗？

Mode A（本地生图）需要。Mode C（纯 prompt 顾问）不需要——它只帮你写好结构化 prompt，你拿去任何图像生成工具用。

资源链接

• GitHub 仓库：https://github.com/ConardLi/garden-skills