Open Claude UI

Open Claude UI

拆解分析 Claude 桌面端的界面设计：配色、字体、动效与组件，每个数值都标明出处，并用 React 还原成可以直接使用的组件。

读 2.0 手册GitHub
已跟进 Claude Desktop 2.0：浅色底改为 #FCFCFB，深色底改为 #151515→
章分析手册
14
个在线演示
38
个源码文件
36
GitHub Star
1,292

Star 数为构建时从 GitHub API 读取

Open Claude UI 是什么？

Open Claude UI（open-claude-ui）是一个开源（MIT）的社区分析手册，研究对象是 Claude 桌面端的界面设计：14 章手册（1.x 8 章、2.0 6 章）、36 个源码文件和 38 个在线演示，覆盖配色、字体、圆角、间距和动效，每个数值都标明来源章节。

Claude 桌面端界面的关键数值是多少？

下表是最常用的设计令牌，每一行都链接到手册里的出处章节。

项目数值出处
品牌色（浅色）#c6613f（--brand）v1 第一篇 1.2
陶土色（深色模式强调色）#d97757（--cds-clay）v1 第一篇 1.2
画布底色浅色 #FCFCFB / 深色 #151515v2 第三章 3.2
字体官方 anthropic-sans / serif / mono（专有，不分发）；开源替代 Inter / Newsreader / JetBrains Monov1 第一篇 1.5
圆角控件 8px · 卡片 12px · 输入框 14px（紧凑模式 6 / 10 / 12px）v2 第三章 3.3
控件高度32px（紧凑模式 24px）v2 第三章 3.3
间距阶梯8 / 12 / 16 / 28 / 40px（紧凑 6 / 8 / 12 / 20 / 32px）v2 第三章 3.3
动效时长60 / 120 / 200 / 300 / 450msv2 第四章 4.3
缓动曲线out (.165,.84,.44,1) · snap (.32,.72,0,1) · overshoot (.34,1.3,.64,1)v2 第四章 4.3
滚动渐隐28px（--cds-scroll-fade-size）v1 第一篇 1.4 · cds-theme.css

有哪些 Open Claude UI 组件可以在线试？

38 个演示按手册章节分成 6 页，每个演示下面写着规格和源码位置。

8 个演示基础原子组件按钮、组合按钮、分段控制器、状态灯、确认弹窗、附件磁贴6 个演示会话与输入消息气泡、思考折叠、输入框、/ 与 @ 输入、模型切换、MCP 工具卡片5 个演示动效与光影时长与缓动、弹簧参数、2.0 动效引擎、推理光晕、滚动渐隐6 个演示多媒体与产物语音波形、图片查看器、双栏分割、产物沙箱、Diff、代码块7 个演示桌面架构与交互 Hook桌面顶栏、会话拖拽、多代理看板、滚动跟随、漫游焦点、限流退避6 个演示2.0 新增算力调节器、输入框底栏、交错入场、Pill 过冲、骨架屏双模、发丝边

这些数值是怎么分析出来的？

数值来自对 Claude Desktop 安装包里前端产物的分析。Claude Desktop 是 Electron 应用，界面代码以压缩过的 JS 和 CSS 打包在 app.asar 里；仓库 README 说明，项目借助开源分析工具 REA（Reverse Engineer Anything） 解析这些文件，再把找到的令牌、关键帧和组件结构整理成手册，并用 React 重新实现。

  1. 定位安装包里的 CSS 变量、@keyframes 和组件 data-cds 标记；
  2. 记录每个数值的来源文件名（例如 c6a992d55-sXiDGMFQ.css），写进手册；
  3. 用 React + Tailwind 重新实现组件，不复制官方字体、图标、音频等资产。

详细了解：分析 Claude 桌面端界面的方法 →

从哪里开始读？

6 章Open Claude UI 分析手册（2.0）2.0 新增了什么、重构了什么，以及这么改的原因。8 章Open Claude UI 分析手册（1.x）设计令牌、基础组件、动效和桌面端架构。38 个在线演示Open Claude UI 组件演示手册里的按钮、输入框、弹窗、气泡、动效等组件，按章节分页，可以直接点。

拆出来了哪些细节？

  1. 01 · 触控区看起来 28px，点起来 44px底栏行高压到 28px，按钮用负外边距把点击区补到 44px。margin-block: calc(var(--cmp-chin-touch-grow) * -1)
  2. 02 · 动效胶囊过冲回弹先放大到 1.32 倍，再用过冲曲线回落，分两段完成。cubic-bezier(.34, 1.3, .64, 1)
  3. 03 · 入场sibling-index() 交错入场按元素在兄弟里的序号依次延迟，第 9 个之后不再增加。50ms + min(sibling-index() - 1, 8) * 30ms
  4. 04 · 滚动顶部渐隐 0 → 28px停在顶部时边缘不渐隐，一离开顶部就展开 28px 渐隐。--cds-scroll-fade-top: 0px → 28px

2.0 的间距阶梯是多少？

出处：第三章 3.3 →
compact
6
8
12
20
32
comfortable
8
12
16
28
40
1.x
4
8
12
16
24

Open Claude UI 手册最近更新了什么？

按提交时间排列的最近 6 个更新页面。

怎么在项目里使用 Open Claude UI 组件？

三步：复制组件、引入令牌，或者只用纯 CSS 层。

  1. 1
    复制组件

    从仓库 code-examples/ 复制需要的 .tsx 文件，组件基于 React 和 Tailwind CSS，部分动效依赖 framer-motion。

  2. 2
    引入设计令牌

    引入 cds-theme.css，颜色、圆角、间距、时长和缓动曲线都以 CSS 变量提供。

  3. 3
    不用 React 也可以

    只要令牌和纯 CSS 效果时，按 README 引入 tokens.css 或 pure.css。

看全部 38 个组件演示 →

Open Claude UI 常见问题

关于字体、色值、许可证和使用方式的 9 个问题。

Claude 桌面端用三套专有字体：anthropic-sans（界面）、anthropic-serif（问候语与正文衬线）和 anthropic-mono（代码），回退到 system-ui、Georgia、SF Mono 等系统字体。本项目不分发这些字体，开源替代方案是 Inter、Newsreader 和 JetBrains Mono，本站就用这三款。出处：v1 第一篇 1.5。

主品牌色是 #c6613f（--brand），陶土色是 #d97757（--cds-clay），后者用于思考脉冲点等强调元素。本站浅色模式用 #c6613f，深色模式用 #d97757。出处：v1 第一篇 1.2。

不是。Open Claude UI 是社区研究项目，与 Anthropic 没有关联，Claude 是 Anthropic 的商标。项目不包含 Anthropic 的字体、图标、音频或图片素材。

代码和文档采用 MIT 许可证（Copyright 2026 Caho1），可以商用，保留版权声明即可。Claude 名称和 Anthropic 的商标不在授权范围内。

直接复制仓库 code-examples/ 里的 .tsx 文件，并引入 cds-theme.css 设计令牌即可；组件基于 React 和 Tailwind CSS，部分动效依赖 framer-motion。只要令牌和纯 CSS 效果的话，按 README 引入 tokens.css 或 pure.css，不需要 React。

2.0 把底色从暖色改成 #FCFCFB / #151515，圆角收得更平直（输入框 20px → 14px），新增推理算力调节器和 sibling-index() 交错入场等纯 CSS 动效。详见 v2 第二、三章。

仓库 README 说明，数值来自对 Claude Desktop 安装包里的前端产物（Electron 应用的 JS、CSS 文件）做的分析，借助了开源工具 REA（Reverse Engineer Anything）。手册在每个数值旁注明了来源文件名和章节。

2.0 定义了 5 档时长：60、120、200、300、450ms，和 3 条主曲线：ease-out cubic-bezier(.165,.84,.44,1)、snap cubic-bezier(.32,.72,0,1)、overshoot cubic-bezier(.34,1.3,.64,1)。出处：v2 第四章 4.3。

有，一共 38 个在线演示，按手册章节分成 6 页，都是真实运行的 React 组件，浅色和深色模式都能看。

从 2.0 手册开始，或者直接复制组件

所有数值都标了出处，组件是 MIT 许可的 React + Tailwind 代码。

读 2.0 手册在 GitHub 查看