No. 18: 从零搭一套跨平台设计系统——Claude Cream 心路实录
为什么市面上那么多暗色主题，我却偏要做一套暖色调的亮色设计系统？从设计令牌到跨平台渲染，一个产品经理的 CSS 探索之旅。
2026/7/13
我每天在 Typora 写东西，在 Obsidian 整理知识，在终端跑命令，在 Claude Code 里跟 AI 结对编程。
四个工具，四个界面。没有一个互相认识。
某个深夜我盯着 Typora 的纯白背景——#ffffff——突然觉得刺眼。不是物理上的刺眼，是心理上的。这跟我在 Claude.com 上对话时的色调完全不一样，后者那种暖融融的奶油色让人能坐得住。
一个念头冒出来：能不能让所有我写作和编码的地方，共用同一套视觉语言？
1️⃣ 这件事值得做吗
刚产生这个想法时，我花了三天犹豫。
因为市面上不缺主题。VS Code 主题成千上万，Obsidian 社区几百个，Typora 也有不少好看的。问题是它们之间没有关联。 我不想在 Typora 用一种颜色感知，到 Obsidian 又换一种，到终端又完全不一样。大脑每次切换都在做无意识的”视觉校准”。
还有个更重要的问题：大部分主题是暗色的。暗色主题在显示器上确实好看，在投影仪上惨不忍睹。 我经常要投屏讲东西，暗色主题一投出去，会议室里没人看得清。
不是暗色主题不够多。是做得好且能用在工作场景的亮色主题太少了。
我决定做一套自己的。不是为了”做一个主题”，是为了让写作和编码这件事，在视觉上有一致性。
2️⃣ 从”想要什么颜色”到”设计系统”
最开始我只想给 Typora 换个背景色。把 #ffffff 改成 #faf9f5，一个暖奶油色，像旧纸张的质感。
但这个想法一旦开了头就收不住。改了背景色，正文颜色也得调，不然对比度不对。调了正文，代码块也得跟着变。变了代码块，强调色选什么？蓝的？绿的？都不对。
我试了一圈，最终落在珊瑚色上。
#cc785c——像珊瑚、像陶土、像旧书脊上的烙印。 它在暖色画布上不跳，但又足够独特。我厌倦了蓝绿主导的技术产品视觉语言，珊瑚色有人文感。
然后我意识到，要的不只是一个颜色方案。如果每个平台重新配一遍色，改一个地方得手动同步四五次——这不是维护，这是体力活。
所以第一步不是写 CSS，是搭了一个 tokens/tokens.json。
| 范畴 | 变量数量 | 示例 |
|---|---|---|
| 颜色（Light） | 25 个语义色 | bg-canvas: #faf9f5 |
| 颜色（Dark） | 25 个语义色 | bg-canvas: #181715 |
| 排版 | 5 级 | font-body: 16px/1.8 |
| 间距 | 8 级（8px 递增） | space-4: 32px |
| 圆角 | 6 档 | radius-md: 6px |
| 语法高亮 | 11 类 token | keyword, string, function... |
| 组件引用 | ~15 个组件 | button-primary, code-window... |
一个令牌，所有平台共享。 改个强调色不用每个文件改一遍，改 tokens.json 就完了。这是我作为一个产品经理的本能——不要手动同步，不要有多个事实来源。
3️⃣ 四个平台，四个脾气
理想很丰满，现实是每个平台都有自己的脾气。
Typora 是最乖的。它原生支持 CSS 变量，亮暗两套主题拆两个文件就行。唯一的坑是文件名必须用连字符，不能用下划线——Typora 直接拒读。
Obsidian 复杂一些。它有自己的 CSS 变量体系，我得把我那套 tokens 映射到 Obsidian 的变量名上。而且 Obsidian 社区有个很强的 Style Settings 插件——用户希望能在设置面板里调页宽、字号、主色。这意味着我的主题不能硬编码，得开接口给别人调。
Ghostty 是纯终端配色。没有 CSS，没有变量，只有 palette 定义。它给我 16 个颜色槽，我得把珊瑚色、奶油色、语法高亮色全部塞进这 16 个坑里。好在它支持跟随系统外观自动切换——亮暗各一套 palette，不用手动换。
AI CLI 三位（Claude Code、Codex CLI、Cursor）是最特别的。它们不渲染 CSS，但它们渲染项目规范。Claude Code 读 CLAUDE.md，Codex CLI 读 AGENTS.md，Cursor 有自己的 settings.json。所以我把这三个工具的配置也放进了项目——写作相关工具的统一色调，编码相关工具的规范风格，都在同一个 repo 里。
每个平台写一套主题不叫设计系统。设计系统是跨平台的内容一致性。 用户在不同工具间切换时不需要重新适应视觉语言。
4️⃣ 三个有意思的决策
项目过程中有三个决策我觉得值得记下来。
亮色模式的语法高亮比暗色难做。
暗色模式天然适合高饱和语法色——黑色背景上什么颜色都跳。但奶油色背景上，传统 IDE 的高亮方案显得太吵。试了好几套方案，最终选了 GitHub 风格的语法着色：keyword 用红色 #CF222E，string 用蓝色 #0A3069——温和但有区分度。
中文排版是核心约束。
很多主题做英文排版很漂亮，换上中文就崩。我定了两个规矩：正文全用 PingFang SC（macOS 自带的中文系统字体），代码用 JetBrainsMono Nerd Font Mono。不做衬线标题，不依赖付费字体。 PingFang SC 本身已经足够撑起编辑气质，而且本地调用零加载延迟，离线也能用。
“好用”的最好测试方式是投入日常使用。
项目做到后期，我直接把 Typora 和 Obsidian 的主题切到了 Claude Cream。每天用，每天修。发现自己调了某个位置，就加一条 token。发现某个颜色在特定场景下看不清，就调。最有效的 QA 不是测试，是自己的手放在键盘上用了三天。
5️⃣ 一些感悟
开源一个项目到 GitHub 后，感受跟我想的不太一样。
我原以为会有人 star、提 issue、fork。实际上去 GitHub 搜一下就会发现，CSS 主题类 repo 成千上万，一个新人做的亮色主题根本没人看见。这很公平——我做它的初衷也不是为了 star。
我现在每天在四个工具间切换，每一个都是奶油色画布、珊瑚色点缀、PingFang SC 正文。视觉上不再有割裂感了。
前几天我在公司投屏开会。以前用暗色主题，投上去第一件事是说”等我调一下亮度”。这次直接打开，会议室里看得清清楚楚。
旁边同事问了一句：“你这个界面看着挺舒服的，什么主题？”
大概这就是产品经理做开源项目的最终回报——有人注意到了你没说的事。