Marico's space
译者按：最近用 Claude Code 和 Cursor 写前端页面，发现它们生成的页面长得都差不多——Inter 字体、紫粉渐变、大圆角卡片，一眼就能看出"这是 AI 写的"。这篇文章提到的 web-design-skill 项目很有意思，它把 Claude Design 的设计理念提炼成了一个可复用的 skill 文件，让 AI 写出更有设计品味的代码。我试着整理了一下，分享给大家。
让 Claude Code 或 Cursor 生成一个落地页，你三秒内就能猜到它长什么样：
能用——但任何人都能一眼看出"这是 AI 写的"。
ConardLi/web-design-skill 正是为了解决这个问题。它将 Claude Design（Anthropic 于 2026 年 4 月推出的视觉产品）的系统提示提炼为一个开放的、可移植的 SKILL.md，放入 .claude/skills/ 或 .agents/skills/ 即可使用。目标：让 agent 写出有设计品味的代码，而不是千篇一律的脸。
这是一篇实战指南，同时整理了一些值得借鉴的设计理念。
这个 skill 明确列出了黑名单，让 agent 在生成之前就被提醒"不要用这些"。这比"设计得好看点"这种模糊指令有效得多——LLM 遵循负面约束的能力不错，只要条目足够具体。
不要告诉 AI"设计得漂亮"，而要明确告诉它"不要紫粉渐变、不要 Inter 字体、不要用 emoji 当图标"。约束反而打开了设计空间。
作者列出了一个"AI 前端特征"黑名单：
这些都没错。只是太常见了。看到它们就等于在说"这是 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);
}附带的好处是色阶推导很干净——锁定色度和色相，只变化亮度，就能得到视觉上一致的灰色或强调色色阶。
这在我看来是 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 层面纠正方向，而不用等整个页面出来才发现整体调性不对。
不要一次性交付。skill 要求一个"v0"阶段：布局骨架 + 设计 token + 占位符，让用户确认方向后再填充细节。
这模仿了人类从线框图到高保真原型的工作流程。AI 通常会跳过这一步，因为它想一次性交付完整成果——但完整成果修改成本高，半成品修改成本低。
AI 最蠢的习惯之一：图片缺失时，它会画一个歪歪扭扭的 SVG 假装是插图。skill 禁止这种做法，改用诚实的标记：
<div class="placeholder">[hero image: photographer portrait, 3:4]</div>原因很简单：劣质 SVG 会误导用户以为这是成品素材，而文字占位符清楚地表明"这里需要真实的素材"。
skill 将整个过程结构化：
这个结构抑制了 LLM"一次性给出完整答案"的冲动，强迫它进入迭代工作流。
skill 中最实用的速查表。六组预验证的组合，agent 遇到困难时直接取用：
| 风格 | 配色 | 字体 | 适用场景 |
|---|---|---|---|
| 现代科技 | 蓝紫 | Space Grotesk + Inter | SaaS、开发工具 |
| 优雅编辑 | 暖棕 | Newsreader + Outfit | 内容、博客 |
| 高端品牌 | 近黑 | Sora + Plus Jakarta Sans | 奢侈品、金融 |
| 活泼消费 | 珊瑚 | Plus Jakarta Sans + Outfit | 电商、社交 |
| 简约专业 | 青蓝 | Outfit + Space Grotesk | 仪表盘、B2B |
| 手工艺温暖 | 焦糖 | Caveat + Newsreader | 餐饮、教育 |
注意 Inter 只在"现代科技"中作为次要字体出现——不是默认选择。这正是反套路规则的具体体现。
克隆后，将 .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 有效得多。