dsh-web-review

English

⭐ 如果这个项目对你有帮助，欢迎点个 Star 支持一下！你的支持是我持续维护和改进的动力。

在内置浏览器中，像使用设计工具一样选择页面元素、填写修改意见，并临时调整文本、颜色、字体、尺寸、间距、边框与效果。确认发送后，Agent 会结合页面批注修改当前工作区中的源码。

如果你用过 v0、Codex 等 Coding Agent 应用的内置浏览器，你应该对此会很熟悉。

安装

1. 安装桌面壳

从 deepseek-harness-desktop Releases 下载对应平台的安装包：

平台	文件
macOS（Apple Silicon）	DeepSeek.Harness_<版本>_aarch64.dmg
Windows（x64）	DeepSeek.Harness_<版本>_x64-setup.exe（或同名 .msi）

壳内置 Node 运行时与 Harness 本体，装完即可使用，无需另行安装 Node.js 或 DSH。插件不装壳也能用，只是没有「壳内原生面板」这一档，预览会自动回退到真实浏览器（CDP）或隔离代理模式。

2. 安装插件

dsh plugin 会把参数转发给 pnpm，所以需要 pnpm 在 PATH 上（壳内置的 Node 不含 npm/pnpm）：

brew install pnpm          # macOS
# 或任意平台：npm i -g pnpm

然后用桌面壳自带的运行时执行安装，无需全局安装 dsh。

macOS：

app="/Applications/DeepSeek Harness.app"
"$app/Contents/Resources/resources/node/bin/node" \
  "$app/Contents/Resources/resources/harness/node_modules/@deepseek-ai/dsh/lib/bin.js" \
  plugin --profile web add dsh-web-review

Windows（PowerShell；默认安装在 %LOCALAPPDATA%\DeepSeek Harness，若改过安装位置请替换 $app）：

$app = "$env:LOCALAPPDATA\DeepSeek Harness"
& "$app\resources\node\node.exe" `
  "$app\resources\harness\node_modules\@deepseek-ai\dsh\lib\bin.js" `
  plugin --profile web add dsh-web-review

如果已经把 dsh 装到 PATH 上（npm i -g @deepseek-ai/dsh），直接 dsh plugin --profile web add dsh-web-review 是完全等价的。

3. 启动

打开桌面壳应用即可：它会自动启动本地 Harness 服务并打开 Web UI，不需要手动执行 dsh web。

使用方法

1. 告诉启动要评审的前端页面，点击 AI 返回的地址页面，右侧边栏会自动打开预览。 也可以在右侧边栏的引导页中选择「网页预览」，再输入页面的绝对 HTTP(S) URL。
2. 点击地址栏右侧的批注按钮，再点击页面中的目标元素。
3. 填写修改意见；如需视觉调整，展开「调整」并修改属性。
4. 点击批注工具栏中的发送按钮；或在 DSH 的输入框中填写更多提示词后点击 DSH 发送按钮，注释会随着你的提示词一同发送。
5. Agent 修改源码后，刷新预览进行验收；不满意可以继续下一轮批注。

主要功能

网页预览

• 预览是右侧边栏中的一个页面 Tab，跟随右侧工具栏打开和关闭，切换 Tab 不会丢失页面状态。
• 支持前进、后退、刷新与地址栏，浏览过程与普通浏览器一致。
• 批注编辑器停靠在预览面板底部，页面与编辑器各占一半，互不遮挡。

元素批注

• 悬停高亮并点选页面元素。
• 为多个目标添加批注。
• 自动附带选择器、文本、可访问名称和源码线索，帮助 Agent 找到对应实现。

实时视觉调整

• 修改文本、颜色、字体、字号、行高、尺寸和透明度。
• 调整间距、布局、边框、圆角和效果。
• 所有修改即时预览。

AI 协作

• 批注会作为独立上下文随你的提示词注入。
• 对话中的页面批注沿用 DSH 原生折叠行：收起时显示页面与批注数，展开后只展示目标、修改意图、前后值和可用源码线索。
• Agent 根据批注修改当前工作区源码，页面中的临时调整不会直接写入工程。

UI 优化 Skills

插件内置了 Jakub Krehel 的设计 Skills：

• better-ui
• better-typography
• better-layout
• better-writing
• better-accessibility
• better-colors
• better-interface
• interface-review

你可以通过斜杠命令调用 skill，也可以在批注编辑器中选择，让 Agent 在本轮修改中参考相应规则。

插件能力评测

项目包含一套面向真实使用流程的评测，用于验证 Agent 在收到插件生成的页面批注后，能否正确定位源码并完成前端修改。

评测覆盖：

• 文案、样式、布局和响应式修改。
• 多元素与多项关联修改。
• React、Vue 和静态页面。
• 源码锚点可用及缺失时的定位。
• 语义化与无障碍要求。
• 多轮批注和修改范围判断。
• Token 使用量、执行步骤和运行耗时。

评测设计、运行方式和结果解释见 Eval suite。

项目来源与依赖

• 本项目 fork 自 CanglongCl/dsh-web-review，在此感谢上游作者。
• 桌面端 native 预览模式（原生 WKWebView 面板）依赖 deepseek-harness-desktop 壳配合；未安装该壳时，预览自动回退到真实浏览器（CDP）或代理模式。

参与开发

开发环境、架构说明与验证流程见 CONTRIBUTING.md。

版本变更记录见 CHANGELOG.md。