Marico's space
【译者前言】说实话，用 AI 写前端代码有一段时间了，出来的东西功能没问题，但那种"一眼 AI"的感觉真是让人尴尬。web-design-skill 这个开源 skill 解决的不是代码能力问题，而是品味问题——它把设计系统做成了一个可移植的 SKILL.md，让 AI 在动手之前先把设计决策定好再写代码。对任何经常和 AI coding agent 打交道的前端开发者来说，这个思路都值得一看。
让 Claude Code 或 Cursor 生成一个落地页，你三秒内就能猜到它长什么样：Inter 字体、蓝色按钮、紫粉渐变英雄区、大圆角卡片、用 emoji 充当图标、再加几段虚假用户好评。能用——但任何人都能一眼看出"这是 AI 写的"。
ConardLi/web-design-skill 正是为了解决这个问题。它将 Claude Design（Anthropic 于 2026 年 4 月推出的视觉产品）的系统提示提炼为一个开放的、可移植的 SKILL.md，放入 .claude/skills/ 或 .agents/skills/ 即可使用。目标：让 agent 写出有设计品味的代码，而不是千篇一律的脸。
说实话，这篇文章与其说是教程，不如说是一份设计理念的整理报告。几个修复方案都挺实在，可以直接拿来做。
LLM 早就过了"能不能跑"的阶段。但由于训练数据高度重叠，输出收敛到了同一种外观。作者列出了一个"AI 前端特征"黑名单：
这些都没错。只是太常见了。看到它们就等于在说"这是 AI"，会稀释任何品牌形象。见过太多次了，我现在看到紫粉渐变就条件反射想吐——不是说这东西不好看，是真的太泛滥了。
这个 skill 明确列出了黑名单，让 agent 在生成之前就被提醒"不要用这些"。这比"设计得好看点"这种模糊指令有效得多——LLM 遵循负面约束的能力不错，只要条目足够具体。
不要告诉 AI"设计得漂亮"，而要明确告诉它"不要紫粉渐变、不要 Inter 字体、不要用 emoji 当图标"。约束反而打开了设计空间。
说实话，这个思路我觉得是全文最有价值的一句话。与其堆砌形容词，不如直接告诉它别做什么。负面约束比正向描述要具体得多，AI 也能更好地执行。
这是 skill 中技术性最强的部分。HSL 在感知上是不均匀的——亮度 50% 的黄色看起来比亮度 50% 的蓝色亮得多，这就是为什么 AI 生成的 HSL 色板经常"数值对称但视觉歪斜"。
oklch 是一个感知均匀的色彩空间——相同的 L 值在人眼看来亮度确实相同。skill 要求用 oklch 定义色彩 token：
:root {
--color-bg: oklch(98% 0.01 80);
--color-fg: oklch(20% 0.02 80);
--color-accent: oklch(65% 0.18 30);
}附带的好处是色阶推导很干净——锁定色度和色相，只变化亮度，就能得到视觉上一致的灰色或强调色色阶。
这个对于经常自己调色板的人来说应该不陌生，oklch 现在浏览器支持度也 OK 了（Chrome 111+），可以放心用。但说实话，大多数人还是习惯用 HSL，这里有个学习曲线——不过一旦习惯了就回不去了。
这在我看来是 skill 的核心。AI 生成前端的最大问题是"边做边决定"：到英雄区才选颜色，到页脚才换字体，最终拼凑出一张不匹配的页面。
skill 强制要求 agent 在写代码之前先用 markdown 声明设计 token：
## Design System
- **Palette**: warm paper (oklch 97% 0.01 80) / ink (oklch 18% 0.02 80) / accent caramel (oklch 65% 0.15 60)
- **Typography**: Instrument Serif (display) + Space Grotesk (UI) + JetBrains Mono (code)
- **Spacing**: 4px base, 8/16/24/40/64 scale
- **Motion**: 200ms ease-out for micro, 600ms ease-in-out for page transitions只有在这些声明完成后才开始写代码。这将"设计决策"和"实现"分开——用户可以在 token 层面纠正方向，而不用等整个页面出来才发现整体调性不对。
这个才是真正的重点。把设计决策写下来比放在脑子里强一百倍——不只是对 AI，对人也是。写出来之后，你改的是 token，不是代码，代价小太多了。
不要一次性交付。skill 要求一个"v0"阶段：布局骨架 + 设计 token + 占位符，让用户确认方向后再填充细节。
这模仿了人类从线框图到高保真原型的工作流程。AI 通常会跳过这一步，因为它想一次性交付完整成果——但完整成果修改成本高，半成品修改成本低。
说白了就是让 AI 学会"先给我看看方向，不满意再改"。这和现在很多人说的"先迭代再完善"是一个路子，只是把这个流程显式化了。
AI 最蠢的习惯之一：图片缺失时，它会画一个歪歪扭扭的 SVG 假装是插图。skill 禁止这种做法，改用诚实的标记：
<div class="placeholder">[hero image: photographer portrait, 3:4]</div>原因很简单：劣质 SVG 会误导用户以为这是成品素材，而文字占位符清楚地表明"这里需要真实的素材"。
这个真的挺有意思。AI 生成那种歪歪扭扭的占位图然后假装是正经素材这件事，我见过太多次了——有时候是图，有时候是文案，有时候是数据。诚实标记看起来是一件小事，但它能帮人分清楚"这是半成品"和"这是成品"。
skill 将整个过程结构化：
这个结构抑制了 LLM"一次性给出完整答案"的冲动，强迫它进入迭代工作流。说实话，这个才是真正对 AI 行为有约束力的部分——给一个流程比给一堆规则要好执行得多。
skill 中最实用的速查表。六组预验证的组合，agent 遇到困难时直接取用：
| 风格 | 配色 | 字体 | 适用场景 |
|---|---|---|---|
| 现代科技 | 蓝紫 | Space Grotesk + Inter | SaaS、开发工具 |
| 优雅编辑 | 暖棕 | Newsreader + Outfit | 内容、博客 |
| 高端品牌 | 近黑 | Sora + Plus Jakarta Sans | 奢侈品、金融 |
| 活泼消费 | 珊瑚 | Plus Jakarta Sans + Outfit | 电商、社交 |
| 简约专业 | 青蓝 | Outfit + Space Grotesk | 仪表盘、B2B |
| 手工艺温暖 | 焦糖 | Caveat + Newsreader | 餐饮、教育 |
注意 Inter 只在"现代科技"中作为次要字体出现——不是默认选择。这正是反套路规则的具体体现。六个组合说实话都挺养眼的，不像某些 design system 翻来覆去就那几套。
克隆后，将 .agents/skills/web-design-engineer/ 复制到你的项目中（Claude Code 用 .claude/skills/），agent 会在处理前端任务时自动加载。
git clone https://github.com/ConardLi/web-design-skill
cp -r web-design-skill/.agents/skills/web-design-engineer .claude/skills/仓库的 demo/ 文件夹中有同 prompt 下使用和未使用 skill 的对比。差距一目了然——值得直接打开看看。
真正的价值不是"AI 的设计检查清单"——而是将设计决策外部化的方法论。把 token 写成 markdown、把反模式写成黑名单、把工作流分成六步——这些都把模糊的"品味"变成了 LLM 可以读取的结构。
同样的思路适用于任何领域：如果你想让 AI 在某个领域有品味，就把"做"和"不做"明确列出来。比一千字的大段 system prompt 有效得多。
说到底，这篇文章给我的最大感受是：与其让 AI 自己"感悟"好的设计，不如把设计原则写成它能读懂的格式。一个 SKILL.md 其实就是一份结构化的设计规范，AI 能执行，人也能审核修改。两全其美。