Files

Luong NGUYEN 89e89d4aa3 feat(zh): add Chinese translations in zh/ directory

Add Chinese (Simplified) translations for all documentation, organized
under a dedicated zh/ directory that mirrors the English folder structure.

Co-authored-by: tanqingkuang <tanqingkuang@users.noreply.github.com>

Translations originally contributed by @tanqingkuang in #45.
Restructured from *-CN.md suffix pattern into zh/ directory to prevent
the EPUB builder (scripts/build_epub.py collect_folder_files) from
picking up Chinese files via glob("*.md") inside module folders.

2026-04-06 23:08:54 +02:00

6.0 KiB

Raw Permalink Blame History

Claude How To - 设计系统

视觉识别

图标设计概念：指南针 + 代码括号

Claude How To 的图标使用指南针加 > 代码括号来表示“在代码中导航”：

     N (green)
     ▲
     │
W ───>─── E     Compass = Guidance/Direction
     │          > Bracket = Code/Terminal/CLI
     ▼
     S (black)

它带来了以下效果：

视觉清晰：一眼就能看出这是“代码导航指南”
象征意义：指南针 = 找到方向；> = 代码/终端
可扩展性：从 16px 到 512px 都能正常工作
品牌一致性：以极简配色匹配开发者工具气质

色彩系统

配色

颜色	十六进制	RGB	用途
黑色（主色）	`#000000`	0, 0, 0	主描边、文字、南针
白色（背景）	`#FFFFFF`	255, 255, 255	浅色背景
灰色（辅助）	`#6B7280`	107, 114, 128	次要刻度、次级文字
亮绿色（强调）	`#22C55E`	34, 197, 94	北针、中心点、强调线
接近黑色（深色背景）	`#0A0A0A`	10, 10, 10	深色模式背景

对比度（WCAG）

黑底白字：21:1 AAA
灰底白字：4.6:1 AA
绿底白字：3.2:1（仅用于装饰，不用于正文）
深色背景白字：19.5:1 AAA

强调色规则

亮绿色（#22C55E）仅用于高亮：

指南针北针
中心点
强调下划线/边框
绝不作为背景色
绝不用于正文

字体排版

Logo 字体

字体族：Inter、SF Pro Display、-apple-system、Segoe UI、sans-serif
“Claude”：42px，700 字重（加粗），黑色
“How-To”：32px，500 字重（中等），灰色（#6B7280）
副标题：10px，500 字重，灰色，字间距 1.5px，大写

界面字体

字体族：Inter、SF Pro、系统字体（sans-serif）
字重：400-600
风格：简洁、易读

图标细节

指南针规格

指南针图形由以下几何元素组成：

Element             | Stroke/Fill    | Color
--------------------|----------------|------------------
Outer ring          | 3px stroke     | Black / White (dark mode)
North tick          | 2.5px stroke   | Black / White (dark mode)
Other cardinal ticks| 2px stroke     | Gray / White 50% (dark mode)
Intercardinal ticks | 1.5px stroke   | Gray / White 40% (dark mode)
North needle        | filled polygon | #22C55E (always green)
South needle        | filled polygon | Black / White (dark mode)
> bracket           | 3px stroke     | Black / White (dark mode)
Center dot          | filled circle  | #22C55E (always green)

尺寸递进

16px  → 仅环 + 指针 + 箭头（最简版）
32px  → 增加方位刻度
64px  → 增加中间方位刻度
128px → 全细节，所有元素都清晰
256px → 最高细节，较粗描边

尺寸指南

Logo 尺寸

最小：200px 宽（用于网页）
推荐：520px（原始尺寸）
最大：无限制（矢量格式）
宽高比：约 4.3:1（宽：高）

图标尺寸

最小：16px（favicon）
推荐：64-256px（应用、头像）
最大：无限制（矢量格式）
宽高比：1:1（正方形）

间距与对齐

Logo 留白

┌─────────────────────────────────────┐
│                                     │
│        最小留白空间                 │
│         （logo 高度 / 2）          │
│                                     │
│    [COMPASS]  Claude                │
│               How-To                │
│                                     │
└─────────────────────────────────────┘

图标中心点

所有图标都以画布中心为基准：

256px 画布使用 128×128 中心点
128px 画布使用 64×64 中心点
与其他 UI 元素保持对齐

无障碍性

颜色对比

所有文字都满足 WCAG AA（最低 4.5:1）
绿色强调色只用于装饰，不承担信息传达
不依赖红绿配色表达含义

可扩展性

矢量格式保证任意尺寸都清晰
即使在 16px 下，几何形状依然可辨识
细节会随可用空间逐步增加

应用示例

Web 页眉

尺寸：520×120px logo
文件：logos/claude-howto-logo.svg
背景：白色或深色（#0A0A0A）
内边距：至少 20px

应用图标

尺寸：256×256px
文件：icons/claude-howto-icon.svg
背景：白色或深色
用途：应用快捷方式、头像

浏览器 Favicon

尺寸：32px（主用），16px（备用）
文件：favicons/favicon-32.svg
格式：SVG，显示清晰锐利

社交媒体

头像：256×256px 图标
横幅：520×120px logo（居中）

文档

章节标题：按需缩放的 logo
小节图标：64×64px favicon
内联图标：32×32px favicon

文件格式细节

SVG 结构

所有 SVG 文件都采用扁平设计：

无渐变（仅用纯色）
无滤镜效果（不使用模糊、发光或阴影）
干净的描边和填充几何结构
使用 viewBox 实现响应式缩放
代码可读且带注释

跨浏览器兼容性

Chrome/Edge：完全支持
Firefox：完全支持
Safari：完全支持
iOS Safari：完全支持
所有现代浏览器：完全支持

自定义

更换强调色

如果你想创建不同强调色的变体：

把所有 #22C55E 替换成你的强调色
确保装饰性元素的对比度仍高于 3:1
保持黑/白/灰结构不变

缩放

svg {
  width: 256px;
  height: 256px;
}

SVG 会通过 viewBox 自动缩放，不需要额外变换。

版本控制

在 git 中跟踪设计变更：

正常版本化 SVG 文件，因为它们本质上是文本
随设计变更一起打 tag
在提交中包含 DESIGN-SYSTEM.md

最后更新：2026 年 2 月 设计系统版本：3.0

6.0 KiB Raw Permalink Blame History Unescape Escape