2026-10-16

Open Claude UI：REA 加持的 Claude 桌面重建实际交付了什么

open-claude-ui 离线 Claude Design System（CDS）storybook：顶栏、分区跳转（令牌、应用框架、对话、控件、代码、浮层、动效），以及 Surface 0–3 与圆角矩阵卡片。 — 站内托管截图：来自 Caho1/open-claude-ui 公开离线 storybook（docs/claude-components-storybook.html），2026-10-16 为本站拍摄。上游 MIT；清洁室 UI 库——非 Anthropic。

2026-10-15，@xulijian1994（Kxians）发帖称有人几乎把 Claude 桌面客户端 UI 拆透并开源。项目是 Open Claude UI（Caho1/open-claude-ui）：在 REA（Reverse Engineer Anything／rea-agents）协助下，以清洁室方式高保真还原 Claude Design System（CDS）令牌、React 组件与交互物理，MIT 许可。本页是 rea.run 的运维读法：可核对数字、该克隆什么、不该声称什么，以及 REA 作为重建工具链——而不是破解套件——的位置。英文：/blog/open-claude-ui-rea-case/。

快照数字（已复核）

本页 GitHub API 与 X API 快照日期：2026-10-16（UTC+8 实验室时钟）。计数会变；引用时请带日期。

项	值	来源
仓库	Caho1/open-claude-ui	GitHub
许可	MIT	`license.spdx_id`
Stars	736	GitHub API
Forks	172	GitHub API
未关闭 issue	0	GitHub API
主语言	TypeScript	GitHub API
创建	2026-10-14T14:05:05Z	GitHub API
推送（快照）	2026-10-15T16:26:41Z	GitHub API
`code-examples/` 独立模块	30 个 `.ts`／`.tsx`	GitHub contents API
README 点名的核心交互算法	8	README-en.md
合并手册 `Claude Design System (CDS).full.md`	3206 行	2026-10-16 行数
01–09 分册行数合计	3542 行	原始文件行数
X 发现帖	status 2110590027453669498	@xulijian1994
X 创建	2026-10-15T04:34:10Z	帖子时间戳
X 曝光／赞／书签／转发／回复	12620／143／149／17／6	X API 快照

星标与点赞只是发现信号（/zh/blog/evaluating-rea-claims/）。它们不是安装 SLA，也不是在未获授权时检查 Anthropic 发行二进制的许可证。

仓库是什么／不是什么

说法	运维读法
高保真开源 UI + 动效库，对标 Claude 桌面	是——README 定位清洁室 CDS 复刻
Anthropic 官方产品或 SDK	否
附带专有 Claude 字体／录制 MP3	否——系统字体栈 + 程序化 Web Audio（资产政策）
用 REA 做逆向推导／ASAR／AST	是——README 致谢 morluto/rea
即插即用的 Claude API 后端	否——UI／物理模块；模型宿主自备
许可你去逆向无权检查的商业桌面端	否——学习本 MIT 树；遵守 /zh/compliance/

离线 CDS storybook 总览：来自 open-claude-ui 的 Surface 0–3 与圆角阶梯。

技术栈与打包

层	上游点名的范围	备注
React	18+（peer）	peerDependencies
TypeScript	5.5+	徽章／开发依赖
Tailwind CSS	3.4+	`code-examples/tailwind.config.js` 主题扩展
Framer Motion	11+（peer ≥10）	layoutId 胶囊、弹簧
Electron	开发依赖 ^31	窗口宿主辅助——纯 React 可不用
交付	复制 `code-examples/` + 离线 HTML storybook	`npm run storybook` 打开 HTML

仓库 topics（快照）：anthropic、audioworklet、claude、design-system、framer-motion、motion-physics、react、reverse-engineering、tailwindcss、ui-components。

组件清单（30 个模块）

README 把 30 个生产文件拆成 11 个原子 UI 与 19 个更深的架构／物理／Hook 模块。code-examples/ 目录与 30 个 TypeScript 源一致（另有 cds-theme.css 与 tailwind.config.js）。

类别	示例（文件名）	运维为何关心
原子控件	`CdsButton.tsx`、`SegmentedControl.tsx`、`StatusIndicators.tsx`、`ConfirmationDialog.tsx`、`AttachmentCard.tsx`	尺寸／变体阶梯、Clay 呼吸灯、焦点陷阱
会话引擎	`ChatComposer.tsx`、`RichComposerWithMentions.tsx`、`ChatMessageBubbles.tsx`、`ThinkingAccordion.tsx`、`ModelSwitcherWithTokenGauge.tsx`、`McpToolDecisionCard.tsx`	IME 防护、MCP 授权卡、token 仪表
动效／着色	`ClaudeMotionPresets.ts`、`ScrollFadeContainer.tsx`、`ReasoningAmbientGlow.tsx`	弹簧预设、七档滚动渐隐
媒体／产物	`MediaLightboxViewer.tsx`、`ArtifactsSplitPaneResizer.tsx`、`StreamingDiffViewer.tsx`、`EpitaxyIframeBridge.tsx`、`ClaudeAudioPlayer.ts`、`LiveMicActivityBars.tsx`	指针锚定缩放、iframe 指针盾、程序化音频
桌面拓扑	`ClaudeDesktopHeader.tsx`、`DraggableSessionList.tsx`、`CoworkAgentCanvas.tsx`、`createClaudeMainWindow.ts`、`ContainerResponsiveBar.tsx`	毛玻璃／标题栏、拖放、Cowork
Hooks	`useClaudeScrollPinning.ts`、`useClaudeRovingFocus.ts`、`useClaudeSharedElementTransition.ts`、`useRateLimitBackoff.ts`	150 ms 滚动闩、无障碍网格、429 退避

README 强调的八项算法

X 帖与 README 真正值钱的不是「长得像 Claude」，而是八个被拆出的交互模型：

#	算法（README 标题）	运维一句话
1	七档非线性 alpha 滚动渐隐	比两档线性蒙版更适合 Retina
2	麦克风 8% 底噪门限 + 程序化 Web Audio	闸掉环境嗡鸣；无 MP3 也能合成提示音
3	CJK IME 双联锁	`isComposing`／keyCode 229 时禁止回车误发送
4	150 ms 滚动钉住冷却 + 40 px 容差	防止流式输出劫持上滚
5	指针锚定仿射平移／缩放	相对指针缩放，而非视口中心
6	六频段麦克风条 + gamma 0.7	压峰值、保轻声细节
7	Shadow DOM + CSS Grid 行高锁	流式 diff 时行号对齐
8	iframe 指针盾 + 50／50 弹簧吸附	在 Artifacts 上拖分割条不丢事件

文档点名的品牌色 Clay：#d97757。浅色 Surface 阶梯：#f5f5f3 → #ffffff（Surface 0–3）。

文档地图

文档产物	行数（2026-10-16）	作用
`docs/Claude Design System (CDS).full.md`	3206	合并手册（对齐「3000+ 行」表述）
`docs/01` … `docs/09` 分册	合计 3542	令牌 → Agent UI 指南 → Desktop 2.0
`docs/Claude Design System (CDS).md`	115	短索引／指针
`docs/claude-components-storybook.html`	约 183 KB	离线交互预览
`README.md`／`README-en.md`	双语入口	默认中文，英文孪生

X 帖清单（转述，不是 Anthropic 文档重写）：30 个 React 组件、8 项核心算法、3000+ 行逆向分析文档（约 31 个技术小节）、Claude 风格输入框／模型切换／MCP 卡、macOS 毛玻璃、侧栏拖放、Cowork 多 Agent 界面，以及输入法与滚动劫持等边角。引用该清单时保留原帖链接。

REA 怎么用得上（克制、运维视角）

REA 是本地 MCP／CLI，让编程智能体检查你有权分析的软件并返回 Evidence 与未知（/zh/blog/what-is-rea-reverse-engineer-anything/）。Open Claude UI 上游致谢 REA 用于 ASAR 解构、AST／静态分析，以及从生产前端架构恢复物理常数。在 rea.run 上，这对应熟悉闭环：

书面授权目标（自建、开源 MIT 树或合同）。
钉 rea-agents（本站教学钉版见 6.5.0／6.4.0——/zh/blog/rea-agents-6-5-0/）；跑 doctor --json。
Evidence 路径优先于聊天气氛（/zh/blog/evaluating-rea-claims/）。
在你的仓库用自己的表述与资产重建 UI——不要粘贴专有二进制资源。
Hermes／Claude Code／Cursor 等客户端对齐文档矩阵（/zh/docs/clients/）。

npx -y [email protected] doctor --json
# 学习 MIT 的 open-claude-ui 树；勿把工具指向你无权检查的厂商二进制。

若目标是「有 Claude 质感的 AI 产品 UI」，从本 MIT 库与 CDS 手册起步。若目标是「拆开正在发行的 Claude.app」，停——这超出 rea.run 合法边界（/zh/faq/legal-boundary/）。

运维清单：评估与采纳

[ ] 阅读 MIT LICENSE 与 assets/README.md（不二次分发专有字体／音频）。
[ ] 克隆 Caho1/open-claude-ui；用浏览器打开 docs/claude-components-storybook.html（预览无需构建）。
[ ] 浏览 code-examples/，只取你真正需要的模块（输入框 ≠ 完整 Cowork）。
[ ] 只复制你准备维护的模块；在*你的*应用里钉 React／Tailwind／Framer 版本。
[ ] 把令牌（#d97757、Surface 0–3、圆角）落成设计令牌——不要热链 Anthropic CDN。
[ ] MCP 决策卡要对着你的 MCP 宿主批准流程——UI ≠ 授权。
[ ] 若在类似清洁室项目中使用 REA，保留 Evidence + 未知，不信任二进制放一次性虚拟机（/zh/blog/rea-agent-security-posture/）。
[ ] 复述星标／fork 时引用 GitHub + 本页快照日期。

采纳矩阵

目标	用	跳过
像素级聊天壳	Composer、气泡、模型切换、滚动渐隐	假定与 claude.ai API 兼容
Agent 工作台	MCP 卡、Cowork 画布模式、思考折叠	把 Cowork 拓扑当成托管多 Agent SaaS
动效素养	弹簧预设 + 八算法笔记	盲拷压缩后的厂商 CSS
讲解 REA 价值	README 的 REA 致谢 + 你的授权实验室	用星标证明本机可跑

合规

Open Claude UI 是第三方 MIT 项目。与 Anthropic、morluto 无隶属。
rea.run 是社区指南；页脚非官方说明保持低调——标题里不喊「Unofficial」。
仅授权／自有／清洁室目标。无破解、绕 DRM、未授权商业逆向教程（/zh/compliance/、/zh/faq/legal-boundary/）。
/media/blog/open-claude-ui/ 下图片来自公开 storybook 与 logo；无登录墙资产。

来源

GitHub：Caho1/open-claude-ui（2026-10-16 API 快照：736★、172 forks、MIT）
README-en／README.md 特性列表、算法节、目录树
文档行数：Claude Design System (CDS).full.md 3206；01–09 合计 3542
X：@xulijian1994 status 2110590027453669498（创建 2026-10-15T04:34:10Z；指标见上表）
REA 上游：morluto/rea · npm rea-agents
站内：/zh/docs/install/ · /zh/showcase/ · /zh/blog/rea-agents-6-5-0/ · /blog/open-claude-ui-rea-case/

问答

问题	短答
能 npm 装一层 Claude 皮就当 Claude 卖吗？	不能。MIT 模块 ≠ Anthropic 商标或产品。
必须用 Electron 吗？	只要桌面宿主辅助才需要；React 模块可跑在 Web 壳。
「3000+ 行手册」是 `.full.md` 吗？	2026-10-16 抓取的 `CDS.full.md` 为 3206 行。
REA 能免费解锁 Claude 桌面吗？	不能。REA 检查你有权分析的目标；本案例研究的是已发布的 MIT 复刻。
图片在哪？	本站 `/media/blog/open-claude-ui/`（storybook 截图 + logo.svg）。