CDS 前端（设计 / 实现 / 重构）
真相来源是上游仓库 https://github.com/Caho1/open-claude-ui (MIT)：AGENTS.md（标记、预设、组件）、code-examples/ 和 docs/v2/（Claude Desktop 2.0，v2.37337.1）。以下路径相对于该仓库；请克隆或打开它，或者直接在 GitHub 上阅读。本技能是工作流，并不重复这些值。当任务涉及 v2 行为（密度、侧边栏、工作量、编辑器动效、离线队列）时，请阅读 references/v2-delta.md。
0. 先选择基准版本
- CDS 1.x（
code-examples/中的默认值）：暖色粘土强调色、20px 编辑器、8px 圆角、Framer Motion 弹簧动效。 - CDS 2.0（docs/v2）：冷色
#FCFCFB画布、12/14px 编辑器、6/8px 圆角、24/32px 控件、CSS-编辑器动效。 询问或推断选择哪个版本；不要在同一个界面中混用。许多 v2 标记（--cds-h-control、data-density）在文档中有记录，但尚未在code-examples/cds-theme.css中定义：使用前请先定义它们。
1. 工作流
- 分类任务：新组件 / 重写样式 / 重构 / 审计。
- 先复用再编写：检查
code-examples/（30 个模块，索引见 AGENTS.md §3）和src/index.ts。组合或扩展，不要重新推导。 - 标记：每个颜色、圆角、持续时间和缓动函数都必须来自
--cds-*变量或 Tailwind 别名。禁止原始十六进制值，禁止临时ms。 - 动效：根据下表选择。
- 边缘防护（第 3 节）适用于所有输入、滚动或 iframe 代码。
- 验证（第 4 节）。逐字报告失败情况。
2. 决策规则
动效选择
| 场景 | 使用 |
|---|---|
| 悬停/按下/淡入/骨架屏/入场，任何在流式传输期间运行的内容 | 纯 CSS + --cds-dur-* + --cds-ease-*（仅组合器属性：transform、opacity、filter） |
| 拖拽释放、依赖于速度或布局的宽高 | Framer Motion 并使用 SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP 之一 |
| 减少动效 | 直接跳转，绝不删除状态变化。遵循 prefers-reduced-motion |
绝对不要用 transition: all，绝对不要用 linear，绝对不要硬编码弹簧数值。使用 var(--cds-dur-*) 的 transition 简写在标记未定义时会静默失效，因此请定义全部五个（60ms/120/200/300/450）。 |
表面和边框：使用 surface-0..3 分层 + 极细 border-subtle（v2 中为 0.5px）。仅一层描边：带边框容器内部的控件设 border-none。使用 color-mix() 从表面派生阴影，而不是固定的 alpha 黑色。永远不要用纯 #000/#fff（代码块 #0d0d0c 除外）。
密度：使用 --cds-h-control / --cds-radius / --cds-icon 控制尺寸，永远不要用固定 px，从而兼容紧凑和舒适两种模式。低于 44px 点击区域的紧凑行使用负外边距触摸扩展（--cmp-chin-touch-grow）。
数字：任何计时器、计数器、标记计量、行号都使用 tabular-nums。
信息设计（v2 立场）：一个工作站，而不是聊天玩具。优先使用密集的状态行（28px、分支、PR、运行心跳）而不是宽敞的卡片；明确展示成本和风险（带 Max 警告的工作量层级、使用计量表）；将用户输入视为宝贵的资源。
3. 非协商性防护措施
- IME：在任意 Enter 发送操作之前，必须先执行
if (e.nativeEvent.isComposing || e.keyCode === 229) return;。 - 流式滚动：如果
Date.now() - lastUserScroll < 150，不要自动固定；仅在距离底部 40px 以内时固定。 - 模型生成的 HTML 的 iframe：使用不含
allow-same-origin的沙箱，使用经过来源检查的 postMessage，并通过navigator.userActivation进行门控。 - 零丢失输入：失败的/离线的发送应持久化（IndexedDB 队列）并在重新加载时恢复。
- 环境不可变性：上下文窗口/工作树/MCP 配置在创建会话后即被冻结；不要构建能在会话中编辑它们的 UI。
- 无二进制资源（
.ttf/.otf/.mp3/.wav）；仅使用系统字体栈和 Web Audio 合成。 - 必须同时检查浅色模式（
:root）和深色模式（.dark）。没有冷紫色/霓虹渐变（1.x）。 - 键盘：列表/网格使用轮播焦点（
useClaudeRovingFocus）；对话框使用焦点陷阱。
4. 重构 / 审计检查清单
在目标代码中搜索：十六进制字面量、rounded-[…px]、transition-all、ease-linear、duration-[…]、预设外的 stiffness:、缺少 IME 防护的 onKeyDown + Enter、流式代码中的 scrollTo/scrollTop =、allow-same-origin、嵌套在带边框父元素内的 1px 边框。将它们逐个替换为标记/预设/防护措施。保持行为不变；除非另有要求，否则仅更改表现。
然后运行以下命令，所有必须返回 0 退出码：
npm run typecheck && npm run check:tokens && npm run build
如果你向 AGENTS.md 添加了 --cds-* 引用，则 check:tokens 要求该引用必须存在于 cds-theme.css 中。
5. 输出约定
声明所选基准（1.x/2.0）、复用了哪些现有模块、选择了哪些标记/预设及其原因，以及验证结果。标记任何未经验证的内容（例如视觉深色模式检查）为“未验证”。