Agent Academy is a free, source-linked library of skills, prompts, MCP servers and bot templates, organised into courses by profession, for people who hand real work to AI agents: 1,467 live resources, each with its original link, license and safety tags.
Style library
Original text · 简体中文New GitHub UI repo: 基于 REA 深度拆解并高保真还原 Claude 官方桌面端 UI。纯手写 30 个独立 React 组件与 8 项硬核交互物理算法，附带 3000+ 行逆向分析手册。 (★315, MIT, Caho1/open-claude-ui)
https://github.com/Caho1/open-claude-ui
Republished in full under its license, with attribution. The source is authoritative.
open-claude-ui)基于 REA 深度拆解，高保真生产级还原 Claude 设计系统 (CDS) 与工程交互物理学。
简体中文 · English
open-claude-ui 是基于对现代桌面端 AI 客户端进行深度拆解与逆向分析构建的高保真开源 UI 组件库与动效引擎。
整个逆向推导、反混淆静态分析与 ASAR 资源解构，均依托于先进的多平台逆向工程框架 REA (Reverse Engineer Anything) 完成——通过 REA 的静态 AST 解析、闭包代码反混淆与运行时跟踪能力，穿透生产级压缩包，精准还原了底层工程物理常数与数学模型。
不同于市面上常见的盲猜或近似复刻，本项目所有组件规范、物理阻尼常数、着色器关键帧及音频管道均严格依据真实前端架构反编译验证提炼而成：
#d97757）、4 层微对比表面阶梯（Surface 0-3）与视网膜高分屏发丝细边补偿（Hairline Ring）；> ⚖️ 版权与合规声明 (DMCA & Assets Policy)：
> 本开源项目不公开分发任何专有二进制资产（包括商业字体 .ttf 与录音 .mp3）。本项目提供原生系统级字体回退栈与 Web Audio API 纯代码合成音效，完全自包含、合规安全。详情参见 [assets/README.md](assets/README.md)。
graph TD
OCUI["open-claude-ui"]
OCUI --> Tokens["1. 设计哲学与令牌体系(Surfaces 0-3, Clay, Hairlines, System Fonts)"]
OCUI --> Atoms["2. 基础原子交互控件(CdsButton, SegmentedControl, StatusIndicators, Dialog)"]
OCUI --> Stream["3. 会话流与指令引擎(Composer, IME Guard, Model Switcher, MCP Cards)"]
OCUI --> Motion["4. 动效物理学与着色器(Spring Physics, Ambient Shimmer, Scroll Fade Masks)"]
OCUI --> Media["5. 视听多媒体与产物交互(Synthetic Audio, Lightbox Pan/Zoom, Split Resizer, Epitaxy)"]
OCUI --> Desktop["6. 桌面架构与协作拓扑(macOS Vibrancy, Sidebar DnD, Cowork Canvas, A11y Roving)"]
OCUI --> Setup["7. 完整工程规范与开箱即用(Tailwind, CSS Themes, Zero-Binary Dependency)"]
docs/Claude Design System (CDS).md](docs/Claude%20Design%20System%20(CDS).md)。整个仓库最具工业价值的核心是这本长达 3,000+ 行、31 个核心子节的深度逆向工程手册：[docs/Claude Design System (CDS).md](docs/Claude%20Design%20System%20(CDS).md)。
它不仅记录了所有反编译源码取证位置，还详尽解构了 Anthropic 解决当代大模型产品前端痛点的系统架构方案：
#f5f5f3 至 #ffffff，深色 #0b0b0a 至 #20201e）与品牌陶土橙（#d97757）。-.125em 光学垂直居中。active:scale-[0.98] 物理触觉。layoutId 双模式。file-thumbnail-grow-in 入场动画。0fr -> 1fr 弹性伸缩动画，生成期间传递 onOpenChange = undefined 强制展开互斥锁。/ 指令与 @ 上下文双触发符、自适应高度伸缩与 Token 预测。pending_approval → running → success / error）、三阶决议动作阵列与 Payload 审查。@keyframes。wl-glow 陶土暖光漫反射光场、cds-shimmer-text-shine 非对称贝塞尔曲线与焦散光场。hiddenInset 标题栏、交通灯逆缩放几何补偿、-webkit-app-region: drag 安全区、macOS Vibrancy 毛玻璃。pinnedOrder 乐观拓扑重排、4px 移动死区、微倾斜幽灵投影与落点对撞占位线。BroadcastChannel 跨窗口同步。@container 的 4 阶流体压缩梯队 (>=576px / <480px / <384px / <320px)，彻底杜绝单字折行。UI 组件只是外壳，真正让 Claude 交互质感脱颖而出的是隐藏在混淆代码底部的物理学方程与数学模型。本项目从生产环境反编译还原了以下 8 项关键算法：
#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
);
NOISE_FLOOR = 0.08）物理截断底噪；二是基于原生 Web Audio OscillatorNode 进行纯代码频率调制（如 440Hz → 880Hz 上扬）与平滑指数淡入淡出（exponentialRampToValueAtTime），零外部音频依赖且彻底消除爆音。!(e.nativeEvent.isComposing || e.keyCode === 229) 双重互锁守卫，并在按键拦截状态机中接管 Escape 键，防止候选词关闭时意外冒泡退避整个对话窗口。$$\text{idealTx} = O_x - (O_x - \text{prevTx}) \cdot \frac{S_{\text{target}}}{S_{\text{current}}}$$
配合 4px 手部微抖死区与视口边界溢出阻尼系数 ($y = 0.7$)。
$$\text{Compressed} = \min\left(1, (\max(0, E - 0.08) / 0.92)^{0.7} \times 1.5 \times W_b\right)$$
使微弱的人声细语被温和放大，高分贝爆音被自然平抑，波形动态范围极其均匀。
gridRow = span ${lines}，并使用 feed: e.slice(m.length) 增量向 Worker 发送 Delta，避免 $O(N^2)$ 重复语法树重排。data-pane-dragging="true"，在预览容器上方强制覆盖一层透明的 pointer-events: none 阻断层；双击手柄瞬时触发二阶弹簧 50/50 平分居中吸附。open-claude-ui/
├── assets/ # 资产说明与合规指引
│ ├── images/logo.svg # 开源矢量标识
│ └── README.md # 资产合规与系统级回退栈说明
├── code-examples/ # 30 个生产级独立代码文件 (开箱即用)
│ ├── ArtifactsSplitPaneResizer.tsx # 双栏弹性分割与折叠引擎
│ ├── AttachmentCard.tsx # 附件磁贴与上下文胶囊
│ ├── cds-theme.css # 全局主题样式表 (CSS 自定义属性与 Keyframes)
│ ├── CdsButton.tsx # 4 级尺寸、5 大变体全能按钮
│ ├── ChatComposer.tsx # 核心输入框终端
│ ├── ChatMessageBubbles.tsx # 会话气泡套件 (User & Assistant)
│ ├── ClaudeAudioPlayer.ts # 低延迟音频引擎 (内置 Web Audio 原生合成振荡器)
│ ├── ClaudeDesktopHeader.tsx # macOS 沉浸式标题栏组件
│ ├── ClaudeMotionPresets.ts # 动效引擎与二阶阻尼谐振子数学求解
│ ├── CodeBlock.tsx # 代码块容器与 2.5s 复制衰减状态机
│ ├── ConfirmationDialog.tsx # 模态确认对话框
│ ├── ContainerResponsiveBar.tsx # 自适应容器查询响应栏
│ ├── CoworkAgentCanvas.tsx # 多智能体协同看板与拓扑空间
│ ├── createClaudeMainWindow.ts # Electron 宿主主窗口创建工厂
│ ├── DraggableSessionList.tsx # 侧边栏会话拖放与固定物理
│ ├── EpitaxyIframeBridge.tsx # Artifacts 预览沙箱桥接器
│ ├── LiveMicActivityBars.tsx # 6 频段非线性麦克风波形柱
│ ├── McpToolDecisionCard.tsx # MCP 交互式工具调用决策卡片
│ ├── MediaLightboxViewer.tsx # 多模态媒体查看器与画廊跑道
│ ├── ModelSwitcherWithTokenGauge.tsx # 模型矩阵选择器与 Token 仪表盘
│ ├── ReasoningAmbientGlow.tsx # 动态光效与推理氛围感组件
│ ├── RichComposerWithMentions.tsx # CJK 守卫、/ 与 @ 双触发符输入终端
│ ├── ScrollFadeContainer.tsx # 7 档非线性 Alpha 渐变遮罩
│ ├── SegmentedControl.tsx # 999px 全圆角分段选择胶囊
│ ├── StatusIndicators.tsx # 陶土呼吸灯、运行脉冲与骨架屏扫光
│ ├── StreamingDiffViewer.tsx # 代码差异对比与流式高亮引擎
│ ├── tailwind.config.js # Tailwind 配置工程扩展
│ ├── ThinkingAccordion.tsx # 思考过程状态机折叠组件
│ ├── useClaudeRovingFocus.ts # 全键盘无障碍焦点漫游 Hook
│ ├── useClaudeScrollPinning.ts # 流式滚动视口图钉 Hook
│ ├── useClaudeSharedElementTransition.ts # View Transitions 共享元素变形 Hook
│ └── useRateLimitBackoff.ts # 429/503 指数退避与熔断状态机 Hook
├── docs/
│ ├── Claude Design System (CDS).md # 七大篇章 / 31 小节深度技术指导手册
│ └── claude-components-storybook.html # 交互式可视化故事书 (双击即可离线体验)
├── src/
│ └── index.ts # 统一对外导出的 TypeScript 库入口
├── package.json
├── tsconfig.json
└── README.md
| 模块分类 | 组件 / Hook 文件 | 逆向来源与工程机制 | ||
|---|---|---|---|---|
| :--- | :--- | :--- | ||
| 基础原子控件 | CdsButton.tsx | 4 级尺寸阶梯（XS/SM/MD/LG），5 大变体，单闭合边框原则，active:scale-[0.98]。 | ||
| 基础原子控件 | SegmentedControl.tsx | 999px 全圆角轨道、2px 几何内边距、纯几何定位与 Framer Motion 双模式。 | ||
| 基础原子控件 | StatusIndicators.tsx | 陶土明度呼吸指示灯（2.4s）、运行活动脉冲（1.2s）、思考跳动三点与骨架屏扫光条。 | ||
| 基础原子控件 | ConfirmationDialog.tsx | 16px 圆角、双环 Popover 弥散投影、高斯模糊遮罩与按键陷阱。 | ||
| 基础原子控件 | AttachmentCard.tsx | 10px 面板圆角、桌面端磁贴 (128×96px) 与输入框行内胶囊双模式、生长入场动画。 | ||
| 会话流与输入 | ChatMessageBubbles.tsx | User 18px 浅蓝微调底色 vs Assistant 零边框透明排版与代码块联动。 | ||
| 会话流与输入 | ThinkingAccordion.tsx | Framer Motion 贝塞尔高度弹性收展、单颗陶土呼吸脉冲，生成中强制展开互斥锁。 | ||
| 会话流与输入 | ChatComposer.tsx | 20px 核心输入终端、三态双环阴影、field-sizing: content 自适应伸缩、Thinking 开关。 | ||
| 会话流与输入 | RichComposerWithMentions.tsx | CJK 输入法合成守卫（`isComposing | keyCode === 229）、/ 指令与 @` 上下文双触发符、Token 预测。 | |
| 会话流与输入 | ModelSwitcherWithTokenGauge.tsx | 三大模型梯队切换、Extended Thinking 开关、Prompt Caching 四色显存解构与 SVG 环形表。 | ||
| 会话流与输入 | McpToolDecisionCard.tsx | 三态授权生命周期（pending_approval → running → success / error）、三阶决议动作阵列。 | ||
| 动效与环境光 | ClaudeMotionPresets.ts | 4 套生产级物理弹簧预设（Bouncy/Snappy/Gentle/Heavy Snap），精调超调量与收敛时延。 | ||
| 动效与环境光 | ReasoningAmbientGlow.tsx | wl-glow 陶土暖光漫反射、cds-shimmer-text-shine 非对称贝塞尔曲线、焦散光场。 | ||
| 动效与环境光 | ScrollFadeContainer.tsx | 7 档非线性透明度手写渐隐遮罩、动态滚动位置传感器（触顶/触底动态归零）。 | ||
| 视听与多模态 | ClaudeAudioPlayer.ts | 原生 Web Audio API 振荡器无损和弦合成、30% 舒缓音量标准、平滑增益淡入淡出防爆音。 | ||
| 视听与多模态 | LiveMicActivityBars.tsx | 6 频段人声全覆盖波形、8% 噪声门限过滤、Math.pow(energy, 0.7) 非线性 Gamma 压缩。 | ||
| 视听与多模态 | MediaLightboxViewer.tsx | 75vw 跑道滑动位移、以光标为锚点的仿射平移缩放（Pan/Zoom）、4px 拖拽死区、Ctrl 滚轮缩放。 | ||
| 视听与多模态 | useClaudeSharedElementTransition.ts | 基于 startViewTransition、缩略图动态圆角检测与 object-fit: contain 内切剪裁逆向计算。 | ||
| 视听与多模态 | ArtifactsSplitPaneResizer.tsx | Iframe 事件防吞噬护盾、4px 移动死区、双击 50/50 居中吸附、边缘折叠门限与约束钳制。 | ||
| 视听与多模态 | EpitaxyIframeBridge.tsx | 严格 Origin 校验与通道隔离的 postMessage RPC 协议、7 大专有 MIME 分发、用户激活门禁。 | ||
| 视听与多模态 | StreamingDiffViewer.tsx | 表格行号对齐与 tabular-nums 约束、增量流式追加管道、统一/分屏双模式切换与 2.5s 复制衰减状态机。 | ||
| 视听与多模态 | CodeBlock.tsx | 12px 圆角、#0d0d0c 纯黑底色、语言标签行内光学对齐、2.5 秒复制衰减状态机。 | ||
| 系统与协作拓扑 | createClaudeMainWindow.ts | Electron 宿主窗口工厂：hiddenInset 标题栏、macOS Vibrancy (under-window) 毛玻璃融合、1200×800（最小 600×400）。 | ||
| 系统与协作拓扑 | ClaudeDesktopHeader.tsx | macOS 交通灯 74px 逆缩放补偿避让槽（-webkit-app-region: drag）、多标签页切换胶囊。 | ||
| 系统与协作拓扑 | DraggableSessionList.tsx | pinnedOrder 乐观拓扑重排、4px 指针移动死区、微倾斜幽灵投影与落点对撞占位线。 | ||
| 系统与协作拓扑 | CoworkAgentCanvas.tsx | 多 Agent 任务委派状态机、团队共享工件网格资产池、BroadcastChannel 跨窗口同步。 | ||
| 系统与协作拓扑 | useClaudeScrollPinning.ts | 150ms 冷却时间戳防抢夺、40px 底部容差图钉锁定、35vh 弹性缓冲与 GPU 字符模糊消解。 | ||
| 系统与协作拓扑 | ContainerResponsiveBar.tsx | 基于 @container 的 4 阶流体压缩梯队 (>=576px / <480px / <384px / <320px)，杜绝单字折行。 | ||
| 系统与协作拓扑 | useClaudeRovingFocus.ts | W3C WAI-ARIA 规范：方向键二维与一维网格漫游导航、Home/End 边界快速跳跃、RTL 翻转。 | ||
| 系统与协作拓扑 | useRateLimitBackoff.ts | 429/503 截断指数退避（t = min(t_max, t_base * 2^a) * (1 ± J)）、全抖动与熔断。 |
在你的项目中引入 CDS 核心主题样式表：
/* 引入全局主题变量与关键帧 */
@import "open-claude-ui/code-examples/cds-theme.css";
在你的 tailwind.config.js 中扩展主题：
const cdsTheme = require("open-claude-ui/code-examples/tailwind.config.js");
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/open-claude-ui/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {
...cdsTheme.theme.extend
}
}
};
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 (
<ScrollFadeContainer axis="vertical" fadeSize={32} className="flex-1 p-6">
<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)} />
</ScrollFadeContainer>
);
}
无需启动繁重的本地服务器，只需双击打开自带的 HTML 文件即可体验全量高保真组件：
open docs/claude-components-storybook.html
故事书包含：
本项目针对现代 AI Coding Agents（如 Cursor, Windsurf, Claude Code, GitHub Copilot, Devin, Antigravity 等）深度适配了前端 UI 与动效开发指引规范：
AGENTS.md](AGENTS.md)（根目录自动生效，包含设计令牌、物理弹簧选型矩阵、单闭合边框原则、输入法防御守卫与质量门禁）。CLAUDE.md](CLAUDE.md)（针对 Anthropic 官方 CLI 工具链的指令与开发约束）。.cursorrules](.cursorrules) 与 [.github/copilot-instructions.md](.github/copilot-instructions.md)。> 💡 给使用 AI 助手的开发者提示：
> 当你让 Cursor / Claude Code / Copilot 为你的产品实现前端页面或动效时，可直接向 Agent 提示：
> *“请严格遵循本仓库中的 AGENTS.md 规范，使用 CDS 陶土设计令牌与 ClaudeMotionPresets 弹簧预设构建当前组件。”*
本项目基于 [MIT License](LICENSE) 开源发布。所有反编译研究成果与代码复现仅供学习、研究与工程交流使用。
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Sourcegithub.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack.
Sourcegithub.com/anthropics/skills/blob/main/skills/slack-gif-creator/SKILL.md
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations;…
Sourcegithub.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md
Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost,…
Sourcegithub.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or…
Sourcegithub.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style…
Sourcegithub.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md