AI生成的网页怎么告别土味？这个开源Skill把Claude Design的设计品味搬出来了
你有没有这种感觉——用 AI 生成网页，结果出来永远是紫粉渐变背景 + Inter 字体 + 蓝紫色按钮 + emoji 当图标？技术上是能跑，但一眼就知道是”AI 做的”。这就是所谓的「AI 美学」，千篇一律。
2026 年 4 月，Anthropic 发布了 Claude Design，上线当天 Figma 股价就跌了将近 7%。它的核心秘密是一份约 420 行的系统提示词——编码了精密的设计原则、反模式清单和工作流约束。Claude Design 发布不到 24 小时，这份提示词就被安全研究人员完整公开了。
jinhui76 做的事很聪明：把这套设计哲学蒸馏成一个开源的 SKILL.md 文件。任何支持 Skill 格式的 AI Coding Agent——Claude Code、Cursor、Codex——都能直接安装使用，让 AI 生成「不土」的网页。
核心机制一：oklch 感知均匀色彩
传统 HSL 色彩空间有个致命问题：相同亮度值的不同色相，看起来亮度完全不同。黄色 50% 亮度比蓝色 50% 亮度看起来亮得多。AI 用 HSL 随机生成的配色经常看起来不和谐，技术上「正确」，视觉上却刺眼。
oklch 是感知均匀的色彩空间——相同亮度值在人眼中真的一样亮。Skill 强制 AI 使用 oklch 推导色彩，确保调色盘天然和谐。配合六种经过验证的色彩 × 字体配对组合，AI 从第一步就走上正轨，而不是靠”碰运气”。
核心机制二：六步工作流
这个 Skill 的工作流设计很有层次感：
- 理解需求——判断信息是否充足，不机械式提问
- 收集上下文——读代码 > 看截图 > 参考业界，从不凭空开始
- 宣告设计系统——在写第一行代码之前，用 Markdown 定义色彩、字体、间距、动效、圆角策略
- 展示 v0 草稿——占位符 + 布局 + Token，让用户早期纠偏
- 完整构建——组件 + 状态 + 动效，重要决策点暂停确认
- 验证——无 console 错误、无异常色值
第三步「先宣告设计系统再写代码」看起来是个小改动，实际是品质的关键分水岭——它强制 AI 从「边写边猜」转为「先想后做」。
核心机制三：反 AI 陈腔滥调清单
Skill 内置一份明确的「禁止清单」：紫粉渐变背景、Inter / Roboto / Arial 字体、emoji 当图标、左边框强调卡片、凭空编造数据。这些都是 AI 最爱用的「省力组合」，清单直接告诉 AI「不要这样做」。
占位符哲学也很重要——缺图标用 [icon] 方块标记（不是 🚀），缺图片用带宽高比的占位卡片，缺数据主动向用户索取（不是杜撰「10,000+」）。占位符的信号是「这里需要真实素材」，假货的信号是「我在偷工减料」。
怎么安装
把 SKILL.md 文件放进 Agent 的 skills 目录就好。Agent 在收到视觉 / 前端相关需求时会自动激活，不需要手动调用。
设计品味是可以被编码的。这个 Skill 的示范意义甚至超过了工具本身——它证明了「先宣告设计系统再写代码」「反模式清单比正面指引更有效」这些设计工程原则，可以在 AI 时代被显性化、规模化。2026 年做 AI 辅助设计，这个 Skill 值得装上试试。
评论区
登录后可评论。