Claude 设计系统开源复刻 open-claude-ui,30 个生产级组件即拷即用

open-claude-ui 是一个基于深度逆向分析构建的高保真开源 UI 组件库与动效引擎,目标是把 Claude 桌面端的设计系统(CDS)与工程交互物理学完整还原出来。整个逆向推导、反混淆静态分析与 ASAR 资源解构均依托多平台逆向工程框架 REA 完成,因此项目中的组件规范、物理阻尼常数、着色器关键帧与音频管道都严格依据真实前端架构反编译验证提炼,而非市面上的盲猜近似复刻。

它提供 30 个生产级独立代码模块,包含 11 个基础原子控件与 19 个深度架构物理学模块及 React Hooks,并附带一份长达 3000+ 行、31 个子节的逆向分析技术手册。值得注意的是,其令牌层与纯 CSS 表现层可脱离 React 与 Tailwind 单独使用,Vue、Svelte 宿主或自研桌面容器都能直接消费全量 183 个设计令牌。项目地址见 GitHub 仓库。

痛点是什么

对做 AI 桌面客户端的开发者来说,最头疼的往往不是模型能力,而是界面质感:想复刻 Claude 那种温润克制的视觉调性,却只能靠肉眼比对截图,颜色、圆角、阴影全凭感觉猜;动效手感更是玄学,弹簧参数差一点就显得廉价。另一方面,官方改版频繁,刚照着旧版做完一套组件,新版桌面端一上线,配色、圆角、交互细节全变,之前的适配工作几乎白费。缺乏可验证的规范来源,让前端还原变成反复试错的体力活。

主要功能特点

项目把设计令牌、原子控件、会话流、动效物理、视听交互与桌面架构拆成七大分卷,形成一套可直接落地的组件体系。

完整设计令牌体系

提供表面阶梯、陶土橙品牌色与发丝细边等 183 个令牌,一处引入即可统一视觉基调。

生产级动效物理参数

内置多套弹簧参数与非线性遮罩,让弹出手感与滚动渐隐贴近真实产品。

会话流与指令引擎

覆盖输入框、模型切换、工具调用卡片等模块,直接拼出 AI 聊天主界面。

零二进制合规资产

用系统字体回退栈与 Web Audio 合成音效替代专有资源,自包含且合规。

为什么值得关注

它不只是一个组件库,更是一份可对照源码取证的设计系统拆解文档,对想研究顶级 AI 产品前端工程的人有长期参考价值。

可脱离框架单独使用

纯 CSS 层不依赖 React,任意技术栈都能低成本接入这套视觉规范。

紧跟官方版本迭代

作者持续跟进新版桌面端并更新分析,新旧版本差异都有对照记录。

推荐信息
飞翔的企鹅x
飞翔的企鹅x @BystAnd3rs 2026年11月03日 17:57

卧槽这个仓库是真的细节拉满,上线一天已经 752🌟 了
然鹅刚上线半天,Claude 就发了新版桌面端
昨天花了点时间,新版也被我扒完了😂

完整内容更新到了仓库里👇

👉https://github.com/Caho1/open-claude-ui

1️⃣ 颜色和圆角都换了
浅色底从偏暖的米黄 #FAF8F5 换成冷白 #FCFCFB,深色换成墨黑 #151515
输入框圆角从 20px 砍到 12px,不再是圆圆的胶囊
难怪新版一打开,感觉更像干活的工具了

2️⃣ 底栏按钮看着只有 28px,实际能点的范围有 44px
CSS 先算出按钮标准高度和底栏高度差多少,再用负 margin 把看不见的点击区往外撑
看着紧凑,手指也不会点歪

3️⃣ 小药丸弹出来,会先冲到 1.32 倍,再回到 1.0
曲线是 cubic-bezier(0.34, 1.32, 0.64, 1)
弹的那一下手感,就来自多冲出来的这 32%

4️⃣ 一排标签依次弹出来,不再靠 JS 去算谁先谁后
用的是新的 CSS 函数 sibling-index(),浏览器自己数这是第几个,每个往后延 30ms
最多排到第 8 个,后面的就不再往后延了

5️⃣ 聊天顶部的渐隐,会跟着滚动变化
滚到最顶上时,渐隐自动消失,第一行字看得清清楚楚
往下一滚,又展开成 24px 的渐隐
全靠 CSS 的滚动时间轴,不用写 JS 监听滚动

6️⃣ 消息发不出去,也不会丢
先存进本地的 IndexedDB,弹一条黄色横幅让你重发
就算强制退出再打开,写了一半的长文和附件也都还在

这些都整理进了 open-claude-ui,33 个组件,还有一个双击就能打开的 Storybook,可以自己上手试👇

👉 https://openclaudeui.com/

2026-10-15 09:39
卧槽,昨晚刚把 Claude 桌面端的 UI 逆向完,开源出来
今天它直接大改,差不多是个 2.0 了😂
并行会话、新的侧边栏、用量直接显示在模型选择器旁边,单个聊天还能弹成独立窗口……
改动多到更新日志都快翻不完
昨晚那套弹簧参数、字重补偿、渐隐遮罩,新版里还在不在、有没有改
我这两天就把 2.0 重新拆一遍
新旧版本放在一起对比,变了什么、为什么这么改,都给大家扒出来
新仓库一觉醒来已经有将近 200 个 stars 了,
看来大家对这个是很感兴趣的,2.0 版本分析完第一时间发🫡
这下逆向的速度真快追不上它改版的速度了🤣
❤ 220🔁 15⭐ 177👁 30617
Claude 设计系统开源复刻 open-claude-ui,30 个生产级组件即拷即用 图片1
Claude 设计系统开源复刻 open-claude-ui,30 个生产级组件即拷即用 图片2
Claude 设计系统开源复刻 open-claude-ui,30 个生产级组件即拷即用 图片3