分析 Claude 桌面端界面
Open Claude UI 的设计令牌和组件规格，是通过分析 Claude Desktop 安装包里的前端产物得到的，分析过程借助了开源工具 REA（Reverse Engineer Anything）。本页说明做了什么、怎么做、得到了什么，以及边界在哪里。
最后更新：
分析 Claude 桌面端界面，分析的对象是什么？
分析对象是 Claude Desktop 打包的前端代码。Claude Desktop 是 Electron 应用，界面是打包进 app.asar 的压缩 JS 和 CSS。设计令牌（CSS 变量）、@keyframes 动画和组件的 data-cds 标记都在这些文件里，手册中引用的来源文件名形如 c6a992d55-sXiDGMFQ.css。
REA 是什么？
REA（Reverse Engineer Anything）是一个开源（MIT）的分析工具，项目自述是“One MCP for reverse engineering across binaries, applications, and runtime behavior”。它以 MCP 服务的形式接入 AI 编程代理：代理调用 REA 的工具，REA 返回带证据的分析结果。对 JavaScript / Electron 应用，它能给出模块、导入关系、source map、路由、IPC 和原生扩展之间的关系。
- 源码：github.com/morluto/rea，官网 rea.tools
- 安装：
npx rea-agents setup（npm 包 rea-agents，需要 Node 22.19+） - 也以 Skill 的形式发布在 skills.sh，可以作为 REA skill 装进代理
REA 在 Open Claude UI 里做了什么？
据 open-claude-ui 的 README，项目的分析推导、反混淆静态分析和 ASAR 解包都借助 REA 完成，用到了静态 AST 解析、闭包反混淆和运行时追踪；致谢部分把 AST 解密、Electron 运行时分析和常量反编译归功于 REA。这就是 AI 辅助分析（ai reverse engineering）的一种用法：由代理通过 MCP 调用分析工具，人来核对结果、整理成文档。
分析得到了哪些数值？
得到的是整套设计系统的数值，写成了 14 章手册：
- 颜色：品牌色 #c6613f、陶土色 #d97757，2.0 底色 #FCFCFB / #151515（v1 第一篇、v2 第三章）
- 密度：两档间距 6/8/12/20/32 与 8/12/16/28/40px，控件高 24 / 32px（v2 第三章 3.3）
- 动效：60/120/200/300/450ms 五档时长与三条缓动曲线（v2 第四章 4.3）
- 组件：按钮、输入框、思考折叠、MCP 工具卡片、多代理（Cowork）看板等，见 38 个在线演示
这个项目不做什么？
项目不分发 Anthropic 的专有资产：README 写明不包含商业 .ttf 字体和 .mp3 音频；本站也不使用 Claude 的图标、吉祥物或插画，字体用 Inter、Newsreader、JetBrains Mono 代替。组件是用 React + Tailwind 重新编写的，不是拷贝的官方代码。项目与 Anthropic 无关联。
想自己验证，从哪里开始？
从手册的出处标注开始：每个数值旁写着来源文件和章节，可以对照自己安装的 Claude Desktop 版本核对。推荐顺序：2.0 手册 → 1.x 手册 → 组件演示。全部文本也有 llms.txt 版本，方便交给 AI 代理阅读。