Open Claude UI 组件演示
2.0 新增
Open Claude UI 组件演示：算力调节器、输入框底栏、交错入场、Pill 过冲、发丝边（手册 v2）。每个演示附规格和源码出处。
View as Markdown最后更新：
2.0 新增收录 Claude Desktop 2.0 引入或重做的界面：推理算力调节器、输入框底部工具栏、sibling-index() 交错入场、Pill 过冲回弹、发丝边与触控补偿、骨架屏双模。本页 6 个演示对应手册 v2 第二、三、五章。
关键数值
| 项目 | 数值 | 出处 |
|---|---|---|
| Pill 过冲 | 80ms 放大到 1.32× → 120ms overshoot 回落 | v2/03 §3.5.1 |
| 交错入场 | 延迟 = 序号 × 步长（sibling-index()） | v2/02 §2.5.1 |
| 骨架屏 lockstep | 2.0s 周期，暗到 60% | v2/03 §3.5.2 |
| 骨架屏 wave | 每块延迟 序号 × 90ms，105° 扫光 | v2/03 §3.5.2 |
| 发丝边 | 0.5px | v2/02 §2.7 |
| 触控补偿 | (h-control − 行高) / 2 | v2/02 §2.8 |
推理算力调节器
2.0 在模型菜单里加了推理算力档位，决定模型思考多久。
输入框底部工具栏
输入框底部一栏放算力档位和发送失败消息的重试入口。
输入框正文区…
2 message(s) failed to send. Staged in local storage.
⌘ + Enter to send
sibling-index 交错入场
用 CSS 的 sibling-index() 按序号延迟入场，不写 JS。
ASTFusesView TransitionsScroll TimelineOffline Bundlesibling-index()
Pill 过冲回弹
胶囊出现时先放大再回弹，分两段完成，总长 200ms。
待处理 3
发丝边与触控补偿
2.0 用 0.5px 边框；底栏按钮看起来小，点击区用负外边距补大。
0.5px 发丝边
1px 对照
--cds-elevation-card
骨架屏双模
骨架屏有整组同步闪烁和逐块波浪两种模式，分别适合列表和大卡片。
lockstep
wave
怎么在项目里使用？
复制 code-examples/ 里对应的文件，并引入 cds-theme.css。例如：
.chip { animation-delay: calc(var(--cds-chip-in-base-delay, 50ms) + min(sibling-index() - 1, 8) * 30ms); }