# Open Claude UI

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

本站是 https://github.com/Caho1/open-claude-ui 的文档站。数值以 2.0 手册为准，2.0 未记录的取 1.x；代码与文档冲突时以代码为准。每个页面都有 Markdown 版本（把页面 URL 加上 .md）。

## Open Claude UI 分析手册（2.0）

- [V2 手册总览](https://openclaudeui.com/docs/v2.md): Open Claude UI 分析手册（Claude Desktop 2.0）总览：1.x 对话外壳与 2.0 执行沙箱工作站的对比，以及 6 章目录与导读。
- [第一章：综述与版本边界](https://openclaudeui.com/docs/v2/01.md): Open Claude UI 分析手册（Claude Desktop 2.0）「第一章：综述与版本边界」：版本边界声明、全局设计契约演进。
- [第二章：新增特性深度分析](https://openclaudeui.com/docs/v2/02.md): Open Claude UI 分析手册（Claude Desktop 2.0）「第二章：新增特性深度分析」：独立多窗口架构、离线可视化组件、离线消息重试机制、推理算力调节器、现代 CSS 动效系统、首页卡片微光浮空。
- [第三章：架构重构与对比分析](https://openclaudeui.com/docs/v2/03.md): Open Claude UI 分析手册（Claude Desktop 2.0）「第三章：架构重构与对比分析」：会话侧边栏与环境收敛、工作台画布与底色演进、基础圆角与密度系统、模型选择器与用量感知、骨架屏与胶囊微交互、运行时并发与环境隔离。
- [第四章：系统底座全景解密](https://openclaudeui.com/docs/v2/04.md): Open Claude UI 分析手册（Claude Desktop 2.0）「第四章：系统底座全景解密」：纯 CSS 动效参数、原生组件命名空间、响应时间与贝塞尔曲线。
- [第五章：生产级参考实现代码](https://openclaudeui.com/docs/v2/05.md): Open Claude UI 分析手册（Claude Desktop 2.0）「第五章：生产级参考实现代码」：模型选择与算力调节器、输入框底部工具栏、动效引擎与微交互。
- [第六章：总结与升格意义](https://openclaudeui.com/docs/v2/06.md): Open Claude UI 分析手册（Claude Desktop 2.0）「第六章：总结与升格意义」：2.0 相对 1.x 的变化总结。

## Open Claude UI 分析手册（1.x）

- [V1 手册总览](https://openclaudeui.com/docs/v1.md): Open Claude UI 分析手册（Claude Desktop 1.x）「V1 手册总览」：设计哲学与设计令牌体系、基础原子组件与交互控件、会话核心流与指令交互引擎、动效物理学、着色器与环境光影、视听多媒体与产物交互物理学、系统级桌面架构与协作拓扑。
- [01-设计哲学与设计令牌体系](https://openclaudeui.com/docs/v1/01.md): Open Claude UI 分析手册（Claude Desktop 1.x）「设计哲学与设计令牌体系」：设计哲学与视觉调性、表面体系与色彩阶梯、控件尺寸与精密圆角矩阵、发丝细边、微光阴影与边框防臃肿体系、字体排版与图标对齐系统约束、基础动效令牌体系与物理贝塞尔曲线全集。
- [02-基础原子组件与交互控件](https://openclaudeui.com/docs/v1/02.md): Open Claude UI 分析手册（Claude Desktop 1.x）「基础原子组件与交互控件」：全能按钮控件阶梯、分段滑动选择胶囊、状态指示灯与微动效套件、模态确认对话框、附件磁贴与上下文胶囊。
- [03-会话核心流与指令交互引擎](https://openclaudeui.com/docs/v1/03.md): Open Claude UI 分析手册（Claude Desktop 1.x）「会话核心流与指令交互引擎」：生产环境取证溯源清单、会话气泡套件与排版规范、思考过程折叠与时间状态机、新一代富文本输入框终端与指令交互引擎、模型矩阵切换器与 Token 计量仪表盘、交互式工具调用与 MCP 决策卡片。
- [04-动效物理学、着色器与环境光影](https://openclaudeui.com/docs/v1/04.md): Open Claude UI 分析手册（Claude Desktop 1.x）「动效物理学、着色器与环境光影」：全量动效引擎与关键帧规范、动态光效、着色器与推理氛围感、原生 CSS Scroll-Driven 滚动驱动遮罩系统。
- [05-视听多媒体与产物交互物理学](https://openclaudeui.com/docs/v1/05.md): Open Claude UI 分析手册（Claude Desktop 1.x）「视听多媒体与产物交互物理学」：语音模式与 Web Audio 物理声学系统、多模态媒体查看器与画廊转场物理学、双栏弹性分割与折叠物理学、工件预览沙箱与隔离通信架构、代码差异对比与多线程语法高亮系统。
- [06-系统级桌面架构与协作拓扑](https://openclaudeui.com/docs/v1/06.md): Open Claude UI 分析手册（Claude Desktop 1.x）「系统级桌面架构与协作拓扑」：macOS 桌面宿主深度融合与窗口材质、侧边栏会话拖放重排与拓扑网格、多代理协作看板与 Cowork 空间拓扑、流式大文本输出与滚动视口物理学、容器查询自适应排版与极端防挤压、全键盘盲操网格与无障碍访问。
- [07-工程配置与资产代码库总览](https://openclaudeui.com/docs/v1/07.md): Open Claude UI 分析手册（Claude Desktop 1.x）「工程配置与资产代码库总览」：开箱即用的 Tailwind 配置与基础 CSS 代码、生产级工程源码清单、资产规范与系统级字体/音频替代方案、现代底层运行时架构：Rolldown、WASM 矩阵与 Clarkdown 编译器、宿主桥接与别名映射规范。
- [第八篇：AI Agent 前端 UI 与动效开发指南 (AI Agent Frontend UI & Motion Guidelines)](https://openclaudeui.com/docs/v1/08.md): Open Claude UI 分析手册（Claude Desktop 1.x）「AI Agent 前端 UI 与动效开发指南」：给 AI 编程代理用的规则清单，包括表面体系对应表、文本与排版阶梯、双环聚焦光晕、28px 滚动渐隐、单闭合边框原则和五级按钮尺寸阶梯。

## Open Claude UI 组件演示

- [Open Claude UI 组件演示](https://openclaudeui.com/docs/components.md): Open Claude UI 组件演示：38 个可交互的 React 组件，按手册章节分成 6 页，源码直接引自仓库 code-examples/。
- [基础原子组件](https://openclaudeui.com/docs/components/atoms.md): Open Claude UI 组件演示：按钮、分段控制器、状态灯、确认弹窗、附件磁贴、容器查询工具栏（手册 v1 第二篇）。每个演示附规格和源码出处。
- [会话与输入](https://openclaudeui.com/docs/components/conversation.md): Open Claude UI 组件演示：消息气泡、思考折叠、输入框、模型切换、MCP 工具卡片（手册 v1 第三篇）。每个演示附规格和源码出处。
- [桌面架构与交互 Hook](https://openclaudeui.com/docs/components/desktop.md): Open Claude UI 组件演示：桌面顶栏、会话拖拽、多代理看板和几个交互 Hook（手册 v1 第六篇）。每个演示附规格和源码出处。
- [多媒体与产物](https://openclaudeui.com/docs/components/media.md): Open Claude UI 组件演示：语音波形、图片查看器、双栏分割、产物沙箱、Diff、代码块（手册 v1 第五篇）。每个演示附规格和源码出处。
- [动效与光影](https://openclaudeui.com/docs/components/motion.md): Open Claude UI 组件演示：时长与缓动、弹簧参数、推理光晕、滚动渐隐（手册 v1 第四篇、v2 第四篇）。每个演示附规格和源码出处。
- [2.0 新增](https://openclaudeui.com/docs/components/v2.md): Open Claude UI 组件演示：算力调节器、输入框底栏、交错入场、Pill 过冲、发丝边（手册 v2）。每个演示附规格和源码出处。

## 其他

- [分析 Claude 桌面端界面](https://openclaudeui.com/reverse-engineering-claude): 用 REA 做 AI 辅助分析的方法与边界
- [更新日志](https://openclaudeui.com/docs/changelog.md): 仓库 CHANGELOG.md 的同步版本
- [关于](https://openclaudeui.com/about): 维护者、取值规则与非关联声明
- [完整文本](https://openclaudeui.com/llms-full.txt): 所有文档页面合并成的一份 Markdown
- [源码仓库](https://github.com/Caho1/open-claude-ui): MIT 许可证，React + Tailwind 组件与 cds-theme.css 设计令牌