Caho1/open-claude-ui

选用指南

AI 根据 README 整理 · 2026/10/22 14:16:52

使用方式

可通过 CSS 引入设计令牌与样式，也可作为 React 组件库导入使用，还提供离线 Storybook 预览。

查看 README 依据

│ └── claude-components-storybook.html # 交互式可视化故事书 (双击即可离线体验) ├── src/ │ └── index.ts # 统一对外导出的 TypeScript 库入口 ├── package.json ├── tsconfig.json └── README.md ``` --- ## 🚀 快速上手 (Quick Start) ### 1. 引入样式表与 Tokens (纯 CSS 支持) 无论是否使用 React，均可直接引入 CDS 核心样式表与 183 个设计令牌： ```css /* 引入全局主题变量、渐变消隐遮罩与核心关键帧 */ @import "open-claude-ui/css"; /* 或者通过 tokens 别名引入 */ @import "open-claude-ui/tokens"; ``` 若使用 Tailwind CSS，在 `tailwind.config.js` 中直接扩展主题： ```javascript 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. 使用核心组件 ```tsx 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 (

maxContextWindow: 200000 }} /> <ChatComposer onSend={(text) => console.log('Send message:', text)} /> </div> </ScrollFadeContainer> </div> ); } ``` --- ## 🎨 视觉故事书预览 (Interactive Storybook) 无需启动繁重的本地服务器，只需双击打开自带的 HTML 文件即可体验全量高保真组件： ```bash open docs/claude-components-storybook.html ``` 故事书包含： * 陶土色彩体系与暗黑模式即时切换 * 全量按钮尺寸与悬浮反馈 * 999px 全圆角滑动分段胶囊 * 二阶弹簧动效实时演示 * 附件磁贴与代码复制衰减状态机 --- ## 🤖 AI Agent 协同与开发规范 (Agent Guidelines)

部署要求

需要 TypeScript 5.5+、React 18+、TailwindCSS 3.4+ 和 Framer Motion 11+。

查看 README 依据

<a href="https://github.com/morluto/rea"><img src="https://img.shields.io/badge/Reverse%20Engineered%20with-REA-ea580c?logo=github" alt="Reverse Engineered with REA" /></a> <a href="assets/README.md"><img src="https://img.shields.io/badge/assets-clean--room%20compliance-success" alt="Asset Compliance" /></a> <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.5+-blue?logo=typescript" alt="TypeScript" /></a> <a href="https://react.dev/"><img src="https://img.shields.io/badge/React-18+-61DAFB?logo=react" alt="React" /></a>

<a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/TailwindCSS-3.4+-38B2AC?logo=tailwind-css" alt="TailwindCSS" /></a> <a href="https://www.framer.com/motion/"><img src="https://img.shields.io/badge/Framer_Motion-11+-0055FF?logo=framer" alt="Framer Motion" /></a> </p> --- ## 📖 简介 (Introduction) `open-claude-ui` 是基于对现代桌面端 AI 客户端进行深度拆解与逆向分析构建的高保真开源 UI 组件库与动效引擎。 整个逆向推导、反混淆静态分析与 ASAR 资源解构，均依托于先进的多平台逆向工程框架 **[REA (Reverse Engineer Anything)](https://github.com/morluto/rea)** 完成——通过 REA 的静态 AST 解析、闭包代码反混淆与运行时跟踪能力，穿透生产级压缩包，精准还原了底层工程物理常数与数学模型。

已知限制

不公开分发任何专有二进制资产，包括商业字体与录音，提供系统级字体回退与代码合成音效。

查看 README 依据

> 本项目的 **令牌层 (Tokens) 与纯 CSS 表现层可脱离 React 与 Tailwind 单独使用**。无论是自研桌面 Harness（如 DSH、各类 Agent 桌面容器）、传统 Web 页面还是 Vue/Svelte 宿主，只需引入 `@import "open-claude-ui/tokens.css";` 或 `@import "open-claude-ui/pure.css";`，即可直接消费全量 183 个设计令牌、Zero-JS 原生滚动消隐遮罩（`[data-cds-scroll-fade]`）与核心动效类，详情见下文快速上手。 > ⚖️ **版权与合规声明 (DMCA & Assets Policy)**： > 本开源项目**不公开分发任何专有二进制资产**（包括商业字体 `.ttf` 与录音 `.mp3`）。本项目提供原生系统级字体回退栈与 Web Audio API 纯代码合成音效，完全自包含、合规安全。详情参见 [assets/README.md](assets/README.md)。 --- ## 🌟 核心特性 (Key Features) ```mermaid graph TD OCUI["open-claude-ui"]