想偷师 Claude 桌面端的质感？这个开源组件库连滚动曲线都算好了

做 AI 产品界面的设计师大概都有同感：这类产品的 UI 看起来越来越像，圆角卡片、渐变按钮、一个输入框加一排建议词。想做出有辨识度的界面，最好的办法是去拆解那些公认质感出色的产品，而 Claude 桌面端恰好是被点名最多的一个——它的滚动阻尼、输入框细节、分段切换动效，被很多人拿来当标杆。

问题是，标杆只能看不能摸。截图猜参数，猜出来的东西总差一口气。最近 GitHub 趋势榜上出现了一个项目，直接把这件事做绝了：Caho1 的 open-claude-ui，用逆向工程手段对 Claude Desktop 做了完整拆解，把组件规范、动效参数甚至物理模型全部整理成开源组件库，MIT 协议。

拆到什么深度：183 个设计令牌和 8 个算法

先看规模：30 个生产级组件，其中 11 个是按钮、对话框、状态指示灯这类基础原子控件，另外 19 个是输入框引擎、MCP 决策卡片这类深度模块。设计令牌一共 183 个，包括标志性的陶土橙 #d97757、从 Surface 0 到 Surface 3 的四层表面阶梯、发丝级边框补偿方案。

真正值钱的是 8 个逆向还原的交互算法，随便挑几个感受一下：

滚动渐隐遮罩：列表滚动时上下边缘的淡出不是随手写个渐变，而是贴合 y 约等于 x 的 1.5 次幂的非线性曲线，分 7 档渐隐。这就是为什么原版滚动看起来「跟手又高级」。

中文输入法守卫：双互锁机制，防止拼音候选词确认瞬间误触发送。做过中文聊天界面的前端都踩过这个坑，原版把它做成了系统级防护。

滚动防抢夺：150 毫秒冷却时间戳方案，解决新内容加载时滚动位置被突然顶走的经典问题。

以光标为不动点的缩放：Pan 和 Zoom 用仿射变换方程描述，拖拽和缩放时光标所指的位置永远不动，这是画布类产品手感的核心。

这些数字不是拍脑袋写的，作者通过反混淆和 AST 解析从生产代码里提取，还写了 3000 多行的逆向分析手册，七大篇章把每个参数的来源讲清楚。

三步接进你的项目

上手门槛不高，按用途选一种接法：

1. 只想要视觉规范的项目（Vue、Svelte、传统 Web 都行），在样式入口引入 tokens 层的 CSS 文件，183 个颜色、圆角、阴影变量直接可用；
2. 用 Tailwind 的项目，把仓库提供的主题配置合并进 tailwind 配置的 extend 字段，表面阶梯和边框补偿自动生效；
3. React 项目直接安装组件包，引入 ChatComposer、CdsButton 等组件，动效引擎一并带上。

不想写代码，仓库 docs 目录里有一个单文件的离线 Storybook，双击用浏览器打开，所有组件的动效现场可预览，适合设计师先看一遍再决定抄哪些。

设计师该从里面学什么

我的观点是，这个项目的最大价值不是让你把 Claude 的皮抄走，而是示范了一种「参数化看设计」的方法。普通人看一个好界面，说不出好在哪里；这份逆向手册把「高级感」拆成了幂律曲线、冷却时间、门限阈值这些可度量、可复现的工程量。下次你调一个滚动动效，知道去试 1.5 次幂而不是凭感觉拖滑块，这就是进步。

边界也要说清楚：作者在仓库里明确声明不分发任何专有资产，字体用系统栈回退，音效用 Web Audio 现场合成，项目仅供学习研究。拿它学参数、学体系完全没问题，直接把界面像素级套壳成自己的产品，既不体面也有法律风险。

组件库地址在 GitHub 搜 Caho1/open-claude-ui。对做 AI 产品的团队来说，这一份手册顶半本设计规范；哪怕最后一行代码都不用，把它当交互设计的显微镜读一遍，也值回票价。