SuperAPI AI 工具集
合作ENAI 行业资讯收藏
全部工具AI智能体visionaire-engine

visionaire-engine

Visionaire Engine 是一个面向 AI 编码代理的确定性 MCP 服务器，为 LLM 提供“眼睛”，用于调试网页设计。它能确定性地告诉 LLM 哪条 CSS 规则在层叠中胜出、位于哪个文件哪一行、为何胜出，并给出爆破半径、作用域内的修复选择器、实时修复试验和 WCAG 对比度审计。项目不含内部 LLM，全部通过 Chrome DevTools Protocol 和封闭规则集计算得出，输出经过 token 预算控制，并针对不可信页面做了提示注入清洗、看门狗超时和弹窗自动关闭等加固。它支持连接 Chrome 或通过 Chrome/Firefox 扩展使用用户自己的浏览器，提供 solve 单一网关及 26 个引擎工具，覆盖解释、像素检查、交互与时序、修复验证等环节，还包含 verify-after-edit 测试框架，可防止代理在未验证的情况下声称“已修复”。项目免费且开源，要求 Node ≥ 22.12 和 Chrome/Chromium。

访问官网

工具介绍

用途

Visionaire Engine 为 AI 编码代理提供确定性的“视觉”能力，解决代理在修改 CSS 时“看不见渲染结果”的问题。代理往往只能输出 CSS 文本，无法看到实际像素，因此容易猜测、误判并陷入循环。Visionaire 读取实时页面，告诉 LLM 准确胜出的规则、所在文件和行号以及原因，让代理第一次就做出正确修复。

主要能力

  • 层叠裁决：确定哪条 CSS 规则胜出，解释其他规则失败的决定性原因，并给出诚实且可操作的编辑指引（如 WordPress 的“站点编辑器 → 样式”）。
  • 归因与定位：提供文件、行号、数据库实体、组件等级别的归因，遵循“行 > 文件 > 数据库实体 > 组件 > 生成 > 未知”的诚实阶梯。
  • 爆破半径与作用域修复：在 explain_styles 中报告修改共享选择器的影响范围，建议使用作用域选择器，避免“改一个按钮却改了所有按钮”。
  • 实时修复循环：inject_css 可在页面上试验修复、观察变化、收敛后再写入源码一次。
  • 像素级检查：check_alignment（组对齐/间距节奏/网格/像素对齐审计）和 pick_color（实际绘制像素采样 + WCAG 对比度裁决）。
  • 交互与时序：事件监听器归因、动画诊断、带源码归因的交互时间线。
  • 验证与证明：assert_visual（17 种断言语法，PASS/FAIL 裁决并给出测量像素和问题元素 uid，支持可重跑的命名套件）、visual_diff（与模型或基线进行像素差异对比，将差异区域映射到元素 uid）、impact_preview（沙箱干跑）、diagnose（排序“为什么坏了”的元凶）、responsive_sweep（逐视口裁决矩阵）、capture_proof（前后证据包）。
  • verify-after-edit 测试框架：通过 npx visionaire-engine init-harness 为 Claude Code 和 Cursor 接入钩子，代理无法在没有验证记录的情况下结束回合声称“已修复”。

使用方式

要求 Node ≥ 22.12 和已安装的 Chrome/Chromium。可从 npm 直接注册到 Claude Code，或从克隆仓库运行。使用 GitHub Copilot、Cursor、Claude Desktop、Google Antigravity 等客户端时，参考 docs/clients.md 的配置。建议在项目根目录运行，以便代理同时访问运行中的站点和磁盘源码。

基本流程：

  1. connect { url: "https://your-site.com" } 启动 Chrome；或 { mode: "extension", url } 通过扩展使用自己的浏览器。
  2. solve { intent: "why is the hero CTA blue instead of white", context: { element: ".hero .btn" } } 路由到诊断计划并给出裁决优先的答案：胜出规则及 file:line、每个对手失败原因、可见性/重叠原因以及一个 NEXT 步骤。element 可以是 uid、选择器或可见文本。若无法判断元素，返回 uid 大纲供选择。
  3. 所有引擎工具可通过 solve 专家模式访问：solve { intent, tool: "inject_css", args: { uid: "e17", declarations: { color: "#fff" } } }。可用 scenario 强制指定计划（如 "overlap-z-index"）。

使用自己的浏览器：Visionaire Bridge 扩展支持 Chrome 系列（通过 chrome.debugger 完整引擎）和 Firefox（通过内容脚本轻量引擎）。Chrome：chrome://extensions → 开发者模式 → 加载已解压 → extension/dist/chrome；Firefox：about:debugging#/runtime/this-firefox → 加载临时附加组件 → extension/dist/firefox/manifest.json。首次 connect { mode: "extension" } 返回一次性配对码，粘贴到 Visionaire 弹窗完成配对（一次即可）。之后 connect { mode: "extension", url } 在代理标签页打开页面，或 connect { mode: "extension" } 检查你共享的标签页。localhost 和 *.test 已预先批准；其他站点会先询问（允许一次/始终/拒绝）。Windows + WSL 也支持。

不使用 MCP 客户端试用：提供 CLI 方式。

验证循环：预览共享类爆破半径（impact_preview）→ 最小改动编辑 → 用 assert_visual 断言（或重跑命名 suite_id），得到 PASS/FAIL + 实际测量像素 + 问题元素 uid → 对 FAIL 用 diagnose 获得排序元凶 → responsive_sweep 逐视口扫描 → capture_proof 打包前后截图和裁决变化。从项目根运行 npx visionaire-engine init-harness 接入包含的 Claude Code 钩子或 Cursor 规则。

适用场景

适合使用 LLM 参与站点设计变更的开发者、vibe coder，以及任何在循环中让 LLM 修改前端的人。尤其适合需要精确归因（哪条规则、哪个文件、哪行）的设计调试、WordPress 样式来源解析、响应式验证和修复后验证。

限制

  • 完整引擎仅支持 Chromium（CDP 是获取匹配规则源码位置的唯一途径）。Firefox 通过扩展获得轻量引擎：CSSOM 层叠及从样式表源码恢复行号，无用户代理规则，无监听器或输入模拟。
  • @layer：无层与有层排序准确，但两个不同层链之间的排序是确定性代理（CDP 不暴露层声明顺序）。
  • 部分依赖的 CDP 字段（specificity、layers）是实验性的；引擎会特性检测并回退（如使用自己的 specificity 解析器），契约冒烟测试会在 Chrome 更新破坏核心协议形状时大声失败。
  • 附加模式仅接受回环 DevTools 端点。
  • 在用户自己的浏览器中，evaluate 和资源加载 CSS 被禁用；cookie/存储协议方法被阻止。
  • 项目免费且开源，具体收费和价格暂未提供。

同类工具

查看分类