
CanglongCl/dsh-web-review
150Last commit Aug 15, 2026
dsh-web-review DSH plugin
This plugin adds a web preview panel to DSH, letting you inspect and annotate elements on live pages. You can modify text, colors, fonts, spacing, borders, and effects in real time, then send the annotations as context to your AI agent for automatic source code changes. It also includes UI optimization skills for better design suggestions.
How to install the dsh-web-review DSH plugin
dsh plugin --profile web add @canglongcl/dsh-web-reviewCopying does not run this command. Review the repository and version before installing the dsh-web-review DSH plugin.
dsh-web-review DSH plugin data source
dsh-web-review DSH plugin snapshot date: Aug 16, 2026
discovered
What the dsh-web-review DSH plugin can do
- Preview web pages inside DSH using absolute HTTP(S) URLs or agent-provided links.
- Hover to highlight and click-select any page element for annotation.
- Add multiple annotations with a visual editor for text, color, font, size, spacing, border, and effects.
- Send annotations as independent context to the AI agent, which modifies the source code in the workspace.
- Built-in UI skills (better-ui, better-typography, better-layout, etc.) for design improvement suggestions.
Where the dsh-web-review DSH plugin fits
- Review and provide feedback on a frontend page during development.
- Quickly adjust visual properties like colors and spacing without editing code directly.
- Guide an AI coding agent to fix layout, styling, or responsive issues by pointing out elements.
- Iterate on UI designs with multiple rounds of annotation and agent-driven code changes.
- Use UI skills to automatically improve typography, accessibility, and layout consistency.
Who the dsh-web-review DSH plugin is for
- Frontend developers using DSH with AI coding agents.
- Designers and product managers who want to specify visual changes without writing code.
- Anyone who needs to efficiently review and refine web UIs through AI collaboration.
dsh-web-review DSH plugin limitations
- Requires DSH environment and the plugin installed via `dsh plugin --profile web add`.
- Visual adjustments are temporary previews only; they are not directly written to the source code – the agent must apply them.
- Only supports HTTP(S) URLs for page preview; local files are not mentioned.
- The plugin is in early stage; full list of supported frameworks and edge cases may be limited.
dsh-web-review DSH plugin: from the repository README
Quoted from the CanglongCl/dsh-web-review README, the upstream source of the dsh-web-review DSH plugin. Copyright remains with the original authors.
> ⭐ 如果这个项目对你有帮助,欢迎点个 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 根据批注修改当前工
Read the full READMEThe repository declares no license. Check with the authors before using it.
dsh-web-review DSH plugin questions
How do I install the dsh-web-review plugin?
Run `dsh plugin --profile web add @canglongcl/dsh-web-review` in your terminal. Then start the plugin with `dsh web`. Make sure you have DSH installed and configured.
Can I use the plugin without DSH?
No, this plugin is designed specifically for DSH (DeepSeek Harness). It relies on DSH's built-in browser and agent integration. You must have DSH installed and running.
How do I annotate an element on the page?
Click the annotation button in the toolbar, then click any element on the page. A panel will appear where you can write your modification request and adjust visual properties like color, font, and spacing. Multiple annotations can be added.
Does the visual adjustment save to the source code?
No, visual adjustments are temporary previews only. They are sent as context to the AI agent, which then modifies the actual source code in your workspace. The agent decides how to apply the changes.
What UI skills are included?
The plugin includes 8 skills from Jakub Krehel's design skills: better-ui, better-typography, better-layout, better-writing, better-accessibility, better-colors, better-interface, and interface-review. You can invoke them via slash command or select them in the annotation editor.