Clowder AI设计语言深度解读：为什么"猫猫化"不等于"卖萌化"
【免费下载链接】clowder-aiBuild AI teams, not just agents. Hard rails, soft power, shared mission.项目地址: https://gitcode.com/gh_mirrors/cl/clowder-ai
Clowder AI 是一个让人类和多个 AI"猫猫"成员同处一个房间协作的工作区。它的设计语言常被概括为"猫猫化"——但项目团队从第一天就立下规矩：猫猫化 ≠ 猫化，好看有设计感的猫味，不等于贴满猫 emoji 的卖萌界面。这篇文章用大白话拆解它的设计系统核心。
第一眼印象：要"安静"，不要"热闹"
大多数 AI 产品追求"可爱、活泼、一眼就懂我是 AI"。Clowder AI 反其道而行，它把情绪目标写进了设计宪法：
第一次打开的人应该觉得"安静、可信、有人在"，而不是"热闹、可爱、AI 味"。
这句话出自仓库根目录的 DESIGN.md——整个项目视觉意图的唯一真相源。它的配方可以理解为两种气质的叠加：
- 暖编辑感：奶油色画布（
#faf9f5）、暖墨色文字、衬线体大标题、唯一的赭红强调色。纸是暖的。 - 精密结构：4px 间距节奏、32px 控件高度、用 1px 发丝线分层而不是堆阴影。工具是冷静的。
一句话总结：纸是暖的，工具是冷静的。猫味只加在这个坐标系里，绝不另起一套。
猫猫化的三条硬规则 🐾
"猫猫化"最容易被误解成"到处画猫"。Clowder AI 的设计文档 F056 设计语言特性文档 把这条边界写得很死：
- 猫在内容里，不在界面骨架上。猫味落在头像、名字、说话方式和散落的小彩蛋里；界面的按钮、边框、导航保持克制的工作区气质。
- 图标永远是设计过的 SVG，不是 emoji。正式产品 UI 禁止新增原生 emoji，连系统消息的 ✅⚠️❌ 都被替换成了自绘图标，还有自动化检查脚本把关。
- 一屏最多一个猫爪印级别的装饰。猫爪印铺满界面不是"猫猫化"，是"卖萌化"。
所以你在界面上看不到猫，却能"感觉到猫"——靠的是文案语气、成员人格色、以及"越用越圆润"这类不动声色的微交互。
色彩系统：一枚赭红是"稀缺资源" 🎨
Clowder AI 的色彩纪律很有记忆点：
- 全系统只有一个品牌色——赭红
#b05f45。它只出现在三个位置：主按钮底、键盘焦点环、品牌标记。文档的原话是"它是稀缺资源——出现越少，出现时越有力"。 - 不引入第二品牌色。紫渐变、玻璃拟态、光斑被明确列为"AI 味指纹"，禁用。
- 对比度是硬指标。连"链接文字用哪一档红"都算了 WCAG 对比度：
#b05f45在画布上只有 4.36:1 不够格，于是专门加深出#8f4730做文字。好看和看得清冲突时，一律先保看得清。 - 暗色模式是"同一个房间关了灯"：暖近黑而不是蓝黑，所有颜色按 OKLCH 感知均匀色彩空间重新派生，而不是简单调暗。
所有颜色以"设计 token"集中管理，运行时实现集中在 theme-tokens.css——组件代码里不允许出现裸写的十六进制色值，靠 ESLint 规则自动拦截。
三种"声音"的字体分工
Clowder AI 把字体当"声音"来管理，边界清晰：
| 声音 | 字体 | 出场场合 |
|---|---|---|
| 编辑声音 | 衬线体（Source Serif 4 / 宋体） | 页面标题、空态标语、猫"说人话"的时刻 |
| 工作声音 | 无衬线体（Inter） | 列表、表单、按钮、消息正文 |
| 机器声音 | 等宽体 | 代码、路径、ID、diff |
规则苛刻到有趣：衬线体只在 ≥22px 使用，因为宋体在小字号会"发灰"；系统里找不到衬线字体时允许降级到 Georgia，但绝不降级到无衬线——那会让整个系统"失去声音"。
设计语言背后的工程"挽具" 🔧
设计语言能长期不走样，靠的不是口头约定，而是一整套工程化机制。全局架构图可以看到治理层如何托底每一层：
- 真相源唯一：DESIGN.md 回答"我们要长成什么样"，console-design-system.md 只保留结构判据，视觉方向冲突时以前者为准——避免"两个真相互相打架"。
- 机器可校验：
pnpm check:design-md会解析设计文档，自动验证文字与背景配色的对比度矩阵、圆角 token 一致性，任何"文档说 A、代码做 B"的漂移都会红灯。 - 交付必须看渲染：任何视觉改动要过 Design Gate，附真实渲染截图才算数——因为 AI 写界面最容易"盲画"，凭文字想象不等于真的好看。检查清单见 design-in-context-checklist.md。
- 过程有章法：前端开发遵循 console-dev 技能里沉淀的门禁流程，品牌语义（如 "Hard Rails. Soft Power. Shared Mission."）由 clowder-ai-brand.md 统一口径。
给新手的三点启示
- "可爱"要有坐标系。先定底盘（暖编辑感 + 精密结构），主题元素只做"可解释的隐喻"，散落在少数高频点，而不是全面覆盖。
- 约束比灵感耐用。单一强调色、token 化、自动化检查——这套纪律让第 100 个页面和第 1 个页面看起来像同一个产品。
- 判断标准写进文档。"安静、可信、有人在"比"好看"可执行得多。设计语言的第一要务，是把"好看"翻译成可校验的规则。
猫猫化不是贴满猫爪印，而是让猫味从细节里自然长出来——这正是 Clowder AI 设计语言最反直觉、也最值得借鉴的地方。
【免费下载链接】clowder-aiBuild AI teams, not just agents. Hard rails, soft power, shared mission.项目地址: https://gitcode.com/gh_mirrors/cl/clowder-ai
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考