garden-skills 评测：把 Claude Code 变成前端设计工程师的 Skill 合集

它解决的是 AI 前端输出的“平均脸”问题

garden-skills 解决的是一个具体且普遍的问题：AI 生成的网页总是长得差不多。默认的模型输出往往套用同一种卡片布局、同一种渐变背景、同一种圆角阴影，缺乏设计意图。这个仓库把 Agent Skills 打包成可复用的技能，让代理在动手写代码前先进入设计工程师的角色。它面向的是已经在用 Claude Code、Cursor 或 Codex 的开发者，这些人不缺生成代码的能力，缺的是让结果具备品牌感、排版节奏和动效层次的判断力。仓库里最核心的两个技能是 web-design-engineer 和 web-video-presentation，前者管静态页面和交互原型，后者管可录屏的网页演示。它们不是代码库，而是给代理的“工作手册”，里面写了流程、规则和风格参考。

SKILL.md 是代理的说明书，流程是它的骨架

Agent Skills 的机制在 Claude 的官方文档里有定义，garden-skills 遵循的就是那套规范。每个技能对应一个目录，里面有一个 SKILL.md 文件，代理读取它来理解任务目标、执行步骤和输出标准。web-design-engineer 的 SKILL.md 把工作拆成五个阶段：先理解产品背景，再声明设计系统，然后给出早期 v0 版本，接着构建完整体验，最后验证结果。它引入了一个叫 Design Read 的五维评估，包括 variance、motion、density、asset dependence 和 brand fidelity。这五个维度不是抽象形容词，而是代理在动笔前需要逐项打分的东西。它还区分了三种改造模式：extension、preserve、overhaul，分别对应小幅扩展、保留现有风格、彻底重做。这个区分很实际，因为代理经常在改一个已有产品时把原来的设计风格全毁了。

反套路清单和 25 个风格配方是真正的干货

仓库里最值得看的部分是 web-design-engineer 附带的 Design Direction Advisor 和 25 个风格配方。这些配方不是简单的“用这个字体”或“用那个颜色”，而是每个都带具体的调色板、字体选择、标志性手法和反模式。比如 aesop 配方针对药妆页面，muji-kenya-hara 针对物品目录，monocle-magazine 针对杂志目录。每个配方都写明“签名动作”和“反模式”，代理可以直接把这段内容粘贴到设计系统声明里。这种粒度的设计指导在开源项目里很少见，它把品牌设计经验编码成了机器可读的规则。另外还有一份反套路黑名单，专门阻止代理使用那些被 AI 用滥的 UI 模式，比如千篇一律的 hero 区加三个特性卡片的布局。黑名单机制是硬规则，比“请更有创意”这种提示词有效得多。

web-video-presentation 把演示变成录屏友好的舞台

另一个技能 web-video-presentation 解决的是远程录屏演示的痛点。它生成的是 Vite + React + TypeScript 项目，固定 1920×1080 的舞台，可以缩放适配视口，保证录屏时画面稳定。交互模型是点击或键盘驱动的 (chapter, step) 光标，每个视觉步骤对应一句旁白。这意味着演示者可以像播放视频一样逐帧推进，而不是滚动页面。它内置了 23 个主题，从 editorial、terminal、engineering 到 Swiss International，每个主题都有独立的设计签名。主题通过 token 架构管理，换主题不用改业务代码。它还支持可插拔的 TTS，内置 MiniMax 的 mmx-cli 和 OpenAI TTS 的 curl 脚本，另外提供了 ElevenLabs、edge-tts、Azure、Google Cloud 和 macOS say 的现成代码片段。这个设计很聪明，因为语音合成是这类工具最容易卡住的地方，提供多种接入方式能降低失败率。

安装方式有五种，但兼容性需要自己确认

README 列出了五种安装方式：用 npx 的 skills CLI、Claude Code 插件市场、从 Releases 下载固定版本的 zip、手动复制到项目目录、或者用 git submodule。最稳妥的是从 Releases 页面下载带版本号的 zip，比如 web-design-engineer-v1.3.0 和 web-video-presentation-v1.2.2，这样可以锁定已知行为。值得注意的是，仓库的默认分支是 main，最近一次推送在 2026 年 7 月，说明项目还在活跃维护。但是 README 里没有给出兼容矩阵，没有明确说哪个版本的 Claude Code 或 Cursor 支持这些技能。Agent Skills 是相对新的功能，不同代理工具对 SKILL.md 的支持程度可能不同。你在安装前最好先在自己用的工具里跑一个最小示例，确认它能正确读取 SKILL.md，再引入完整的技能目录。

限制：流程重，依赖外部服务，且没有实测数据

这个项目有明显的适用边界。web-design-engineer 的流程要求代理先做设计评审，再出 v0，再构建完整版本，每一步都有检查点。如果你只是想快速生成一个内部工具页面，这套流程会显得繁琐，代理会花大量时间在你不关心的设计决策上。web-video-presentation 的 TTS 功能依赖外部 API，MiniMax 和 OpenAI 都需要付费密钥，配置 curl 脚本和 API 环境变量本身就有学习成本。另外，仓库没有提供任何基准测试或用户反馈数据，README 里没有截图对比“用了技能”和“没用技能”的输出差异。你只能通过主题画廊和风格配方的静态预览来判断质量。最后，许可证是 MIT，这对使用很友好，但要注意每个技能目录下的 SKILL.md 可能引用了第三方工具的条款，比如 OpenAI 的 API 使用政策，这不属于 MIT 许可证的管辖范围。

替代方案：自己写 prompt 模板，或者用更轻量的设计系统

garden-skills 的替代方案不是另一个 Skill 合集，而是你自己维护的一套 prompt 模板。你可以把 25 个风格配方里的关键信息，比如调色板、字体、反模式，直接写进你的项目级 CLAUDE.md 或 Cursor 规则文件里。这样做的好处是更轻量，不依赖 SKILL.md 规范，任何支持系统提示词的代理工具都能用。坏处是你失去了流程约束，代理可能跳过设计评审直接写代码，回到原来的平均脸输出。另一个方向是使用现成的设计系统组件库，比如 Radix 或 shadcn/ui，它们把设计决策固化在组件里，代理只需要组合组件，不需要做视觉判断。garden-skills 的差异在于它把设计判断本身作为技能来训练，而不是用组件库来规避设计。如果你认同这个思路，它值得一试；如果你觉得设计评审是浪费时间，那自己写 prompt 更实际。

维护成本与升级路径

从 Releases 的节奏看，项目大约每月发布一次小版本，比如 web-design-engineer 从 v1.2.2 到 v1.3.0 间隔一个月。这意味着你如果使用 zip 安装，需要定期检查新版本。用 git submodule 的话，可以方便地拉取更新，但要注意 submodule 指向的提交可能与 Releases 的版本不一致。升级的主要成本在于验证新版本是否改变了你已有的工作流，比如 v1.3.0 可能调整了 Design Read 的评分标准，或者新增了风格配方，这会影响代理的输出。由于每个技能都是独立的目录，你可以只升级其中一个，不影响另一个。许可证是 MIT，允许你 fork 并修改，但如果你改了 SKILL.md，就失去了与上游同步的能力。整体来看，维护成本中等，关键在于你是否愿意跟踪版本更新并重新验证你的使用场景。

编辑结论

garden-skills 适合两类人：一是用 Claude Code 或 Cursor 做前端原型、落地页、数据可视化，且对视觉质量有明确要求的开发者；二是需要把文章或讲稿快速转成可录屏的 16:9 网页演示的内容创作者。不适合完全不懂设计、指望 AI 一步到位的新手，因为 web-design-engineer 的流程要求你参与设计评审，web-video-presentation 的 TTS 需要你配置外部 API。采用前先确认你的代理工具支持 SKILL.md 规范，并检查每个 Skill 的 SKILL.md 中声明的依赖，比如 MiniMax 的 mmx-cli 或 OpenAI TTS 的 curl 脚本，是否与你现有的 API 密钥和网络环境兼容。如果只是偶尔写一个简单页面，这套流程的评审和验收步骤可能显得过重，直接让代理写代码反而更快。

官方来源

1. Official documentation
2. Official README
3. Project repository
4. Release notes