A
licenseNot graded
qualityA
maintenanceEnables AI assistants to capture screenshots, run visual diffs, accessibility audits, and batch sweep plans for web pages via MCP tools.
19 npm
2
MIT
visual-review-workbench
by Olorinm
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@visual-review-workbenchOpen the checkout page and capture a screenshot for review."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
UI Review Workbench
一个配置驱动的本地前端评审台。它并列承载真实产品页面、产品原生 Story/Fixture 和真实截图录屏，自身不重画或伪造产品界面。
本仓库提供 ui-review CLI 和配套 Skill；使用旧插件版的用户请按下面的方式安装，原 MCP 入口已由 CLI 替代。
使用
npm ci
npx playwright install chromium
npm link
ui-review init --config ./review.json
ui-review dev --config ./review.json --out ./dist --port 5180
ui-review probe --config ./review.json也可以不安装全局命令：
node ./bin/ui-review.mjs build --config ./review.json --out ./dist完整配置字段见 docs/config.md，最小配置见 examples/minimal.json。
Related MCP server: Refract
能力
真实产品 iframe、Story iframe、图片、视频、代码和说明面板
macOS 风格窗口、拖拽排序、自由并排与分行、布局记忆和重置
适应框内与原始 100%两种观察尺度iframe 内部、窗口画布、评审台外层之间的滚动处理
页面探测、截图、录屏和渲染表面颜色测量
可重复的页面状态操作与可见性、文本、数量、属性断言
产品 Git diff 中的个人路径和评审专用残留审计
边界
候选版本在临时 worktree 中运行真实 App；评审台指向各实例 URL。
产品仓库不得因评审增加或遗留专用路由、fixture、假状态、variant 开关或适配 CSS。
状态准备脚本只存在于任务产物中，通过真实 UI/API 或项目原生 seed 写入真实数据；禁止拦截接口或直接修改前端 store 伪造通知。
外部项目应运行自己的 App/Storybook；无法运行或嵌入时，使用明确标记的真实截图或录屏。
每次评审的配置、截图、录屏与构建结果属于任务产物，不属于本仓库源码。
Agent 的选择和操作规范由 skills/review-frontend-variants 维护；该 Skill 调用本仓库 CLI，不保存核心实现副本。
Codex Skill
仓库中的 Skill 是唯一源文件。本地 Codex 通过符号链接直接读取它：
npm run link:skill命令遇到已有的非链接目录或指向其他来源的链接时会拒绝覆盖。
开发
npm run verify测试覆盖 CLI、配置校验、页面探测、颜色测量、窗口分行持久化和嵌套滚动处理。
This server cannot be deployed
Maintenance
ActivitySlowing
ResponsivenessNo issues
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
Clean PNG/JPEG screenshots via REST or MCP, with goal-driven multi-step navigation.
Synthetic UX reviews, findings, evidence images, and repair prompts. OAuth required.
Reconstruct helps AI coding agents recreate digital products with high visual and functional fidelity, or combine ideas and interface patterns from multiple products into a new experience. Agents work from captured evidence and verify the result against real references instead of guessing from screenshots. The MCP server provides screenshots, element trees, measured layouts, computed styles, typography, assets, routes, recorded user flows and frontend technology insights. It exposes 60 tools, 16 resources and nine workflow skills for inspecting, designing, building and verifying products in the user’s stack. Access uses browser-based OAuth and requires a Reconstruct account. Captured content is treated as untrusted reference data; new capture requests are submitted only when the user asks.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceMCP server for rendering responsive screenshots of URLs at multiple viewports. Enables agents to capture screenshots and detect visual issues like overflow, clipped elements, and missing alt text.MIT
- AlicenseNot gradedqualityCmaintenanceVisual frontend accessibility inspector MCP server. WCAG contrast checking, touch target validation, heading hierarchy audits, responsive screenshots, and S+ grading across mobile and desktop viewports.16 PyPIMIT
mcp-reviewofficial
AlicenseAqualityAmaintenanceAn MCP server for in-loop design review of web previews. It enables agents to submit a preview URL, receive structured findings with suggested fixes, and recheck after applying changes, while never editing code itself.52MIT