前言¶

在 DeepSeek Harness（DSH）里做界面设计，常见做法是让 agent 生成描述或静态图，再由人手工转成可运行页面。交付物往往难以直接交接，质量也缺少可复核的客观指标。设计台（dsh-design-studio）把整条链路装进 DSH：画布是真实 DOM 上的 HTML 文件，质检走本机 Chrome/Edge 的渲染测量，最终可导出多种格式。它是 Claude Design 思路在 DSH 里的原生实现，维护者为 YansongG-HKU，分类为客户端插件，当前版本 1.3.1，MIT 许可证。

这是什么¶

设计台是装在 DSH 里的设计工作台。包名与客户端模块 id 均为 dsh-design-studio；项目数据落在 <DSH_HOME>/design-studio（DSH_HOME 默认为 ~/.dsh）。面板路由前缀为 /dsh-design-studio，对应请求头 x-dsh-design-studio: 1。

工作流被拆成可核查的步骤：建项目并写 brief → 采集设计系统语境 → 在 design/ 下写三档 HTML 变体（A 规范、B 进阶、C 前卫）→ 画布编辑与评论 → 无头浏览器五类检查直到评分达标 → 导出。实现上包含 11 个 agent 工具、一组本地 HTTP 路由和侧边栏「设计台」面板；纯 Node ESM，无第三方运行时依赖。

与「只生成一张图」的流程相比，agent 交付的是可运行的 HTML；质量结论来自真实渲染后的测量，而不是文字自评。

需求入口与设计面板¶

使用前需要分清两个界面：

对话是需求入口，面板是设计工作台。 顶栏有「回到对话」可切回主对话区；FlowStepper 阶段条为「开始 → 语境 → 变体 → 迭代 → 质检 → 导出」（v1.3 起首段为「开始」，并接入 6 步向导与 intake）。

开始：6 步向导与 intake（v1.3）¶

v1.3 对齐「开始 + 提问」：总览首屏提供「开始一个新设计（6 步）」，并保留「快速开始（一句话）」给熟手。六步大致覆盖：设计类型与目标、受众与场景、语境来源、变体档数与探索维度、Tweaks 与内容约束、交付格式与验收标准（默认质检 ≥90）。每步可点「不知道，让 Claude 决定」把必答项交给 agent；完成后可「创建并去对话」或「只建项目」。

向导答案写入结构化 intake，并与 brief 一并持久化。agent 侧新增 design_intake：新或含糊请求先按问题清单问 ≤8 个关键问题，再 design_start；design_start 可接受可选 intake，创建时把摘要写入 system/DESIGN.md。

核心能力¶

下面按 README 已列能力归纳，均可在面板或工具链中使用。

编辑器与画布（v1.1.0 起）
三栏布局、区域焦点（F6/Shift+F6）、由真实 DOM 推导的图层树、Shift 多选与框选、拖拽与八向缩放、浮动工具条、多变体画板视图、⌘K / Ctrl+K 命令面板（约 45 个动作）、深浅主题切换。

设计系统与变体
支持从 URL、代码库、图片或手写说明导入 token，写入 system/tokens.json 与 DESIGN.md。三档变体为 design/a.html、b.html、c.html。

协作式迭代
内联评论（comments.json）、画布上直接改样式与文字、撤销/重做；Tweaks 通过页面内 EDITMODE 与 __dsApplyTweaks 实时调参。

质检
本机浏览器逐视口截图并提取计算样式，覆盖无障碍、排版、间距、设计系统一致性、AI-slop 五类规则；不达标的 findings 可生成修复指令交回对话，目标通常为评分 ≥ 90。

导出与版本
支持 HTML、ZIP、PDF（CDP printToPDF）、PNG、PPTX（本地最小 OOXML）。手动版本快照与面板保存自动历史。

有意不做的事
无 Figma 式对象模型与约束系统（编辑直接作用 DOM）；无多人协作与云端同步；PPTX 为本地图片型幻灯片，非 Google Slides API。

安装与启用¶

官方安装方式是在包含 package.json 与 cordis.patch.yml 的插件目录下执行 bundle 安装，而不是凭仓库名拼接 dsh plugin add：

plugin_manager install_bundle({ target: "<插件目录>" })

环境要求：Node.js ≥ 22，DSH ≥ 0.2.2-rc.1。安装成功后侧边栏「插件」列表应出现 设计台，agent 侧获得 11 个 design_* 工具及 system-prompt 说明。若面板未出现，确认版本后重启会话；Host 初始化失败时会保持 inert 并写 warn 日志，不会拖垮 DSH。

插件以当前 DSH 进程权限运行，安装前应自行查阅仓库源码与 MIT 许可证条款。

典型用法¶

在对话里自然语言下任务
信息充分时可跳过提问；含糊时 agent 会先 design_intake 再开工。示例：

帮我做一个面向瑜伽工作室的预约落地页，先看看 studio.breath.example 的设计系统，再给三档方案，要求无障碍达标。

把 design/ 里的三档首页做一次质检，修到 90 分以上，然后导出 HTML 和 PDF。

这个海报项目导出 PPTX，另外把设计系统 token 写进 system/tokens.json。

标准工具链顺序（摘要）
design_intake → design_start（可带 intake）→ design_context → 编写 a/b/c 三档 HTML → design_check 直至 ≥90 → design_export。具体参数与各工具字段见仓库 README 与 docs/FLOW.md。

在面板内操作
总览用 6 步向导或快速一句话建项目；工作区左栏「需求」tab 可编辑 brief 五字段，「复制给 Claude 并去对话」会带上项目上下文与工具链指令；变体 tab 进入画布编辑；右栏查看检查报告与导出。

适用场景与注意¶

适合需要在 DSH 内完成「可交接 HTML + 可复核质检」的界面与营销物料设计：落地页、移动端页、演示稿、海报等。依赖本机已安装的 Chrome/Edge 做质检与部分导出，数据全部在本地 ~/.dsh/design-studio（或你配置的 DSH_HOME）。

不适合需要 Figma 级约束与组件实例、或团队云端实时协作的场景。社区目录 SkillHub 与 DeepSeek / 幻方无官方从属关系，本文仅以仓库 README 与 package.json 为准。

结尾¶

设计台把 Claude Design 式流程固化为 DSH 插件：真实 HTML 画布、11 个 agent 工具、侧边栏 Figma 级编辑体验，以及浏览器实测的质量门禁与五种导出格式。进一步了解可打开目录页与 GitHub 仓库：

• 目录页：https://www.skillhub.cn/plugins/YansongG-HKU/dsh-design-studio
• 仓库：https://github.com/YansongG-HKU/dsh-design-studio