Open Claude UI
逆向拆解 Claude Desktop，再用 React 手写还原的一套界面。每个间距、圆角和动效曲线都附上了出处。
已跟进 Claude Desktop 2.0：浅色底改为 #FCFCFB，深色底改为 #151515→从这里开始
拆出来的细节
- 01 · 触控区看起来 28px，点起来 44px底栏行高压到 28px，按钮用负外边距把点击区补到 44px。
margin-block: calc(var(--cmp-chin-touch-grow) * -1) - 02 · 动效胶囊过冲回弹先放大到 1.32 倍，再用过冲曲线回落，分两段完成。
cubic-bezier(.34, 1.3, .64, 1) - 03 · 入场sibling-index() 交错入场按元素在兄弟里的序号依次延迟，第 9 个之后不再增加。
50ms + min(sibling-index() - 1, 8) * 30ms - 04 · 滚动顶部渐隐 0 → 28px停在顶部时边缘不渐隐，一离开顶部就展开 28px 渐隐。
--cds-scroll-fade-top: 0px → 28px
2.0 间距阶梯
出处：第三章 3.3 →compact
6
8
12
20
32
comfortable
8
12
16
28
40
1.x
4
8
12
16
24