放大器束ui视觉
你的测试通过了，但UI坏了。 断言检查数据和状态——它们不会捕捉到向左移动40px的按钮或剪切在卡片后面的文本。
它提供了什么
- 剧作家MCP服务器 配置视觉模式(
--caps=vision,--image-responses allow) - 3名专业代理 用于可视化测试工作流程
- 3食谱 用于可重复的视觉测试
代理
| 代理人 | 目的 |
|---|---|
ui-vision:visual-auditor | 全面的可视化UI质量审核 |
ui-vision:regression-checker | 代码更改后的视觉回归检测 |
ui-vision:accessibility-scanner | WCAG重点可访问性分析 |
食谱
| 食谱 | 目的 |
|---|---|
ui-vision:recipes/visual-audit.yaml | 逐页视觉质量审核 |
ui-vision:recipes/regression-check.yaml | 视觉比较之前/之后 |
ui-vision:recipes/accessibility-scan.yaml | WCAG可访问性分析 |
安装
作为一个完整的捆绑包（独立使用）
# In your .amplifier/bundle.md or bundle.md
includes:
- bundle: git+https://github.com/cpark4x/amplifier-bundle-ui-vision@main作为一种行为（组成现有的捆绑包）
# In your bundle's includes section
includes:
- bundle: git+https://github.com/cpark4x/amplifier-bundle-ui-vision@main#subdirectory=behaviors/ui-vision.yaml先决条件
- Node.js （为
npx推出剧作家MCP） - 放大器 带基础束
- 要测试的正在运行的web应用程序
运作原理
User: "Check how the dashboard looks"
|
v
Root Session -> delegates to ui-vision:visual-auditor
|
v
Agent uses Playwright MCP:
browser_navigate -> go to URL
browser_take_screenshot -> model SEES the actual pixels
browser_snapshot -> accessibility tree (structured text)
browser_click / browser_press_key -> interact with UI
|
v
Agent returns structured visual analysis report关键创新：当代理人来电时 browser_take_screenshot，屏幕截图作为base64图像返回，模型可以 从字面上看和描述 -而不仅仅是文件路径。这使得对布局、颜色、排版、间距等进行真正的视觉分析成为可能。
使用示例
在一次会议中
"Check how localhost:3000 looks"
"Did my CSS changes break anything on the settings page?"
"Run an accessibility scan on the signup form"通过食谱
recipes execute ui-vision:recipes/visual-audit.yaml
context: { "url": "http://localhost:3000", "pages": "/,/dashboard,/settings" }许可证
麻省理工学院
______________________________________________________________________
建造于
克里斯帕克 --AI孵化组CTO微软办公室高级项目经理。 滑铁卢大学工程学学位。17年出货期。
领英 ·