现在随便刷到的 AI 站点，几乎都是那套千篇一律的蓝紫渐变、圆角卡片、悬浮动效，仿佛从同一个模板里批量生产出来的。这种"AI 味"界面看多了难免审美疲劳，但作为开发者，又不得不承认 AI 确实提升了工作效率。
这就引出了一个有意思的矛盾：我们一边享受 AI 带来的便利，一边又在抱怨它产出的东西太同质化。尤其是在前端设计领域，审美很难量化，但用户的眼睛是雪亮的——一个"好设计"和"AI 设计"之间的差距，往往就在那几个微妙的细节里。
最近发现了一个开源项目，专门来解决这个痛点。garden-skills，来自开发者 ConardLi，在 GitHub 上已经积累了 6200 多颗星。
它不是什么框架或库，而是一套精心打磨的 Agent Skills 集合，专门给 AI 编程助手升级审美和提高效率。用了它之后，AI 生成的界面终于能看了，甚至能称得上"高级"。
项目介绍
garden-skills 是一个面向 Claude Code、Cursor、Codex 等 AI 编程代理的开源技能集合。它最大的特点是，不是零散的提示词拼凑，而是把每个技能都做成了完整的工程化单元——包含逻辑定义、文档说明、参考资料、执行脚本和素材资源。
开发者 ConardLi 的初衷很直接：他发现很多人在用 AI 辅助编程时，经常遇到两个问题——一是 AI 生成的界面太难看，审美不在线；二是工作流程不稳定，同样的需求每次得到的结果差异很大。garden-skills 就是为了解决这两个问题而生的。
目前包含四个核心技能模块：
- web-design-engineer（网页设计工程师）
- web-video-presentation（网页视频演示）
- gpt-image-2（图像生成提示词）
- kb-retriever（本地知识库检索）
每个模块都经过精心设计，可以独立使用，也可以组合在一起发挥更大威力。
核心亮点
25 种风格配方，告别千篇一律
最让人眼前一亮的是 web-design-engineer 模块，它内置了 25 种精心调校的风格配方，包括 Linear、Aesop、Pentagram、Bloomberg、Stripe Press、Mid-Century 等等。
每个配方都不是随便起个名字，而是包含了具体的调色板、字体选择、标志性设计手法和需要避免的反模式。
4 个技能模块，覆盖全场景
garden-skills 的四个模块各司其职，又能协同工作：
- web-design-engineer：专注于网页设计，从需求分析到设计系统再到完整实现，六步走流程让 AI 真正像个设计师一样思考。
- web-video-presentation：把文章或稿子一键变成 16:9 的网页演示，23 种主题随意切换，还支持 TTS 配音，录演示视频超方便。
- gpt-image-2：专业级的图像生成提示词引擎，18 种视觉分类，80+ 结构化模板，海报、UI 样机、技术图通通搞定。
- kb-retriever：本地知识库精准检索，不会把文件一股脑塞进上下文，而是分层检索、精准定位。
工程化交付，稳定可靠
和网上随便复制粘贴的提示词不同，garden-skills 的每个技能都是完整的工程化单元。每个技能都有自己的 SKILL.md 定义文件、README 说明文档、references 参考资料、scripts 执行脚本和 assets 素材资源。
这种结构有两个好处：一是技能按需加载，不占用主上下文；二是规则可以独立更新，脚本可以长期复用。团队使用时，可以把这套东西作为标准工作流程，避免每个人都有自己的"私人提示词"，最后谁都看不懂谁的。
六大平台支持，一键安装
garden-skills 支持 Claude Code、Cursor、Codex 等六大主流 AI 编程平台。最推荐的是用 npx 命令，一行代码就能搞定——可以选择安装全部四个技能，也可以只安装自己需要的那个。
快速上手
以下是最常用的三种安装方式：
方式一：npx 命令行安装（推荐）
最简单快捷的方式，一行命令搞定：
# 安装所有四个技能（最新版）
npx skills add ConardLi/garden-skills
# 只安装一个技能（比如 web-design-engineer）
npx skills add ConardLi/garden-skills -s web-design-engineer
# 全局安装（安装到 ~/.skills）
npx skills add ConardLi/garden-skills -s gpt-image-2 --global
# 指定目标平台
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code方式二：Claude Code 插件市场
如果用的是 Claude Code，可以直接从插件市场安装：
/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills方式三：GitHub Releases 下载
需要固定版本时，可以从 GitHub Releases 下载 immutable 的 zip 包：
# 下载指定版本
SKILL=web-design-engineer
VERSION=1.2.1
curl -fsSL -o "${SKILL}.zip" \
"https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"
# 验证校验和（推荐）
curl -fsSL -o "${SKILL}.zip.sha256" \
"https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"
# 解压到技能目录
unzip -q "${SKILL}.zip" -d .claude/skills/安装完成后，直接在 AI 编程助手里调用这个技能就行。比如：
"用 web-design-engineer 帮我设计一个产品官网，风格用 Linear，产品是一个 AI 笔记应用，主要功能是智能整理、知识图谱、多端同步。"
AI 就会按照六步设计流程，先跟你确认需求，然后定义设计系统，再出原型，最后生成完整的页面。
总结
garden-skills 这个项目最让人欣赏的地方，是它把"个人经验"转化成了"可安装的技能包"。以前，只有 ConardLi 这样的高手才能写出好的提示词，现在，每个人都能通过安装这些技能，让自己的 AI 助手"变得更聪明"。
苏米注：这个项目的工程化思路值得学习——把零散的提示词升级为可复用、可版本管理的技能单元，不仅解决了审美问题，更解决的是团队协作中的标准化问题。
对于普通开发者来说，它是一个现成的工具箱，解决了"AI 审美太差"和"流程不稳定"这两个痛点；对于团队来说，它提供了一个工程化的参考范式，可以把工作流程、设计规范、最佳实践都封装成 Skill，避免口口相传的低效。