dsh-web-review

dsh-web-review

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

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

安装并启动：

使用方法

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。