Claude Design系统提示词深度解析

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

我花了些时间研究Claude Design的系统提示词，发现其中不少内容很有意思，特此分享给大家。

角色与定位

和许多提示词的单一定位不同，Claude Design需要完成综合性任务，因此并未固定为单一角色。

有两个核心要点：

• 一方面确立角色的专业权威性，另一方面明确汇报关系，避免模型擅自做主。

  
  

  
  

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

  
  

  
  

这与Claude Design的定位相符，即通过HTML完成各类视觉工作。

六步工作流

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

第一步：先明确需求再行动

提示词要求AI在开始工作前，必须明确输出形式、保真度、方案数量、约束条件，以及涉及的设计系统、UI工具包和品牌信息。

这一点源于Claude Code的AskUserQuestion工具，也是Claude Design的核心体验之一——动手前先通过提问明确需求。

第二步：完整阅读资料，拒绝敷衍

要求AI仔细研究用户提供的资源，完整阅读设计系统定义及相关链接文件。

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

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

AI的训练数据中包含大量UI案例，容易形成“印象派”的还原方式——看似相似，但细节完全不对，比如颜色代码、间距、字体粗细等都可能出错。只有真正阅读文件，才能实现像素级的准确还原。

第三步：制定计划或待办清单

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

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

包含两层验证（done的控制台检查和verifier的视觉检查），分别解决不同类型的bug，互不干扰且不重叠。

第六步：极简总结，只说明注意事项和下一步行动

交付标准

除了常规的防错设计，还有几个细节值得关注：

文件不能过大，超过1000行需拆分为多个小文件。这并非代码洁癖，而是因为AI修改大文件时更容易出错，小文件则便于定位问题。

播放进度需持久化。对于幻灯片、视频类交付物，必须用localStorage保存当前位置，确保用户刷新页面后能回到原来的位置。这是一个小却贴心的规定，说明提示词的制定者真正使用过该产品，了解“迭代过程中频繁刷新”的真实场景。

颜色不能随意创造。优先使用品牌或设计系统中的颜色；若限制过多，用oklch定义和谐色；最后才考虑从零创造颜色。三级优先级明确，因为AI最容易犯的错误就是“觉得某个蓝色不错”，然后随手使用与品牌不匹配的颜色。

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

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

一些禁用规则：永远不要使用scrollIntoView，它可能扰乱Web应用，必要时使用其他DOM滚动方法；禁用Emoji，仅在设计系统本身使用Emoji时例外。

工作流之外：设计工作方法的强化

提示词中有一段专门关于“How to do design work”的内容，起到提纲挈领的作用。

在我看来，这段内容与前面有些重复，但与AI交流后发现，它是用于增强细节的——重要的事情需多次强调。

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

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

  
  

  
  

• 交互流程或多方案场景——制作成可点击的高保真原型，通过Tweaks切换不同版本

  
  

  
  

明确要求提供3个以上的变体，从多个维度进行探索：先给出保守方案，再给出大胆方案。目的不是提供“最佳答案”，而是让用户从变体中找到感觉，进而混搭。

提示词还阐述了通用设计流程，共五步：

1. 提问。

   
   

   
   

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

   
   

   
   

3. 开始编写HTML文件时，先写下一些假设、上下文和设计推理，就像你是初级设计师，用户是你的经理。先放置占位设计，尽早向用户展示文件。

   
   

   
   

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

   
   

   
   

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

   
   

   
   

要求AI扎根已有上下文，避免从零开始。必须先找到现成的UI工具包、设计系统或截图，然后“沉浸在该品牌的视觉语言中”进行设计。若找不到，需主动向用户索取。凭空生成的UI无论多精美，与真实产品放在一起都会显得格格不入。

给模型的一些提示：

• CSS、HTML、JS和SVG功能强大，用户通常不清楚它们的潜力，要给用户带来惊喜。

  
  

  
  

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

  
  

  
  

那些“禁止”清单：踩过的坑

提示词中有一段“反AI俗套”的规定，列出了一系列禁止事项：

• 不要使用渐变背景

  
  

• 不要使用Emoji（除非品牌本身使用）

  
  

• 不要制作“圆角+左边框强调色”的卡片

  
  

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

  
  

• 不要反复使用Inter、Roboto、Arial字体

  
  

  
  

这些禁令背后的逻辑是：AI的训练数据中充满风格雷同的UI，这些元素出现频率极高，导致AI不自觉地反复输出。若不明确禁止，就会持续看到同一套“AI设计感”。

提问的艺术：为何要求至少问10个问题？

提示词在询问用户问题方面非常执着，有单独一节专门明确提问要求，甚至规定了最低数量：10个。

这乍看似乎有些多余——10个问题不会让用户厌烦吗？

但背后的逻辑是：AI的默认倾向是少问多做，问得少看似更“高效”“干练”，能带来更好的短期用户体验。然而，设计工作的返工成本极高，一旦方向错误，后续所有工作都需重来。

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

技能部分

Claude Design拥有以下内置技能：

最后：这份提示词的使用方法

这份系统提示词规则密度高，包含Claude团队的诸多最佳实践、工作流及避坑方法。你可以查看原版以查缺补漏，也可以让AI提炼这些规则，作为后续设计工作的准则或技能参考。

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

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