用 dsh-web-review 在 DeepSeek Harness 里对着页面批注改前端

DeepSeek Harness 插件 DeepSeek DSH 界面增强 网页预览 元素批注 2026-08-17 57 阅读

前言

用编码智能体改前端，卡点经常不在「会不会写 CSS」，而在描述对不上像素。你在对话里写「标题和按钮太近」「这张卡片的圆角不对」，模型只能靠选择器和源码猜测目标；改完刷新一看，动到的往往是旁边那个同类元素。下一轮再补一句「不是那个，是右上角那个」，上下文越积越长，真正要改的那几行还是对不齐。

DeepSeek Harness（以下简称 DSH）把模型、工具、会话、沙箱和 UI 都做成插件，官方页面的说法是「一切皆插件」：能力靠配置组合，不必改 Harness 源码。社区里因此出现了一批给网页界面补工作台的插件。dsh-web-review 做的是更具体的一件事：在 DSH 内置预览里点选页面元素、写修改意见，必要时先在页面上试颜色和间距，再把这些可视化反馈交给 Agent，让它去改当前工作区里的前端源码。

本文按插件目录页、GitHub 仓库 README / CONTRIBUTING、npm 包页交叉核对后整理：它是什么、装哪条命令、页面上怎么点、适合什么场景。目录站点 deepseek-harness-plugin.com 是社区索引，和 DeepSeek / 幻方没有官方从属关系，不要把它当成官方应用商店。

这是什么

dsh-web-review 是一款界面增强插件，由 CanglongCl 维护，源码在 GitHub 仓库 CanglongCl/dsh-web-review。目录页把它归在「界面增强」，主要语言是 TypeScript。npm 上的发布包名是 @canglongcl/dsh-web-review，当前版本 0.3.0（2026-08-17 发布）。插件清单里声明的运行平台是 web，需要走 DSH 的网页界面，而不是终端 TUI。

截至 2026-08-17，GitHub 显示 15 个 star；目录页当时仍写 14，以仓库页面为准。GitHub 的 license 字段为空，仓库里也没有常见的 LICENSE 文件。目录页称它是社区开源项目、可以查看源码并免费安装，但这不等于已经声明了 SPDX 许可证。安装前应自己读源码和使用条款。

它解决的问题可以收成一句话：把「看见图上哪里不对」变成 Agent 能定位源码的批注，而不是只靠自然语言描述。仓库 README 自己也写了参照：如果你用过 v0、Codex 这类编码 Agent 应用的内置浏览器，操作会比较熟悉。

核心功能

下面几项都来自仓库 README 和 CONTRIBUTING，不是额外发挥。

网页预览

插件在 DSH 网页界面里提供预览能力，可以打开 Agent 返回的链接页面。也可以自己切到「网页预览」Tab，填入页面的绝对 HTTP(S) URL。评审对象是正在跑的前端页面，不是静态截图。

CONTRIBUTING 补充了预览隔离方式，对使用者有直接含义：宿主只提供会话控制，不会在宿主 Origin 上直接返回目标页面内容；每个顶层目标使用短生命周期的 *.localhost Preview Origin；代理不转发浏览器 Cookie 和 Authorization。登录态、带鉴权头的内网页，不要默认「预览里登录了就等于源站登录了」。

元素批注

进入批注后，可以悬停高亮、点选页面元素，一次给多个目标加意见。插件会自动附带选择器、文本、可访问名称和源码线索，用来帮 Agent 找到对应实现。这些字段是从页面 DOM 序列化出来的证据，不是保证永远指向正确文件的绝对坐标；源码锚点缺失时，Agent 仍可能要靠选择器和文案推断。仓库的评测套件专门覆盖了「锚点可用」和「锚点缺失」两种情况。

实时视觉调整

批注编辑器里可以展开「调整」，临时改这些属性并立刻在预览里看到效果：

  • 文本、颜色、字体、字号、行高、尺寸、透明度
  • 间距、布局、边框、圆角、效果

这里有一条边界，README 写得很明确：页面上的临时调整不会直接写入工程。它只是你在预览里试值；真正改仓库文件的是 Agent 收到批注之后，用会话里已有的文件和 Shell 工具去改源码。试完觉得颜色不对，重置或取消后，预览会回到原状。

批注如何进入对话

发送时有两种方式：

  1. 点批注工具栏里的发送按钮，发送后界面会自动切回「对话」Tab。
  2. 在 DSH 输入框里再写一段提示词，点 DSH 自己的发送按钮；批注会随你的提示词一起送出。

批注会作为独立上下文注入，而不是改写你输入框里的原文。对话里沿用 DSH 原生折叠行：收起时显示页面和批注数；展开后只展示目标、修改意图、前后值和可用的源码线索。CONTRIBUTING 还写了实现约束：浏览器发送的是结构化的 { sessionId, page, comments[] }，由 Node 端校验后再生成 # Browser comments 上下文；插件不注册新的模型工具。

内置 UI 优化 Skills

插件内置了 Jakub Krehel 的设计 Skills，名称如下：

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

可以在对话里用斜杠命令调用，也可以在批注编辑器里勾选，让 Agent 在这一轮修改时参考对应规则。这些 Skill 提供的是设计侧约束，不是把页面自动「美化」成某一套皮肤。

面向真实流程的评测

仓库带了一套评测，用来检查 Agent 在收到插件生成的页面批注后，能不能定位源码并完成前端修改。覆盖范围包括：文案 / 样式 / 布局 / 响应式、多元素关联修改、React / Vue / 静态页、源码锚点有无、语义化与无障碍、多轮批注和修改范围，以及 token、步骤数和耗时。设计和跑法见仓库的 eval/README.md。本文没有引用具体分数，评测结果以你本地跑出来的报告为准。

安装与启用

目录页给出的安装命令如下，在 DeepSeek Harness 终端里运行：

dsh plugin add github:CanglongCl/dsh-web-review

这是目录页原文，不要自行把仓库名拼成别的 source。需要可复现安装时，把 #commit 换成真实提交哈希。对应 npm 上的 0.3.0 发布提交是 7809b6697c347cc11a6c0d4ba641b80926de3ef6：

dsh plugin add github:CanglongCl/dsh-web-review#7809b6697c347cc11a6c0d4ba641b80926de3ef6

维护者 README 写的是 Web profile + npm 包名，装完再启动网页界面：

dsh plugin --profile web add @canglongcl/dsh-web-review
dsh web

两条路径指向同一仓库。日常跟目录页走 GitHub source 即可；已经在用 web profile、希望直接装 npm 包时，用 README 这条。包清单里的 dsh.client.platform 为 web，装到非 Web 的 profile 上没有对应界面可挂。

目录页有一条安全说明，安装任何 DSH 插件时都适用：插件以当前 dsh 进程的权限运行，安装时可能执行代码。 装之前检查源码仓库和许可证；需要可复现时固定 commit，不要长期钉在浮动的默认分支上。

使用方法

仓库 README 给出的操作顺序如下。

  1. 让 Agent 启动要评审的前端页面，然后点击它返回的地址。也可以切换到 DSH 的「网页预览」Tab，输入该页面的绝对 HTTP(S) URL。
  2. 点击批注按钮，再点击页面中的目标元素。可以连续点多个目标。
  3. 填写修改意见。若要先看视觉效果，展开「调整」改属性，预览会即时更新。
  4. 点批注工具栏的发送按钮，或在 DSH 输入框补充提示词后用 DSH 发送。批注会作为独立上下文进入本轮对话。
  5. Agent 改完工作区源码后，刷新预览验收。不满意就再点一轮，不要指望临时调整会留在工程里。

一个可复现的最小循环是：本地或 Agent 拉起前端开发服务器 → 把 http://127.0.0.1:<端口> 填进网页预览 → 点选按钮或标题 → 写清「改成什么」而不是只写「不好看」→ 发送 → 刷新看源码是否真的改到了对应组件。

需要设计规范时，在批注编辑器里选一项内置 Skill，例如改字号和行高时选 better-typography，改对比度和无障碍时选 better-accessibility。Skill 名称以 README 列表为准。

适用场景与注意事项

比较适合这些情况：

  • 已经在用 DSH 网页界面做前端，希望对着真实页面点选，而不是只在对话里描述像素
  • 改 React、Vue 或静态页的文案、样式、布局、响应式，并且工作区就是这份源码
  • 想先在预览里试颜色、间距、圆角，确认观感后再让 Agent 落盘
  • 需要把选择器、可访问名称和源码线索一并交给模型，减少「改错同类元素」

使用时注意下面几条，都有仓库或目录页依据：

  1. 只覆盖 Web GUI。 包声明 platform: web，README 的启动命令也是 dsh web。终端 TUI 场景应看别的界面插件，不要指望装上之后在纯终端里点选 DOM。
  2. 临时调整不等于提交。 预览里改过的颜色和间距，刷新或重置后会回到原样；只有 Agent 改过的工作区文件会留下。验收以刷新后的页面和 git diff 为准。
  3. 预览有隔离边界。 代理不转发 Cookie 和 Authorization。需要登录态的页面，不要默认预览会话能带上你浏览器里的登录信息。
  4. 插件不新增模型工具。 Agent 仍然用当前会话已有的文件和 Shell 能力改代码。批注质量（目标是否点准、意图是否写清、有没有源码线索）比再装一套工具更关键。
  5. 权限与许可证。 插件与当前 dsh 进程同权。GitHub 截至 2026-08-17 未声明 SPDX 许可证，安装前应阅读源码；生产或公司环境若有开源合规要求，先确认许可再装。
  6. 目录页不是官方商店。 deepseek-harness-plugin.com 是社区索引。安装命令以该页原文和仓库 README 为准，不要从第三方转述里复制经过改写的 source 字符串。

小结

dsh-web-review 给 DSH 网页界面补上内置预览和元素批注：点选、写意见、必要时先试视觉属性，再把带选择器和源码线索的批注交给 Agent 去改工作区前端。它不替代你做设计决策，也不把预览里的临时样式直接写进仓库。对已经在 DSH Web 里改页面的人来说，它主要缩短的是「描述像素 → 对上源码」这一段。

参考地址：

  • 插件目录页：https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-web-review/
  • GitHub 仓库：https://github.com/CanglongCl/dsh-web-review
  • npm 包：https://www.npmjs.com/package/@canglongcl/dsh-web-review
  • DeepSeek Harness 官方说明：https://deepseek.com/harness/
  • DeepSeek Harness 源码：https://github.com/deepseek-ai/deepseek-harness

相关文章

快速从零部署一个DeepSeek-R1服务 2025-04-05 使用 dsh-anchored-standard 为 DeepSeek Harness 配置两阶段 Agent 预设 2026-08-17 用 dsh-web-ui 把 DeepSeek Harness 网页界面补成工作台 2026-08-17 用 modlens 给 DeepSeek Harness 的纯文本模型补上视觉 2026-08-17 用 dsh-TUI 给 DeepSeek Harness 补上全屏终端界面 2026-08-17
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜