v2 · Claude Desktop 2.0 逆向手册
第四章：系统底座全景解密
4. 底座解密
4.1 纯 CSS 动效参数
从官方生产样式表中逆向提取出的 47 个关键帧涵盖了系统全域动效：
- Pill 微形变族：
cds-pill-in,cds-pill-pop-up,cds-pill-pop-down,cds-pill-dip-down,cds-pill-dip-up,cds-pill-roll-in-up,cds-pill-roll-in-down,cds-pill-roll-out,cds-pill-out - 骨架屏呼吸与扫光族：
cds-skeleton-breathe,cds-skeleton-sweep,cds-placeholder-reveal - Agent 思考状态族：
cds-dot-pulse,cds-working-dot-halo,cds-working-dot-lands,cds-working-dot-veil - 视口与滚动驱动族：
cds-scroll-fade-top,cds-scroll-fade-bottom,cds-scroll-fade-left,cds-scroll-fade-right,cds-sticky-edge-start,cds-sticky-edge-end - 元素进入退出族：
cds-reveal-in,cds-reveal-out,cds-fade-in,cds-slide-in-start,cds-slide-in-end,cds-morph-in,cds-chip-in,cds-attachment-out
4.2 原生组件命名空间
在 2.0 中，Anthropic 全面确立了 40 个标准 data-cds 顶级组件契约：
[40 大标准化组件清单]
• Accordion • AccordionHeader • Aside • AskUserQuestion
• AssistantMessage • Banner • Button • ButtonGroup
• Card • CardLink • ChartContainer • ChatComposerChin
• ChatComposerDock • ChatComposerEditor • ChatComposerNotices • ChatComposerQueuedMessages
• CommentCard • DataTable • FileDiff • Icon
• MessageActions • MessageAttachments • MessageAttachmentsFile • MessageAttachmentsImage
• MessageAttachmentsQuote• MessageAttachmentsVideo• ModelSelector • ModelSelectorEffort
• Panel • PointChartContainer • PreviewCard • Prose
• Pulse • Skeleton • SkeletonGroup • SplitDropdownButton
• Surface • Table • TurnStatusStep • UserMessage4.3 响应时间与贝塞尔曲线
1. 5 阶响应时间 Token 矩阵
:root {
--cds-dur-fast: 60ms; /* 瞬态响应：按压塌陷、Focus 环显现、Checkbox 勾选 */
--cds-dur-snap: .12s; /* 利落转场 (120ms)：Pill 收缩、标签关闭、微图标翻转 */
--cds-dur-base: .2s; /* 标准交互 (200ms)：模态框展开、卡片悬停上浮、下拉菜单 */
--cds-dur-sheet: .3s; /* 抽屉大面板 (300ms)：NewSessionDrawer 滑出、文件侧栏 */
--cds-dur-slow: .45s; /* 页面级大转场 (450ms)：Popout 弹射窗口初始化、全屏遮罩 */
}2. 3 大精确贝塞尔控制点
:root {
/* 1. 平滑自然减速曲线 (Quint-like Out) */
--cds-ease-out: cubic-bezier(.165, .84, .44, 1);
/* 2. 瞬态刚性捕捉曲线 (Crisp Snap) */
--cds-ease-snap: cubic-bezier(.32, .72, 0, 1);
/* 3. 物理过冲回弹曲线 (Spring Overshoot) */
--cds-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
}