Open Claude UI 组件演示
Open Claude UI 组件演示
Open Claude UI 组件演示：38 个可交互的 React 组件，按手册章节分成 6 页，源码直接引自仓库 code-examples/。
View as Markdown最后更新：
这里的组件都是真实运行的 React 代码，直接引自仓库的 code-examples/，样式变量来自 cds-theme.css。按手册章节分页，右上角可以切换深色模式；系统开启“减少动态效果”时动画会停掉。
| 页面 | 手册章节 | 内容 |
|---|---|---|
| 基础原子组件 | v1 第二篇 | 按钮、组合按钮、分段控制器、状态灯、骨架屏、确认弹窗、附件磁贴、容器查询工具栏 |
| 会话与输入 | v1 第三篇 | 消息气泡、思考折叠、输入框、/ 与 @ 输入、模型切换与 Token 仪表盘、MCP 工具卡片 |
| 动效与光影 | v1 第四篇 · v2 第四篇 | 时长与缓动、弹簧参数、2.0 动效引擎、推理光晕与扫光、滚动渐隐 |
| 多媒体与产物 | v1 第五篇 | 语音波形、图片查看器、双栏分割、产物沙箱、Diff 查看器、代码块 |
| 桌面架构与交互 Hook | v1 第六篇 | 桌面顶栏、会话拖拽排序、多代理看板、滚动跟随、漫游焦点、共享元素转场、限流退避 |
| 2.0 新增 | v2 第二、三、五篇 | 算力调节器、输入框底栏、sibling-index 交错、Pill 过冲、发丝边与触控补偿 |
没有放演示的部分：ClaudeAudioPlayer.ts（复刻官方提示音，属于官方声音资产，不收录）、createClaudeMainWindow.ts（Electron 主进程代码，浏览器里跑不了）、tailwind.config.js / cds-theme.css / cds-pure.css（配置与样式表，已经在全站使用）。
站点不包含任何 Anthropic 官方素材：图标统一用 lucide，组件里原本的 emoji 和品牌图标位置换成了中性图标，图片是生成的占位图。
数值的来源与分析方法见 分析 Claude 桌面端界面。