拆解Claude Design 系统提示词

本文来自微信公众号： 陆三金 ，作者：陆三金，原文标题：《拆解 Claude Design 系统提示词》

花了点时间研究了一下，有一些内容很有意思，分享给大家。

角色与定位

不同于很多提示词的单一定位，Claude Design要完成的任务是综合的，所以并未固定为单一角色。

两个要点：

• 一方面确立角色的专业权威，另一方面建立汇报关系，防止模型自作主张。

  
  

• 反复强调HTML，HTML是工具也是交付物，但媒介和输出格式会变化。LLM被赋予的角色包括：动画师、UX设计师、幻灯片设计师、原型设计师等等。

  
  

这符合Claude Design的定位，通过HTML来实现很多视觉工作。

六步工作流

这份提示词定义了一个6步工作流

第一步：先问清楚再动手

提示词要求AI在开始前必须搞清楚：输出形式、保真度、方案数量、约束，以及涉及的设计系统、UI kit和品牌。

这一点应该是来源于Claude Code的AskUserQuestion tool，也是Claude Design的核心体验之一，在开始动手前，先通过提问来明确需求。

第二步：真正读完资料，别假装读过

要求AI探索用户提供的资源。完整阅读设计系统定义以及相关链接文件。

这一点主要是为了防止AI偷懒。

"如果真正的数据源就在眼前，却仅仅依靠应用程序的训练数据记忆来构建应用程序，这种做法是偷懒的，而且会产生千篇一律的仿制品。"

AI训练数据里见过很多UI，会形成一种「印象派」的还原方式-大致像，但感觉完全不对。颜色token值不对，间距不对，字体weight不对。只有真正去读文件，才能做到像素级准确。

第三步：制定计划，或者建立待办清单

第四步：建立文件夹结构，并把资源复制到当前目录

第五步：验证闭环-最精密的设计

两层验证（done的console检查+verifier的视觉检查），分别解决不同类型的bug，互不干扰，互不重叠。

第六步：极其简短地总结，只说注意事项和下一步

交付标准

除了几个常规的防呆设计，还有几个细节可以说一下。

文件不能太大。超过1000行就要拆成多个小文件。这不是代码洁癖，是因为AI修改大文件时更容易出错，小文件更容易定位问题。

播放进度要持久化。凡是幻灯片、视频类的交付物，必须用localStorage保存当前位置。用户刷新页面后能回到原来的位置。这是一个很小但很体贴的规定，说明提示词的制定者真的在用这个产品，知道「迭代过程中频繁刷新」是真实场景。

颜色不能随便发明。优先用品牌/设计系统里的颜色；如果太受限，用oklch定义和谐色；最后才考虑从零造色。三级优先级写得很清楚，因为AI最容易犯的错就是「觉得这个蓝色不错」然后随手用了一个跟品牌完全不搭的颜色。

先理解，后输出在向现有UI添加内容时，要求先理解它的视觉语言，然后再去匹配文案风格、配色、语气、悬停和点击状态、动画风格、阴影、卡片、布局模式、密度等。要求AI把观察到的东西用思考过程说出来。

不要过度依赖截图Claude更擅长基于代码复刻或编辑界面，而不是只看截图。要求AI在拿到源数据时，应重点探索代码和设计上下文，而不是过度依赖截图。

一些禁用永远不要使用scrollIntoView，它可能扰乱Web应用。必要时使用其他DOM滚动方法；禁用Emoji，只有在设计系统本身使用emoji时才用。

工作流之外，How to do design work增强

提示词里有一段专门说How to do design work，有点提纲挈领的感觉。

在我看来这里的内容和前面有些重复，但在和AI交流之后，发现这段是用来增强细节，重要的事情讲三遍，就是这种感觉。

再次强调，每次设计任务的输出是一个HTML文件，但这个文件要承载多个方案。提示词把场景分成两类：

• 纯视觉探索（颜色、字体、静态布局）-用design canvas，把多个选项并排摆在一块画布上

  
  

• 交互流程或多方案场景-做成可点击的hi-fi原型，通过Tweaks切换不同版本

  
  

明确要求给出3个以上的变体，沿多个维度探索：

先给保守方案，再给大胆方案。目的不是给出「最好的那个答案」，而是让用户从变体里找到感觉，然后混搭。

把通用设计流程说了一下，这次是5步。

1. 提问。

   
   

2. 查找现有UI kit，并收集上下文；复制所有相关组件，阅读所有相关示例。如果找不到，询问用户。

   
   

3. 开始写HTML文件时，先写一些假设、上下文和设计reasoning，就像你是一名junior designer，而用户是你的manager。先放占位设计。尽早展示文件给用户。

   
   

4. 编写React组件并嵌入HTML文件。尽快再次展示给用户。补上下一步建议。

   
   

5. 使用你的工具检查、验证并迭代设计。

   
   

要求AI要扎根已有上下文，不要从零开始。必须先找到现成的UI kit、设计系统、或者截图，然后「活在这个品牌的视觉语言里」做设计。如果找不到，要主动问用户要。凭空生成的UI无论多精美，跟真实产品放在一起都会格格不入。

给模型的一些tips：

• CSS、HTML、JS和SVG非常强大。用户通常不知道它们能做到什么。给用户惊喜。

  
  

• 如果没有图标、资产或组件，就画占位符。在高保真设计里，占位符比糟糕地硬画真实内容更好。

  
  

那些「禁止」清单：被踩过的坑

提示词有一段「反AI俗套」的规定，列了一堆禁止事项：

• 不要用渐变背景

• 不要用emoji（除非品牌本来就用）

• 不要做「圆角+左边框accent色」的卡片

• 不要用SVG画插图（用占位符代替）

• 不要反复用Inter、Roboto、Arial

  
  

这些禁令背后的逻辑是：AI的训练数据里充满了风格雷同的UI，这些元素在数据里出现频率极高，所以AI会不自觉地反复输出。不显式禁止，就会持续看到同一套「AI设计感」。

问问题的艺术：为什么要求至少问10个问题？

提示词在询问用户问题这件事上非常执着，有单独一节专门明确提问这个事，甚至规定了最低数量：10个

这乍看很蠢-10个问题，用户不烦死？

但背后的逻辑是：AI的默认倾向是少问多做。问少了显得更「高效」更「干练」，用户短期体验更好。但设计工作的返工成本极高。一旦方向错了，后面做的所有事情都要重来。

10个问题的规定，是在用数字下限对抗模型的短期讨好倾向。

skill部分

Claude Design拥有以下内置技能

最后：这份提示词可以怎么用

这份系统提示词的规则密度很高，里面有很多Claude团队的最佳实践，有工作流，也要很多避坑的办法，你可以去原版多看几遍，查缺补漏，也可以让AI把这些规则提纯一下，作为你以后做Design的规则，或者skill。

总之，推荐这份系统提示词。

链接：https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt