Claude Design 使用指南

Claude Design 是 Anthropic 为 Claude 系列产品制定的设计语言与交互规范。本指南帮助你理解其核心原则，并在实际工作中高效运用。

---

目录

1. 什么是 Claude Design
2. 核心设计原则
3. 视觉语言
4. 交互模式
5. 提示词设计（Prompt Design）
6. 对话流设计
7. 多模态设计
8. 工具与集成设计
9. 常见场景最佳实践
10. 反模式与注意事项

---

什么是 Claude Design

Claude Design 涵盖两个层面：

• 产品设计层：Anthropic 官方产品（Claude.ai、Claude Code、API 控制台）的 UI/UX 规范，包括色彩、排版、组件与交互反馈。
• 交互设计层：如何为基于 Claude 的应用设计高质量的人机对话体验，包括提示词结构、输出格式、工具调用流程等。

本指南重点覆盖交互设计层，帮助开发者和产品设计师构建以 Claude 为核心的应用。

---

核心设计原则

1. 诚实透明（Honesty First）

Claude 的设计哲学要求界面和交互不应误导用户。应用层设计也应遵循：

• 明确告知用户当前是 AI 在响应
• 不隐藏不确定性，允许 Claude 表达"我不确定"
• 错误和局限性应以清晰方式呈现，而非用模糊语言掩盖

2. 有益无害（Helpful & Harmless）

交互设计应优先确保用户获得真正有价值的帮助：

• 设计清晰的任务引导，减少用户的认知负担
• 提供安全护栏，避免输出对用户有害的内容
• 在敏感话题上设计适当的提示和确认机制

3. 以人为中心（Human-Centered）

• 保持对话的自然感，避免机器感过强的措辞
• 允许用户修正和引导对话方向
• 支持多轮迭代，而不是强迫用户一次性给出完美指令

---

视觉语言

色彩系统

用途	色彩建议	说明
主色调	#CC785C（赭橙）	Claude 品牌标志色
背景	#FAF9F6（暖白）	低疲劳阅读背景
文字	#1A1A1A（近黑）	高对比主文字
辅助色	#6B7280（中灰）	次要信息、时间戳
成功态	#16A34A	任务完成、确认
警告态	#D97706	不确定性提示
错误态	#DC2626	错误或拒绝响应

排版规范

标题层级：
  H1 — 页面/会话主题，24px，Semi-bold
  H2 — 功能区块，20px，Medium
  H3 — 内容分组，16px，Medium

正文：
  主文字 — 15px，Regular，行高 1.6
  代码块 — 13px，Monospace（推荐 JetBrains Mono）
  注释/辅助 — 13px，Regular，灰色

间距与圆角

• 基础间距单位：8px
• 气泡/卡片圆角：12px（用户侧）/ 16px（AI 侧）
• 输入框圆角：8px

---

交互模式

消息气泡设计

┌─────────────────────────────────┐
│ 用户消息                          │  ← 右对齐，填充色背景
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 🤖 Claude                        │
│                                  │
│  AI 响应内容，左对齐，              │  ← 左对齐，白色/浅色背景
│  支持 Markdown 渲染               │
│                                  │
│  [复制] [重新生成] [反馈]           │  ← 操作按钮，hover 显示
└─────────────────────────────────┘

加载与流式输出

• 使用**流式输出（Streaming）**而非等待完整响应后再显示
• 加载中显示光标动画（▋），而非转圈 loading
• 长响应超过屏幕高度时，自动滚动跟随输出

状态反馈

状态	视觉表现
思考中	三点脉冲动画 ···
流式输出	文字逐字出现 + 末尾光标
工具调用中	显示工具名称 + 进度指示
完成	操作按钮淡入显示
错误	红色提示 + 重试按钮

---

提示词设计（Prompt Design）

良好的提示词设计是 Claude 应用的核心。

结构化提示词模板

## 角色定义
你是一个 [角色描述]，专注于 [领域]。

## 任务
[清晰描述需要完成的任务]

## 上下文
[提供必要的背景信息]

## 约束
- [限制条件 1]
- [限制条件 2]

## 输出格式
[期望的输出结构，如 JSON / Markdown / 纯文本]

## 示例（可选）
输入：...
输出：...

提示词分层架构

┌──────────────────────────────┐
│      System Prompt           │  ← 角色、能力边界、安全规则（固定）
├──────────────────────────────┤
│      Context Injection       │  ← 动态注入：用户资料、文档、历史
├──────────────────────────────┤
│      User Message            │  ← 用户实际输入
└──────────────────────────────┘

提示词设计技巧

1. 角色赋予（Role Assignment）

你是一位资深 Python 工程师，擅长性能优化和代码审查。
请以 code review 的视角分析以下代码：

2. 思维链（Chain of Thought）

请一步步思考，然后给出最终答案。
先分析问题，再列出可能方案，最后推荐最优解。

3. 输出格式约束

请以如下 JSON 格式输出，不要包含额外说明：
{
  "summary": "...",
  "key_points": [...],
  "confidence": 0.0-1.0
}

4. 少样本示例（Few-Shot）

示例 1：
输入：把苹果翻译成英语
输出：apple

示例 2：
输入：把香蕉翻译成英语
输出：banana

现在请翻译：芒果

---

对话流设计

多轮对话状态管理

对话开始
    │
    ▼
[初始意图识别] ──→ 明确任务
    │
    ▼
[信息收集] ──→ 必要时追问澄清
    │
    ▼
[任务执行] ──→ 流式输出结果
    │
    ▼
[确认与迭代] ──→ 用户反馈修正
    │
    ▼
[任务完成 / 下一轮]

澄清问题设计原则

• 每次最多追问 1-2 个关键问题，不要一次列出 5 个问题
• 优先追问影响最大的不确定项
• 提供选项而非开放式问题，降低用户认知成本

❌ 差的设计：
"请问您的用户群体是谁？技术栈是什么？预算多少？时间要求？团队规模？"

✅ 好的设计：
"我可以从两个方向帮你：A) 快速原型，优先速度；B) 生产级方案，优先稳定性。
你更倾向于哪个方向？"

错误恢复设计

当 Claude 输出不符合预期时，界面应支持：

1. 重新生成：使用相同输入重试
2. 编辑后重试：允许用户修改上一条消息
3. 分支对话：保留当前响应，从某一节点创建新分支
4. 反馈机制：👍 / 👎 收集数据用于改进

---

多模态设计

图像输入设计

支持格式：JPEG, PNG, GIF, WebP
最大尺寸：建议压缩至 2048px 以内
上传方式：拖拽 / 粘贴 / 点击上传

界面设计要点：

• 上传后显示缩略图预览，允许删除
• 多图上传时，标注图片编号方便引用
• 图像分析中显示处理进度

文件与文档

文件类型	处理方式
PDF	提取文本内容
Word/Excel	转换为结构化文本
代码文件	高亮显示，语法识别
CSV	表格预览 + 数据分析

---

工具与集成设计

Tool Use（工具调用）界面规范

当 Claude 调用外部工具时，应向用户清晰展示：

┌─────────────────────────────────────┐
│ ⚙️  正在调用：搜索工具                │
│    查询："2024年AI发展趋势"           │
│    ────────────────────────────     │
│    ✅ 已获取 5 条结果                 │
└─────────────────────────────────────┘

设计原则：

• 工具调用过程可见但不干扰
• 支持展开查看工具的原始输入/输出（调试模式）
• 工具失败时给出清晰错误信息和替代方案

API 集成设计

# 推荐的 Claude API 调用结构
import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=1024,
    system="你的系统提示词",
    messages=[
        {"role": "user", "content": "用户消息"}
    ]
)

流式输出实现：

with client.messages.stream(
    model="claude-sonnet-4-6",
    max_tokens=1024,
    messages=[{"role": "user", "content": "你好"}]
) as stream:
    for text in stream.text_stream:
        print(text, end="", flush=True)

---

常见场景最佳实践

场景一：代码助手

System Prompt 设计：
- 指定编程语言和技术栈
- 要求代码附带简短注释
- 指定输出格式（代码块 + 说明）

界面设计：
- 代码块自动语法高亮
- 一键复制按钮
- 支持代码对比 diff 视图

场景二：文档写作助手

System Prompt 设计：
- 定义写作风格（正式/口语/技术性）
- 指定目标受众
- 设定长度约束

界面设计：
- 支持 Markdown 实时预览
- 字数统计显示
- 版本历史对比

场景三：数据分析助手

System Prompt 设计：
- 要求输出结构化分析报告
- 指定数据可视化需求（图表建议）
- 定义置信度表达方式

界面设计：
- 表格数据直接渲染
- 图表代码支持预览
- 支持导出分析结果

场景四：客服机器人

System Prompt 设计：
- 明确服务范围和边界
- 设计降级策略（转人工的触发条件）
- 定义标准回复模板

界面设计：
- 快捷回复选项（减少用户输入）
- 满意度评分收集
- 转接人工的无缝过渡

---

反模式与注意事项

提示词反模式

反模式	问题	改进方向
过度限制	“只能回答关于XX的问题，其他一律拒绝”	给予灵活性，优雅降级
角色混淆	System Prompt 中混入用户指令	严格分离系统与用户层
提示词注入	未过滤用户输入中的指令	对用户输入进行转义处理
幻觉放大	要求 Claude 在不确定时也给出确定答案	允许并鼓励表达不确定性

界面设计反模式

❌ 避免：
- 无限制的消息历史（影响性能和上下文质量）
- 无加载状态（用户不知道是否在处理）
- 强制用户等待完整响应（应使用流式输出）
- 隐藏错误信息（用"出错了"代替具体说明）

✅ 推荐：
- 设置合理的上下文窗口管理策略
- 始终提供清晰的状态反馈
- 优先使用流式输出
- 提供可操作的错误恢复选项

安全与合规注意事项

1. 内容过滤：在 Claude 响应前后加入内容审核层
2. 数据隐私：不在提示词中硬编码用户敏感信息
3. 速率限制：设计合理的请求节流，防止滥用
4. 审计日志：记录关键操作日志，支持问题追溯

---

附录：快速参考卡片

提示词质量检查清单

• 任务描述是否清晰明确？
• 是否提供了足够的上下文？
• 输出格式是否有明确要求？
• 是否包含必要的约束条件？
• 是否有示例辅助理解（复杂任务）？

界面设计检查清单

• 是否有流式输出支持？
• 是否有清晰的加载状态反馈？
• 错误处理是否用户友好？
• 是否支持消息重试/编辑？
• 代码块是否有语法高亮和复制功能？

---