DSH · Claude Code CLI 全新皮肤:资料与设计依据#
调研日期:2026-09-20。本文件保留开工前的资料与设计依据;已落地的功能、字体和验证入口见 Claude CLI · 全新终端布局。
目标与边界#
从零制作独立的 claude-cli-terminal 皮肤,尽量贴近 Claude Code CLI 终端界面。覆盖整个 DSH:主布局、对话、输入、侧边栏、设置、工具记录、工作台、菜单、弹窗和窄屏。
不接手已有 Claude Code 皮肤,不以仓库中的 bundled/claude-code.json 为设计或样式起点;也不接手另一个会话正在做的 Codex 风格。复用的是 DSH 宿主的功能和通用皮肤加载接口。
本次用户明确要求新的布局与 CLI 风格,因此本套采用终端布局与陶土橙强调色;项目默认的蓝色和布局约定继续适用于其它外观。皮肤不改变模型身份、提示词、工具、权限或后端执行模型。
资料入口与可信程度#
| 资料 | 核验情况 | 用途 |
|---|---|---|
| 官方 CLI 2.0 发布页 | 已阅读;2025-09-29 发布 | 经典终端风格的视觉起点,不能当成所有当前行为的依据 |
| 官方 CLI 2.0 原图 | 已在浏览器打开并目视核对 | 暖黑底、橙色字符框、等宽信息、欢迎区、输入分隔线 |
| Terminal configuration | 已阅读当前官方文档 | 明暗主题、主题 token 分工、输入边框、状态与 diff 颜色 |
| Fullscreen rendering | 已阅读当前官方文档 | 固定底部输入、消息滚动、展开工具输出、鼠标操作 |
| Interactive mode | 已阅读当前官方文档 | 输入与中断、选择器、快捷键、当前版本的 diff 侧面板 |
| Settings:/config | 已阅读;尚未实拍当前版本 Config 全屏 | 配置对话与分页、紧凑选项列表、选项值编辑 |
| Session picker | 已阅读官方行为说明 | 会话搜索、分组、选择、预览和项目范围 |
| Agent view 官方发布页 | 已阅读;2026-05-11 发布;内嵌图片未完成目视核验 | 会话状态、最近活动、预览与返回会话的补充参考 |
| Status line | 已阅读官方说明与示例结构 | 底部模型、目录、上下文等信息的紧凑排列 |
| Permissions | 已检索官方文档 | 权限与确认对话的语义参考,DSH 保持自己的权限行为 |
Agent view 图片的直接访问被浏览器站点安全策略阻止,未绕过限制;不把它记为已经看过的视觉证据。该限制不影响其官方文字说明以及其它资料的使用。
本机另外确认安装了 Claude Code 2.1.266。在临时目录、隔离配置、--bare 模式下启动并查看了首次主题选择器,以及深浅色 diff 预览;没有提交模型请求。它直接显示了 ❯ 选中指示、编号选项、✔ 当前值、字符横线、行号和增删背景。未将首次主题选择界面当作 /config 完整设置界面,也未使用真实会话历史作为设计素材。探查进程已关闭。
从参考中提取的视觉语言#
- 终端行是基本单位。 正文、工具名称、路径、提示与设置值按文字行对齐;信息密度由行距和缩进控制。
- 表面平坦。 已核对的官方实图以暖黑底和有限的细线分区构成;欢迎区有字符框,输入前有横向分隔线。
- 橙色用于识别,语义色用于状态。 当前官方主题接口分别定义品牌、提示、模式、成功、错误与 diff 颜色;不把所有功能都涂成橙色。
- 字体取决于终端配置。 无法从单张截图认定 Claude Code 有唯一官方字体;DSH 将选择稳定的等宽字体栈,并单独处理中文回退。
- 经典外观与当前交互分开核对。 2.0 实图用于风格;当前 fullscreen 文档用于固定输入和滚动行为。当前 CLI 还存在 diff 侧面板,不能笼统描述为永远只有单栏。
由此提出的 DSH 方案:深色为主设计基准,同时完整提供浅色;欢迎区、对话流与输入区保留 CLI 的阅读顺序,导航与工具面板采用同一套文字列表和细边框。
全页面覆盖方案#
以下是 DSH 适配设计,不是声称 Claude Code 本身具有这些同名页面。
| 区域 | 从零设计的方向 | 必须保留的实际功能与状态 |
|---|---|---|
| 整体框架 | 同底色的终端画布;窄项目/会话栏、主对话、按需工作台;用细线分区 | 侧栏收起、右栏开关、宽度变化、面板各自滚动 |
| 页头 | 一至两行工作路径、会话名与文字操作,减少大面积顶部装饰 | 重命名、项目范围、原有导航和操作 |
| 空会话 | 字符框式欢迎区,显示真实模型与项目;简短可执行提示 | 新会话、选择模型、开始输入;不伪造版本或账户等级 |
| 用户消息 | 左对齐提示符和整行轻底色,长文自然换行 | 复制、编辑、附件、历史消息定位 |
| 助手消息 | 单列等宽文字流,保持 Markdown 的标题、列表与表格语义 | 流式输出、选择复制、链接、长中文段落 |
| 思考与过程 | 简短标题和可折叠内容,以缩进表示层次 | 展开/收起、处理中、完成、失败、取消 |
| 工具记录 | 紧凑工具名与参数;结果从属缩进;状态符号配文字 | 原生工具与 OMD 操作记录、长输出、错误、重试入口 |
| 输入区 | 横线分隔、❯ 提示符、左对齐多行输入;保留低高度工具行 |
中文输入法、换行、附件、发送、停止、运行时追加消息 |
| 状态行 | 模型、目录/范围、真实运行与上下文信息按短字段排列 | 缺失信息省略;不编造 token、费用或运行状态 |
| 左侧边栏 | /resume 风格搜索与会话列表;项目分组、当前项反显或前置标记 |
新建、搜索、选中、重命名、归档、删除确认、长标题 |
| 侧栏辅助导航 | 紧凑文字入口,目录式层级与少量符号 | 设置、工作区、插件等现有入口均可达 |
| 完整设置壳 | 终端配置面板:分类列表、当前路径/标题、键值行 | 设置页切换、内容滚动、关闭、焦点返回 |
| 通用设置 | 左标签右值、说明另起缩进行 | 所有宿主偏好、输入与下拉、保存反馈 |
| 模型设置 | 提供方与模型列表、分隔线式表单、敏感字段保持原有遮罩 | 新增/编辑/移除、校验错误、连接状态 |
| 内置插件 / 推荐插件 | 紧凑插件清单,状态与动作按列排列 | 安装、更新、卸载、运行中/失败、不可操作原因 |
| 外观 | 同一配置列表样式,明暗、皮肤导入和恢复统一排版 | 切换、导入失败、刷新保存、恢复默认 |
| Oh My DSH | 六个子页全部覆盖,表单行与说明统一缩进 | 常用、基础组件、模型与身份、实验性功能、高级、全局背景 |
| Agent 预设 | 终端选择列表与紧凑编辑面板 | 预设选择、编辑和当前状态,不新增执行角色 |
| 已归档会话 | 与普通会话一致的搜索/列表语法 | 归档项选择、恢复、空状态、长标题 |
| 设置控件 | 原生语义的文本框、下拉、复选框;视觉上使用方形轮廓和紧凑值域 | 键盘焦点、选中、禁用、错误、保存中、未保存变更 |
| 菜单与选择器 | 细边框、文字列表、明显当前行;保留鼠标和键盘操作 | Portal、定位、Esc 关闭、滚动、屏幕边缘约束 |
| 确认 / 权限 / 问题 | 标题、动作或命令、说明、选项逐行排列 | 原有批准/拒绝含义、危险操作区别、焦点管理 |
| 代码与 diff | 等宽行号、路径标题、清楚的增删底色、有限边框 | 横向滚动、复制、长路径、明暗可读性 |
| 右侧工作台 | 终端分屏式标题和文本页签;文件列表与内容分区 | 任务、摘要/上下文、运行监控、文件等已有能力 |
| 电脑与文件预览 | 终端化工具条与边框,内容区按原本方式显示 | 真实截图、图像、网页和文件不加整体滤镜 |
| 错误与空状态 | 简短符号、说明与可执行文字操作 | 网络失败、载入、无项目、无会话、重试 |
| 窄屏 | 单主栏,导航和工作台按需展开;设置改成一列可滚动内容 | 390px 可操作,触控目标不因终端密度变得过小 |
布局草案#
以下仅表示信息分区,尺寸与字形还需要原型和真实 DSH 实拍校准。
┌ sessions ───────────┬ ~/project · 当前会话 ─────────────────────────┐
│ / 搜索会话 │ DSH · 实际模型 │
│ │ │
│ ▾ project │ ❯ 用户请求 │
│ ❯ 当前会话 │ │
│ 另一个会话 │ ● 助手正文 │
│ │ │
│ ▾ another-project │ ● 工具名称(摘要参数) │
│ 会话 │ └ 结果摘要 · 展开 │
│ │ │
│ ├──────────────────────────────────────────────┤
│ + 新会话 │ ❯ 输入内容 │
│ 设置 归档 ├──────────────────────────────────────────────┤
│ │ 模型 · 项目范围 · 状态 附件 发送/停止 │
└────────────────────┴──────────────────────────────────────────────┘
设置采用相同的边框和行网格:左侧保留全部 DSH 分类,右侧为配置行;窄屏将分类收进顶部选择入口。是否采用“标签 + 点引导线 + 值”需要用真实长中文标签验证,不能为了终端形式造成截断。
初始参数仅为设计起点,不是从官方二进制提取的精确默认值:
| 参数 | 初始提议 |
|---|---|
| 字体 | ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;中文回退单独验看 |
| 主字号 / 行高 | 14px / 1.55,尊重用户字号;大段中文再核对阅读密度 |
| 深色 | 暖黑背景、浅暖灰正文、陶土橙强调、灰色细边框 |
| 浅色 | 近白背景、深灰正文、更深的橙色强调;独立校验对比度 |
| 边框 / 圆角 / 阴影 | 1px;主体 0px,必要控件小圆角;无装饰阴影 |
| 侧栏 | 桌面约 256–280px 起步,可收起;不是官方 CLI 的固定尺寸 |
| 主栏 | 随可用宽度伸展,通过内边距控制阅读宽度 |
| 运动 | 短促状态变化;尊重减少动态效果,不制作复古 CRT 闪烁或扫描线 |
DSH 接入结论#
首次调研时宿主依赖为 @deepseek-ai/dsh 0.1.6-alpha.2;本段保留当时的观察背景,当前适配版本以 package.json 为准。
已核对通用接口:皮肤文档、src/client/skins/format.mjs、runtime.mjs、settings.jsx、src/client/index.jsx 与设置页覆盖测试。
- 普通皮肤包允许颜色、字体、边框等视觉属性;不允许
display、position、尺寸和任意布局 CSS。因此单独导入 JSON 无法完成本任务要求的布局。 - 布局当前由插件内置适配器提供,读取时只接受
ios-liquid。本套需要新增独立的claude-cli-terminal布局标识与适配器,并接入打包和选择流程。 - 通用映射已覆盖 sidebar、composer、完整 settings shell/nav/content、各类控件、工具行和 statusbar,可复用契约;这不等于复用旧 Claude Code 设计。
- 需要新结构或真实文字的地方应通过宿主组件/插槽和状态生成,不能依赖 CSS 伪元素假造按钮、状态或功能入口。
- 为保留设置语义,优先调整布局与视觉;仅在宿主接口无法提供所需结构时增加小范围适配,不移动 React 管理的节点。
- 新皮肤独立目录、独立 ID。共享文件只做注册与接口所必需的改动,并在修改时重新读取,避免覆盖并行会话的更新。
- 关闭皮肤、切换到其它皮肤、恢复默认和卸载时,必须清理本套布局样式与监听器。
后续制作与验收依据#
制作顺序:先完成桌面对话、侧栏、完整设置的可点击原型,再接入真实 DSH,补齐工具、工作台和窄屏,最后逐页实拍校准。
验收使用页面与状态覆盖,而不是测试数量或“相似度百分比”:
- 桌面深色、桌面浅色、390px 窄屏均查看主对话、侧栏、设置与工作台。
- 逐项打开通用、模型、内置插件、外观、Oh My DSH 六个子页、推荐插件、Agent 预设与归档。
- 执行新会话、发送、停止、展开工具、切换会话、打开菜单、编辑设置、保存与恢复默认。
- 检查中文输入法、长消息、长路径、长设置说明、表格、代码、附件和内容溢出。
- 检查加载、运行、成功、错误、取消、空状态、选中、焦点、禁用和保存中。
- 检查明暗切换、导入、刷新保存、其它皮肤切换、原版 web、模式切换和卸载恢复。
仍需补充的参考:当前版本完整 /config、有内容的工具/权限对话、侧分屏实图。现阶段这些位置的设计依据来自官方行为文档,不能宣称已完成像素级比对。原型也不能代替真实 DSH 的布局与功能验收。