Garden Skills

花园老师的开源 Agent Skills 集合，面向 Claude Code、Cursor、Codex 等所有支持 SKILL.md 格式的 AI 编程代理。

web-video-presentation 网页视频 / 演示	web-design-engineer 设计 / 前端
gpt-image-2 图像生成 / Prompt	beautiful-article 任意素材 → 一篇精美的文章

English · 中文文档 · 日本語

目录

skills CLI（npx）

Claude Code 插件市场

Releases 钉版本 .zip

手动拷贝

Git Submodule | 兼容性

什么是 Skill？ | 贡献

致谢

许可证 |

web-video-presentation

类别： 网页视频 / 演示工程
适合： 把口播稿、文章、课程、产品演示和 talk 做成视频（网页模拟）。

web-video-presentation 用于构建适合录屏的 Vite + React + TypeScript 演示。它会把原始文章转成口播稿，把口播节拍映射成全屏视觉 step，在关键节点暂停让用户确认，并可在视觉 outline 确认后选择性合成口播音频。

亮点：

• 固定 1920×1080 舞台，并按视口缩放，适合稳定录屏
• 点击 / 键盘驱动 (chapter, step) 游标，一个口播节拍对应一个视觉 step
• 在稿子、主题、outline、开发模式和可选音频合成前设置硬 checkpoint
• 悬浮才出现的进度控制，录屏时画面保持干净
• 基于主题 token 的视觉架构，内置 23 套主题，每套独立设计签名，覆盖编辑、终端、工程、瑞士国际主义等多种风格
• 可插拔 TTS：provider-agnostic 音频 runner，内置 2 个 provider（MiniMax mmx-cli + OpenAI TTS via curl），并附带三函数契约 + ElevenLabs / edge-tts / Azure / Google Cloud / macOS say 的现成代码片段
• 脚手架产出 Vite + React + TypeScript 项目，并附带舞台原语与录屏指南

creative-voltage 创意分享

blueprint 技术架构

swiss-ikb 数据汇报

chalk-garden 科普讲解

_{↑ 23 套主题一览 —— 打开完整画廊，含真实预览图、设计签名与适合场景标签。}

链接：README · SKILL.md · 下载 v1.2.2 .zip

web-design-engineer

类别： 设计 / 前端
适合： 网页、落地页、仪表盘、交互原型、HTML 幻灯片、动画、UI 样机、数据可视化和设计系统探索。

web-design-engineer 把 AI 生成的 Web 产物从“能用”推进到“精致、克制、真正有设计判断”。它把 Agent 当作设计工程师来约束：先理解产品上下文，再声明设计系统，尽早展示 v0，然后完整构建并验证结果。

亮点：

• 用五旋钮 Design Read 把 brief 转成构图变化、动效、密度、素材依赖与品牌保真决策
• 改动现有产品前先区分 Extension、Preserve 与 Overhaul
• 只有用户明确提出验收、QA 或浏览器测试时，才运行可执行浏览器验收 harness
• 用反 AI 俗套清单和更强的视觉判断，避免千篇一律的生成式 UI
• 内置 设计方向顾问（6 学派差异化推荐）+ 25 套有 anchor 的风格配方库（Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century 等），含可粘贴的 palette / typography / signature moves / 反模式
• 覆盖 HTML / CSS / JavaScript / React 原型，以及响应式布局、动效和交互细节
• 包含 inline React + Babel、CSS tokens、oklch() 配色、container queries、reduced-motion 等实现规则
• 提供高级模式参考，覆盖设备框、幻灯片引擎、动画时间线、仪表盘等常见 Web 产物

aesop 药剂师页	muji-kenya-hara 器物目录	monocle-magazine 杂志目录	stripe-press 书籍详情
bloomberg-terminal 交易仪表盘	linear 开发者落地页	vercel-mesh 部署落地页	tufte-dataink 数据叙事
mid-century-modern 海报致敬	y2k-retrofuturism Y2K 门户	businessweek-turley 编辑封面	active-theory 电影感发布

_{↑ 25 套有 anchor 的配方里挑出最具代表性的 12 套 —— 打开完整画廊，含全部 25 个真实作品（药剂师页、交易工作站、杂志封面、Y2K 门户、Mid-Century 海报……），含签名手法与适合场景标签。}

链接：README · SKILL.md · Website · Demo · 下载 v1.2.2 .zip

gpt-image-2

类别： 图像生成 / Prompt 工程
适合： 海报、UI 样机、产品图、信息图、学术图、技术架构图、漫画、头像、分镜、品牌板和图像编辑工作流。

gpt-image-2 是面向 GPT Image 2 与 OpenAI 兼容图像接口的聚焦型图像生成 Skill。它能适配不同 Agent 环境：Garden 本地完整出图、委托宿主原生图像工具、或在没有图像工具时退化为纯提示词顾问。

亮点：

• 支持三种运行模式：Mode A Garden 本地生图、Mode B 委托宿主出图、Mode C 纯提示词顾问
• 每次任务先做模式探测，避免静默走错执行路径
• 在 references/ 下提供 18 大类、79 个结构化提示词模板
• 同时覆盖图像生成和图像编辑，并配套专门工作流与脚本
• Garden 模式下会把 prompt 与生成图片保存到 garden-gpt-image-2/，方便复用、审查和版本管理

精选线上案例

background-replacement 人像背景替换与时代广场霓虹补光。	chat-interface-scene Claude 风格 AI 助手产品截图。	live-commerce-ui 明星直播带货产品界面。	product-card-overlay 护肤落地页 Hero 主视觉。
bento-grid-infographic iPhone 16 Pro 高密度一图流解析。	system-architecture 多租户 AI 客服 SaaS 生产架构。	dense-explainer-slides AI Agent 工作机制一页讲清。	food-map City Walk 编辑型美食地图。