Claude VS Code 插件视觉规范提取

来源：本机已安装的 anthropic.claude-code-2.1.296-linux-x64/webview/index.css（2026-10-22 提取）
用途：作为 Playground / chat-ui 的视觉规范依据。只参考设计令牌与布局，不拷贝源码和资源。

1. 令牌体系

插件定义了一层 --app-* 语义变量，映射到 VS Code 主题变量 --vscode-*。我们在独立网页中没有 --vscode-*，所以用 VS Code 默认主题的取值填充（下表的"暗/亮"两列为 Dark Modern / Light Modern 的参考值，实现时以主题文件为准）。

语义令牌	映射到	暗	亮
`--app-primary-background`	sideBar.background	`#181818`	`#f8f8f8`
`--app-secondary-background`	editor.background	`#1f1f1f`	`#ffffff`
`--app-primary-foreground`	foreground	`#cccccc`	`#3b3b3b`
`--app-secondary-foreground`	descriptionForeground	`#9d9d9d`	`#717171`
`--app-primary-border-color`	sideBarActivityBarTop.border	`#2b2b2b`	`#e5e5e5`
`--app-input-background`	input.background	`#313131`	`#ffffff`
`--app-input-secondary-background`	menu.background	`#1f1f1f`	`#ffffff`
`--app-input-border`	inlineChatInput / input / widget border	`#3c3c3c`	`#cecece`
`--app-input-active-border`	inputOption.activeBorder	`#2488db`	`#005fb8`
`--app-input-placeholder-foreground`	input.placeholderForeground	`#989898`	`#767676`
`--app-code-background`	textCodeBlock.background	`#7f7f7f26`	`#7f7f7f26`
`--app-inline-code-background`	textPreformat.background	`#7f7f7f26`	`#7f7f7f26`
`--app-link-foreground`	textLink.foreground	`#4daafc`	`#005fb8`
`--app-list-hover-background`	list.hoverBackground	`#2a2d2e`	`#f2f2f2`
`--app-error-foreground`	errorForeground	`#f85149`	`#f85149`

2. 品牌色（插件中硬编码）

令牌	值	用途
`--app-claude-orange`	`#d97757`	输入框聚焦边框与光晕
`--app-claude-clay-button-orange`	`#c6613f`	发送按钮背景
`--app-claude-ivory`	`#faf9f5`	发送按钮图标
`--app-claude-slate`	`#141413`	—
成功	`#74c991`	时间线圆点、已连接徽标
失败	`#c74e39`	时间线圆点、失败徽标
警告/待处理	`#e1c08d`	时间线圆点、需登录徽标

3. 刻度

间距：--app-spacing-small/medium/large/xlarge = 4 / 8 / 12 / 16px
圆角：--corner-radius-small/medium/large = 4 / 6 / 8px
等宽字号：编辑器字号（默认 12px），小号 −2px
列表：项内边距 4px 8px，项间距 2px，圆角 4px

4. 关键组件规则（摘录）

/* 时间线：竖线 + 圆点 */
.timelineMessage        { padding-left: 30px; }
.timelineMessage::before{ left: 9px; width: 7px; height: 7px; border-radius: 50%;
                          top: calc(var(--message-padding-top, 8px) + 7px);
                          background: var(--app-secondary-foreground); }
.timelineMessage::after { left: 12px; width: 1px; top: 0; bottom: 0;
                          background: var(--app-primary-border-color); }
.dotSuccess::before { background: #74c991 } .dotFailure::before { background: #c74e39 }
.dotWarning::before { background: #e1c08d }

/* 用户消息 */
.userMessage { border: 1px solid var(--app-input-border); border-radius: 6px;
               background: var(--app-input-background); padding: 4px 6px; white-space: pre-wrap; }

/* 工具行 */
.toolNameText           { font-weight: 700; margin-right: 4px; }
.toolNameTextSecondary  { font-family: monospace; font-size: .85em; }
.toolBodyRow            { display: grid; grid-template-columns: subgrid;
                          border-top: .5px solid var(--app-input-border); padding: 4px; }
.toolBodyRowLabel       { font-family: monospace; opacity: .5; font-size: .85em; }
.toolBodyRowContent     { max-height: 60px; overflow: hidden;
                          mask-image: linear-gradient(to bottom, #000 50px, transparent 60px); }
.toolResult             { background: var(--app-code-background); white-space: pre; overflow-x: auto; }

/* 审批卡片 */
.permissionRequestContainer { background: var(--app-input-secondary-background);
                              border: 1px solid var(--app-input-border); border-radius: 8px;
                              padding: 8px; max-height: 70vh; }
.permissionRequestContainer:focus-within
  { border-color: color-mix(in srgb, var(--app-input-active-border) 65%, transparent); }

/* 输入框 */
.inputContainer { border: 1px solid var(--app-input-border); border-radius: 8px;
                  box-shadow: 0 1px 2px #0000001a; }
.inputContainer:focus-within { border-color: #d97757;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d97757 12%, transparent),
              0 1px 2px color-mix(in srgb, #d97757, transparent 80%); }
.messageInput  { padding: 10px 36px 10px 14px; max-height: 200px; line-height: 1.5; }
.sendButton    { width: 26px; height: 26px; border-radius: 5px;
                 background: #c6613f; color: #faf9f5; }

/* 思考过程 */
.thinkingSummary { color: var(--app-secondary-foreground); opacity: .8; font-style: italic; }

/* 状态徽标 */
.statusBadge { border-radius: 4px; padding: 4px 8px; font-weight: 500; }

主容器：时间线和输入框都限制在 max-width: 680px 内居中，输入框距底部和左右各 16px。

5. 组件清单（按类名出现频次，反映插件的 UI 构成）

timelineMessage、userMessageContainer、toolUse/toolResult/toolBodyRow、permissionRequest*、thinkingSummary、inputContainer/messageInput/sendButton、pill（模型/模式选择）、sessionItem（历史会话）、statusBadge、mcpStatus、subagentRow、menuPopup/menuItem、banner、emptyState、previewPane。

6. 升级跟踪

插件升级后可以重新执行提取脚本，比对令牌变化：

grep -oE -- '--app-[a-zA-Z0-9-]+:[^;]+' ~/.vscode/extensions/anthropic.claude-code-*/webview/index.css | sort -u

claude-vscode-ui-reference.md 5.9 KB 文件历史 原始文件