Caho1/open-claude-ui

概述

open‑claude‑ui 是一个开源 UI 组件库，重现了 Anthropic 的 Claude 桌面客户端的观感。作者使用 REA 逆向工程框架对 Claude 的生产版 Electron 包进行反编译，提取了精确的设计令牌、交互物理和动画参数，然后将其重新实现为一组用 TypeScript 编写并使用 Tailwind CSS 样式的可复用 React 组件。

该仓库包含：

• 30 个即用型组件和钩子（按钮、分段控件、聊天气泡、编辑器、模型切换器、音频播放器等）
• 一个完整的 Tailwind 主题，定义了 Claude 的调色板、表面层级、“黏土”橙色、发丝边框和动效令牌
• 一个轻量、离线的 Storybook 风格 HTML 预览，用于视觉测试
• 详细的逆向工程文档（约 3 000 行），解释了每个 UI 常量在原始应用中的来源
• 用于无障碍、速率限制退避、滚动固定、共享元素过渡等的辅助钩子

所有代码均在标准 React 18 环境中运行；不包含任何专有二进制文件或资源。

---

主要特性

特性	提供内容
高保真 Claude 设计系统	与官方桌面客户端匹配的精确颜色令牌、表面层级、0.5 px 发丝边框和 4 步弹簧物理。
30 个生产级组件	按钮、分段控件、状态指示器、对话框、聊天气泡、带 CJK 输入法保护的编辑器、带令牌计量器的模型切换器、音频合成、媒体灯箱、分栏调整器、协作画布等。
动效引擎	预构建的 Framer‑Motion 弹簧预设和自定义关键帧着色器（环境光晕、滚动淡出遮罩、非线性 alpha 遮罩）。
基于 Web‑Audio 的音效	使用原生 Web Audio API 生成的零延迟合成提示音——无需外部 MP3 文件。
桌面特定集成	macOS 毛玻璃效果、可拖拽标题栏、隐藏内嵌窗口、通过 BroadcastChannel 实现的多窗口协作。
无障碍	符合 ARIA 的焦点漫游钩子、键盘导航网格、RTL 支持。
离线 Storybook	一个单独的 HTML 文件（claude-components-storybook.html），无需开发服务器即可展示所有组件。
代理友好指南	AGENTS.md 及相关文件为 AI 编码助手（Copilot、Claude Code、Cursor 等）提供明确指令，以遵循库的设计约束。

---

快速开始

# 安装包
npm i open-claude-ui

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

export function App() {
  const [model, setModel] = React.useState('sonnet-3.5');
  const [thinking, setThinking] = React.useState(true);

  return (
    <div className="flex h-screen bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer className="flex-1 p-6">
        <ModelSwitcherWithTokenGauge
          currentModel={model}
         
          extendedThinking={thinking}
         
          tokenBudget={{ inputTokens: 12400, outputTokens: 3200, cacheReadTokens: 48000, cacheWriteTokens: 16000, maxContextWindow: 200000 }}
        />
        <ChatComposer => console.log(msg)} />
        <CdsButton variant="primary">发送</CdsButton>
      </ScrollFadeContainer>
    </div>
  );
}

从包中添加 Tailwind 主题（参见 code-examples/tailwind.config.js）并导入全局 CSS cds-theme.css，以获得精确的 Claude 颜色和动效令牌。

---

谁可能使用此库？

• 前端工程师，正在构建 Claude 风格的聊天 UI 或任何需要相同精致交互物理的 AI 助手界面。
• 设计系统团队，寻找如何编码表面层级、基于令牌的间距和基于弹簧的动效的具体示例。
• 研究人员或爱好者，对生产级 Electron 应用如何实现其 UI 感兴趣，并希望获得一个完整文档化的逆向工程参考。
• AI 编码代理（Copilot、Claude Code、Cursor 等）——仓库包含明确的 AGENTS.md 规则，以便代理生成的代码与库保持一致。

---

许可证

MIT——免费用于个人、教育或商业用途。