前言¶

用 DSH 改前端时，常见流程是：在聊天里描述「把标题改大一点」「按钮颜色换成蓝色」，模型再去搜文件、改 CSS 或 JSX。问题在于，自然语言很难精确对应到页面上的某一块 DOM；改完后你也往往要自己在浏览器里对照，再翻 git diff 确认是否改对了位置。

dsh-revise（仓库 Lostforest7/dsh-revise）把这一步做成可视化改稿台：在本地开发页面上点选元素、写具体修改说明，经当前 DSH 会话交给智能体改代码，再用固定视口截图和源码 diff 做人工验收。维护者为 Lostforest7，在 DSH 社区目录中归类为客户端插件。

这是什么¶

一句话：为 DeepSeek Harness 增加「点选前端元素 → 发送改稿请求 → 对比截图与代码 diff → 逐项接受或反馈」的工作流。

插件不单独申请 API Key，模型凭据仍由 DSH 按官方方式配置。代码编辑仍由 DSH 会话里的智能体完成；Revise 负责采集上下文、截图、记录与导出报告。

README 写明：目前仅在 DSH Web 0.2.0-rc.2、Vite 8.3.1 / React 18.3.1、Windows、Node 24.19.0 上做过验证；界面与报告为中文。简单示例在 DeepSeek V4 Pro / Max 上跑通；复杂项目、其他框架或模型、Desktop 及其他 DSH 版本未验证。

核心功能¶

以下能力均来自项目 README 与 package.json 说明。

• 点选即请求：元素选择器、页面摘要、视口坐标，以及 JSX 源码提示一并采集。
• 当前会话交接：可在改稿台预览请求，再通过 DSH 常规 prompt 队列发送。
• 改前改后证据：桌面 1280×800 与移动 390×844 截图，并对采集到的文本源码做 diff。
• 人工验收：对每一项 接受，或 继续修改 并再次发送；重新采集会清掉先前接受状态；源码变化后旧候选不可再接受。
• 本地历史：修订记录写在项目目录 .dsh-revise/ 下，按 DSH 会话分隔。
• 可携带报告：可下载单文件 HTML；本地另存 report.html、report.md 与 PNG。像素变化百分比仅描述图像差异，不能单独证明需求是否实现正确。

Vite 侧通过 revise() 桥接注入，且仅在开发服务（apply: 'serve'）生效，不参与生产构建。

安装与启用¶

环境要求：Node 24，或 22.x 且 ≥22.19.0（见 package.json 的 engines）。需先按 DSH 官方文档安装并配置 Harness。

发行包 未发布到 npm。可从 v0.1.0-pre 下载 dsh-revise-0.1.0.tgz。

1. 注册 DSH Web 插件并配置浏览器¶

将 tarball 注册到 Web profile，并指定 Chromium/Chrome 可执行文件；若无本地 Chrome，可用 Playwright 安装 Chromium：

# Windows 示例：先设置 Chrome 路径，再启动 DSH Web
$env:REVISE_CHROMIUM_PATH = "C:\Program Files\Google\Chrome\Application\chrome.exe"
dsh web

注册插件（路径改为本机绝对路径）：

dsh plugin --profile web add /absolute/path/to/dsh-revise-0.1.0.tgz

文档要求：在启动 DSH 之前配置 REVISE_CHROMIUM_PATH，或执行：

npx playwright-core@1.63.0 install chromium

2. 在前端 Vite 项目中安装并接入¶

在前端工程目录安装同一本地包为开发依赖，并把 .dsh-revise/ 加入 .gitignore：

npm install -D /absolute/path/to/dsh-revise-0.1.0.tgz

在 vite.config.ts 中加入 revise()，并建议固定本地开发地址（与改稿台创建轮次时使用的 URL 一致）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { revise } from 'dsh-revise/vite'

export default defineConfig({
  plugins: [revise(), react()],
  server: { host: '127.0.0.1', port: 5173, strictPort: true },
})

.dsh-revise/

3. 启动联调¶

启动前端开发服务，再运行 dsh web，在 DSH 中选择该 Vite 项目，点击界面右下 Revise 改稿台。

若从源码目录开发，README 允许对 checkout 路径执行 dsh plugin --profile web add /absolute/path/to/dsh-revise（仓库含已构建的 lib/）。用户任务要求不展开 git clone 流程；需要时可参阅仓库 README 的 Source checkout 小节。

典型用法¶

按 README「Use it」步骤，一轮改稿大致如下。

1. 在 DSH 中打开目录即为 Vite 项目的会话，并启动该项目的开发服务器。
2. 点击 Revise 改稿台，用真实的本地开发 URL 创建一轮；插件先采集基线。
3. 点击 选择元素，选中 DOM 节点并保存具体修改说明；可对多个元素或移动视口重复。
4. 点击 发送给 DSH，阅读生成的请求并确认发送；关闭改稿台以便跟进会话中的智能体回复。
5. 待修改完成且 Vite 热更新稳定后，重新打开该轮，点击 采集修改后，对比截图与代码变更。
6. 对每一项 接受，或 继续修改 后再发请求；结束时 完成本轮验收。
7. 需要留档时使用 导出报告（HTML）；项目内 .dsh-revise/ 仍保留 Markdown 与截图。

仓库自带示例：源码构建后可在终端分别运行 npm run dev:example 与 npm run dev:workbench，在不接 DSH 的情况下体验选元素、采集与导出（提供 copy request 而非发送给智能体）。完整 DSH 集成需注册插件并以 examples/vite-react 作为 DSH 项目目录。

适用场景与注意¶

更适合：本地 loopback、显式端口的 HTTP 开发服；Vite + React 前端；希望在改稿前后用固定视口截图和 src/、app/、pages/、components/ 等目录内文本文件 diff 做验收的团队或个人。

边界与限制（README Boundaries）：

• 仅接受显式端口的 loopback HTTP 目标；截图使用全新上下文，无登录 Cookie，且只加载同源资源；依赖远程 API、CDN、登录或阻止 iframe 的页面可能需要额外适配。
• 源码快照有数量与大小上限（如 500 文件、单文件 512 KB、合计 5 MB）；二进制与环境文件不参与 diff；JSX 提示不保证映射到唯一 CSS 规则。
• 本版本无自动回滚、全页截图、多人评审或托管报告服务；导出 HTML 含页面截图与源码 diff，外发前请自行审阅内容。

安全与信任：DSH 插件在当前 dsh 进程权限下运行。安装前请阅读 GitHub 仓库 源码与 MIT 许可证，并理解 .dsh-revise/ 中会写入请求、截图与报告元数据。

DeepSeek Harness 生态强调「一切皆插件」；SkillHub 目录页 为社区站点，与 DeepSeek / 幻方无官方从属关系，本文不以「官方应用商店」表述。

结尾¶

dsh-revise 把「指哪改哪」和「截图 + diff 验收」接到 DSH 现有会话上，减少纯文字描述前端位置的成本。当前包版本 0.1.0，预发布包见 v0.1.0-pre；兼容性与排错见仓库 docs/compatibility.md。

• 社区目录：https://www.skillhub.cn/plugins/Lostforest7/dsh-revise
• GitHub：https://github.com/Lostforest7/dsh-revise