Open Claude UI (open-claude-ui)

🌐 官网：openclaudeui.com

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

简体中文 · English

---

📖 简介 (Introduction)

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

🧭 取证基线：当前版本卷为 docs/v4.16336.0（@ant/desktop 4.16336.0，经 Info.plist / app.asar/package.json / 进程参数 / 活体 app.getVersion() 四路核实）；docs/v4.29.0-4.4212.0（主取证 3.6556.2，4.29.0 与 4.4212.0 两轮增量复验）为历史基线。全部经 REA 静态提取 + Main Process Debugger / 9229 Node inspector 只读活体实测双通道验证。

📁 文档版本命名规范：逆向分析手册的目录名从本版起直接对齐 Claude Desktop 的版本号（如 docs/v4.29.0-4.4212.0/）；后续 Claude 更新后，新取证报告将以对应版本号新建目录。目录名可写单个版本（如 docs/v5.0.0/）或覆盖区间（如 docs/v4.29.0-4.4212.0/，表示该报告在首个版本取证、后续版本增量复核）。早期的 docs/v1/、docs/v2/ 保持原名不变，作为历史快照保留（v2 取值已被取代，以 docs/v4.29.0-4.4212.0/ 为准）。

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

不同于市面上常见的盲猜或近似复刻，本项目所有组件规范、物理阻尼常数、着色器关键帧及音频管道均严格依据真实前端架构反编译验证提炼而成：

• 温润的人文质感 (Editorial Warmth)：纯正陶土橙（Clay #d97757）、4 层微对比表面阶梯（Surface 0-3）与视网膜高分屏发丝细边补偿（Hairline Ring）；
• 严苛的交互物理学 (Interaction Physics)：4 套生产级物理弹簧参数调校、4px 指针移动死区、CJK 输入法合成守卫、滚动渐隐遮罩（v1 取证的 7 档非线性阶梯；3.6556.2 已重构为 @property 变量驱动，见 docs/v4.29.0-4.4212.0）；
• 高阶视听与系统架构 (Audiovisual & Architecture)：基于原生 Web Audio API 的零延迟合成提示音、以光标为锚点的画廊跑道平移缩放、macOS 桌面毛玻璃透明融合与 Cowork 多代理协同拓扑。

💡 架构分层说明 (Architecture & Portability)：
本项目的 令牌层 (Tokens) 与纯 CSS 表现层可脱离 React 与 Tailwind 单独使用。无论是自研桌面 Harness（如 DSH、各类 Agent 桌面容器）、传统 Web 页面还是 Vue/Svelte 宿主，只需引入 @import "open-claude-ui/tokens.css"; 或 @import "open-claude-ui/pure.css";，即可直接消费全量 261 个设计令牌（初测于 3.6556.2，现以 docs/v4.16336.0 卷活体实测为准）、Zero-JS 原生滚动消隐遮罩（[data-cds-scroll-fade]）与核心动效类，详情见下文快速上手。

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

---

🌟 核心特性 (Key Features)

graph TD
    OCUI["open-claude-ui"]
    
    OCUI --> Tokens["1. 设计哲学与令牌体系<br/>(Surfaces 0-3, Clay, Hairlines, System Fonts)"]
    OCUI --> Atoms["2. 基础原子交互控件<br/>(CdsButton, SegmentedControl, StatusIndicators, Dialog)"]
    OCUI --> Stream["3. 会话流与指令引擎<br/>(Composer, IME Guard, Model Switcher, MCP Cards)"]
    OCUI --> Motion["4. 动效物理学与着色器<br/>(Spring Physics, Ambient Shimmer, Scroll Fade Masks)"]
    OCUI --> Media["5. 视听多媒体与产物交互<br/>(Synthetic Audio, Lightbox Pan/Zoom, Split Resizer, Epitaxy)"]
    OCUI --> Desktop["6. 桌面架构与协作拓扑<br/>(macOS Vibrancy, Sidebar DnD, Cowork Canvas, A11y Roving)"]
    OCUI --> Setup["7. 完整工程规范与开箱即用<br/>(Tailwind, CSS Themes, Zero-Binary Dependency)"]

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

---

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

整个仓库最具工业价值的核心是这本 4,600+ 行、8 篇 / 41 个核心子节的深度逆向工程手册：docs/v1/Claude Design System (CDS).full.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 生产级工程源码清单：v1 基线全量 30 个生产级独立代码文件（11 个基础原子 + 19 个深度架构模块）；当前仓库已扩展至 37 个文件，见下方项目结构。
• 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 桌面端架构大跃迁。（历史快照：取值以 docs/v4.16336.0 卷为准）

🧬 Claude Desktop 4.16336.0 全量分析（当前版本卷）

• v4.16336.0/README.md 侧边浏览器全量技术文档库：与 v1 体例一致，按功能点分 8 篇 + 合并阅读版。基于 REA 静态取证、9229 主进程 inspector 只读活体观测、519 帧逐帧与像素级验证；参考实现 code-examples/ElementInspectHighlight.ts。
  • 版本实测依据：Info.plist / app.asar/package.json / 运行进程参数 / 活体 app.getVersion() 均为 4.16336.0
  • 八篇：总体架构与设计令牌 / 导航、地址栏与标签页 / 预览面板与开发服务器 / 站点权限、安全与浏览数据 / 元素选择、组件名与上下文注入 / 标注、截图与自动化光标 / 动效物理学与逐帧验证 / 系统级架构、运行时与工程复刻

🧬 Claude Desktop 4.4212.0 全量分析报告（历史基线）

• v4.29.0/README.md 七章取证 + 单文件完整版：对该版本生产包的全量分析，每条结论附代码证据与复现命令。目录名对齐 Claude 版本号。
  • 第一章 综述与版本边界：@ant/desktop 3.6556.2、ASAR 摘要、532 文件语义截断边界、6 个结构性零值
  • 第二章 Electron 架构取证：主进程 6 个 Sentry IPC 通道、0 个业务 handler、12 个字面量桥接 API、7 个 renderer 入口
  • 第三章 架构重构与对比分析：骨架屏双层组件 + data-hold 三态揭示、wave/lockstep 真实延时公式、RTL :lang() 列表、减少动效双轨
  • 第四章 系统底座全景解密：55 个 @keyframes、45 个 data-cds 命名空间、24 个 @property、35 阶 gray/orange 全表、5 阶时间与 4 条贝塞尔
  • 第五章 open-claude-ui 差异审计：逐项 diff 与 issue #25 取值裁定
  • 第六章 全量 CSS 扫描与官方规范比对：17 个 CSS 全扫、官方 CDS 规范文档提取、131 项 token 逐项比对、Main Process Debugger 运行时双模值表、ASAR 全量架构盘点（内置 Cowork VM / 4 个 MCP server / 6 个 Agent Skills / V8 compile-cache）
  • 第七章 总结与后续工作：确定性分级、未知项清单、可复现性声明

📐 文档版本卷命名约定 (Documentation Versioning Convention)

完整规则见 AGENTS.md §7。

每次 Claude Desktop 版本更新，新的取证文档必须：

1. 新建 docs/v<版本号>/（如 docs/v4.16336.0/）；若需覆盖多个基线的增量复核，可用区间名 docs/v4.29.0-4.4212.0/。绝不按日期、主题、取证轮次或流程命名。
2. 卷内按功能点分篇，沿用 docs/v1/ 体例（frontmatter part、上/下篇导航、英文指代、编号小节、证据索引、合并阅读版 .full.md）；不得按取证时间线编章。
3. 提供卷 README.md 分卷导航索引，并在 README.md / README-en.md / docs/README.md / AGENTS.md 四处登记当前卷、把上一卷标为历史基线。
4. 每条结论附 ASAR 路径 + 字节偏移或 REA Evidence ID，区分 observed / inferred / unknown。
5. 提交前跑 npm run typecheck / npm run check:tokens / npm run build，三项全部 0 error。

卷	版本	状态
docs/v4.16336.0/	4.16336.0	当前
docs/v4.29.0-4.4212.0/	4.29.0 → 4.4212.0	历史基线
docs/v2/	2.37337.1	历史快照
docs/v1/	1.x	历史快照

---

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

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

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

⚠️ v4.29.0 勘误：7 档写死阶梯存在于 v1/v2 时代的产物；3.6556.2 主样式表中 6 停以上 gradient 为 0，滚动渐隐已重构为 @property + animation-timeline 变量驱动（见 docs/v4.29.0-4.4212.0/06 §6.6.3）。以下为历史取证记录，ScrollFadeContainer.tsx 的动态归零逻辑仍然有效。

• 痛点：常规双色线性滚动遮罩在视网膜高分屏上存在严重的色阶断层（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} 幂律感知感知模型），搭配触顶/触底动态归零传感器，呈现温润如沉入水雾的边缘渐隐：

/* 提取自 c6a992d55-C0zTICcS.css */
mask-image: linear-gradient(to bottom,
  transparent,
  #0000000d calc(var(--cds-scroll-fade-top) * .15),
  #00000026 calc(var(--cds-scroll-fade-top) * .3),
  #0000004d calc(var(--cds-scroll-fade-top) * .45),
  #00000080 calc(var(--cds-scroll-fade-top) * .6),
  #000000b3 calc(var(--cds-scroll-fade-top) * .75),
  #000000d9 calc(var(--cds-scroll-fade-top) * .87),
  #000 var(--cds-scroll-fade-top),
  #000 calc(100% - var(--cds-scroll-fade-bottom)),
  #000000d9 calc(100% - var(--cds-scroll-fade-bottom) * .87),
  #000000b3 calc(100% - var(--cds-scroll-fade-bottom) * .75),
  #00000080 calc(100% - var(--cds-scroll-fade-bottom) * .6),
  #0000004d calc(100% - var(--cds-scroll-fade-bottom) * .45),
  #00000026 calc(100% - var(--cds-scroll-fade-bottom) * .3),
  #0000000d calc(100% - var(--cds-scroll-fade-bottom) * .15),
  transparent
);

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 幂律能量压缩

• 痛点：直接将分贝映射为波形高度会导致低音爆格、说话停顿时空调噪音引起持续微抖。
• Claude 算法：引入 8% 噪声门限过滤底噪，叠加 0.7 次幂非线性 Gamma 压缩：

\text{Compressed} = \min\left(1, (\max(0, E - 0.08) / 0.92)^{0.7} \times 1.5 \times W_b\right)

使微弱的人声细语被温和放大，高分贝爆音被自然平抑，波形动态范围极其均匀。

7. Shadow DOM 隔离 + CSS Grid 行高几何硬锁

• 痛点：代码差异对比引擎在遇到长行换行（Word Wrap）时，左侧行号与右侧代码经常严重错位。
• Claude 算法：采用 Shadow DOM 隔离语法选择器，左右两栏在 CSS Grid 中被强制同步硬锁为相同网格行跨度：gridRow = span ${lines}，并使用 feed: e.slice(m.length) 增量向 Worker 发送 Delta，避免 O(N^2) 重复语法树重排。

8. Iframe 事件防吞噬护盾与双击 50/50 吸附

• 痛点：拖拽 Artifacts 双栏分割条划过内部展示 iframe 时，iframe 截获指针事件导致拖拽状态死锁卡住。
• Claude 算法：拖拽激活瞬间向全局注入 data-pane-dragging="true"，在预览容器上方强制覆盖一层透明的 pointer-events: none 阻断层；双击手柄瞬时触发二阶弹簧 50/50 平分居中吸附。

---

📂 项目结构 (Repository Structure)

open-claude-ui/
├── assets/                            # 资产说明与合规指引
│   ├── images/                        # logo.svg + 双模字标 (SVG，零二进制字体)
│   └── README.md                      # 资产合规与系统级回退栈说明
├── code-examples/                     # 37 个文件：30 个 v1 基线模块 + 5 个后续版本模块 + 2 个配置资产
│   ├── cds-theme.css / cds-pure.css   # 全局主题令牌 / 独立纯 CSS 发行版
│   ├── tailwind.config.js             # Tailwind 工程扩展
│   ├── CdsButton.tsx / SegmentedControl.tsx / ... # 30 个 v1 基线模块（原子控件 / 会话流 / 动效物理 / 桌面宿主）
│   ├── CdsMotionEngine.tsx            # v2 动效引擎
│   ├── ChatComposerChin.tsx           # v2 输入框下颌
│   ├── ModelSelectorEffort.tsx        # v2 算力调节器
│   └── ElementInspectHighlight.ts     # v4.16336.0 元素选择高亮层 + React Fiber 反射（本次新增）
├── docs/                              # 按 Claude 版本号分卷（约定见 AGENTS.md §7）
│   ├── README.md                      # 文档库总索引：版本卷约定 + 卷状态表
│   ├── v1/                            # 1.x 历史快照：8 篇 / 41 小节 + .full.md
│   ├── v2/                            # 2.37337.1 历史快照：6 章
│   ├── v4.29.0-4.4212.0/             # 3.6556.2 → 4.4212.0 历史基线：7 章 + 合并版
│   ├── v4.16336.0/                   # 当前版本卷：8 篇按功能点 + README 索引 + .full.md
│   └── claude-components-storybook.html # 离线可视化故事书（双击即可体验）
├── scripts/
│   └── check-tokens.mjs               # 设计令牌 / keyframe 消费门禁
├── src/
│   ├── index.ts                       # 统一对外导出入口（含 ElementInspectHighlight）
│   └── types.d.ts
├── AGENTS.md                          # Agent 规范：令牌 / 物理 / 版本卷约定 §7 / 质量门禁
├── CLAUDE.md                          # Claude Code 专用指引
├── CHANGELOG.md / LICENSE
├── package.json / package-lock.json
├── tsconfig.json / tsconfig.build.json
├── README.md                          # 中文文档（默认）
└── README-en.md                       # 英文文档

---

🚀 快速上手 (Quick Start)

1. 引入样式表与 Tokens (纯 CSS 支持)

无论是否使用 React，均可直接引入 CDS 核心样式表与 261 个设计令牌：

/* 引入全局主题变量、渐变消隐遮罩与核心关键帧 */
@import "open-claude-ui/css";
/* 或者通过 tokens 别名引入 */
@import "open-claude-ui/tokens";

若使用 Tailwind CSS，在 tailwind.config.js 中直接扩展主题：

const cdsTheme = require("open-claude-ui/tailwind");

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/open-claude-ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...cdsTheme.theme.extend
    }
  }
};

2. 使用核心组件

import React, { useState } from 'react';
import { 
  ChatComposer, 
  CdsButton, 
  ModelSwitcherWithTokenGauge, 
  ScrollFadeContainer 
} from 'open-claude-ui';

export function App() {
  const [model, setModel] = useState<'sonnet-3.5' | 'haiku-3.5' | 'opus-3'>('sonnet-3.5');
  const [thinking, setThinking] = useState(true);

  return (
    <div className="flex h-screen w-full bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer axis="vertical" fadeSize={32} className="flex-1 p-6">
        <div className="mx-auto max-w-3xl space-y-4">
          <ModelSwitcherWithTokenGauge
            currentModel={model}
            onModelChange={setModel}
            extendedThinking={thinking}
            onThinkingChange={setThinking}
            tokenBudget={{
              inputTokens: 12400,
              outputTokens: 3200,
              cacheReadTokens: 48000,
              cacheWriteTokens: 16000,
              maxContextWindow: 200000
            }}
          />
          <ChatComposer onSend={(text) => console.log('Send message:', text)} />
        </div>
      </ScrollFadeContainer>
    </div>
  );
}

---

🎨 视觉故事书预览 (Interactive Storybook)

无需启动繁重的本地服务器，只需双击打开自带的 HTML 文件即可体验全量高保真组件：

open docs/claude-components-storybook.html

故事书包含：

• 陶土色彩体系与暗黑模式即时切换
• 全量按钮尺寸与悬浮反馈
• 999px 全圆角滑动分段胶囊
• 二阶弹簧动效实时演示
• 附件磁贴与代码复制衰减状态机

---

🤖 AI Agent 协同与开发规范 (Agent Guidelines)

本项目针对现代 AI Coding Agents（如 Cursor, Windsurf, Claude Code, GitHub Copilot, Devin, Antigravity 等）深度适配了前端 UI 与动效开发指引规范：

• 全局 Agent 规范指南：AGENTS.md（根目录自动生效，包含设计令牌、物理弹簧选型矩阵、单闭合边框原则、输入法防御守卫与质量门禁）。
• Claude Code 专用指引：CLAUDE.md（针对 Anthropic 官方 CLI 工具链的指令与开发约束）。
• IDE Agent 规则：.cursorrules 与 .github/copilot-instructions.md。

💡 给使用 AI 助手的开发者提示：
当你让 Cursor / Claude Code / Copilot 为你的产品实现前端页面或动效时，可直接向 Agent 提示：
“请严格遵循本仓库中的 AGENTS.md 规范，使用 CDS 陶土设计令牌与 ClaudeMotionPresets 弹簧预设构建当前组件。”

---

🙏 致谢与逆向支持 (Acknowledgements)

• 特别鸣谢开源逆向框架 REA (Reverse Engineer Anything) 为本项目提供的 AST 解密、Electron 运行时分析与工程常数反编译工具链支持。
• 致敬 Anthropic 设计与前端团队打造的人文级交互系统与工程细节，启发了本开源复现研究。

---

📜 许可证 (License)

本项目基于 MIT License 开源发布。所有反编译研究成果与代码复现仅供学习、研究与工程交流使用。

---

📈 Star History

---

🐧 支持与关注 (Support & Follow)

如果 open-claude-ui 对你有帮助，欢迎点个 ⭐ Star 支持一下，也欢迎来聊聊 CDS 设计令牌、Claude 交互物理与 AI Agent 前端工程。

平台	账号	入口
𝕏 X (Twitter)	@BystAnd3rs	打开主页
📕 小红书	企鹅AI指南	打开主页
💬 微信公众号	企鹅AI指南	微信内搜索「企鹅AI指南」

⭐ 给项目点个 Star · 🐛 提 Issue · 🔀 提 PR

公众号暂无二维码图片，先以文字检索方式呈现；后续补图会放在 assets/ 下并在本节引用。