Knowledge Archive
Summary · AI

我把ClaudeDesign做成了Skill人人人都能成为顶级网站设计师

AI 2026-04-23 · 10 min read · 9 backlinks
ClaudeSkillWebDesignAICursorClaudeCodeOKLCH提示词工程

我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师

来源：B站 UP 主「code秘密花园」，https://b23.tv/rpm89YM 作者基于泄露的 Cloud Design 完整提示词，开发了通用的 Web Design Engineer Skill（约 400 行），可在 Cursor / Codex / Claude Code 中使用。

一、Claude Design 是什么

Anthropic 发布 Claude Design（设计师版 Claude Code）后，Figma 股价暴跌——这已经是 Anthropic 第 N 次带崩其他公司股价了。

核心逻辑反转：

  • 传统设计工具：人在画布上操作，AI 帮你提速
  • Claude Design：AI 是主要生成者，人主要做审核和反馈

你不用自己画，只管看、判断、给反馈。输出的不是图片，是真实能跑起来的代码——链接是可以点的，标签也可以切，版本可以 diff。这跟直接生成一张好看的 UI 图完全不是一回事。

Claude Design 强大的原因：

  • 一半靠模型：Claude Sonnet 4.7 的基础能力
  • 一半靠提示词：上线不到 24 小时就被安全研究大佬扒出来的完整提示词，信息密度非常高

二、提示词六步拆解

第一点：角色定位（动态身份切换）

Claude Design 开头第一句就很有意思：「你是一个专家设计师，而用户是你的产品经理」，而不是「你是一个 AI 助手」。

这带来两个好处：

  1. AI 决策更果断：设计师本身就应该有自己的判断力，不会每步都来问你
  2. 最终由用户拍板：关键点他又回来问你，因为你才是产品经理，最终得你说了算

更重要的是动态身份切换：

  • 做动画 → 当动效设计师
  • 做原型 → 当 UX 设计师
  • 做 PPT → 当 DAC 设计师

这样就不会用去做网页的脑子去做所有东西。

启示：好的角色定位应该是动态的，可以根据具体任务灵活切换身份，而不是一句「你是个前端开发者」就完事。

第二点：六步工作流

提示词中定义了一套六步流程：

  1. 理解需求 — 弄清楚要做什么
  2. 探索资源 — 寻找参考和素材
  3. 制定计划 — 确定技术方案
  4. 搭建结构 — 构建骨架
  5. 完成验证 — 实现并检查
  6. 极简总结 — 只说关键注意事项和下一步动作，不复述已经做了什么

两个关键细节：

① 什么时候该问，什么时候直接开干

提示词用一个例子非常巧妙地诠释了「提问的艺术」：

  • 「帮我做个 PPT」→ 先问几个问题（方向不急）
  • 「帮我做个 PPT，我们的全员会马上就要用了，十分钟」→ 直接开干（任务紧迫）

很多 agent 要么先问你一堆问题，要么啥也不问闷头就干。Claude Design 给了一个很清楚的判断方向。

② 总结原则

要求 AI 只说出关键的注意事项和下一步动作，而不要复述自己已经做了什么，避免废话。这个原则精辟——可以避免大量「我已经完成了XXX，下面是XXX的详细说明…」这类套话。

第三点：去除 AI 味（作者认为最有价值的部分）

AI 生成网页的「AI 味」典型特征，看一眼就知道是 AI 做的：

  • 紫粉蓝渐变背景
  • 大圆角卡片
  • emoji 当图标
  • 假数据堆砌到处都是

Claude Design 列出了一份完整的雷区清单：

  • 别乱用渐变背景
  • 别乱用 emoji
  • 别搞左侧彩色边框的圆角卡片
  • 别用烂大街的字体（明确列出哪些字体是雷，以及替代方案）
  • 别堆砌无意义的数据和图标

这跟写文章一样——通篇「此外」「值得注意的是」「综上所述」这种套路，大部分人都能闻出来。

第四点：色彩系统（OKLCH）

配色策略分三层，有明确优先级：

  1. 优先用品牌色
  2. 不够用 → 用 OKLCH 派生的颜色
  3. 绝对不要凭空编新颜色

为什么是 OKLCH？

传统 HSL 色彩空间有个根本问题：感知不均匀。同样的亮度值，黄色可能比蓝色看着亮一大截。AI 用 HSL 随机配色，经常是数字上没毛病，但看着就是不舒服。

OKLCH 是感知均匀的色彩空间——保持亮度和色度不变，只转变色相角，出现的颜色就自然很和谐。网页的高级感可能一下子就上来了。这个细节看着挺小，但效果很明显。

第五点：内容原则（乔布斯原则）

引用乔布斯名言：「要用 1000 个 no 去换一个 yes」。

AI 生成网页的传统毛病：恨不得把空间塞满，hero、特性、评价、数据、FAQ、联系方式一股脑全上，但每块又看起来很平庸。

Claude Design 的态度：每个元素都得证明自己为什么应该在那

  • 想加东西？先问用户
  • 页面看起来空？可能是排版的问题，用留白来解决，不能只靠塞东西
  • 一个大胆的留白，比十个凑数的板块可能更有表现力

第六点：验证（独立子 Agent）

开发完成后，Claude Design 会 fork 出一个独立的子 agent，对当前完成的网页做全面检查。

这与 Claude Code 在 Harness 上的实践有相同理念：

如果用同一个 agent 检查自己的输出，它会天然倾向于觉得自己没有问题；换一个全新的上下文，这种「自我感觉良好」就很容易被打破。

独立 context + 独立验证 = 更客观的质量检查。

三、Web Design Engineer Skill（作者开发的版本）

作者基于 Claude Design 提示词开发了 Web Design Engineer Skill，约 400 行，主要做了以下工作：

剥离 + 保留：

  • 把 Claude Design 中特有的工具和环境描述剥离出去
  • 只保留最通用、最有价值的部分

在 Claude Design 基础上的优化：

  1. 设计系统先言后写：写代码之前，必须先用自然语言把设计系统说清楚——配色、字体、间距全列出来。原因：如果不先说清楚，AI 可能自己默默做了个决定就直接开始写，最后看到成品时方向已经错了，只能推翻重来。提前说出来，还没写代码就可以直接纠偏。

  2. 尽早起草 V0 版本：一个粗糙的 V0，可能比花几倍时间精雕细琢的 V1 有用得多——后者如果整个方向都错了，最后就全白干了。

  3. 更多去 AI 味条目：在 Claude Design 基础之上补充了更多去 AI 味的规则。

  4. 字体和配色参考对照表：额外增加了几套经过验证的字体和配色参考对照表。

  5. 典型代码模板（reference 文件）：灵感来源于 Claude Design 提示词中的 "copy studied component" 部分，提供典型代码模板供 AI 参考。

四、Skill 效果对比（Cursor + Claude Sonnet 4.7）

测试一：太空探索博物馆线上展览页

维度无 Skill有 Skill
配色青粉渐变，典型 AI 霓虹感OKLCH 配色，接近杂志印刷的深沉色调
字体老套有特点，技术感十足但不冰冷
布局标准 Hero+卡片，教科书式非传统卡片布局，有创意感
特效堆砌发光和渐变动画舒服，克制而有质感
总体合格，缺少创意像非常有经验的设计师的杰作

测试二：独立摄影师个人作品集（极简提示词测试）

此测试故意只给了极简提示词，考验 AI 在信息极度缺乏时的自主决策能力。

  • 无 Skill：直接开干（没有问问题）。结果：深色背景、霓虹发光、半透明卡片、满满 AI 感文案，摄影师本该有的「慢真自由」的感觉完全没有体现出来。
  • 有 Skill：先问了几个关键问题（整体色调倾向、核心元素等），然后虚构了一个北欧摄影师，从头设计了一套完整的视觉风格，像在翻一本高端摄影画册，高级感一下子就上来了。

总结

"没用 Skill 的版本本身已经很不错了，Claude Sonnet 4.7 模型很强，裸跑出来的东西比现在大多数程序员手写的都强。Skill 带来的提升约是 85 分到 95 分的差距：从能用到好看，从完整到精致，从合格到有风格。这十分的差距就是 Skill 里那些看起来琐碎的规则，每一条效果不大，但加起来就会产生质变。"

五、关联资源

  • Web Design Engineer Skill：https://github.com/ConardLi/web-design-skill/
  • Easy Agent 开源项目：作者同期在做的项目，目标是从零复刻一个类似 Claude Code 的本地 Agent，完整跟下来能具备丛林开发企业级 Agent 的能力

关联概念

来源

Backlinks 9 references
S UI设计系统-HowToCook风格 S 我把ClaudeDesign做成了Skill人人人都能成为顶级网站设计师 C CloudDesign C OKLCH色彩系统 C Skill C WebDesignEngineerSkill C 六步工作流 C 去除AI味 C 角色定位