garden-skills 是前端创作者 ConardLi 开源的 Claude Skill 集合，目前含 4 个精选 skill：web-design-engineer（把 AI 生成的 Web 产物从能用推到有设计判断）、web-video-presentation（把文章/口播稿做成可录屏的网页演示视频）、gpt-image-2（GPT Image 2 图像生成/编辑）、kb-retriever（本地知识库渐进式可溯源检索）；支持 skills CLI（npx）、Claude Code 插件市场、Releases 钉版本 .zip（带 SHA-256 校验）等多种安装方式。
来源：README.zh-CN 目录 + marketplace.json（4 plugins） 查看 GitHub 仓库 →ConardLi 是国内知名前端创作者，他把自己常用的 4 个高质量 Claude Skill 开源策展成 garden-skills，每个都解决一类具体且高频的需求：web-design-engineer 用「反 AI 俗套清单 + 六步设计工作流」对抗千篇一律的生成式 UI、把 AI 出的网页推向「精致克制有设计判断」；web-video-presentation 把文章/课程转成 1920×1080、点击驱动、适合录屏的 Vite+React 演示（口播节拍对应视觉 step）；gpt-image-2 带 18 大类 80+ 提示词模板做图像生成/编辑且能适配不同 Agent 环境；kb-retriever 做分层索引、可溯源、不撑爆上下文的本地知识库检索。配多种安全安装方式（npx skills CLI、插件市场、Releases 钉版本 + SHA-256）。「知名创作者精选 + 每个 skill 都打磨到位 + 中文友好」让它 5.5K★，是 Claude Skill 策展集里质量导向的代表。
来源：README.zh-CN 各 skill 描述 / 安装方式把 Agent 当设计工程师约束，定义六步工作流（需求→上下文→设计系统→v0→完整构建→验证），用反 AI 俗套清单避免千篇一律的生成 UI；覆盖 HTML/CSS/JS/React 原型、响应式、动效，内置 inline React+Babel、CSS tokens、oklch() 配色、container queries、reduced-motion 等实现规则，还有设备框/幻灯片引擎/动画时间线/仪表盘等高级模式参考。
来源：README.zh-CN web-design-engineer 节把原始文章转口播稿、把口播节拍映射成全屏视觉 step，构建固定 1920×1080 舞台、按视口缩放、点击/键盘驱动 (chapter,step) 游标的 Vite+React+TS 演示；在稿子/主题/outline/开发/可选音频合成前设硬 checkpoint，悬浮才出现的进度控制保持录屏画面干净，多套主题 token（paper-press 到 terminal-green）。
来源：README.zh-CN web-video-presentation 节面向 GPT Image 2 与 OpenAI 兼容图像接口的图像 skill，三种运行模式自适应不同 Agent 环境（Mode A 本地生图 / Mode B 委托宿主原生图像工具 / Mode C 纯提示词顾问），每次任务先做模式探测；references/ 下 18 大类 80+ 结构化提示词模板，覆盖海报/UI 样机/信息图/架构图/分镜等，生成图与 prompt 存 garden-gpt-image-2/ 便于复用审查。
来源：README.zh-CN gpt-image-2 节本地知识库检索 skill，谨慎/渐进/可溯源：不直接加载整文件，先走分层 data_structure.md 导航缩小候选，再按文件类型正确处理（PDF/Excel 强制「先学习 reference 再处理」），组合关键词检索+局部窗口读取+同义词扩展+多轮迭代（最多 5 轮有边界），内置 grep/pdftotext/pdfplumber/pandas 工作流并强调答案来源，从 Markdown/文本/PDF/Excel 带来源回答而不撑爆上下文。
来源：README.zh-CN kb-retriever 节方式 A：skills CLI（npx，可一次装整仓 4 个 skill、装单个、装全局 ~/.skills 或当前项目 ./.skills、指定目标 Agent、钉具体 release）；方式 B：Claude Code 插件市场；方式 C：Releases 钉版本 .zip 并校验 SHA-256（无人值守强烈建议）；方式 D：手动拷贝；方式 E：git submodule。每个 skill 独立版本化发布。
来源：README.zh-CN 安装（5 种方式）+ per-skill releaseswebsite/（398 文件）是各 skill 的展示站，demo/ 有示例，dist/ 放成品。README 提供中/英/日三语言，每个 skill 有独立 README + SKILL.md。MIT 协议。
来源：tree（website/demo/dist）+ README 多语言garden-skills 是一个 Claude Skill 策展仓库，核心是 skills/（236 文件）下 4 个独立 skill，每个遵循 SKILL.md（主指令）+ references/（模板/参考文档）+ 可选脚本的结构。.claude-plugin/marketplace.json 把 4 个 skill 注册为插件市场条目（presentation/web-design/knowledge-base/image-generation skills）。website/（398 文件）是展示站（仓库主语言识别为 CSS 即因此），demo/ + dist/ 放示例与成品图。分发上每个 skill 独立版本化打 tag（web-design-engineer-v1.1.0、web-video-presentation-v1.1.5 等），支持 npx skills CLI / 插件市场 / Releases 钉版本 .zip（SHA-256 校验）/ 手动 / submodule 多种安装，且 CLI 支持钉具体 release 保证可复现。设计判断：它和「海量 skill 清单」类仓库相反，走「少而精」——只放 4 个但每个都深度打磨（web-design 的反 AI 俗套清单、gpt-image-2 的模式探测 + 80+ 模板、kb-retriever 的分层可溯源检索都体现了真实工程思考），且每个 skill 自带展示站和多语言文档。这种「知名创作者精选 + 质量导向 + 可复现安装」是 Claude Skill 生态里值得借鉴的策展范式；价值上限取决于这 4 个领域是否覆盖你的需求，skill 数量少是刻意取舍而非不足。
来源：tree + marketplace.json + README.zh-CN 安装/skill 结构中心为项目本体，内环 = 核心功能模块，外环 = 关键技术依赖；按 deep.json 中的 core_features 与 tech_stack.key_deps 自动生成
skills CLI（npx）— 安装与版本管理Vite + React + TypeScriptGPT Image 2 / OpenAI 兼容图像接口grep / pdftotext / pdfplumber / pandasClaude Code 插件市场 + 多 Agent 兼容1. 用 AI 做有设计感的网页/落地页/仪表盘：装 web-design-engineer，用六步工作流 + 反 AI 俗套清单避免千篇一律的生成 UI；2. 把文章/课程/产品做成演示视频：装 web-video-presentation，文章转口播稿 + 全屏视觉 step，做适合录屏的网页演示；3. 图像生成/编辑：装 gpt-image-2，用 80+ 提示词模板出海报/UI 样机/架构图/分镜，模式自适应不同 Agent；4. 本地知识库问答：装 kb-retriever，对本地 Markdown/PDF/Excel 做可溯源、不撑爆上下文的渐进检索；5. 团队复现安装：用 skills CLI 钉具体 release + SHA-256 校验，保证团队装到一致版本。
来源：README.zh-CN 各 skill 适合场景每个 skill 独立版本化发布：web-design-engineer v1.1.0（2026-05-12）、web-video-presentation v1.1.5（2026-05-11）、gpt-image-2 v1.0.3、kb-retriever v1.0.0。仓库 2026-04-21 创建、pushed 到 2026-05-12，各 skill 按自己的节奏迭代。Releases .zip 带 SHA-256 供校验。
来源：GitHub Releases API（per-skill tags）+ README.zh-CN如果你做网页设计、演示视频、图像生成或本地知识库检索，garden-skills 是质量导向的 Claude Skill 精选：ConardLi 把 4 个常用 skill 打磨到位，每个都有真实工程思考（反 AI 俗套清单、模式探测、分层可溯源检索），安装可复现还带 SHA-256 校验。务实建议：1) 它是「少而精」——先看这 4 个领域是否覆盖你的需求，是就值得装，不是就别期待大而全；2) 用 npx skills CLI 按需装单个 skill（钉具体 release 可复现），别整仓克隆（website 占一半体积）；3) web-design-engineer 是亮点，用它的六步工作流 + 反俗套清单让 AI 出的网页有设计感；4) gpt-image-2 需 GPT Image 2 / OpenAI 兼容接口（付费），注意成本；5) 效果主观无 benchmark，先在你的 Agent 上试关键场景；6) 非 Claude Code 环境注意 skill 完整体验未必齐平，跟各 skill 自己的版本线。
来源：综合分析garden-skills 是前端创作者 ConardLi 开源的 Claude Skill 集合，目前含 4 个精选 skill：web-design-engineer（把 AI 生成的 Web 产物从能用推到有设计判断）、web-video-presentation（把文章/口播稿做成可录屏的网页演示视频）、gpt-image-2（GPT Image 2…
garden-skills 的核心功能包括：web-design-engineer：有设计判断的 Web 生成、web-video-presentation：文章→可录屏网页演示、gpt-image-2：图像生成/编辑 + 80+ 提示词模板、kb-retriever：可溯源本地知识库检索、多种安全安装方式。
ConardLi 是国内知名前端创作者，他把自己常用的 4 个高质量 Claude Skill 开源策展成 garden-skills，每个都解决一类具体且高频的需求：web-design-engineer 用「反 AI 俗套清单 + 六步设计工作流」对抗千篇一律的生成式 UI、把 AI 出的网页推向「精致克制有设计判断」；web-video-presentation 把文章/课程转成 1920×1080、点击驱动、适合录屏的…
1. 用 AI 做有设计感的网页/落地页/仪表盘：装 web-design-engineer，用六步工作流 + 反 AI 俗套清单避免千篇一律的生成 UI；2. 把文章/课程/产品做成演示视频：装 web-video-presentation，文章转口播稿 + 全屏视觉 step，做适合录屏的网页演示；3.