前言¶
DeepSeek Harness（DSH）通过插件扩展功能。当智能体需要生成用户界面时，单纯的文本描述往往不足以评估交互逻辑或布局效果。dsh-design 插件解决了这个问题，它允许 Agent 工具直接编写 HTML，并在本地生成可点击的原型预览。
是什么¶
这是一个客户端插件，用于在 DeepSeek Harness 中生成和预览可交互的 HTML 原型。
维护者：xbyzzZ
类别：客户端
许可证：MIT
该插件通过 Agent 工具在项目目录下的 .dsh-design/ 路径中写入 HTML 文件，并利用浏览器预览技术，将页面渲染为按比例缩放的艺术板。
安装与启用¶
插件通过 dsh plugin 命令安装。安装后需要重启 DSH 才能生效。
- 在插件目录下执行安装命令：
dsh plugin --profile web add .
插件会被安装到 $DSH_HOME/profiles/web，并作为补丁 bundle 加载。
-
重启 DeepSeek Harness。
-
打开 Prototype 标签页：
- 如果安装了dsh-better-sidebar，可以在侧边栏的+菜单中选择 Prototype。
- 如果没有该插件，可以在聊天页面的视图中打开预览标签页。
核心功能¶
插件提供了一组 Agent 工具和预览交互能力。
Agent 工具¶
Agent 可以使用以下工具与原型文件交互：
| 工具名 | 作用 |
|---|---|
design_status |
查看当前工作区和正在预览的文件 |
design_systems |
获取平台信息、默认画布尺寸以及 paper / ink 设计系统 |
design_create |
创建新项目，需传入 platform（平台）和 designSystem（设计系统） |
design_brief |
更新或修改现有项目的需求说明 |
design_write |
编写 HTML / CSS / JS / SVG / 光栅图片 |
design_list |
列出项目中的文件 |
design_open |
打开现有 HTML 文件或另一个项目 |
design_comments |
读取画布上的固定点信息 |
预览与交互¶
在 Prototype 标签页中，页面以按比例缩放的艺术板形式显示：
- 平台尺寸：Web (1280×800)，iOS (390×844)，Android (412×915)。
- 缩放与平移：使用
−/%/+缩放，或按住 Space 键拖动平移，支持双指滚动和 ⌘/Ctrl+滚轮缩放。 - 原型选择：同一工作区可能有多个原型，从工具栏下方的条带中选择。
- 固定：点击页面任意位置添加固定点，在聊天中提及该点，Agent 会读取并据此修改代码。
文件支持¶
- 支持嵌套文件夹。
- 支持外部链接（如
<link href="css/app.css">）。 - 支持内部链接（如
<a href="settings.html">）。 - 光栅图片使用 Base64 编码嵌入。
典型用法¶
- 在聊天中输入指令，例如：“Make a login page.”
- Agent 会询问平台和设计系统（如 web/iOS/Android，paper/ink）。
- Agent 调用
design_create和design_write，生成 HTML 文件到.dsh-design/。 - 打开 Prototype 标签页，查看生成的页面。
- 在页面上点击并固定一个位置，在聊天中输入反馈，Agent 会根据固定点重新编写代码。
配置与限制¶
配置¶
插件自带 cordis.patch.yml 补丁文件，官方补丁会整体替换配置。如需覆盖特定配置项（如 maxFileBytes），需手动插入如下结构：
- insert:
- id: dsh-design
name: dsh-design
config:
maxFileBytes: 524288
限制¶
- 运行环境：需要 DeepSeek Harness 的 web profile 和 Node.js 22+。
- 文件大小：单文件最大 512 KiB (
maxFileBytes)。 - 存储路径：文件存储在
<workspace>/.dsh-design/下，包含current.json、projects/<id>/等结构。
结尾¶
dsh-design 为 DSH 的智能体开发提供了可视化的交互能力，使其不仅能写代码，还能“画”页面。更多细节和源码，请访问 GitHub 仓库。
