# 智源AI 电商视觉规范 V1.1

> 📅 创建时间：2024年12月
> 🔄 更新时间：2024年12月29日
> 🎯 用途：淘宝主图/详情页设计标准化
> 📦 适用产品：Claude系列（Pro/Max5/Max20）、Claude Code系列

---

## 一、基础规范

### 1.1 尺寸规范

| 素材类型 | 尺寸 | 格式 | 说明 |
| --- | --- | --- | --- |
| 淘宝主图 | 800×800px | PNG/JPG | 正方形，5张轮播 |
| 详情页 | 790×不限 | PNG/JPG | 宽度固定，长图 |
| SKU图 | 800×800px | PNG/JPG | 各版本区分 |

### 1.2 字体规范

| 用途 | 字体 | 备选字体 |
| --- | --- | --- |
| 英文标题 | SF Pro Display | Helvetica Neue, Arial |
| 中文标题 | PingFang SC | Microsoft YaHei, Noto Sans SC |
| 代码装饰 | Consolas | Monaco, monospace |

---

## 二、产品线视觉体系

### 2.1 Claude 系列（网页对话版）

### 设计风格定位

| 产品 | 风格定位 | 背景风格 | 主色调 |
| --- | --- | --- | --- |
| Claude Pro | 入门优雅 | 深色渐变+光晕 | 橙金色 #d97706 |
| Claude Max 5× | 极简高端 | 浅米色纯净 | 金棕色 #C9995A |
| Claude Max 20× | 旗舰尊贵 | 深色+左对齐排版 | 金色 #D4A84B |

### Claude Pro 配色方案

背景渐变：

• #0a0a0a → #1a1410 → #0d0d0d（对角渐变）

标题渐变（金色）：

• #ffffff → #fcd34d → #d97706

光晕效果：

• 右上：#d97706 (40%透明度)
• 左下：#92400e (30%透明度)

徽章/强调色：

• #d97706 → #b45309（渐变）

辅助色：

• 绿点：#22c55e（官方认证）
• 勾选：#fbbf24（特性标签）

### Claude Max 5× 配色方案

背景：

• 纯色 #F5F0E8（米白色）

金色渐变（装饰线/强调文字）：

• #C9995A → #D4A84B → #B8894A

文字颜色：

• 主标题：#1A1A1A（深灰近黑）
• 说明文字：#666666（中灰）

### Claude Max 20× 配色方案

背景：

• 纯色 #1A1A1A（深色）

金色渐变：

• #D4A84B → #C9995A → #B8894A

文字颜色：

• 主标题：#FFFFFF（白色）
• 说明文字：#888888（灰色）
• 分隔点：#C9995A（金色）

---

### 2.2 Claude Code 系列（终端命令行版）

### 设计风格定位

| 产品 | 风格定位 | 背景风格 | 主色调 |
| --- | --- | --- | --- |
| Code Pro | 科技入门 | 深色+代码装饰 | 青绿色 #14b8a6 |
| Code Max 5× | 专业开发 | 深色+紫色强调 | 青绿+紫色 |
| Code Max 20× | 旗舰重度 | 深色+金色强调 | 青绿+金色 |

### Claude Code 通用元素

背景渐变：

• #0a0a12 → #0d1a1a → #0a1015（科技深色）

标题渐变（青绿色）：

• #ffffff → #5eead4 → #14b8a6

光晕效果：

• 右上：#14b8a6 (35%透明度)
• 左下：#0d9488 (25%透明度)

徽章/强调色：

• 青色：#14b8a6 → #0d9488

代码装饰文字：

• rgba(94,234,212,0.3/0.2/0.15)（渐变透明）

### Code Max 5× 特有元素

紫色强调渐变：

• #a855f7 → #c084fc（用于"5倍配额"标签）

### Code Max 20× 特有元素

金色标题渐变：

• #ffffff → #fcd34d → #f59e0b

金色标签背景：

• #f59e0b → #fbbf24 → #f59e0b

光晕改为金色：

• 右上：#f59e0b (35%透明度)

装饰线/边框色：

• rgba(245,158,11,0.15/0.3/0.4)

---

## 三、布局结构规范

### 3.1 Claude Pro / Code Pro 布局（信息丰富型）

┌────────────────────────────────────────┐ │ [官方正版] [Anthropic官方订阅] │ ← 顶部标签区 y=40-90 │ │ │ ANTHROPIC │ ← 品牌名 y=240-280 │ │ │ Claude Pro │ ← 主标题 y=340-390 │ │ │ Anthropic官方AI助手 │ ← 副标语 y=400-460 │ │ │ 中文理解出色 · 200K超长上下文 │ ← 说明文字 y=505-510 │ │ │ [✓ 写作创作] [✓ 编程开发] [✓ 翻译分析] │ ← 特性标签 y=560-618 │ │ │ 成品秒发 / 专属定制 / 托管护航 │ ← 底部说明 y=690-700 │ 三种方案 按需选择 │ ← 行动引导 y=735-745 └────────────────────────────────────────┘

### 3.2 Claude Max 5× 布局（极简型）

┌────────────────────────────────────────┐ │ │ │ ━━━━━━━━━━━━━━━━━ │ ← 顶部装饰线 y=160 │ │ │ Claude │ ← 品牌名(斜体) y=230 │ │ │ Max 5× │ ← 主标题(超大) y=360 │ │ │ ━━━━━━━━━━━━━━ │ ← 底部装饰线 y=400 │ │ │ 5倍Pro用量 │ ← 副标题(金色) y=480 │ │ │ Project专属知识库 │ ← 功能点1 y=560 │ 200K超长上下文 │ ← 功能点2 y=610 │ AI长期记住资料 │ ← 功能点3 y=660 │ │ └────────────────────────────────────────┘

### 3.3 Claude Max 20× 布局（左对齐旗舰型）

┌────────────────────────────────────────┐ │ [anthropic] │ ← 右上角标签 y=45-95 │ ━━━━━ │ ← 左侧装饰线 y=130 │ │ │ Claude │ ← 品牌名(左对齐) y=195 │ │ │ Max │ ← Max(超大) y=330 │ │ │ 20× │ ← 20×(金色超大) y=470 │ │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ ← 分隔线 y=510 │ │ │ 20倍Pro用量 │ ← 副标题 y=590 │ │ │ 几乎无限制 · Project知识库 · 重度用户首选 │ ← 底部标签 y=660 └────────────────────────────────────────┘

---

## 四、组件规范

### 4.1 左上角"官方正版"徽章

<rect x="40" y="40" width="120" height="44" rx="6" fill="url(#badgeGrad)"/> <text x="100" y="70" font-size="20" font-weight="700" fill="#ffffff" text-anchor="middle">官方正版</text>

| 属性 | 值 |
| --- | --- |
| 位置 | x=40, y=40 |
| 尺寸 | 120×44 |
| 圆角 | rx=6（Pro）或 rx=22（Code Max） |
| 文字 | 20px, 700粗, 白色, 居中 |

### 4.2 右上角"官方订阅"标识

<g transform="translate(540, 50)"> <rect width="210" height="40" rx="20" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.15)"/> <circle cx="25" cy="20" r="8" fill="#22c55e"/> <text x="45" y="27" font-size="16" fill="rgba(255,255,255,0.9)">Anthropic官方订阅</text> </g>

| 属性 | 值 |
| --- | --- |
| 位置 | x=540, y=50 |
| 尺寸 | 210×40 |
| 圆角 | rx=20（胶囊形） |
| 绿点 | r=8, #22c55e |
| 文字 | 16px, 90%白色 |

### 4.3 特性标签（3个一组）

<rect x="145" y="570" width="140" height="48" rx="8" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.15)"/> <text x="175" y="600" font-size="18" font-weight="700" fill="#fbbf24">✓</text> <text x="195" y="600" font-size="18" font-weight="500" fill="#ffffff">写作创作</text>

| 属性 | 值 |
| --- | --- |
| 标签尺寸 | 140×48 或 160×48 |
| 间距 | 左中右分布，间隔约20px |
| 勾选符号 | 18px, 700粗, 强调色 |
| 标签文字 | 17-18px, 500粗, 白色 |

### 4.4 代码装饰元素（Code系列专用）

<!-- 左侧 --> <text x="30" y="220" font-family="Consolas, Monaco, monospace" font-size="13" fill="rgba(94,234,212,0.3)">$ claude</text> <text x="30" y="245" font-size="13" fill="rgba(94,234,212,0.2)">{"status": "ready"}</text> <text x="30" y="270" font-size="13" fill="rgba(94,234,212,0.15)">processing...</text>

<!-- 右侧 --> <text x="620" y="420" text-anchor="end" font-size="13" fill="rgba(94,234,212,0.25)">func main()</text>

| 属性 | 值 |
| --- | --- |
| 字体 | Consolas, Monaco, monospace |
| 字号 | 13px |
| 透明度 | 渐变 0.3 → 0.2 → 0.15 |
| 颜色 | rgba(94,234,212,x) 青绿色 |

---

## 五、产品线差异化速查

| 维度 | Claude Pro | Max 5× | Max 20× | Code Pro | Code Max 5× | Code Max 20× |
| --- | --- | --- | --- | --- | --- | --- |
| 背景 | 深色渐变 | 浅米色 | 深色纯色 | 深色渐变 | 深色渐变 | 深色渐变 |
| 主色 | 橙金 | 金棕 | 金色 | 青绿 | 青绿+紫 | 青绿+金 |
| 布局 | 居中 | 极简居中 | 左对齐 | 居中 | 居中 | 居中 |
| 装饰 | 光晕 | 装饰线 | 装饰线 | 光晕+代码 | 光晕+代码 | 光晕+代码 |
| 标签圆角 | rx=6 | 无标签 | rx=0(方角) | rx=6 | rx=22 | rx=22 |
| 底部文案 | 三种方案 | 无 | 无 | 三种方案 | 两种方案 | 两种方案 |

---

## 六、主图2-5内容规划

### 6.1 建议的5张主图分工

| 序号 | 内容定位 | 核心信息 |
| --- | --- | --- |
| 主图1 | 封面图/产品介绍 | 产品名称+核心卖点+服务方案 ✅已完成 |
| 主图2 | 核心功能展示 | 具体功能点+使用场景 |
| 主图3 | 版本对比/选购指南 | Pro/Max对比或与竞品对比 |
| 主图4 | 服务保障说明 | 质保政策+售后服务+交付流程 |
| 主图5 | 促销/行动引导 | 价格优势+限时活动+立即购买 |

### 6.2 详情页内容规划

1. 产品介绍区（品牌+产品名+一句话卖点）
2. 核心功能区（3-5个核心功能配图说明）
3. 版本对比区（不同版本功能/价格对比表）
4. 服务保障区（质保政策+售后流程）
5. 使用指南区（购买后如何使用）
6. 常见问题区（FAQ）
7. 行动引导区（立即购买+联系客服）

---

## 七、文件命名规范

[平台]-[产品线]-[素材类型]-[序号]-[版本]

示例： TB-Claude-Pro-主图-01-v1 TB-Claude-Max5-主图-02-v1 TB-ClaudeCode-Pro-详情页-v1

---

## 八、素材源码索引

> 📍 用途：快速定位已完成素材的SVG源码位置
> 📅 更新时间：2024年12月29日

### 8.1 Claude 网页版（已完成 ✅）

| 产品 | 主图01 | 主图02 | 主图03 | 主图04 | 主图05 | 详情页 |
| --- | --- | --- | --- | --- | --- | --- |
| Claude Pro | ✅ 项目文档 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 |
| Claude Max 5× | ✅ 项目文档 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 |
| Claude Max 20× | ✅ 项目文档 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 | ✅ 已上传 |

### 8.2 Claude Code 终端版（制作中 🔄）

| 产品 | 主图01 | 主图02 | 主图03 | 主图04 | 主图05 | 详情页 |
| --- | --- | --- | --- | --- | --- | --- |
| Code Pro | ✅ 项目文档 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 |
| Code Max 5× | ✅ 项目文档 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 |
| Code Max 20× | ✅ 项目文档 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 | ⏳ 待做 |

### 8.3 参照关系说明

> 📌 Claude Code 系列制作时，参照对应的 Claude 网页版素材结构，仅修改配色和装饰元素

| Code 系列 | 结构参照 | 差异点 |
| --- | --- | --- |
| Code Pro 主图02-05 | → Claude Pro 主图02-05 | 配色改青绿 #14b8a6、增加代码装饰元素 |
| Code Max5 主图02-05 | → Claude Max5 主图02-05 | 配色改青绿+紫 #a855f7、增加代码装饰 |
| Code Max20 主图02-05 | → Claude Max20 主图02-05 | 配色改青绿+金 #f59e0b、增加代码装饰 |
| Code 详情页 | → Claude 详情页 | 同上规则 |

### 8.4 已上传文件清单

📁 已完成素材-SVG源码/ ├── Claude-Pro-主图02.svg ├── Claude-Pro-主图03.svg ├── Claude-Pro-主图04.svg ├── Claude-Pro-主图05.svg ├── Claude-Max5-主图02.svg ├── Claude-Max5-主图03.svg ├── Claude-Max5-主图04.svg ├── Claude-Max5-主图05.svg ├── Claude-Max20-主图02.svg ├── Claude-Max20-主图03.svg ├── Claude-Max20-主图04.svg ├── Claude-Max20-主图05.svg ├── Claude-Pro-详情页.svg ├── Claude-Max5-详情页.svg └── Claude-Max20-详情页.svg

---

**文档维护说明**：

- 更新责任人：Feifei
- 创建时间：2024年12月
- 最后更新时间：2024年12月29日
- 版本：V1.1
- 更新内容：新增第八章「素材源码索引」