AI 网页总是一股”蓝紫模板味”？这个开源项目用 25 种风格配方把 AI 设计审美拉满了

AI 生成的网页，为什么总是一股”AI 味”？

现在随便打开一个 AI 生成的产品页，满眼都是蓝紫渐变背景、圆角白色卡片、再加个悬浮动效。开发者自己都看腻了，更别说用户。

这不是模型能力的问题——Claude Code、Cursor 生成代码的速度已经很快了。问题出在另一个地方：AI 缺乏真正的设计感知。它不知道 Linear 的克制感是怎么来的，不懂 Pentagram 那套字体搭配的逻辑，更不知道 Bloomberg 那种信息密度背后的排版哲学。所以它只会输出最安全的”套模板”方案——结果就是千篇一律。

直到我发现了 Garden Skills。

25 种风格配方，让 AI 直接”懂设计”

Garden Skills 是开发者 ConardLi 开源的一个 Agent Skills 合集，在 GitHub 上已经积累了超过 11,500 颗星。它的核心模块 web-design-engineer 内置了 25 种精心调校的设计风格配方，包括：

• Linear — 克制、功能导向、极简字体层次
• Aesop — 故事感强、衬线字体、编辑感排版
• Pentagram — 策略设计机构风格、结构清晰、高端感
• Bloomberg — 高密度信息、数据优先、金融级排版
• Stripe Press — 干净大气、editorial 感、版式考究
• Mid-Century — 中世纪现代风格、几何感、跳脱配色

每种风格都配备了完整的专属调色板、字体规范、标志性设计手法，同时明确标注了需要规避的 anti-patterns。AI 生成页面时直接调用这套配方，输出的就不再是”通用模板”，而是有灵魂的成熟设计语言。

不只是一个设计参考库

Garden Skills 包含 4 个互为补充的 Skill 模块：

• web-design-engineer — 核心王牌，25 种风格配方 + 反模板清单
• web-video-presentation — 一句话或文章 → 一键生成可交互的 16:9 网页演示，23 个主题 + TTS 配音
• gpt-image-2 — 专业级图像生成提示词引擎，18 个视觉分类 + 160+ 模板
• beautiful-article — 将任意内容转换为精致的可分享 HTML 文章，10 种文章类型 + 11 种主题

所有模块都遵循 SKILL.md 格式，安装方式也是一行命令：

npx skills add ConardLi/garden-skills

支持 Claude Code、Cursor、Codex、Gemini CLI、OpenCode 等主流 AI 编程平台。MIT 协议，完全开源。

我的判断

如果你经常用 AI 生成前端页面，同时对设计有基本要求但没有专业设计师资源，Garden Skills 是目前见过的最佳解决方案之一。它不只是一个”好看的参考图库”——而是真正把设计系统、字体规范、反模式清单注入到 AI 的决策链路里。

11,500 颗星不是白来的，这个项目戳中了一个真实的痛点：AI 编程效率满分，审美却是零分。Garden Skills 把”审美”这件事工程化了，这才是它真正有价值的地方。

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

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