Appearance
Claude Design系统提示词拆解：提炼成Skill让AI输出高级设计
Claude Design的核心竞争力，很大程度上来自那套精心设计的系统提示词。Opus 4.7的模型能力是基础，但让它稳定输出高水平设计的，是那420行提示词。
Claude Design是什么？
2026年4月17日，Anthropic发布了Claude Design。上线当天，Figma股价大跌。
它的界面很简洁：左边聊天，右边画布。你描述想要什么，它就在右边画出来。
Anthropic设计团队的Ryan Mather说了一句关键的话：
不要用对待画布工具的方式来用Claude Design，它更像Claude Code。
传统设计工具的逻辑：人在画布上操作，AI辅助加速。Claude Design反过来：AI是主要的生成者，人是主要的审阅者。
| 区别 | 传统设计工具 | Claude Design |
|---|---|---|
| 输出 | 静态图片 | 可运行的代码 |
| 理解 | 单一画布 | 理解你的代码库 |
| 协作 | AI辅助 | AI主导，人审阅 |
系统提示词核心拆解
2.1 角色定位：设计师+工匠+产品经理
开头第一句：
You are an expert designer working with the user as a manager.
没有说"你是一个AI助手"。说的是"你是一个专家设计师，用户是你的经理"。
这个微妙角色倒转带来两个效果：
- AI会更主动做决策（设计师该有的判断力）
- 会在关键节点征求用户意见（向经理汇报）
2.2 工作流：六步闭环
| 步骤 | 内容 |
|---|---|
| 第一步 | 理解需求（问清楚再动手） |
| 第二步 | 探索现有资源 |
| 第三步 | 制定计划 |
| 第四步 | 搭建文件结构 |
| 第五步 | 完成并验证 |
| 第六步 | 极简总结 |
什么时候问，什么时候直接做？
make a deck for the attached PRD → ask questions
make a deck with this PRD for Eng All Hands, 10 minutes → no questions
turn this screenshot into an interactive prototype → ask questions only if unclear信息充足就干活，信息不足才提问。
2.3 去AI味的秘诀
Claude Design给出了一份明确的"避免AI味清单"：
| ❌ 避免 | ✅ 替代 |
|---|---|
| 过度使用渐变背景 | 克制的纯色或微妙纹理 |
| 随便使用Emoji | 只在品牌本身就用时才用 |
| 左侧彩色边框的圆角卡片 | 其他视觉强调方式 |
| SVG硬画复杂图形 | 用占位符，索取真实素材 |
| Inter/Roboto/Arial字体 | Plus Jakarta Sans/Space Grotesk/Sora |
| 堆砌无意义数据和图标 | 每个元素必须证明存在理由 |
2.4 oklch色彩系统
为什么是oklch？
传统HSL色彩空间有致命缺陷：感知不均匀。同样的亮度值，黄色看起来比蓝色亮得多。
oklch是感知均匀的色彩空间。保持L（亮度）和C（色度）不变，只改变h（色相角），就能自动得到和谐的色彩搭配。
配色策略分三层：
| 优先级 | 策略 |
|---|---|
| 第一层 | 优先用品牌色 |
| 第二层 | 用oklch派生和谐的衍生色 |
| 第三层 | 绝对不要凭空发明新色相 |
2.5 内容原则
Do not add filler content. Every element should earn its place.
AI做设计时有根深蒂固的倾向：填满空间。
应对策略：
- 每个元素必须证明自己存在的理由
- 想加内容？先问用户
- 页面看起来空？用版式和留白解决，不是靠塞内容
2.6 验证闭环
完成后：
- 调用done，展示给用户并检查控制台错误
- 如果有错误，修复后再次调用done
- 确认无误后，调用fork_verifier_agent——启动独立子代理做全面检查
关键：它会fork出另一个独立的Agent来做检查，避免"自己审自己"的确认偏误。
Skill设计思路
核心结构
| 模块 | 内容 |
|---|---|
| 角色定义 | 动态角色切换——根据任务变身UX设计师/动效设计师/数据可视化专家 |
| 六步工作流 | 理解需求→获取设计上下文→宣告设计系统→v0半成品→完整构建→验证 |
| 反AI味清单 | 扩展版去AI味规则 |
| 占位符哲学 | 没有图标/图片/组件时画占位符，不硬画假图 |
| 配色×字体配对表 | 5套经过验证的视觉风格起点 |
关键改进：第三步宣告设计系统
如果AI在脑子里默默决定了配色方案然后开始写代码，你第一次看到的就是一个完整的页面。此时如果方向错了，推翻重来的成本很高。
提前宣告出来，用户可以在动手前就纠偏。
v0半成品策略
v0包含：核心结构+配色字体token+关键模块占位
不包含：内容细节和完整组件库
带假设和占位符的v0，比花3倍时间打磨出来的"完美v1"更有价值——后者一旦方向错了就要全推翻。
实战对比
DEMO 1：太空探索博物馆
提示词：帮我做一个"太空探索博物馆"的线上展览首页
| 维度 | 无Skill版本 | 有Skill版本 |
|---|---|---|
| 配色 | 青紫粉三色渐变（AI默认审美） | oklch深色墨色+琥珀色（克制高级） |
| 字体 | Orbitron（直觉太空字体） | Instrument Serif + Space Grotesk（杂志质感） |
| 排版 | 教科书式落地页结构 | 编辑感编排，信息栏三栏布局 |
| 视觉 | 大量发光效果堆砌 | 每个元素经过取舍 |
DEMO 2：独立摄影师网站
提示词：帮我做一个独立摄影师的个人作品集网站首页
关键区别：无Skill版本直接开干；有Skill版本先询问关键问题（风格定位、目标受众、作品类型）
| 维度 | 无Skill版本 | 有Skill版本 |
|---|---|---|
| 色调 | 深色霓虹调性 | 暖色纸张底色+深色墨色 |
| 文案 | 满满AI词汇 | 有人味、有情感连接 |
| 布局 | 标准卡片网格 | 杂志编排式，不对称网格 |
结论
无Skill版本已经很好（85分），有Skill版本更精致（95分）。
这10分的差距，来自Skill里那些看似琐碎的约束和引导：
- 不用Inter
- 用oklch配色
- 先宣告设计系统
- 克制内容填充
- 用高品质字体配对做起点
每一条规则效果微小，叠加在一起，量变产生质变。
