拆解Claude Design系统提示词：六步工作流与防俗套设计法则

事件概述

Claude Design 系统提示词是一套高度结构化的 AI 协作规范，旨在通过明确的角色分工、严格的工作流和防呆机制，实现高精度的 UI/UX 设计与开发交付。该方案强调以 HTML 为通用交付媒介，覆盖从线框图到高保真原型的全流程。

核心信息

1. 多角色定位与工具链

• 综合角色：不局限于单一职能，模型需同时扮演动画师、UX 设计师、幻灯片设计师、原型设计师等 5 种专业身份。
• HTML 核心：将 HTML 视为主要工具和交付物，支持承载多方案展示。区分两种场景：
  • Design Canvas：纯视觉探索（颜色、字体、静态布局），多方案并排展示。
  • Hi-Fi 原型：可点击的交互流程，支持通过 Tweaks 切换不同版本。
• 变体策略：强制输出 3 个以上变体，涵盖从保守到大胆的多维度探索，允许用户混搭方案。

2. 六步精密工作流

1. 提问先行：启动前必须明确输出形式、保真度、方案数量、约束条件及涉及的设计系统/UI Kit。引用 AskUserQuestion 工具，强制在动手前澄清需求。
2. 像素级还原：禁止依赖训练数据记忆（防止“印象派”失真）。要求完整读取设计系统文件，确保颜色 Token、间距、字体权重等细节准确无误。
3. 计划制定：建立待办清单与文件夹结构，复制资源至当前目录。
4. 文件拆分：代码超过 1000 行必须拆分为小文件，降低 AI 修改大文件的错误率，便于问题定位。
5. 双重验证：
   • Console 检查：解决逻辑 Bug。
   • Verifier 视觉检查：解决视觉 Bug。
6. 极简总结：仅输出注意事项和下一步建议。

3. 防 AI 俗套设计规范

• 颜色三级体系：优先使用品牌色 → 其次使用 OKLCH 定义和谐色 → 最后才从零造色，严禁随意发明颜色。
• 禁用清单：明确禁止以下元素，以对抗训练数据中的高频雷同模式：
  • 渐变背景
  • Emoji（除非品牌本身使用）
  • “圆角 + 左边框 accent 色”卡片样式
  • SVG 插图（改用占位符）
  • Inter、Roboto、Arial 等常见字体
  • scrollIntoView 等干扰 DOM 的方法
• 代码优先：基于代码复刻界面优于依赖截图；若缺乏图标或资产，应使用占位符而非硬画真实内容。

4. 提问艺术与技能库

• 强制 10 问机制：设定最低提问数量为 10 个，利用数量下限对抗 AI“少问多做”的讨好倾向，避免因方向错误导致的高成本返工。
• 内置 12 项技能：
  • Animated video：基于时间线的动效设计。
  • Interactive prototype：带真实交互的应用。
  • Make a deck：HTML 幻灯片演示。
  • Wireframe：线框图和故事板探索。
  • Export as PPTX：导出可编辑或截图版 PowerPoint。
  • Create design system：创建设计系统或 UI Kit。
  • Handoff to Claude Code：生成开发交接包。
• 上下文扎根：必须先找到现有 UI Kit 和设计系统，禁止凭空生成方案，确保新内容与品牌视觉语言一致。

值得关注

• 持久化细节：针对幻灯片或视频类交付物，强制使用 localStorage 保存进度，应对用户频繁刷新页面的真实场景。
• 思维链要求：在向现有 UI 添加内容时，要求 AI 先输出观察到的视觉语言（配色、语气、动画风格等）的思考过程，再进行匹配。
• 实践价值：该提示词不仅包含规则，更融入了大量避坑指南（如文件拆分、验证闭环），是 AI 设计协作的高质量范本。