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

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

---

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

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

其本质是算力的体现——你要什么，它就直接给你设计出来。你可能会想，这不就是AI版的ChatGPT吗。其实远不止如此。据Claude Design团队的说法，不要用对待普通工具的方式去使用它。实际上，Claude Design更像Claude Code。

它的设计并非靠“人工”完成，而是通过AI直接反馈用户需求。主要的设计工作其实只需做好即可，你不用自己画图，只需提供清晰的提示词。而且，它输出的不是图片，而是真实能跑起来的代码。链接可以直接点击，标签也可以切版本，还能做diff。你直接生成一张好看的UI图，完全不是一回事。

当然，Claude Design之所以强大，一方面依赖于Claude模型本身的能力，另一方面则源于它精心设计的设计思维。Claude Design并不只是一个简单的算力堆叠，而是具备完整的系统性思考。它把设计流程中的信息密度拉得非常高。我自己花了一些时间仔细研究后发现，这套提示词中蕴含着大量值得借鉴的学习点。第一点是角色定位。

提示词开头的第一句就很有意思：“你是一个专家设计师，而用户是你的产品经理。”注意，这里并没有说“你是一个AI助手”，而是明确构建了“设计师”与“产品经理”的关系。这带来两个好处：一是AI在做决策时会更果断；二是它本身就应具备独立判断力。但关键点在于，它又回头问你：“你才是产品经理啊，得你说了算。”这意味着，AI不会越界，而是始终以用户为主导。

此外，它还要求AI根据任务自由切换身份：做动画时就当动效设计师，做原型时就当UI设计师，做PPT时就当代设计。这样，它就不会用做网页的脑子去做所有事情。相比之下，很多提示词只写一句“你是个前端开发者”，就完事了。而Claude Design告诉我们，好的角色定位应该是动态的，能根据具体任务灵活切换。第二点是工作流。

提示词中定义了一套六步流程：理解需求、探索资源、制定计划、搭建结构、完成验证、极简总结。其中有两个点特别值得展开。第一个是“什么时候该问，什么时候直接开干”。很多AI要么太自我，反复提问，迟迟不动手；要么又太急，根本不问就直接干。而Claude Design则巧妙地用一个例子来判断：比如你说“帮我做个PPT”，如果是在全公司会议上要用，它就会直接开干。

但如果只是模糊地说“做个PPT”，它反而会先问几个问题。第二个是“结构优先”。它不会一上来就输出内容，而是先构建骨架。它以结构为核心，自动生成符合逻辑的内容。同时强调“变化原则”——不能重复使用同一模式，避免千篇一律。

第三点是我认为最具加持力的部分：去除AI味。你之前用AI生成网页时，是不是大部分情况下都是蓝紫色渐变、大圆角卡片、一堆emoji当图标、到处都是假数据。单独看可能还不错，但整体一看，一眼就能认出这是AI生成的。这就像写文章一样，一旦出现套路化表达，立刻暴露痕迹。而Claude Design列了一份非常完整的清单，提醒我们避免这些常见问题。

例如：别滥用渐变背景，别乱用emoji，别用那种侧边色块，避免无意义的数据和图标等。这些看似琐碎的规则，却构成了真正的“去AI味”防线。它不仅列出禁止项，还给出替代方案。比如推荐使用正确的配色方式。首先，它强调要用字体议题，搭配合适的配色。

但不一味追求“OKLCH”色彩空间。为什么是OKLCH。因为传统的HSL色彩空间存在感知不均匀的问题——亮度值可能比蓝色看起来更大，导致视觉错位。而如果用OKLCH随机配色，虽然技术上没问题，但可能不协调。CIELAB则是一个感知均匀的色彩空间，能保持亮度和色度不变，只改变色相，呈现的颜色自然和谐。

这个细节看似微小，但网页的高级感往往就体现在这里。你可以看看我视频里的颜色示例，每个形状的配色都十分舒服。第四点是留白的运用。经典设计中，留白是一种重要的表达方式。但很多人不擅长控制，容易让页面显得空洞或拥挤。

Claude Design明确指出：每个元素都应有存在的理由。留白不是空白，而是解题的手段。留白比添加更多内容更能表现设计功力。这一点在第六点“验证”中也得到体现。它要求输出一个独立的验证环节，对当前完成的网页进行全面检查。

这一理念与我们之前分享过的Claude Code实践一致。如果只是局部优化，AI可能自我感觉良好；但换到全局产品层面，很容易被拆解。而Claude Design的提示词最核心的价值，正在于此。不过目前有一个现实问题：Claude的品控版本更新频繁，且无法直接接入个人工作流。没有API支持，难以嵌入自动化流程。

但好消息是，它的提示词已经泄露出来了。Claude Design真正厉害的一半，正是靠这套提示词。因此，我基于这套提示词，打造了一个名为WebDesignEngineer的Skill。这个Skill完整提炼了提示词中的精华，无论你在Claude Code、Cursor还是Codex中，都可以直接使用。人人都能成为顶级的网站设计师。

这个Skill的运作流程如下：首先，我补全了Claude Design原本缺失的功能模块。例如，我采用的是经过验证的高质量版本。在此基础上，我制定了标准的几个特性。首先是：写代码之前必须先说明设计系统。包括可复用的组件、设计规范、工具列表等。

如果不先说清楚，后续结构可能就不合理。然后，你直接得到的就是一个成品。如果方向不对，后续还可以调整。接着进入写代码阶段。第二步要求输出一个假设下最小可行版本。

这个粗略的AI版本，会先生成一个非交互式原型，再逐步迭代出V1版本所需内容。之后，再推出完整版本。在基础版本之上，我还加入了更多“去AI味”的设计规则。同时，我另外设计了一套结构化参数化版本。这个Skill还附带一份文本文档，包含多个典型代码模板。

这些灵感来源于Claude Design提示词中关于“云设计”的部分。接下来，我用同一套提示词，分别测试了带Skill和不带Skill的版本。测试环境统一为Cursor + Claude 3.5。第一个例子：我要求做一个数字产品的深色版本。没用Skill的版本，效果还算不错：深色背景、模糊绘制风格、简约新潮。

整体风格有一定把握。但仔细一看，青紫粉渐变、字体老套、布局仍是标准的Hero加卡片结构。外扩式落地页结构虽完整，但缺乏创意。视觉上堆满了发光和渐变特效，显得浮夸。再看用Skill的版本：配色整体采用LAB空间，我额外搭配了AID版本，接近整质印刷的深沉色调。

标题与正文字体极具技术感，却不冰冷。下方布局不再是传统卡片式，动画效果舒适且富有创意。整体感觉，像是出自一位经验丰富的设计师之手。第二个测试：我只给了一个非常简单的指令：“做一个独立摄影师的个人作品集网站。”没有任何附加信息，以此考验AI在信息极度匮乏下的自主决策能力。

没用Skill的版本，直接开干。结果是：深色背景、磨砂玻璃质感、半透明卡片、满屏AI感文案。本该有的漫游感、自由感完全未体现。而用了Skill的版本，它主动提出几个问题：整体配色倾向、核心视觉元素等。随后虚构了一个名叫Chloe的摄影师，从头设计了一套完整的视觉语言。

最终效果：从上往下浏览，如同翻阅一本高端摄影画册。看到这个网站，你会立刻相信这位摄影师的审美水准。效果非常出色。最后总结：没用Skill的版本，本身已很不错。基于现有模板，跑出来的成果，比大多数程序员手写还要强。

得分大概在85到95分之间。而用了Skill的版本，从“合格”跃升至“有风格”。那10分的差距，并非来自某个大功能，而是那些看似琐碎的规则叠加产生的质变。我已将Skill的完整文件、原始参考的Claude Design提示词，以及几个Demo网站，全部打包开源。大家需要的话，可直接前往GitHub搜索该项目，自行下载。

最后，向大家推荐我最近在做的开源项目：EasyAgent。在上一期解说Harvey的视频发布后，许多同学问我：如何在实际项目中搭建Agent。于是，我推出了这个项目。它的目标是从零复刻一个类似Claude Code的本地产品。最终实现企业级AI能力，真正理解Claude Code这类产品背后的运作机制。

如果你最近也在尝试转型Agent领域，这个项目不容错过。如果这个教程对你有帮助，希望你能点赞、投币、收藏三连。我会持续分享更多有价值的AI实战内容。感谢观看，我们下期见。

---

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