前言¶
DeepSeek Harness (DSH) 插件生态中有一款名为 DeepSeek Harness Design 的工具。它解决了传统前端开发中“画原型”与“写代码”割裂的问题。通过该插件，模型可以直接在对话中修改页面，Design 侧边栏提供实时预览，点击元素可为模型提供精准的上下文，从而将对话转化为可交互的 HTML 原型。
这是什么¶
DeepSeek Harness Design 是一个社区维护的插件，开源协议为 MIT。它将 HTML 原型开发流程嵌入到 DSH 的对话流中，模型负责编辑页面，插件负责渲染和状态管理。
核心功能¶
-
实时预览与视口适配
插件提供手机、平板和桌面三种视口宽度的实时预览（分别为 390px、834px、1280px）。在侧边栏中可切换视口，内容过宽时需横向滚动查看。 -
元素选择与上下文交互
开启元素选择模式后，点击页面上的任意元素，可以将该元素的状态（ID、类名、结构等）传递给模型。模型收到上下文后，可以针对该元素进行修改，而不需要重新描述整个页面。 -
多方案管理与版本控制
支持创建多个设计方案（Alternatives）和每个方案的历史修订（Revisions）。可以通过下拉菜单切换方案或版本，无需操作工具栏即可快速对比不同状态。 -
数据持久化与导出
会话数据保存在 Harness 的持久化存储中。即使重启 Harness 或写入失败，插件也能尝试恢复或回滚。此外，支持将当前 HTML 文档导出至会话工作区。
安装与启用¶
插件未发布至 npm，需从 GitHub Release 下载 tarball 包。
- 从 GitHub Release v0.6.1 下载
deepseek-harness-design-0.6.1.tgz。 - 在下载目录下执行安装命令（以 Desktop 为例）：
npx @deepseek-ai/dsh@0.2.0-rc.2 plugin --profile desktop add ./deepseek-harness-design-0.6.1.tgz
- 安装完成后，完全退出并重新启动 Harness。
- 打开右侧边栏，点击
+卡片中的 Design。 - 确保使用的 DeepSeek Harness 版本为 0.2.0-rc.2（已知兼容性），且运行环境 Node.js 版本在 22.12 以上。
典型用法¶
- 创建页面：在对话中要求模型创建一个页面。模型成功调用
design_apply工具后，Design 侧边栏的预览区会更新。 - 精准修改：开启元素选择，点击某个按钮或文本，告诉模型“把这个按钮改成圆角风格”。模型会读取选中的元素并应用修改。
- 创建对比方案：在当前草稿基础上，要求模型“创建一个暗色主题的编辑版本”。插件会保留当前草稿，并生成一个新方案供对比。
- 重命名方案：点击方案选择器旁的铅笔图标，可以重命名方案（如“暖色咖啡主页”）。重命名仅更新标签，不改变内部状态。
- 版本对比：在对比模式下，左右两侧可以独立选择不同的方案和版本，实现并排对比。
注意事项¶
- 兼容性：插件已针对 DeepSeek Harness Desktop 0.2.0-rc.2 的 Web Profile 进行测试，其他版本兼容性未经验证。
- 存储限制：单次会话限制为 32 个方案，每个方案最多 40 个历史版本，单个 HTML 文档字符数限制为 400,000。
- 卸载旧包：若之前安装过同名或不同名的旧插件（如
dsh-design），需先移除旧包名，再安装新版：
dsh plugin --profile desktop remove dsh-design
- 独立性声明：该项目由社区独立维护，与 DeepSeek 官方无隶属关系。
总结¶
DeepSeek Harness Design 将原型设计流程直接集成到对话中，适合需要在开发前快速验证 UI 界面或进行多方案比对的场景。通过元素选择和持久化存储，它降低了前端交互开发的门槛。更多细节可参考 GitHub 仓库。
