# 《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》全文（校正版）

> 来源：B站 [code秘密花园]
> 时长：00:12:58
> BV号：BV1MbosBfEoK
> 链接：https://www.bilibili.com/video/BV1MbosBfEoK
> 说明：本文已由 AI 进行全文校正，修正了语音识别错误和口语填充词。

---

就在前两天，Figma的股价崩了。这已经是Anthropic一以贯之的节奏。而就在这一波风潮中，Anthropic宣布的新功能——Claude Design，引发了广泛关注。你可以理解为设计师的Claude Code。大家都知道，使用AI工具生成产品有多难。

于是，我将Claude Design的核心功能集成成了一个技能（Skill），现在你也能轻松成为自己的网站设计师。下面这两个设计，其实都是我基于这个Skill生成的效果。大家可以先看一下实际效果。我是花园老师，欢迎来到Code秘密花园。Claude Design的设计哲学其实很简单：左边大字，直接输出设计能力。

其本质是算力的体现。你要什么，它就直接给你设计出来。你可能会想，这不就是AI版的ChatGPT吗。其实没那么简单。Claude Design团队曾明确表示：不要用对待普通工具的方式去使用它。

它更像Claude Code，是一种全新的设计工作方式。真正关键的是，它并不需要你亲自画图。你只需提供清晰的提示，它就能输出真实可运行的代码。链接可以直接点击，标签可以切版本，还能做diff对比。你直接生成一张好看的UI图，完全不是一回事。

当然，Claude Design之所以强大，一方面依赖于Claude模型本身的能力，另一方面则源于其精心设计的设计思维。Claude Design并非仅仅依靠算力，而是通过一套完整的设计提示词，实现了信息密度极高的系统化输出。我花了一些时间仔细研究了这套提示词。接下来，我们来拆解其中值得借鉴学习的核心要素。第一点，角色定位。

提示词开头的第一句就很有意思：“你是一个专家设计师，而用户是你的产品经理。”注意，这里并没有说“你是一个AI助手”，而是强调设计师与产品经理的关系。这带来两个好处：一是AI做决策会更果断；二是它本身就应具备独立判断力。但关键在于，它会反问一句：“你才是产品经理，得你说了算。”此外，它还要求AI根据任务自由切换身份——做动画时，就当动效设计师；做原型时，就当UI设计师；做PPT时，就当代设计。

这样，它就不会用网页设计的脑子去做所有事情。第二点，工作流。提示词中定义了一套六步流程：理解需求、探索资源、制定计划、搭建结构、完成验证、极简总结。其中有两个值得深入探讨的细节。第一个是“何时该问，何时直接开干”。

很多AI要么太主动，反复提问；要么又太被动，什么都不问就直接动手。而Claude Design则巧妙地建立了一种自我判断机制。比如，当你提出“帮我做个PPT”时，它会先思考几个关键问题，确认是否需要进一步澄清。但如果是在公司例会上急需交付，它就会直接开干。它用一个具体例子说明了什么是“有效的问题”。

第二个是“结构先行”的原则。它不会急于输出内容，而是先构建整体结构。它会自动生成核心框架，再逐步填充细节。这种“先搭骨架，再填血肉”的方式，确保了最终成果的逻辑性和完整性。第三点，是我认为最具加持力的部分——去除AI味。

你之前用AI生成网页时，是不是大部分情况下都是蓝紫色渐变、大圆角卡片、大量emoji图标、假数据满屏。这些元素单独看可能还行，但组合起来，一眼就能看出是AI生成的。这就像写文章一样，套路明显，缺乏个性。Claude Design列了一份非常完整的清单，提醒开发者避免这些常见陷阱。例如：别滥用渐变背景，别乱用emoji，别使用侧边色块，避免无意义的数据和图标。

这些看似琐碎的规则，实则构成了高级感的基础。它不仅指出哪些不能做，还给出了替代方案。比如，推荐使用正确的配色体系。为什么是OKLCH。因为传统的HSL色彩空间存在感知不均匀的问题——亮度值可能比蓝色看起来更大，导致视觉错位。

如果用随机配色，虽然技术上没问题，但往往不协调。而OKLCH基于CIELAB色彩空间，是一个感知均匀的体系。它能保持亮度和色度不变，只调整色相，呈现的颜色自然和谐。这个细节虽小，却能让网页的高级感瞬间提升。你可以看看视频中的颜色示例，每个形状的配色都十分舒服。

第四点，关于经典设计原则的应用。它强调“每个元素都有存在的理由”。这不是随意堆砌，而是有意识地控制每一个组件的位置与功能。留白在这里扮演了关键角色。留白不仅是视觉缓冲，更是解决问题的手段。

相比强行塞入更多内容，合理的留白反而更具表现力。第五点，验证环节。在输出完成后，Claude Design会自动执行一次全面的验证。它会对当前完成的网页进行检查，确保没有遗漏或错误。这一理念与我们之前分享过的Claude Code实践一致。

如果只是局部测试，AI可能自我感觉良好；但一旦换到全局视角，问题就会暴露无遗。这正是提示词中最核心的价值所在。不过，目前有一个现实问题：Claude的官方产品更新频繁，版本迭代快，我已彻底放弃使用原生工具。但它没有开放API，无法直接接入自己的工作流。好消息是，它的提示词已经泄露。

而Claude Design之所以厉害，一半靠模型，另一半正是这套提示词。因此，我基于这套提示词，打造了一个名为WebDesignEngineer的Skill。这个Skill完整提炼了Claude Design提示词中的精华内容，无论你在Claude Code、Cursor还是Codex中使用，都可以直接调用。这个Skill的运作流程如下：首先，我在其中补全了Claude Design原本缺失的功能模块。例如，我采用了经过验证的高质量版本，并在此基础上建立了标准特性。

在写代码前，必须先明确设计系统，包括可复用的组件、规范、配色方案等。如果不先说清楚，后续结构容易混乱。接着，系统会直接输出一个成品。如果方向不对，还可以随时调整。然后进入写代码阶段，支持分阶段迭代。

你可以先生成最小可用版本，再逐步完善。从非交互原型，到V1版本，再到完整版本，层层递进。在基础版本之上，我还加入了更多去除AI味的策略。同时，我引入了一套经过验证的参数化结构。这个Skill还附带一份文本说明，包含多个典型代码模板。

这些灵感来源于Claude Design提示词中关于“云”的那一部分。接下来，我用同一套提示词，在相同环境下分别测试了带Skill和不带Skill的版本。测试环境均为Cursor + Claude 3.5。第一个案例：我要求生成一个数字产品的深色版本。未使用Skill的版本效果尚可：深色背景，模糊绘制风格，简约新潮，整体风格基本成立。

但细看之下，青紫粉渐变略显老套，字体也偏传统。布局仍是标准的Hero加卡片结构，外扩式落地页，整体不错，但缺乏创意。视觉上堆叠了大量发光和渐变特效，显得浮夸。而使用Skill的版本则完全不同。配色采用LAB色彩空间，整体色调接近专业印刷级的深沉质感。

标题与正文字体兼具技术感与亲和力，既不冰冷，也不俗气。布局不再是传统卡片式，动画效果流畅自然，充满创意。整体感觉，宛如一位经验丰富的设计师亲手打造。第二个测试：我仅给出一个简单指令：“做一个独立摄影师的个人作品集网站。”没有任何额外提示。

这能考验AI在信息极度匮乏下的自主决策能力。未使用Skill的版本直接开干：深色背景，磨砂玻璃质感，半透明卡片，文案充满典型的AI腔调。本应体现的“漫游感”“自由感”完全缺失，观感平庸。而使用Skill的版本则主动提问：整体配色倾向。核心视觉元素。

风格基调。在获得反馈后，它虚构了一个名叫Chloe的摄影师，从头设计了一套完整的视觉语言。最终效果极具高级感——从上往下浏览，如同翻阅一本高端摄影画册。看到这个网站，你会立刻相信这位摄影师的审美水准。最后总结：未使用Skill的版本，本身已经很不错。

基于现有模板，输出质量远超大多数程序员手写代码。评分大概在85到95分之间。而使用Skill后，从“合格”跃升至“有风格”，从“完整”迈向“精致”。这十个百分点的差距，恰恰来自那些看似琐碎的规则。它们单个作用不大，但叠加起来，便产生了质变。

我已将Skill的完整文件、原始参考的Claude Design提示词，以及多个Demo网站打包开源。大家需要的话，可前往GitHub搜索该项目，自行下载使用。最后，向大家推荐我最近在做的开源项目——EasyAgent。在上一期解说Harvey的视频发布后，许多同学问我如何在实际项目中构建Agent。于是，我推出了这个项目。

目标是从零复刻一个类似Claude Code的本地产品，最终实现企业级AI能力。它能让你真正理解Claude Code这类产品的底层逻辑，看清Harvey究竟是如何工作的。如果你最近也在尝试转型进入Agent领域，这个项目不容错过。如果本教程对你有所帮助，欢迎点赞、投币、收藏。后续我将持续分享更多有价值的AI实战内容。

感谢观看，我们下期见。

---

*全文由 AI 转录并校正生成，仅供参考。*