CanglongCl/dsh-web-review

dsh-web-review

English

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

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

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

安装

安装并启动：

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 根据批注修改当前工作区源码，页面中的临时调整不会直接写入工程。

dsh-better-sidebar集成

安装 dsh-better-sidebar 后，网页预览会自动在侧边栏中打开。你也可以在侧边栏新建 tab 菜单中打开网页预览以启用。

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。

参与开发

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

版本变更记录见 CHANGELOG.md。