正文整理稿

按视频原讲述顺序整理的正文稿。

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

来源：B站 [code秘密花园]
时长：00:12:58
BV号：BV1MbosBfEoK
链接：https://www.bilibili.com/video/BV1MbosBfEoK
说明：以下文字按视频原讲述顺序整理，口语、重复和明显噪声已做轻度收束。

---

官方工具很强，但真正卡人的还是接入门槛

就在前两天，Figma的股价崩了。这已经是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不会盲目执行，而是主动确认方向。

还有一个亮点是，它要求AI根据任务自由切换身份。比如做动画时，就当动效设计师。做原型时，就当UI设计师。做PPT时，就当代设计。这样，它就不会用做网页的脑子去做所有事情。而传统提示词往往只写一句“你是个前端开发者”，就完事了。但Claude Design告诉我们，好的角色定位应该是动态的，可以根据具体任务灵活切换。

第二点，工作流。它在提示词中定义了一套六步流程：理解需求、探索资源、制定计划、搭建结构、完成验证、极简总结。这里有两个点值得展开。

第一个是“什么时候该问，什么时候直接开干”。很多AI要么太自作聪明，反复提问。要么什么都不问，直接开干。Claude Design则给出了自己的判断逻辑。比如，当你提出“帮我做个PPT”时，它可能只会问几个关键问题。但如果是在全业会上就要用的紧急场景，它就会直接开干。它非常巧妙地用一个例子来说明什么叫“合适的问题”。

第二个是“结构先行”。它不会一上来就输出内容，而是先构建结构。这个原则贯穿始终——先定骨架，再填血肉。只有结构清晰，后续才不会混乱。

第三点，是我认为最有加持力的部分：去除AI味。你之前用AI生成网页时，是不是大部分情况下都是那种千篇一律的风格？比如文字配蓝色渐变、大圆角卡片、一堆emoji当图标、到处都是假数据？单独看可能还行，但整体一看，一眼就能认出这是AI生成的。

这就像写文章一样，如果你总用某些固定套路，读者很快就能察觉。而Claude Design列了一份非常完整的清单，明确指出哪些要避免。

别滥用渐变背景，别乱用emoji，别用侧边色块，避免无意义的数据和图标，字体对齐要合理，内容要有逻辑。

真正拉开差距的，不只是模型，而是背后的提示词结构（续）

这些看似琐碎的规则，一旦被系统化应用，就能彻底摆脱“AI感”。它不仅列出问题，还给出替代方案。比如推荐使用OKLCH色彩空间。

为什么是OKLCH？因为传统的HSL色彩空间存在感知不均匀的问题。比如亮度值相同，但蓝色看起来比红色暗得多。如果用随机配色，可能表面没问题，但实际不协调。

而OKLCH基于CIELAB色彩空间，是感知均匀的。它可以保持亮度和色度不变，只改变色相，呈现的颜色自然和谐。这个细节看着小，但网页的高级感立刻就上来了。

你可以看我视频里的颜色示例，每个形状的配色都很舒服。这就是为什么它能做出接近专业印刷级的深沉色调。

第四点，关于留白。经典设计讲究留白，但很多人不知道怎么用。Claude Design明确指出：每个元素都要清楚自己存在的理由。留白不是空，而是用来解题的工具。相比堆砌内容，留白更能表现设计意图。

第五点，验证环节。最后一步，它会输出一个独立的验证报告，对当前完成的网页做全面检查。这一点和我们之前分享过的Claude Code实践理念一致。

如果只是局部测试，AI可能自我感觉良好。但换到全局产品视角，很容易被发现漏洞。而Claude Design的提示词里最核心的价值，正是这套系统的严谨性。

不过，目前有一个现实问题：Claude的产品更新频繁，版本迭代快。我试过三个版本后，已经彻底放弃依赖官方工具。但好消息是，它的提示词已经泄露出来了。Claude Design厉害的一半，其实就靠这套提示词。

于是，我基于这套提示词，开发了一个名为WebDesignEngineer的Skill。这个Skill完整提炼了提示词中的精华，无论你在Claude Code、Cursor还是Codex中，都可以直接使用。人人都能成为顶级的网站设计师。

这个Skill的大致流程如下：首先，我把Claude Design中缺失的功能补全了。例如，我采用了一个经过验证的高质量版本作为基础。然后，在此基础上加入标准特性。

第一步，写代码之前必须先明确设计系统。包括可复用的组件、规范、工具等。如果不先说清楚，后续结构容易混乱。只有先建立框架，才能得到一个合理的成品。

如果方向不对，后面还可以调整。接着进入写代码阶段。第二步，要求输出一个最小可行版本。这个粗略的AI版本，会快速生成一个非交互式原型，作为v1版本的基础。

之后，再逐步完善功能，直到最终交付全版。此外，在Claude Design原版基础上，我还加入了更多去除AI味的规则。并引入一套经过验证的参数化结构。

这个Skill还附带一份文本说明，包含多个典型代码模板。灵感来源于Claude Design提示词中的核心部分。

接下来，我们进行实测对比。使用相同的环境：Cursor + Claude 3.5。分别运行带Skill和不带Skill的版本。

第一个测试案例：我要求做一个数字产品的深色版本。没有额外提示。

先看未使用Skill的版本。效果还不错：深色背景，模糊绘制风格，简约新潮。整体风格有迹可循。但仔细一看，青紫色渐变过于明显，字体也偏老套。布局仍是标准的Hero加卡片结构，属于外扩式落地页。

虽然整体尚可，但缺乏创意。视觉上堆满了发光和渐变特效，显得浮夸。

再看使用Skill的版本。配色整体采用LAB空间，搭配AID版本，呈现出非常接近专业印刷级的深沉色调。标题与正文字体极具技术感，但又不冰冷。

下方布局不再是传统卡片式，动画效果流畅且富有创意。整体感觉像是一个经验丰富的设计师精心打磨的作品。

第二个测试案例：我只给了一个简单指令——“做一个独立摄影师的个人作品集网站”，没有任何附加信息。

这考验AI在信息极度匮乏下的自主决策能力。

真正让结果稳下来的，往往是最后那一步自检

未使用Skill的版本，直接开干。结果是深色背景，磨砂玻璃质感，半透明卡片，文案充满典型的AI感。完全没有体现“漫游”“自由”的氛围。

而使用Skill的版本，则主动提问：整体配色倾向？核心视觉元素？

随后，它虚构了一个名叫Chloe的摄影师，从头设计了一整套视觉语言。最终效果，从上往下浏览，就像在翻一本高端摄影画册。

看到这个网站，你会不由自主地相信这位摄影师的审美水准。效果非常出色。

最后总结：未使用Skill的版本，本身已经很不错。基于现有模板，输出质量远超大多数程序员手写代码。得分大概在85到95分之间。

而使用Skill后，从“合格”跃升至“有风格”。这十分的差距，恰恰来自那些看似琐碎的规则。

一个规则影响不大，但叠加起来，就是质的飞跃。

我已将Skill的完整文件、原始参考的Claude Design提示词，以及几个Demo网站，全部打包开源。大家需要的话，可以直接去GitHub搜索该项目，免费获取。

讲完方法和案例之后，他顺手把开源项目和下一条主线也带了出来

最后，再推荐一下我最近在做的开源项目：EasyAgent。上一个解说Harvey的视频发布后，很多同学问我：在实际项目中，如何搭建Agent？于是我做了这个项目。

它的目标是从零复刻一个类似Claude Code的本地产品。最终实现企业级AI能力，真正理解Claude Code这类产品背后的运作机制。

如果你最近也在尝试做Agent领域的转型，这个项目不容错过。

如果这个教程对你有帮助，希望你能点赞、投币、收藏三连支持。我会持续分享更多有价值的AI实战内容。感谢观看，我们下期见。

---

本文由 AI 基于转写整理，仅供复查参考。