Marico's space
译者按：前阵子折腾 Claude Code 生成页面，被那满屏的 Inter 字体、蓝按钮、紫粉渐变 hero 气得够呛——一眼就能看出是 AI 写的。翻到这篇，介绍了 web-design-skill 这个 skill，用了一套正经设计系统（OKLCH、比例间距、真图标）来约束 AI 的审美输出，看完觉得有点东西，顺手转写分享一下。
让 Claude Code 或者 Cursor 随手生成一个 landing page，三秒钟你就能猜到它长什么样：Inter 字体、蓝按钮、紫粉渐变 hero、大圆角卡片、用 emoji 当图标、再来几段假模假样的用户好评。能用，但谁都能一眼认出「这是 AI 写的」。
问题不在于 AI 不懂设计，而在于大多数 AI 编程工具默认优先「正确」而非「好看」。它们知道怎么排版，但不知道什么让一个页面看起来是活的。
web-design-skill 就是一个试图填补这个差距的 Claude Code agent skill。它不只是生成代码，而是把一整套设计原则——OKLCH 色彩空间、比例间距系统、真正的图标库、有思考的字体排版——注入到输出过程中，让结果看起来真的是经过考虑的。
这周我花了几小时体验了一下，来聊聊它实际能做到什么，以及还有什么不足。
简单说，它就是一个加载进 Claude Code 的 prompt 文件，赋予 AI 一套特定的设计指令。核心包含三个设计系统：
当你运行设计任务时，这个 skill 会拦截正常的代码生成流程，把这些原则应用到每一个决策：颜色选择、间距数值、字重、图标挑选，全链路介入。
通过 Claude Code 的 skills 系统安装：
/skills install web-design-skill装完之后，在会话开始时激活：
/skills apply web-design-skill之后任何页面生成任务都会自动套用这套设计系统。
OKLCH 是一个感知均匀的色彩空间——也就是说，两种颜色之间的感知差异，和你眼睛实际看到的差异是一致的。RGB 和 HSL 都不是感知均匀的，这就是为什么它们容易调出浑浊的灰色和不可预测的对比度。
用 OKLCH，你可以得到可预测的色彩混搭和贯穿整个调色板的稳定对比度。web-design-skill 会自动为你的项目生成一套完整的 OKLCH 调色板。
web-design-skill 的间距体系基于比例系统——通常是 1.25（大三度）或 1.333（完美四度）。项目中每个间距值都是这个基础比例的倍数。
这意味着所有间距都是数学相关的，从而创造出视觉和谐感。32px 的外边距、20px 的内边距、13px 的间距——它们看起来就是一脉相承的。
web-design-skill 用 Phosphor Icons 代替 emoji 作为图标——这是一套全面、一致的图标家族，提供六种字重（thin、light、regular、bold、fill、duotone），每个图标都附带一个 React 组件。
我在三个项目上做了测试：一个 SaaS landing page、一个博客首页、一个 dashboard。说下感受：
landing page 出来效果确实惊艳。调色板很有质感，间距一致，图标犀利，看起来就像是正经设计团队出品。
博客首页中规中矩，正确地应用了设计系统，但布局有点保守，感觉还是缺了点灵性。
dashboard 就比较翻车了。数据密集型、交互复杂的 UI 界面不是 web-design-skill 的强项——这套设计系统是为内容优先的页面打造的，对付不了高密度交互界面。
这个 skill 很「固执己见」——大多数时候是好事，但也容易变成束缚。如果你对颜色或字体有强烈个人偏好，你就在和系统对抗，而不是和它协作。
另外它严重 React 导向。如果你在用 Vue 或者原生 HTML，体验会打折扣。
还有 dashboard 问题也是真实存在的。数据网格、复杂表单、多步骤工作流这类复杂 UI 模式处理得并不好。
web-design-skill 是 AI 辅助设计领域的一个认真进步。它不是魔法棒——你仍然需要设计判断力来评估和优化它的输出——但它给 Claude Code 提供了一套原则，能持续产出更好看的成果。
如果你在用 Claude Code 构建内容型网站，默认输出感觉太千篇一律，这个 skill 值得一试。
原文链接：https://dev.to/recca0120/from-functional-to-stunning-a-walkthrough-of-web-design-skill-23f7