dsh-web-review DSH 插件

该插件为 DSH 添加了网页预览面板，让你能在实时页面中检视和批注元素。你可以修改文本、颜色、字体、间距、边框和效果，所有调整即时预览，然后将批注作为独立上下文发送给 AI Agent，使其自动修改工作区源码。插件还内置了 UI 优化 Skills，帮助提升设计质量。

ui-productivity vision

如何安装 dsh-web-review DSH 插件

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

复制不会执行命令。安装 dsh-web-review DSH 插件前请核对仓库和版本。

dsh-web-review DSH 插件数据来源

dsh-web-review DSH 插件快照日期：2026年8月16日

discovered

dsh-web-review DSH 插件能做什么

在 DSH 内打开 HTTP(S) URL 或 Agent 提供的链接进行网页预览。
悬停高亮并点击选中页面元素，添加批注。
通过可视化编辑器修改文本、颜色、字体、字号、行高、尺寸、透明度、间距、布局、边框、圆角和效果。
将批注作为独立上下文随提示词发送给 AI Agent，Agent 根据批注修改工作区源码。
内置 UI 优化 Skills（better-ui、better-typography、better-layout 等），可通过斜杠命令调用。

dsh-web-review DSH 插件适合哪些场景

在前端开发中评审页面并给出修改意见。
无需直接编辑代码，快速调整视觉属性如颜色、间距。
通过标注元素引导 AI 编码 Agent 修复布局、样式或响应式问题。
多轮批注和 Agent 驱动的代码修改，迭代 UI 设计。
使用 UI Skills 自动改进排版、无障碍和布局一致性。

dsh-web-review DSH 插件适合谁

使用 DSH 和 AI 编码 Agent 的前端开发者。
希望不写代码就能指定视觉变化的设计师和产品经理。
需要通过 AI 协作高效审查和优化 Web UI 的任何人。

dsh-web-review DSH 插件的限制

需要 DSH 环境，并通过 `dsh plugin --profile web add` 安装插件。
视觉调整仅为临时预览，不会直接写入源码，需由 Agent 应用。
仅支持 HTTP(S) URL 的页面预览，未提及本地文件支持。
插件处于早期阶段，支持的框架和边界情况可能有限。

dsh-web-review DSH 插件的仓库 README 摘录

以下文字摘自 dsh-web-review DSH 插件的上游仓库 CanglongCl/dsh-web-review 的 README，版权归原作者，仅作引用。

> ⭐ 如果这个项目对你有帮助，欢迎点个 Star 支持一下！你的支持是我持续维护和改进的动力。在内置浏览器中，像使用设计工具一样选择页面元素、填写修改意见，并临时调整文本、颜色、字体、尺寸、间距、边框与效果。确认发送后，Agent 会结合页面批注修改当前工作区中的源码。 <p align="center"> <img width="100%" alt="dsh-web-review 网页预览、元素批注与视觉调整演示" src="./docs/assets/web-review-demo.gif" /> </p> <p align="center"> <img width="49%" alt="dsh-web-review 网页预览" src="./docs/assets/web-review-preview.jpg" /> <img width="49%" alt="dsh-web-review 元素批注与属性调整器" src="./docs/assets/web-review-annotation-editor.jpg" /> </p> > 如果你用过 v0、Codex 等 Coding Agent 应用的内置浏览器，你应该对此会很熟悉。 ## 安装安装并启动： ```sh dsh plugin --profile web add @canglongcl/dsh-web-review dsh web ``` ## 使用方法 1. 告诉启动要评审的前端页面，点击AI返回的地址页面。也可以切换到 DSH 的「网页预览」Tab，输入页面的绝对 HTTP(S) URL。 2. 点击批注按钮，再点击页面中的目标元素。 3. 填写修改意见；如需视觉调整，展开「调整」并修改属性。 4. 点击批注工具栏中的发送按钮，发送后会自动切回「对话」Tab；或在 DSH 的输入框中填写更多提示词，然后点击 DSH 发送按钮，注释会随着你的提示词一同发送。 5. Agent 修改源码后，刷新预览进行验收；不满意可以继续下一轮批注。 ## 主要功能 ### 网页预览 - 在 DSH 内打开 Agent 提供的链接页面 ### 元素批注 - 悬停高亮并点选页面元素。 - 为多个目标添加批注。 - 自动附带选择器、文本、可访问名称和源码线索，帮助 Agent 找到对应实现。 ### 实时视觉调整 - 修改文本、颜色、字体、字号、行高、尺寸和透明度。 - 调整间距、布局、边框、圆角和效果。 - 所有修改即时预览。 ### AI 协作 - 批注会作为独立上下文随你的提示词注入。 - 对话中的页面批注沿用 DSH 原生折叠行：收起时显示页面与批注数，展开后只展示目标、修改意图、前后值和可用源码线索。 - Agent 根据批注修改当前工

阅读完整 README仓库未声明许可，使用前请先与作者确认。

dsh-web-review DSH 插件常见问题

如何安装 dsh-web-review 插件？

在终端中运行 `dsh plugin --profile web add @canglongcl/dsh-web-review`，然后使用 `dsh web` 启动插件。确保你已经安装了 DSH 并配置好环境。

没有 DSH 能用这个插件吗？

不能。该插件专为 DSH（DeepSeek Harness）设计，依赖 DSH 的内置浏览器和 Agent 集成。你必须先安装并运行 DSH。

如何对页面元素进行批注？

点击工具栏中的批注按钮，然后点击页面上的目标元素。会弹出一个面板，你可以在其中填写修改意见，并调整颜色、字体、间距等视觉属性。可以添加多个批注。

视觉调整会直接保存到源码吗？

不会。视觉调整只是临时预览，它们会作为上下文发送给 AI Agent，由 Agent 修改工作区中的实际源码。Agent 决定如何应用这些更改。

内置了哪些 UI 优化 Skills？

插件包含 Jakub Krehel 的 8 个设计 Skills：better-ui、better-typography、better-layout、better-writing、better-accessibility、better-colors、better-interface 和 interface-review。你可以通过斜杠命令调用，或在批注编辑器中选用。