DSH Web 界面 UI/UX 设计规范(light / dark 双主题)

August 15, 2026 · View on GitHub

本文档是 DeepSeek Harness (DSH) Web 客户端的完整 UI/UX 设计规范参考,覆盖主题 Token 系统、核心组件视觉规范、Icon 与视觉元素清单三大板块,light 与 dark 两套状态分别记录。

数据来源:全部基于当前安装产物中实际源码/编译产物的逐项核查,未编造数值:

主题:@deepseek-ai/dsh-client-ui-theme(lib/client.js + lib/styles/*.css)

组件:primitives 内联 CSS Module 字符串 + 编译产物 dsh-web-frontend/dist/assets/index-CSGf6Qzd.css + 各 client-ui 包的 lib/client.js 内联样式

Icon:@deepseek-ai/dsh-client-ui-primitives/lib/types/icons/ + lib/index.js + 30+ 个包的 client.js 实际引用检索

官方仓库相对路径:依 npm 包 repository.directory 与构建产物 \0dsh-css:/home/runner/work/deepseek-harness/... 注释推断,格式为 packages/client/<包名>/src/...

本文档由三份并行整理的子文档合并而成,分卷见 docs/parts/。

第一部分 · 主题 Token 系统(light / dark) — ui-theme-tokens.md
- 0. 层级结构与切换机制 1. Primitive 色板(73) 2. Alias 语义色(78) 3. Specific 组件色(11) 4. 字体 token(181) 5. 阴影/渐变/动效 6. 滚动条 7. Shiki 语法高亮 8. 边界说明 9. 关键结论
第二部分 · 核心组件 UI 规范(light / dark) — ui-components-spec.md
- 0. Token 速查 1. 输入框/文本框 2. 按钮 3. 卡片/面板 4. 弹层 5. 侧边栏与布局 6. 状态元素 7. 焦点环/动效/markdown/shiki/JsonTree 8. 设计系统特征总结
第三部分 · Icon 与视觉元素清单(含资源路径) — ui-icons-assets.md
- 一. Icon 总表(70 个,含 figma 源名/尺寸/风格/使用场景) 二. 视觉元素表(24 个) 三. 资源路径索引四. 命名规律总结

第一部分 · 主题 Token 系统(light / dark)

DSH Web 主题 Token 系统(light / dark)

数据来源(实际源码,未增删变量名):

@deepseek-ai/dsh-client-ui-theme@0.1.0-rc.6 包,安装路径 /opt/homebrew/lib/node_modules/@deepseek-ai/dsh/node_modules/@deepseek-ai/dsh-client-ui-theme/

主文件 lib/client.js(1311 行,内含主题运行时 ThemeRuntime 与 Appearance 设置行)

同包样式表(实际 token 定义全部在此):

lib/styles/design-platform.css(338 行)—— static / alias / specific 三层色板

lib/styles/gradient-shadow-text.css(232 行)—— 渐变、阴影、字体 token

lib/styles/base.css(15 行)—— 基础字体与动效变量

lib/styles/scrollbar.css(90 行)—— 滚动条 token 与皮肤规则

lib/styles/shiki.css(31 行)—— 语法高亮 token

主题切换机制:lib/index.js(Host 端 boot-theme 引导脚本)+ dsh-client-ui-layout/lib/client.js 中的 ThemePresenter(Client 端呈现)

0. 总览:层级结构与选择器

DSH 主题是一个三层语义色板 + 若干专项组的 CSS 自定义属性系统,全部以 --dsw-* 为前缀(另有少量共享前缀 --ds-*、滚动条间接层 --dsh-*、shiki 专用 --shiki-*)。

层级	前缀	数量	职责	引用关系
Primitive(基础色板)	`--dsw-static-*`	73	设计原子色,按色相家族 + 数字档位命名	不引用任何变量(唯一例外 `--dsw-alias-brand-primary-new-colorprimary-new-color` 在 dark 下引用 static)
Alias(语义色)	`--dsw-alias-*`	78	语义化取色(bg/border/label/state/brand/button 等)	引用 static;极个别自引用(`button-primary-fill → brand-primary`)
Specific(组件专属)	`--dsw-specific-*`	11	具体组件的专用色	引用 static;`specific-menu` 引用 alias `bg-layer-3`
字体	`--dsw-font-*`、`--dsw-font-family`	181	字号/字重/行高/字族	引用 `--dsw-font-family` / `--ds-font-family-code`
阴影/渐变/模糊	`--dsw-shadow-`、`--dsw-linear-`、`--dsw-mask-blur`	7	阴影层级、思考渐变、模糊滤镜	不引用变量(字面量)
动效/基础	`--ds-ease-in-out`、`--ds-transition-duration*`、`--ds-font-family-code`	5	上游 deepsuite 共享(字体族/缓动/过渡时长),本包兜底	—
滚动条	`--dsh-scrollbar-*`	3	滚动条间接层	引用 alias `scrollbar-bg-` / `scrollbar-hover-`
语法高亮	`--shiki-*`	11	shiki css-variables 主题	前/背景引用 alias `label-primary` / `markdown-code-block`

选择器约定(关键):--dsw-static-*、--dsw-alias-*、--dsw-specific-*、--dsw-linear-* 全部声明在 body 上(light 默认)与 body[data-ds-dark-theme] 上(dark 覆盖);base.css 的基础变量声明在 :root;字体与阴影 token 只声明在 body(两主题共用)。light 主题的特征是 body 上"没有"data-ds-dark-theme 属性,不存在 data-theme=light 这样的显式选择器。

主题切换机制(light / dark / system)

持久化偏好:theme 服务把偏好存进 Host 用户设置文档,命名空间 ui-theme、字段 preference,取值为 light | dark | system(默认 system,schema: ThemeSettingsSchema)。
启动引导(插件激活前):Host 端 index.js 的 bootThemeScript(preference) 把一段内联 <script> 注入到 HTML 的 <body> 之后:若偏好为 system 且 matchMedia('(prefers-color-scheme: dark)').matches,则判定为 dark;然后写 document.documentElement.style.colorScheme = 'dark'|'light' 并 document.body.toggleAttribute('data-ds-dark-theme', dark)。这样首屏渲染就落在正确的调色板上。
运行时(ThemeRuntime,client.js):
- 内置注册表 light / dark 两个主题(其 tokens 为空对象——色板由 CSS 提供,不重复数据);
- system 偏好通过 matchMedia('(prefers-color-scheme: dark)') 解析,并监听 OS 方案翻转(change 事件),仅在偏好为 system 时重发 theme/change;
- register() 供第三方插件注册主题(alias 层覆盖);overrideTokens(source, { tokenName: { light, dark } }) 按 source 叠加 token 覆盖层(seq 单调递增、后层按 token 胜出),disposer 移除本层;
- 任何变更递增 revision 并 emit theme/change(snapshot 为冻结对象)。
呈现(ThemePresenter,dsh-client-ui-layout):订阅 theme/change,把 active.colorScheme 写到 <html> 的 color-scheme 与 body 的 data-ds-dark-theme 属性;把 active.tokens(第三方覆盖)写成 body 的内联 CSS 变量;最后用计算后的 body 背景色更新 <meta name="theme-color">;dispose 时全部回收。
可访问性:主题包内没有 forced-colors / prefers-contrast 高对比度处理;编译后的前端产物中出现 prefers-reduced-motion: reduce 片段(气泡动画置为 none、toast 改为淡出、部分过渡/遮罩动画关闭)。动效节奏统一由 --ds-ease-in-out + --ds-transition-duration*(base.css,上游共享曲线)控制。

1. Primitive 层:`--dsw-static-*`(73 个)

两套主题几乎完全相同——dark 块原样重声明整份色板,唯一例外是 --dsw-static-neutral-bluish-60(light 为 rgb(245, 246, 247),dark 重声明为 rgb(249, 250, 251))。表中 dark 值为「同 light」的即两主题一致。

1.1 中性灰阶(无蓝相)`neutral-*`(16)

变量名	用途说明	light 值	dark 值
`--dsw-static-neutral-00`	最浅端点(纯白)	`rgb(255, 255, 255)`	同 light
`--dsw-static-neutral-50`	50 档	`rgb(250, 250, 250)`	同 light
`--dsw-static-neutral-100`	100 档	`rgb(245, 245, 245)`	同 light
`--dsw-static-neutral-150`	150 档	`rgb(237, 237, 237)`	同 light
`--dsw-static-neutral-200`	200 档	`rgb(229, 229, 229)`	同 light
`--dsw-static-neutral-250`	250 档	`rgb(220, 220, 220)`	同 light
`--dsw-static-neutral-300`	300 档	`rgb(212, 212, 212)`	同 light
`--dsw-static-neutral-400`	400 档	`rgb(162, 164, 166)`	同 light
`--dsw-static-neutral-500`	500 档	`rgb(127, 130, 135)`	同 light
`--dsw-static-neutral-550`	550 档	`rgb(101, 103, 107)`	同 light
`--dsw-static-neutral-600`	600 档	`rgb(84, 85, 87)`	同 light
`--dsw-static-neutral-700`	700 档	`rgb(60, 60, 61)`	同 light
`--dsw-static-neutral-800`	800 档	`rgb(41, 41, 41)`	同 light
`--dsw-static-neutral-850`	850 档	`rgb(33, 33, 35)`	同 light
`--dsw-static-neutral-900`	900 档	`rgb(15, 15, 15)`	同 light
`--dsw-static-neutral-1000`	最深端点(纯黑)	`rgb(0, 0, 0)`	同 light

1.2 带蓝相中性灰阶(主中性色板)`neutral-bluish-*`(19)

变量名	用途说明	light 值	dark 值
`--dsw-static-neutral-bluish-00`	最浅端点(纯白)	`rgb(255, 255, 255)`	同 light
`--dsw-static-neutral-bluish-50`	50 档	`rgb(249, 250, 251)`	同 light
`--dsw-static-neutral-bluish-60`	60 档	`rgb(245, 246, 247)`	`rgb(249, 250, 251)` ⚠️ 唯一两主题不同的 static
`--dsw-static-neutral-bluish-75`	75 档	`rgb(241, 243, 245)`	同 light
`--dsw-static-neutral-bluish-100`	100 档	`rgb(235, 238, 242)`	同 light
`--dsw-static-neutral-bluish-150`	150 档	`rgb(233, 236, 242)`	同 light
`--dsw-static-neutral-bluish-200`	200 档	`rgb(225, 229, 238)`	同 light
`--dsw-static-neutral-bluish-300`	300 档	`rgb(207, 211, 214)`	同 light
`--dsw-static-neutral-bluish-400`	400 档	`rgb(173, 178, 184)`	同 light
`--dsw-static-neutral-bluish-500`	500 档	`rgb(151, 157, 166)`	同 light
`--dsw-static-neutral-bluish-600`	600 档	`rgb(129, 133, 140)`	同 light
`--dsw-static-neutral-bluish-700`	700 档	`rgb(97, 102, 107)`	同 light
`--dsw-static-neutral-bluish-750`	750 档	`rgb(67, 69, 74)`	同 light
`--dsw-static-neutral-bluish-800`	800 档	`rgb(53, 54, 56)`	同 light
`--dsw-static-neutral-bluish-850`	850 档	`rgb(44, 44, 46)`	同 light
`--dsw-static-neutral-bluish-875`	875 档	`rgb(35, 35, 36)`	同 light
`--dsw-static-neutral-bluish-900`	900 档	`rgb(27, 27, 28)`	同 light
`--dsw-static-neutral-bluish-950`	950 档	`rgb(21, 21, 23)`	同 light
`--dsw-static-neutral-bluish-1000`	最深端点(近黑,品牌主色来源)	`rgb(15, 17, 21)`	同 light

1.3 品牌蓝(DeepSeek 蓝)`deepseek-*`(8)

变量名	用途说明	light 值	dark 值
`--dsw-static-deepseek-50`	最浅品牌蓝	`rgb(237, 243, 254)`	同 light
`--dsw-static-deepseek-100`	浅品牌蓝	`rgb(228, 237, 253)`	同 light
`--dsw-static-deepseek-200`	品牌蓝 200	`rgb(211, 226, 255)`	同 light
`--dsw-static-deepseek-300`	品牌蓝 300	`rgb(183, 200, 254)`	同 light
`--dsw-static-deepseek-400`	品牌蓝 400	`rgb(103, 158, 254)`	同 light
`--dsw-static-deepseek-450`	品牌蓝 450(主强调)	`rgb(86, 134, 254)`	同 light
`--dsw-static-deepseek-500`	品牌蓝 500(主强调)	`rgb(65, 118, 230)`	同 light
`--dsw-static-deepseek-600`	品牌蓝 600	`rgb(72, 104, 178)`	同 light

1.4 功能色(blue / green / red / amber)(12)

变量名	用途说明	light 值	dark 值
`--dsw-static-blue-450`	蓝 450	`rgb(77, 147, 248)`	同 light
`--dsw-static-blue-500`	蓝 500	`rgb(59, 130, 246)`	同 light
`--dsw-static-blue-900`	深蓝 900	`rgb(14, 48, 116)`	同 light
`--dsw-static-green-400`	绿 400	`rgb(78, 209, 126)`	同 light
`--dsw-static-green-500`	绿 500(成功)	`rgb(34, 197, 94)`	同 light
`--dsw-static-red-400`	红 400	`rgb(242, 90, 90)`	同 light
`--dsw-static-red-500`	红 500(错误)	`rgb(239, 68, 68)`	同 light
`--dsw-static-red-600`	红 600	`rgb(236, 19, 19)`	同 light
`--dsw-static-amber-400`	琥珀 400	`rgb(247, 173, 49)`	同 light
`--dsw-static-amber-500`	琥珀 500(警告)	`rgb(245, 158, 11)`	同 light
`--dsw-static-amber-600`	琥珀 600	`rgb(221, 134, 41)`	同 light

1.5 其余 static(18)

含 neutral-bluish-* 之外的补充灰阶与 --dsw-static-* 特殊项,详见分卷 docs/parts/ui-theme-tokens.md §1.5–1.7(白点、黑点、透明度涂层等)。

2. Alias 层:`--dsw-alias-*`(78 个)

Alias 是组件实际消费的语义色,全部 var() 引用 static。light/dark 差异集中在此。下表为全部 78 个中的核心子类;完整并列表见分卷。

2.1 背景(bg)

变量名	用途说明	light 值	dark 值
`--dsw-alias-bg-base`	应用基础背景	`bluish-00` #FFFFFF	`bluish-950` #151517
`--dsw-alias-bg-layer-1`	一级抬升面	`bluish-00` #FFFFFF	`bluish-875` #232324
`--dsw-alias-bg-layer-2`	二级嵌套面	`bluish-00` #FFFFFF	`bluish-850` #2C2C2E
`--dsw-alias-bg-layer-3`	三级嵌套面	`bluish-00` #FFFFFF	`bluish-800` #353536
`--dsw-alias-bg-mask-1`	遮罩 1	`rgba(0,0,0,.24)`	`rgba(0,0,0,.5)`
`--dsw-alias-bg-mask-2`	遮罩 2	`rgba(0,0,0,.12)`	`rgba(0,0,0,.2)`
`--dsw-alias-bg-mask-3`	遮罩 3	`rgba(0,0,0,.48)`	`rgba(0,0,0,.48)`
`--dsw-alias-bg-mask-drop`	拖放遮罩	`rgba(255,255,255,.7)`	`rgba(39,39,48,.7)`
`--dsw-alias-bg-module-platform`	模块平台底	`bluish-60` #F5F6F7	`bluish-800` #353536
`--dsw-alias-bg-overlay`	浮层/弹层背景	`bluish-150` #E9ECF2	`bluish-700` #61666B
`--dsw-alias-bg-skeleton`	骨架屏	`rgba(0,0,0,.04)`	`rgba(255,255,255,.08)`

2.2 边框(border)

变量名	用途说明	light 值	dark 值
`--dsw-alias-border-l1`	一级细边框	`rgba(0,0,0,.04)`	`rgba(255,255,255,.06)`
`--dsw-alias-border-l2`	二级边框	`rgba(0,0,0,.08)`	`rgba(255,255,255,.12)`
`--dsw-alias-border-l3`	三级边框	`rgba(0,0,0,.12)`	`rgba(255,255,255,.18)`
`--dsw-alias-border-l4`	四级边框	`rgba(0,0,0,.2)`	`rgba(255,255,255,.3)`
`--dsw-alias-border-inverted`	反色边框	`rgba(255,255,255,.6)`	`rgba(0,0,0,.6)`

2.3 文本(label)与交互(interactive)

变量名	用途说明	light 值	dark 值
`--dsw-alias-label-primary`	主文本	`bluish-1000` #0F1115	`bluish-50` #F9FAFB
`--dsw-alias-label-secondary`	次级文本	`bluish-600` #81858C	`bluish-400` #ADB2B8
`--dsw-alias-label-tertiary`	三级文本	`bluish-500` #979DA6	`bluish-500` #979DA6
`--dsw-alias-interactive-bg-hover`	悬浮涂层	`rgba(0,0,0,.06)`	`rgba(255,255,255,.08)`
`--dsw-alias-interactive-bg-active`	按下涂层	`rgba(0,0,0,.09)`	`rgba(255,255,255,.12)`
`--dsw-alias-interactive-bg-selected`	选中涂层	`rgba(0,0,0,.05)`	`rgba(255,255,255,.07)`

2.4 品牌与状态(brand / state)

变量名	用途说明	light 值	dark 值
`--dsw-alias-brand-primary`	品牌主色(反转型)	`bluish-1000` #0F1115	`bluish-50` #F9FAFB
`--dsw-alias-brand-primary-new-colorprimary-new-color`	显式品牌蓝	`deepseek-450` #5686FE	同 light
`--dsw-alias-state-error-primary`	错误主色	`red-500` #EF4444	`red-400` #F25A5A
`--dsw-alias-state-success-primary`	成功主色	`green-500` #22C55E	`green-400` #4ED17E
`--dsw-alias-state-warn-primary`	警告主色	`amber-500` #F59E0B	`amber-400` #F7AD31
`--dsw-alias-state-business-primary`	业务蓝(链接/信息)	`deepseek-500` #4176E6	`deepseek-400` #679EFE

2.5 其余 alias

markdown 相关(markdown-code-block 等)、button 相关(button-primary-fill 等)、toast/tooltip/scrollbar 相关,共约 50 个,完整 light/dark 并列表见分卷 docs/parts/ui-theme-tokens.md §2。

3. Specific 层:`--dsw-specific-*`(11 个)

变量名	用途说明	light 值	dark 值
`--dsw-specific-sidebar-fill`	侧边栏背景	`bluish-60` #F5F6F7	`bluish-875` #232324
`--dsw-specific-menu`	菜单背景(唯一跨层引用 alias)	`bg-layer-3`(alias)	同 light 结构
…(其余 9 个)	详见分卷

4. 字体 token:`--dsw-font-*`(181 个)

--dsw-font-family:正文主字族;--ds-font-family-code:代码字族。
30 组 × 6 简写/明细:每组含 font-family / weight / line-height / size / style(如 --dsw-font-markdown-code-block-small 系列、--dsw-font-* 各 UI 字号档)。
完整分组表见分卷 docs/parts/ui-theme-tokens.md §4。

5. 阴影 / 渐变 / 模糊(7 个)

变量名	用途说明	值
`--dsw-shadow-lv1`	一级阴影(浅)	字面量(见分卷)
`--dsw-shadow-lv2`	二级阴影(中)	字面量
`--dsw-shadow-lv3`	三级阴影(重)	字面量
`--dsw-linear-*`	思考/推理渐变(Thinking 视觉)	字面量
`--dsw-mask-blur`	遮罩模糊滤镜	字面量

6. 滚动条(3 个)与 7. Shiki 语法高亮(11 个)

滚动条:--dsh-scrollbar-thumb / --dsh-scrollbar-thumb-hover / 宽度相关,引用 alias scrollbar-bg-* / scrollbar-hover-*。
Shiki:--shiki-* 11 个,前后背景引用 alias label-primary / markdown-code-block,用于代码高亮配色。
详见分卷。

8. 边界说明

编译产物(dsh-web-frontend/dist/assets/*.css)是运行时真实样式来源;npm 包内 primitives 的 CSS Module 导出为空 stub。
全部数值以安装产物为准;官方仓库源码可能有版本差异。

9. 关键结论

三层语义化色板、引用单向向下:static(73)→ alias(78)→ specific(11);组件只消费语义名,换肤只需重映射 alias。
暗色 = 重映射 + 反色边框,而非换色板:primitive 层两主题几乎逐字节相同;dark 差异全在 alias 引用目标(label-primary: bluish-1000 ↔ bluish-50)与黑/白 alpha 边框反转。
切换机制 = body 属性 + 双份 CSS 选择器:light/dark 是同份 CSS 的 body / body[data-ds-dark-theme];ThemeRuntime 解析偏好,ThemePresenter 写 DOM,首屏由 Host 内联脚本提前生效。
品牌强调分两套:黑白反转主色(light 近黑 / dark 近白)+ 显式品牌蓝 deepseek-450/500(用于 state-business、button-info 等)。
动效统一:--ds-ease-in-out + --ds-transition-duration*,prefers-reduced-motion: reduce 有兜底。

第二部分 · 核心组件 UI 规范(light / dark)

DSH Web 核心组件 UI 规范(light / dark)

数据来源(全部为实际源码中的 CSS 值):

dsh-client-ui-primitives/lib/index.js(组件骨架)+ 编译产物 dsh-web-frontend/dist/assets/index-CSGf6Qzd.css(内联 CSS Module 字符串,.css 常量 + [data-xxx] 属性选择器)

dsh-client-ui-theme/lib/styles/: design-platform.css(alias/specific token 明暗值)、base.css(字体/动效)、scrollbar.css、shiki.css、gradient-shadow-text.css(阴影/字号 token)

dsh-client-ui-conversation/lib/client.js(输入栏/对话流/消息卡)、dsh-client-ui-tool/lib/client.js(工具卡/终端块)、dsh-client-ui-layout/lib/client.js(三栏布局)、dsh-client-ui-user-questions/lib/client.js(问答卡)、dsh-client-ui-workspace/lib/client.js(会话树/搜索框)、dsh-client-ui-sidebar/lib/client.js(侧边栏)、dsh-client-ui-settings-general/lib/client.js(设置面板)、dsh-client-ui-model-selection/lib/client.js(模型下拉)

主题开关:body[data-ds-dark-theme] 属性。所有 --dsw-alias-* / --dsw-specific-* token 在 body 上定义 light 值、在 body[data-ds-dark-theme] 上覆盖 dark 值;静态色 --dsw-static-* 两套主题几乎一致(仅个别档位不同)。
组件样式几乎全部 token 驱动,light/dark 差异主要在 token 取值;下列表格中「light / dark」列给出 token 解析后的具体色值(rgb/hex),注明 (固定) 的表示明暗相同。

0. 设计 Token 速查(light / dark 解析)

静态色板(常用档位)

Token	light	dark
`--dsw-static-neutral-bluish-00`	`rgb(255,255,255)` #FFF	同 light
`--dsw-static-neutral-bluish-50`	`rgb(249,250,251)` #F9FAFB	同 light
`--dsw-static-neutral-bluish-60`	`rgb(245,246,247)` #F5F6F7(源第 63 行,编译第 1751 行一致)	`rgb(249,250,251)` #F9FAFB(源第 139 行 / 编译第 1825 行一致——该档位在 dark 块被覆盖为另一值)
`--dsw-static-neutral-bluish-75`	`rgb(241,243,245)` #F1F3F5	同 light
`--dsw-static-neutral-bluish-100`	`rgb(235,238,242)` #EBEEF2	同 light
`--dsw-static-neutral-bluish-150`	`rgb(233,236,242)` #E9ECF2	同 light
`--dsw-static-neutral-bluish-200`	`rgb(225,229,238)` #E1E5EE	同 light
`--dsw-static-neutral-bluish-300`	`rgb(207,211,214)` #CFD3D6	同 light
`--dsw-static-neutral-bluish-400`	`rgb(173,178,184)` #ADB2B8	同 light
`--dsw-static-neutral-bluish-500`	`rgb(151,157,166)` #979DA6	同 light
`--dsw-static-neutral-bluish-600`	`rgb(129,133,140)` #81858C	同 light
`--dsw-static-neutral-bluish-700`	`rgb(97,102,107)` #61666B	同 light
`--dsw-static-neutral-bluish-750`	`rgb(67,69,74)` #43454A	同 light
`--dsw-static-neutral-bluish-800`	`rgb(53,54,56)` #353536	同 light
`--dsw-static-neutral-bluish-850`	`rgb(44,44,46)` #2C2C2E	同 light
`--dsw-static-neutral-bluish-875`	`rgb(35,35,36)` #232324	同 light
`--dsw-static-neutral-bluish-900`	`rgb(27,27,28)` #1B1B1C	同 light
`--dsw-static-neutral-bluish-950`	`rgb(21,21,23)` #151517	同 light
`--dsw-static-neutral-bluish-1000`	`rgb(15,17,21)` #0F1115	同 light
`--dsw-static-deepseek-50/100/200/300/400/450/500/600`	`rgb(237,243,254)` / `rgb(228,237,253)` / `rgb(211,226,255)` / `rgb(183,200,254)` / `rgb(103,158,254)` / `rgb(86,134,254)` #5686FE / `rgb(65,118,230)` #4176E6 / `rgb(72,104,178)`	同 light
`--dsw-static-blue-450/500/900`	`rgb(77,147,248)` / `rgb(59,130,246)` / `rgb(14,48,116)` #0E3074	同 light
`--dsw-static-green-400/500`	`rgb(78,209,126)` / `rgb(34,197,94)` #22C55E	同 light
`--dsw-static-red-400/500/600`	`rgb(242,90,90)` #F25A5A / `rgb(239,68,68)` / `rgb(236,19,19)` #EC1313	同 light
`--dsw-static-amber-400/500/600`	`rgb(247,173,49)` / `rgb(245,158,11)` #F59E0B / `rgb(221,134,41)`	同 light
`--dsw-static-neutral-200/300/550/600/700`	`#E5E5E5` / `#D4D4D4` / `rgb(101,103,107)` / `rgb(84,85,87)` #545557 / `rgb(60,60,61)` #3C3C3D	同 light

Alias token(明暗差异核心)

Token	light	dark
`--dsw-alias-bg-base`	`bluish-00` #FFFFFF	`bluish-950` #151517
`--dsw-alias-bg-layer-1`	`bluish-00` #FFFFFF	`bluish-875` #232324
`--dsw-alias-bg-layer-2`	`bluish-00` #FFFFFF	`bluish-850` #2C2C2E
`--dsw-alias-bg-layer-3`	`bluish-00` #FFFFFF	`bluish-800` #353536
`--dsw-alias-bg-mask-1`	`rgba(0,0,0,.24)`	`rgba(0,0,0,.5)`
`--dsw-alias-bg-mask-2`	`rgba(0,0,0,.12)`	`rgba(0,0,0,.2)`
`--dsw-alias-bg-mask-3`	`rgba(0,0,0,.48)`	`rgba(0,0,0,.48)`
`--dsw-alias-bg-mask-drop`	`rgba(255,255,255,.7)`	`rgba(39,39,48,.7)`
`--dsw-alias-bg-module-platform`	`bluish-60` #F5F6F7	`bluish-800` #353536
`--dsw-alias-bg-overlay`	`bluish-150` #E9ECF2	`bluish-700` #61666B
`--dsw-alias-bg-skeleton`	`rgba(0,0,0,.04)`	`rgba(255,255,255,.08)`
`--dsw-alias-border-l1`	`rgba(0,0,0,.04)`	`rgba(255,255,255,.06)`
`--dsw-alias-border-l2`	`rgba(0,0,0,.08)`	`rgba(255,255,255,.12)`
`--dsw-alias-border-l3`	`rgba(0,0,0,.12)`	`rgba(255,255,255,.18)`
`--dsw-alias-border-l4`	`rgba(0,0,0,.2)`	`rgba(255,255,255,.3)`
`--dsw-alias-border-inverted`	`rgba(255,255,255,.6)`	`rgba(0,0,0,.6)`
`--dsw-alias-label-primary`	`bluish-1000` #0F1115	`bluish-50` #F9FAFB
`--dsw-alias-label-secondary`	`bluish-600` #81858C	`bluish-400` #ADB2B8
`--dsw-alias-label-tertiary`	`bluish-500` #979DA6	`bluish-500` #979DA6
`--dsw-alias-interactive-bg-hover`	`rgba(0,0,0,.06)`	`rgba(255,255,255,.08)`
`--dsw-alias-interactive-bg-active`	`rgba(0,0,0,.09)`	`rgba(255,255,255,.12)`
`--dsw-alias-interactive-bg-selected`	`rgba(0,0,0,.05)`	`rgba(255,255,255,.07)`
`--dsw-alias-brand-primary`	`bluish-1000` #0F1115(近黑)	`bluish-50` #F9FAFB(近白)
`--dsw-alias-state-error-primary`	`red-500` #EF4444	`red-400` #F25A5A
`--dsw-alias-state-success-primary`	`green-500` #22C55E	`green-400` #4ED17E
`--dsw-alias-state-warn-primary`	`amber-500` #F59E0B	`amber-400` #F7AD31
`--dsw-alias-state-business-primary`	`deepseek-500` #4176E6	`deepseek-400` #679EFE

布局常量

变量	值	用途
`--dsh-chat-content-width`	`760px`	会话内容列最大宽度
`--dsh-composer-side-clearance`	`16px`	输入框侧边留白
`--dsh-scrollbar-thumb*`	alias 引用	滚动条间接层

1. 输入框 / 文本框

1.1 通用 Input(primitives)

属性	light	dark
背景	`var(--dsw-specific-input)` ≈ `bluish-60` #F5F6F7	`bluish-800` #353536
边框	`1px solid var(--dsw-alias-border-l2)`(黑 8% / 白 12%)	同左结构
圆角	`8px`(默认)	同左
高度	标准 `32px`(sm `28px`、lg `40px`)	同左
占位符	`var(--dsw-alias-label-tertiary)` #979DA6	同左
文字	`var(--dsw-alias-label-primary)`	同左
hover	边框升 `border-l3`	同左
focus	只换边框色为 brand(不弹 ring)	同左
focus-visible	`0 0 0 2px` ring(键盘导航)	同左

1.2 Composer 主输入栏(conversation,最核心)

属性	light	dark
整体卡片背景	`var(--dsw-specific-input-major)`(bluish-100 #EBEEF2 系)	`bluish-800` #353536
圆角	`22px`	同左
边框	`1px solid var(--dsw-alias-border-l1)`	同左
内嵌控件圆角	发送键 `10px`、命令菜单圆钮 `14px`、附件区 `12px`	同左
文字区	无边框无背景(透明输入区)	同左
占位符	`label-tertiary` #979DA6	同左
高度	自适应,最小约 `40px`,max-height 滚动	同左
焦点态	无外发光,靠卡片 hover 边框微升	同左

发送按钮:主发送键为手写内联 SVG 上箭头(非 IconSendOutline16),primary 样式;发送中变为 Stop 方块。QueueDock 队列条目发送用 IconSendOutline14。

1.3 搜索框(workspace 会话树 / trajectory)

属性	light	dark
背景	`bluish-60` #F5F6F7	`bluish-850` #2C2C2E
圆角	`8px`	同左
边框	无(或 hover 出现 l1)	同左
清除按钮	`IconCloseFill14`(右内)	同左

1.4 问答卡输入(QuestionComposer)

属性	light	dark
自定义答案行	单选:单行 `input`;无选项:自动聚焦 `textarea`(2 行)	同左
圆角	卡片 `20px`;输入区跟随卡内	同左
占位符	「输入你的答案」(locale)	同左

2. 按钮(4 variant × 2 尺寸)

variant	背景	文字	边框	hover	圆角	高度
primary	`--dsw-alias-brand-primary`(light 近黑 #0F1115 / dark 近白 #F9FAFB)	反色(白/黑)	无	半透明涂层叠加	`8px`(md)/ `6px`(sm)	`32px`/`28px`
outline	透明	label-primary	`1px solid border-l3`	`interactive-bg-hover` 涂层	`8px`/`6px`	同上
ghost	透明	label-secondary	无	`interactive-bg-hover` 涂层	`8px`/`6px`	同上
toolbar	透明	label-tertiary	无	hover 涂层 + 文字升 primary	`6px`	同上

无独立 danger variant:危险语义由 Menu item(--dsw-specific-menu-danger / red)承担;按钮层没有红色主按钮。
disabled:统一 opacity: .4 + 禁止指针。
图标按钮:方形,尺寸与文字按钮同高,圆角一致。

3. 卡片 / 面板

组件	背景	边框	圆角	阴影
用户消息气泡	`--dsw-specific-chat-bubble-user`(bluish-200 系)	无	`14px`(角不对称:大角 20px 靠消息侧)	无
助手消息/普通卡	透明/`bg-layer-1`	`border-l1`	`12px`	无
工具卡(ToolRow 展开)	`bg-layer-1` #FFF	`border-l1`	`12px`	无
工具 IO 卡(终端/代码)	`markdown-code-block`(bluish-100 系)	`border-l1`	`12px`	无
设置面板	`bg-layer-1`	`border-l1`	`14px`	`shadow-lv1`
问答卡(QuestionComposer)	`--dsw-specific-input-major`	`1px solid state-warn-secondary`(计划卡)	`20px`	`shadow-lv2`
计划审批卡	同上 + 警示条 `state-warn-tertiary`	warn 边框	`20px`	`shadow-lv2`
待办/目标卡	`bg-layer-1`	`border-l1`	`12px`	无

内容块(Terminal / CodeBlock / Diff / Search / Web)

块	背景	边框	圆角
TerminalBlock	`markdown-code-block`	`border-l1`	`12px`,内部行 `4px`
CodeBlock	同上	无	继承卡
DiffBlock	增 `rgba(34,197,94,.1)` / 删 `rgba(239,68,68,.1)` 行底	无	行级
SearchBlock	输入框 + 结果列表	`border-l1`	`12px`
WebBlock	favicon + 标题域	`border-l1`	`12px`

4. 弹层

组件	背景	边框	圆角	阴影/遮罩	动画
Modal	`bg-layer-1` #FFF / `bluish-875` #232324	无	`16px`	遮罩 `bg-mask-1`(黑 24%/50%)+ backdrop blur;面板 `shadow-lv3`	缩放淡入 `150ms`
Menu	`--dsw-specific-menu`(引用 alias bg-layer-3)	`border-l1`	`12px`(dense `8px`)	`shadow-lv2`	淡入 120ms
Tooltip	`label-primary` 反转底(黑/白)	无	`6px`	`shadow-lv1`	淡入 80ms
Toast	`bg-layer-1`	`border-l1`	`12px`	`shadow-lv2`	滑入+淡出,reduced-motion 改纯淡出
HoverCard	`bg-layer-1`	`border-l1`	`12px`	`shadow-lv2`	淡入

5. 侧边栏与布局

元素	light	dark
侧边栏背景	`--dsw-specific-sidebar-fill` bluish-60 #F5F6F7	`bluish-875` #232324
侧栏分隔线	`border-l1`	同左
会话树行 hover	`interactive-bg-hover` 涂层	同左
会话树行选中	`interactive-bg-selected` + 左侧 2px 指示条	同左
布局	三栏 AppFrame:sidebar(约 260px)+ conversation(center,max 760px 内容)+ details(右栏,可折叠)	同左
滚动条	`--dsh-scrollbar-thumb` alias(thumb 圆角 999px,宽度约 8px,hover 加深)	同左

6. 状态元素

元素	外观	场景
StateDot	4 色圆点:`ok` green-500 / `error` red-500 / `warn` amber-500 / `info` business(蓝),直径 8px;running 带点阵动画	工具行/状态
Pill	胶囊 `999px`,内描边选中(inset 1px border-l3)+ 涂层	标签/筛选
Badge	小圆角 `6px`,品牌底或状态底	计数/徽标
ConnectionBanner	顶部警示条,`state-warn-tertiary` 底 + warn 文字	连接异常

7. 焦点环 / 动效 / markdown / shiki / JsonTree

项	规范
焦点环	统一 `:focus-visible`:`0 0 0 2px var(--dsw-alias-state-business-primary)`(ring)或 `2px solid` outline;鼠标 focus 不显示环(输入框 focus 仅换边框色)
过渡	`--ds-transition-duration-fast(120ms)/normal(200ms)/slow(300ms)` + `--ds-ease-in-out`
气泡动画	消息进入缩放淡入;`prefers-reduced-motion: reduce` 时置 `none`
markdown	标题/列表/引用/代码块排版;代码块底 `markdown-code-block`,圆角 `12px`
shiki	`--shiki-*` token 驱动,前后背景引用 alias;关键字/字符串/注释配色见分卷
JsonTree	键 `label-secondary`、字符串 `green`、数字 `amber`、布尔 `blue` 系

8. 设计系统特征总结

纯 token 驱动的双主题:颜色全走 body / body[data-ds-dark-theme] 两套 alias;light 三层表面全为 #FFF(靠边框/阴影分层),dark 用 bluish-875/850/800 三档拉开层级;阴影、圆角、动画 token 明暗一致,切换只发生在颜色层。
反转型品牌色:light 下 brand-primary 近黑 #0F1115、dark 下近白 #F9FAFB;品牌蓝 deepseek-500/450 只出现在 state-business、button-info 等语义 token——与「蓝色主按钮」设计差异最大。
「半透明涂层 + 内描边」交互语言:hover 统一 interactive-bg-hover(黑 6%/白 8%)涂层而非变色;选中用 inset 1px 描边(Pill)或勾号(Menu);disabled 统一 opacity: .4;输入框 focus 只换边框色不弹 ring,ring 仅用于 :focus-visible(0 0 0 2px 或 2px outline)。
圆角体系(六级):6px(小控件/徽标)→ 8-10px(按钮/输入框)→ 12px(卡片/弹层/代码块)→ 14-20px(气泡/问答卡)→ 22-24px(composer 主输入栏/大卡)→ 999px(胶囊)。
描边层级(l1→l4 + inverted):l1 黑 4%/白 6% 最细 → l4 黑 20%/白 30%;反色边框用于品牌底上的元素。

第三部分 · Icon 与视觉元素清单(含资源路径)

DSH Web Icon 与视觉元素清单(含资源路径)

数据来源(全部来自实际安装产物,未编造):

@deepseek-ai/dsh-client-ui-primitives@0.1.0-rc.6 — 唯一 icon / 原子视觉组件来源:

lib/types/icons/index.d.ts(155 行,70 个命名导出)+ lib/types/icons/props.d.ts(IconProps)

lib/index.js(5855 行,每个 icon 的 SVG path 数据、size 默认值、viewBox,以及全部非 icon 视觉组件)

使用场景:在 @deepseek-ai/dsh/node_modules/@deepseek-ai/*/lib/client.js(共 30+ 个 client-ui 包)中逐一 grep 70 个 icon 组件名与视觉组件名,读取匹配处上下文(JSX、aria-label、locale key)得到。

资源路径:编译产物 client.js 内的 \0dsh-css:/home/runner/work/deepseek-harness/deepseek-harness/packages/... 注释给出构建时绝对路径,据此推出官方仓库 deepseek-ai/deepseek-harness 的相对路径;lib/types/... region 注释给出每个包编译前的源文件布局。查不到的确切文件名一律标注「待确认」。

统计口径:icon 共 70 个;其中当前构建中被 client.js 实际引用 54 个,仅导出未引用 16 个(已在表中逐项注明)。

一、Icon 总表(70 个)

0. 实现与命名要点(先读)

所有 icon 组件签名一致:({ size, className }: IconProps);渲染 <svg> 时 width/height = size、viewBox = "0 0 N N"(N 为设计网格,通常等于名字里的数字)、fill="none",字形 path 自身 fill="currentColor" —— 颜色跟随文字色,className 仅用于布局。
“Outline”并非描边 stroke,而是带镂空的填充 path 几何(图库为 16 网格导出);Fill 变体(Stop/Close/TriangleRight/Like/Dislike)是实心填充几何。IconFolderOpen16 是双色调(外轮廓 + 20% 透明度内填,同一 currentColor)。
figma 源名 = ic_ds_{name}_{style}_{size}(见 index.d.ts 的 JSDoc)。批次 A 与 deepsuite 图标库同源;批次 B 为 harness 专属 figma 提取。
尺寸变体:库内共有 12 / 14 / 16 / 20 四种设计网格,另有 2 个特例:IconRightUpOutline14(viewBox 8×14,默认渲染 8px)、IconTreeCorner8x10(8×10 网格,默认 10px)。除默认尺寸外,调用方可传 size prop 等比缩放(如多处把 16 网格 icon 以 size: 14/13/11 渲染)。
下列“当前构建未引用”的判断依据:该名字在全部 */lib/client.js 中 0 次出现,在 web 前端 bundle index-Dqw48FrP.js 中仅 1 次出现(= primitives 导出表本身)。

1. 常用 UI 图标(均被实际使用)

组件名(figma 名)	默认尺寸 / viewBox	风格	使用场景(包 → UI 元素)
IconNewChatOutline16 `ic_ds_new_chat_outline_16`	16 / 16×16	Outline	sidebar → 「新会话」按钮(展开 14px / 收起 18px)
IconSearchOutline16 `ic_ds_search_outline_16`	16 / 16×16	Outline	tool → search 行/卡片变体图标(14px);trajectory → 工具栏搜索框(11px);workspace → 会话搜索按钮(11/14px);settings-plugin-inventory → 搜索框前缀
IconGlobeOutline14 `ic_ds_globe_outline_14`(子午线地球,harness 专属)	14 / 14×14	Outline	tool → web 行:非 `web_fetch` 的 web 检索工具(14px)
IconSettingsOutline14 `ic_ds_settings_outline_14`	14 / 14×14	Outline	settings-general → 侧栏收起态设置入口(18px)
IconSettingsOutline16 `ic_ds_settings_outline_16`	16 / 16×16	Outline	settings-general → 设置入口(16px)与设置导航兜底 icon;trajectory → system 角色行 icon(13px)
IconPanelLeftOutline16 `ic_ds_panel_left_outline_16`	16 / 16×16	Outline	sidebar → 侧栏折叠/展开按钮(16/18px)
IconEllipsisOutline16 `ic_ds_ellipsis_outline_16`	16 / 16×16	Outline	workspace → 行内“更多”菜单触发(省略号)
IconPlusOutline16 `ic_ds_plus_outline_16`	16 / 16×16	Outline	conversation → 输入框“命令菜单”圆钮(14px);agent-preset → “创建新预设草稿”入口(14px);workspace → 添加工区菜单项(16px);settings-models → 添加模型按钮(14px);directory-picker → 新建目录(14px)
IconCheckOutline16 `ic_ds_check_outline_16`	16 / 16×16	Outline	conversation → 复制成功态、队列保存(14px);cordis → 单次授权 Approve(14px)、双勾图标由两个 12px 拼成;goal → 保存目标(14px);model-selection → 选中模型/effort 勾选;commands → 选中项勾选;directory-picker → “显示隐藏”开关(14px)
IconCheckOutline14 `ic_ds_check_outline_14`	14 / 14×14	Outline	user-questions → 多选问题选项勾选、自定义选项勾选(12px)
IconBranchOutline16 `ic_ds_branch_outline_16`	16 / 16×16	Outline	conversation → 消息操作行“分支/新开对话”;workspace → 会话菜单“fork”
IconChevronDownOutline14 `ic_ds_chevron_down_outline_14`	14 / 14×14	Outline	最通用的展开指示:conversation(PermissionSelect 触发器、EnterBehavior 选择、compaction 卡、Todo 面板、QueueDock、回到底部按钮);tool / skill / goal / agent-preset / subagent / jobs / model-selection / permission-presets / settings-models / settings-plugins / settings-plugin-inventory 的各类下拉与 DisclosureRow chevron
IconChevronLeftOutline14 `ic_ds_chevron_left_outline_14`	14 / 14×14	Outline	user-questions → 多问题向导上一题
IconChevronRightOutline14 `ic_ds_chevron_right_outline_14`	14 / 14×14	Outline	conversation(compaction 收起态);user-questions(下一题);subagent / trajectory(面包屑、行展开);model-selection(分组行);directory-picker(面包屑);workflow-run(阶段步骤图标);settings-models(行展开)
IconChevronUpOutline14 `ic_ds_chevron_up_outline_14`	14 / 14×14	Outline	conversation → Todo 面板折叠态、QueueDock 收起态
IconTriangleRightFill14 `ic_ds_triangle_right_fill_14`	14 / 14×14	Fill	workspace → 会话树展开箭头,打开时消费者 rotate 90°
IconCloseOutline16 `ic_ds_close_outline_16`	16 / 16×16	Outline	conversation → 队列编辑取消(14px);user-questions → 向导取消(14px);cordis → 拒绝授权(14px);goal → 取消编辑(14px);settings-general → 设置面板关闭(14px)
IconCloseFill14 `ic_ds_close_fill_14`	14 / 14×14	Fill	workspace → 会话搜索清除按钮;plan → plan-mode 芯片关闭(12px)
IconCopyOutline16 `ic_ds_copy_outline_16`	16 / 16×16	Outline	conversation → 消息“复制”按钮(复制成功后切换为 Check);agent-preset → 预设“复制/duplicate”操作
IconRefreshOutline14 `ic_ds_refresh_outline_14`	14 / 14×14	Outline	subagent → “重试”按钮
IconRefreshOutline16 `ic_ds_refresh_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconLikeOutline16 `ic_ds_like_outline_16`	16 / 16×16	Outline	message-feedback → 消息“点赞”按钮(悬停/选中态用 CSS `data-active`)
IconLikeFill16 `ic_ds_like_fill_16`	16 / 16×16	Fill	⚠️ 当前构建未引用(仅导出,未用)
IconDislikeOutline16 `ic_ds_dislike_outline_16`	16 / 16×16	Outline	message-feedback → 消息“点踩”按钮
IconDislikeFill16 `ic_ds_dislike_fill_16`	16 / 16×16	Fill	⚠️ 当前构建未引用
IconShareOutline16 `ic_ds_share_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconEditOutline16 `ic_ds_edit_outline_16`	16 / 16×16	Outline	conversation → 队列编辑(14px);tool → write/edit 工具变体(14px);user-questions → “讨论”按钮、自定义选项铅笔(12px);goal → 编辑目标(14px);workspace → 重命名菜单;directory-picker → 重命名
IconThinkOutline14 `ic_ds_think_outline_14`	14 / 14×14	Outline	conversation → 推理“Think”行的引导 icon(DisclosureRow)
IconThinkOutline16 `ic_ds_think_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconAgentPresetOutline16 `ic_ds_agent_preset_outline_16`(figma 提取,节点镂空可叠任意底色)	16 / 16×16	Outline	agent-preset → 预设标签/座椅 icon(14px);settings-general → “agent-presets”设置导航 icon(16px)
IconBrowseOutline16 `ic_ds_browse_outline_16`	16 / 16×16	Outline	conversation → 上下文注入行(recall/contextInjection)(14px);tool → read、web_fetch 变体(14px);agent-preset → 查看预设(系统预设)
IconLinkOutline14 / IconLinkOutline16 `ic_ds_link_outline_14/16`	14 / 16	Outline	⚠️ 当前构建未引用
IconRightUpOutline14 `ic_ds_right_up_outline_14`	8(默认)/ viewBox 8×14	Outline	⚠️ 当前构建未引用
IconRightUpOutline16 `ic_ds_right_up_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconEnhanceOutline16 `ic_ds_enhance_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconTrashOutline16 `ic_ds_trash_outline_16`	16 / 16×16	Outline	conversation → 队列删除(14px);cordis → cordis_undefine 移除;goal → 删除目标(14px);workspace → 删除工区/会话菜单;agent-preset → 删除预设;settings-models → 删除模型(14px)
IconWarningOutline16 `ic_ds_warning_outline_16`	14(默认,名字 16)/ 14×14	Outline	conversation → 输入框 Toast 警告 icon;model-selection → 模型选择 Toast 警告 icon
IconUserOutline16 `ic_ds_user_outline_16`	16 / 16×16	Outline	trajectory → user 角色行 icon(13px)
IconSendOutline16 `ic_ds_send_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用(输入框主发送键用的是手写内联 SVG 上箭头,非此组件)
IconSendOutline14 `ic_send_outline_14`(figma 提取,细描边上行发送箭头)	14 / 14×14	Outline	conversation → QueueDock 队列条目“发送”按钮
IconStopFill16 `ic_ds_stop_fill_16`	16 / 16×16	Fill	cordis → cordis_stop 停止按钮(14px)
IconPaperclipOutline16 `ic_ds_paperclip_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconLoadingOutline16 `ic_ds_loading_outline_16`	16 / 16×16	Outline	⚠️ 当前构建未引用
IconDownloadOutline16 `ic_ds_download_outline_16`	16 / 16×16	Outline	session-log-export → “Session log”导出触发按钮(12px)

2. 其余 icon(含未引用项,30 个)

完整清单(含 IconApiOutline14、IconArchiveOutline20、IconChecklistOutline14、IconCodeOutline16、IconCordisPluginOutline14、IconDataOutline16、IconDarkOutline16、IconLightOutline16、IconFolderOpen16、IconFolderClose16、IconFolderOpenOutline16、IconFollowsystemOutline16、IconFullscreenOutline16、IconGoalOutline16、IconInspectOutline12、IconListPenOutline16、IconPauseOutline16、IconPersonalizationOutline16、IconPlayOutline16、IconProjectAddOutline16、IconQueueOutline14、IconSparkle16、IconTreeCorner8x10 等)见分卷 docs/parts/ui-icons-assets.md 一.2 节。

3. 非 primitives 的内联手写 SVG(3 组)

SVG	所在包	使用场景
ToolWrench / Information / CompactedIcon	trajectory	工具行变体、信息行、压缩行
IconChevron / IconTrash	settings-models	模型设置行的展开/删除
DoubleCheckIcon	cordis	双勾(双重授权)图标

二、视觉元素表(24 个)

组件	外观要点	使用场景
StateDot	四色状态点(ok/error/warn/info)+ running 点阵动画	工具行/状态指示
DisclosureRow	可展开行 + chevron 旋转	Think 行、Todo 面板、所有折叠
FishLogo	品牌鱼形 logo	空态/加载/品牌位
BrandWordmark	whale-clip + DSH 反色徽标	品牌标识
ConnectionBanner	警示条(见第二部分 §6)	连接异常
DiffBlock	增删行底色	文件 diff 展示
TerminalBlock	终端样式块	bash/终端输出
WebBlock	favicon + 标题	web 工具结果
ReadBlock	文档内容块	read 工具结果
SearchBlock	搜索框 + 结果	search 工具结果
JsonTree / JsonBlock	键值着色树	JSON 工具输出
CodeBlock	代码高亮块	代码输出
MarkdownText / MessageText	markdown 渲染/消息文本	消息正文
Button / Pill / Input / Menu / HoverCard / Modal / OnboardingSurface / RiskConfirmation / Toast / Tooltip	见第二部分组件规范	—

三、资源路径索引(官方仓库相对路径)

依据:npm 包 package.json 的 repository.directory + 构建产物 \0dsh-css:/home/runner/work/deepseek-harness/deepseek-harness/packages/... 注释。仓库:deepseek-ai/deepseek-harness。

3.1 各包 src 相对路径

包	官方仓库相对路径
`@deepseek-ai/dsh-client-ui-primitives`	`packages/client/ui-primitives/src/`(icon 源:`src/icons/index.ts` + `src/icons/props.ts`)
`@deepseek-ai/dsh-client-ui-theme`	`packages/client/ui-theme/src/`(样式 `src/styles/*.css`;Appearance 行 `src/client/AppearanceRow.tsx`)
`@deepseek-ai/dsh-client-ui-conversation`	`packages/client/ui-conversation/src/`(chat/skeleton/input/queue 子目录)
`@deepseek-ai/dsh-client-ui-tool`	`packages/client/ui-tool/src/`(toolviews:`src/client/tool/toolviews/*.tsx`)
`@deepseek-ai/dsh-client-ui-layout`	`packages/client/ui-layout/src/`(AppFrame/SidebarRoot)
`@deepseek-ai/dsh-client-ui-user-questions`	`packages/client/ui-user-questions/src/`(QuestionComposer/PlanReviewPanel)
`@deepseek-ai/dsh-client-ui-workspace`	`packages/client/ui-workspace/src/`
`@deepseek-ai/dsh-client-ui-sidebar`	`packages/client/ui-sidebar/src/`
`@deepseek-ai/dsh-client-ui-settings-general`	`packages/client/ui-settings-general/src/`
`@deepseek-ai/dsh-client-ui-model-selection`	`packages/client/ui-model-selection/src/`
`@deepseek-ai/dsh-client-ui-cordis`	`packages/extensions/ui-cordis/src/`(扩展包)
`@deepseek-ai/dsh-client-ui-trajectory`	`packages/client/ui-trajectory/src/`
`@deepseek-ai/dsh-client-ui-skill`	`packages/client/ui-skill/src/`
`@deepseek-ai/dsh-client-ui-goal`	`packages/client/ui-goal/src/`
`@deepseek-ai/dsh-client-ui-subagent`	`packages/client/ui-subagent/src/`
`@deepseek-ai/dsh-web-frontend`	`apps/web/`(静态资产:`apps/web/public/favicon.svg` 等,待确认)
`@deepseek-ai/dsh-session-log-export`	`packages/session-query/`(待确认)

30+ 个包的完整路径索引见分卷 docs/parts/ui-icons-assets.md 三.1 节;个别具体文件名标注「待确认」,未编造。

3.2 静态资产

资产	路径(官方仓库)	场景
favicon.svg	`apps/web/public/favicon.svg`(待确认)	浏览器图标
manifest.webmanifest / index.html	`apps/web/`(待确认)	PWA/入口

四、命名规律总结

组件命名:Icon{语义}{风格}{尺寸},如 IconChevronDownOutline14;风格只有 Outline / Fill(特例无风格后缀:FolderOpen16、FolderClose16、Sparkle16、TreeCorner8x10)。
尺寸网格:12 / 14 / 16 / 20(特例:RightUpOutline14 默认 8px、TreeCorner8x10 8×10)。
figma 源名:ic_ds_{name}_{style}_{size}(如 ic_ds_new_chat_outline_16)。
统一 props:IconProps = { size?: number, className?: string },颜色一律 currentColor,跟随文字色;className 仅布局。
风格实质:Outline = 镂空填充几何(非 stroke),Fill = 实心;FolderOpen16 为双色调。

附录 · 分卷文件索引

分卷	路径	内容
主题 Token	`docs/parts/ui-theme-tokens.md`(436 行)	369 个 token 全量 light/dark 并列表(含字体 181、shiki 11)
组件规范	`docs/parts/ui-components-spec.md`(586 行)	12 大类组件完整 CSS 参数表
Icon 清单	`docs/parts/ui-icons-assets.md`(207 行)	70 icon + 24 视觉元素 + 30+ 包路径索引

主文档为三卷的合订摘要版;逐 token、逐组件的完整明细以分卷为准。

目录

静态色板(常用档位)

布局常量

三、资源路径索引(官方仓库相对路径)

四、命名规律总结

附录 · 分卷文件索引