6.2K Star！25 种风格配方让 AI 前端审美直接拉满！garden-skills把这事做彻底了。

现在随随便便刷到的 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（本地知识库检索）

每个模块都经过精心设计，可以独立使用，也可以组合在一起发挥更大威力。

核心亮点

1、25种风格配方，告别千篇一律

最让人眼前一亮的是 web-design-engineer 这个模块，它内置了25种精心调校的风格配方，包括 Linear、Aesop、Pentagram、Bloomberg、Stripe Press、Mid-Century 等等。

每个配方都不是随便起个名字，而是包含了具体的调色板、字体选择、标志性设计手法和需要避免的反模式。

2、4个技能模块，覆盖全场景

garden-skills 的四个模块各司其职，但又能协同工作：

• • web-design-engineer：专注于网页设计，从需求分析到设计系统再到完整实现，六步走流程让AI真正像个设计师一样思考。
• • web-video-presentation：把文章或稿子一键变成16:9的网页演示，23种主题随意切换，还支持TTS配音，录演示视频超方便。
• • gpt-image-2：专业级的图像生成提示词引擎，18种视觉分类，80+结构化模板，海报、UI样机、技术图通通搞定。
• • kb-retriever：本地知识库精准检索，不会把文件一股脑塞进上下文，而是分层检索、精准定位。

3、工程化交付，稳定可靠

和网上随便复制粘贴的提示词不同，garden-skills 的每个技能都是完整的工程化单元。

每个技能都有自己的 SKILL.md 定义文件、README 说明文档、references 参考资料、scripts 执行脚本和 assets 素材资源。

这种结构有两个好处：一是技能按需加载，不占用主上下文；二是规则可以独立更新，脚本可以长期复用。

团队使用时，可以把这套东西作为标准工作流程，避免每个人都有自己的"私人提示词"，最后谁都看不懂谁的。

4、六大平台支持，一键安装

garden-skills 支持 Claude Code、Cursor、Codex 等六大主流AI编程平台，安装方式也超级简单。

最推荐的是用 npx 命令，一行代码就能搞定。你可以选择安装全部四个技能，也可以只安装自己需要的那个。

除了命令行安装，还支持 Claude Code 插件市场、GitHub Releases 下载、手动拷贝、Git 子模块等五种安装方式，不管是个人使用还是团队部署，都能找到合适的方案。

快速上手

garden-skills 提供了五种安装方式，这里推荐最常用的三种：

方式一：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 就会按照六步设计流程，先跟你确认需求，然后定义设计系统，再出原型，最后生成完整的页面。

如果你有一篇文章想做成演示视频，可以这样说：

"用 web-video-presentation 把这篇文章做成 16:9 的网页演示，主题用 Swiss International，需要生成配音。"

AI 会帮你把文章拆成多个场景，每个场景对应一段 narration，生成可点击的演示页面，确认后还能一键生成配音。

写在最后

garden-skills 这个项目最让人欣赏的地方，是它把"个人经验"转化成了"可安装的技能包"。

以前，只有 ConardLi 这样的高手才能写出好的提示词，现在，每个人都能通过安装这些技能，让自己的AI助手"变得更聪明"。

对于普通开发者来说，它是一个现成的工具箱，解决了"AI审美太差"和"流程不稳定"这两个痛点。

对于团队来说，它提供了一个工程化的参考范式，可以把团队的工作流程、设计规范、最佳实践都封装成 Skill，避免口口相传的低效。

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

如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️

在看你就赞赞我！