GitHub开源高保真还原Claude桌面端UI及逆向工程手册

基于 REA 深度拆解并高保真还原 Claude 官方桌面端 UI。还原 30 个独立 React 组件与 8 项硬核交互物理算法，附带 3000+ 行逆向分析手册。

GitHub repository created 2026-10-14 · 1000 stars in 2.3 days (about 435 a day) · TypeScript

Open Claude UI (`open-claude-ui`)

基于 REA 深度拆解，高保真生产级还原 Claude 设计系统 (CDS) 与工程交互物理学。

简体中文 · English

📖 简介 (Introduction)

`open-claude-ui` 是基于对现代桌面端 AI 客户端进行深度拆解与逆向分析构建的高保真开源 UI 组件库与动效引擎。

整个逆向推导、反混淆静态分析与 ASAR 资源解构，均依托于先进的多平台逆向工程框架 REA (Reverse Engineer Anything) 完成——通过 REA 的静态 AST 解析、闭包代码反混淆与运行时跟踪能力，穿透生产级压缩包，精准还原了底层工程物理常数与数学模型。

不同于市面上常见的盲猜或近似复刻，本项目所有组件规范、物理阻尼常数、着色器关键帧及音频管道均**严格依据真实前端架构反编译验证**提炼而成： * 温润的人文质感 (Editorial Warmth)：纯正陶土橙（Clay `#d97757`）、4 层微对比表面阶梯（Surface 0-3）与视网膜高分屏发丝细边补偿（Hairline Ring）； * 严苛的交互物理学 (Interaction Physics)：4 套生产级物理弹簧参数调校、4px 指针移动死区、CJK 输入法合成守卫、7 档渐隐非线性 Alpha 遮罩； * 高阶视听与系统架构 (Audiovisual & Architecture)：基于原生 Web Audio API 的零延迟合成提示音、以光标为锚点的画廊跑道平移缩放、macOS 桌面毛玻璃透明融合与 Cowork 多代理协同拓扑。

> ⚖️ 版权与合规声明 (DMCA & Assets Policy)： > 本开源项目**不公开分发任何专有二进制资产**（包括商业字体 `.ttf` 与录音 `.mp3`）。本项目提供原生系统级字体回退栈与 Web Audio API 纯代码合成音效，完全自包含、合规安全。详情参见 assets/README.md。

🌟 核心特性 (Key Features)

1. 30 个生产级独立代码模块：包含 11 个基础原子控件 + 19 个深度架构物理学模块与 React Hooks，即拷即用，零黑盒依赖。 2. 纯原生系统级排版与音效：支持系统高保真字体回退栈，内置基于 Web Audio 振荡器的零延迟提示音合成引擎。 3. 交互式组件故事书 (Storybook Preview)：内置单文件开箱即用的离线 Storybook，支持浏览器直接打开预览全部组件动效。 4. 七大领域分卷完整技术手册：附带深度逆向分析开发手册 `docs/Claude Design System (CDS).md`.md)。

📚 七大篇章逆向分析手册 (Complete Technical Manual)

整个仓库最具工业价值的核心是这本长达 3,000+ 行、31 个核心子节的深度逆向工程手册：`docs/Claude Design System (CDS).md`.md)。

它不仅记录了所有反编译源码取证位置，还详尽解构了 Anthropic 解决当代大模型产品前端痛点的系统架构方案：

📖 第一篇：设计哲学与设计令牌体系

* 1.1 设计哲学与视觉调性：温润的人文质感（Editorial Warmth）、四层低对比表面微阶梯、高帧率轻负担动效。 * 1.2 表面体系与色彩阶梯：Surface 0 至 3 表面明度阶梯（浅色 `#f5f5f3` 至 `#ffffff`，深色 `#0b0b0a` 至 `#20201e`）与品牌陶土橙（`#d97757`）。 * 1.3 控件尺寸与精密圆角矩阵：外框 Composer 20px、气泡 18px、面板 10px、按钮 6/8/10px 的精密圆角拓扑。 * 1.4 发丝细边、微光阴影与边框防臃肿体系：高分屏 0.5px 发丝补偿（Hairline Ring）、单闭合边框原则、双环 Popover 弥散微光投影。 * 1.5 字体排版与图标对齐系统约束：深色模式视网膜字重逆补偿算法（暗色下反向减细以防文字发胀）、行内图标 `-.125em` 光学垂直居中。 * 1.6 基础动效令牌体系：物理时间常数矩阵（70ms 触觉微震、120ms 几何咬合、300ms 面板滑入）与非对称贝塞尔曲线。

🧩 第二篇：基础原子组件与交互控件

* 2.1 全能按钮控件阶梯：4 级尺寸阶梯（XS/SM/MD/LG）、5 大变体（Primary/Secondary/Ghost/Outline/Danger）、`active:scale-[0.98]` 物理触觉。 * 2.2 分段滑动选择胶囊：999px 全圆角轨道、2px 几何内边距、纯几何绝对定位与 Framer Motion `layoutId` 双模式。 * 2.3 状态指示灯与微动效套件：陶土明度呼吸指示灯（2.4s）、实时活动脉冲（1.2s）、思考三点波浪跳跃、105° 骨架屏高级倾斜扫光条。 * 2.4 模态确认对话框：16px 圆角、双环 Popover 投影、高斯模糊遮罩、按键陷阱与危险/默认双变体。 * 2.5 附件磁贴与上下文胶囊：桌面端磁贴（128×96px）与输入框行内胶囊双模式，集成 `file-thumbnail-grow-in` 入场动画。

💬 第三篇：会话核心流与指令交互引擎

* 3.1 会话气泡套件与排版规范：User 气泡严格 18px 圆角与浅蓝微调底色，Assistant 零边框透明排版与代码块联动。 * 3.2 思考过程折叠与时间状态机：CSS Grid `0fr -> 1fr` 弹性伸缩动画，生成期间传递 `onOpenChange = undefined` 强制展开互斥锁。 * 3.3 新一代富文本输入框终端与指令交互引擎：CJK 输入法双重互锁守卫、`/` 指令与 `@` 上下文双触发符、自适应高度伸缩与 Token 预测。 * 3.4 模型矩阵切换器与 Token 计量仪表盘：三大模型梯队架构、Thinking 开关、Prompt Caching 四色显存成本解构与环形 SVG 仪表盘。 * 3.5 交互式工具调用与 MCP 决策卡片：严格三态授权状态机（`pending_approval` → `running` → `success` / `error`）、三阶决议动作阵列与 Payload 审查。

⚡ 第四篇：动效物理学、着色器与环境光影

* 4.1 全量动效引擎与关键帧规范：4 套生产级物理弹簧参数矩阵调校及触感响应、核心 `@keyframes`。 * 4.2 动态光效、着色器与推理氛围感：`wl-glow` 陶土暖光漫反射光场、`cds-shimmer-text-shine` 非对称贝塞尔曲线与焦散光场。 * 4.3 滚动边缘平滑渐变遮罩系统：官方 7 档非线性 Alpha 渐变遮罩、动态滚动位置传感器（触顶/触底动态归零）。

🎨 第五篇：视听多媒体与产物交互物理学

* 5.1 语音模式与 Web Audio 物理声学系统：原生 Web Audio 振荡器无损合成音效、30% 舒缓音量标准、6 频段非线性 Gamma 波形柱（附官方 AudioWorklet 架构逆向解密）。 * 5.2 多模态媒体查看器与画廊转场物理学：View Transitions 共享元素变形、以光标为锚点的无级 Pan/Zoom 仿射方程、75vw 跑道视口。 * 5.3 双栏弹性分割与折叠物理学：Iframe 事件防吞噬护盾、4px 移动死区、双击 50/50 吸附、边缘折叠门限与约束钳制。 * 5.4 工件预览沙箱与隔离通信架构：Epitaxy 隔离容器、7 大专有 MIME 分发、用户手势门禁与虚拟包重定向。 * 5.5 代码差异对比与多线程语法高亮系统：Shadow DOM 隔离、CSS Grid 行高对齐锁定、增量流式追加管道、统一/分屏双模式。

🖥️ 第六篇：系统级桌面架构与协作拓扑

* 6.1 macOS 桌面宿主深度融合与窗口材质：`hiddenInset` 标题栏、交通灯逆缩放几何补偿、`-webkit-app-region: drag` 安全区、macOS Vibrancy 毛玻璃。 * 6.2 侧边栏会话拖放重排与拓扑网格：`pinnedOrder` 乐观拓扑重排、4px 移动死区、微倾斜幽灵投影与落点对撞占位线。 * 6.3 多代理协作看板与 Cowork 空间拓扑：多 Agent 任务委派状态机、团队共享工件网格资产池、`BroadcastChannel` 跨窗口同步。 * 6.4 流式大文本输出与滚动视口物理学：150ms 冷却时间戳防抢夺、40px 底部容差图钉锁定、GPU 字符模糊消解。 * 6.5 容器查询自适应排版与极端防挤压：基于 `@container` 的 4 阶流体压缩梯队 (>=576px / <480px / <384px / <320px)，彻底杜绝单字折行。 * 6.6 全键盘盲操网格与无障碍访问：W3C WAI-ARIA 规范、Roving TabIndex 焦点漫游、方向键二维导航、RTL 镜像翻转。 * 6.7 异常容灾、模型限流与业务状态机：429/503 截断指数退避重试机、全抖动注入、3 次自动熔断恢复。

🛠️ 第七篇：工程配置与资产代码库总览

* 7.1 开箱即用的 Tailwind 配置与基础 CSS 代码：完整的全局主题样式表与 Tailwind 工程扩展。 * 7.2 生产级工程源码清单：全量 30 个生产级独立代码文件（11 个基础原子 + 19 个深度架构模块）。 * 7.3 资产规范与系统级字体/音频替代方案：系统级字体回退栈与 Web Audio API 纯代码合成提示音规范。

🤖 第八篇：AI Agent 前端 UI 与动效开发指南

* 8.1~8.7 Agent 角色定位、设计令牌契约与弹簧决策树：专为 AI Agent 定制的前端 UI 与动效装配自检指南。

🚀 第二版：Claude Desktop 2.0 (v2.37337.1) 全量版本更新深度逆向分析

* v2/README.md 综述、新增特性、架构重构、底座解密与参考实现：全量划分为 6 大独立章节，深度解析 2.0 桌面端架构大跃迁。

🔬 逆向解密的 8 大硬核算法与工程物理学 (Decompiled Algorithms & Physics)

UI 组件只是外壳，真正让 Claude 交互质感脱颖而出的是隐藏在混淆代码底部的物理学方程与数学模型。本项目从生产环境反编译还原了以下 8 项关键算法：

1. 7 档渐隐非线性透明度遮罩 (7-Stop Non-Linear Fade Mask)

* 痛点：常规双色线性滚动遮罩在视网膜高分屏上存在严重的色阶断层（Color Banding）与生硬切断感。 * Claude 算法：没有采用粗暴的线性双色切线，而是在羽化距离内采用 7 档非线性采样阶梯（采样位置 15% 处对应 Alpha 5.1% `#0d`、30% 处 14.9% `#26`、45% 处 30.2% `#4d`、60% 处 50.2% `#80`、75% 处 70.2% `#b3`、87% 处 85.1% `#d9`，曲线紧密贴合 $y \approx x^{1.5}$ 幂律感知感知模型），搭配触顶/触底动态归零传感器，呈现温润如沉入水雾的边缘渐隐：

2. 麦克风 8% 底噪门限截断与原生 Web Audio 振荡器无损合成 (Noise Floor Gating & Synthetic SFX)

* 痛点：语音会话模式中空调等环境底噪容易导致波形持续微震抽搐；同时传统 Web 音效加载外部 MP3 有网络延迟并伴随切断爆音。 * Claude 算法：一是引入 8% 噪声门限过滤（`NOISE_FLOOR = 0.08`）物理截断底噪；二是基于原生 Web Audio `OscillatorNode` 进行纯代码频率调制（如 440Hz → 880Hz 上扬）与平滑指数淡入淡出（`exponentialRampToValueAtTime`），零外部音频依赖且彻底消除爆音。

3. CJK 输入法合成双重互锁守卫 (IME Composition Guard)

* 痛点：中日韩用户在拼音/假名输入法候选词浮层敲击 Enter 键确认汉字时，消息被粗暴误发送。 * Claude 算法：构建 `!(e.nativeEvent.isComposing || e.keyCode === 229)` 双重互锁守卫，并在按键拦截状态机中接管 `Escape` 键，防止候选词关闭时意外冒泡退避整个对话窗口。

4. 150ms 冷却时间戳防抢夺视口图钉 (Scroll Pinning Cooldown)

* 痛点：流式 Token 生成时，用户向上滚动查阅历史消息，会被源源不断的生成内容强制拉回底部。 * Claude 算法：建立 40px 底部容差图钉锁定 + 150ms 人工滚动冷却时间戳机制。用户一旦主动向上微移视口，系统立即锁定滚动权限 150ms，彻底杜绝“自动滚动抢夺屏幕”。

5. 以鼠标光标为物理不动点的仿射 Pan/Zoom 方程

* 痛点：普通画廊放大图片时以视口中心为原点，导致鼠标想查看的细节区域被推离屏幕。 * Claude 算法：将光标指针 $(O_x, O_y)$ 视为物理世界不变不动点，解算仿射变换矩阵： $$\text{idealTx} = O_x - (O_x - \text{prevTx}) \cdot \frac{S_{\text{target}}}{S_{\text{current}}}$$ 配合 4px 手部微抖死区与视口边界溢出阻尼系数 ($y = 0.7$)。

6. 麦克风 6 频段非线性 Gamma 幂律能量压缩