HN 표시: Frontend-VisualQA — 코딩 에이전트에게 자체 UI 작업을 확인할 수 있는 눈을 제공합니다.

Gives coding agents eyes for frontend work — visual QA and verification powered by Yutori n1. - Verifies explicit visual claims against a running localhost frontend - Captures screenshots for quick visual inspection - Reuses browser sessions across MCP tool calls for multi-step debugging - Works as a CLI ( frontend-visualqa verify ), MCP server (frontend-visualqa serve ), or agent skill (/frontend-visualqa ) Does not start your dev server. If the URL is unreachable, claims return not_testable . Playwright MCP can click, type, and assert against the DOM — but it cannot see the page. It can run cleanly on the wrong page, assert modal.isVisible() on a modal rendered off-screen, or miss a layout that broke on mobile. n1 is a pixels-to-actions model trained with RL on live websites. Two capabilities matter here: - Self-correcting navigation — Point the agent at the product catalog instead of a specific product page and n1 recognizes the wrong page, clicks through to the right one, and reports trace.wrong_page_recovered: true . Playwright MCP would run assertions on the wrong page and silently pass — garbage in, garbage out. n1 lands on the product catalog→ Navigated to the correct product page - Rich visual evaluation — On the cart page, both items show sale prices ($149.99 and $79.99) but n1 caught that the subtotal of $279.98 uses the original prices — the discount was never applied. On the API dashboard, the quota label reads "100%" but the progress bar is visibly only two-thirds full. Playwright MCP would pass both — the DOM text is consistent and the progress bar width is just a CSS value. n1 catches the discount-not-applied bug Label says 100% but the bar is only at 2/3rds Known limitation - Native dropdowns — n1 cannot see or interact with native HTML dropdown options because they render as OS-level widgets outside the browser viewport. If your page uses native selects, replace them with custom in-browser dropdown components for visual testing, or pre-fill the selection via URL parameters. Install uv if you don't already have it: curl -LsSf https://astral.sh/uv/install.sh | sh - Install CLIs: uv tool install frontend-visualqa \ --with-executables-from yutori \ --with-executables-from playwright playwright install chromium This installs the frontend-visualqa ,yutori , andplaywright CLIs and downloads the Chromium browser binary. - Log into Yutori API: yutori auth login This opens your browser to save your Yutori API key to ~/.yutori/config.json . - Register the MCP server using add-mcp (works with all clients): npx add-mcp -g -n frontend-visualqa "frontend-visualqa serve" Pick the clients you want to configure. - Install skills using skills.sh: npx skills add yutori-ai/frontend-visualqa -g -g installs at user scope. Omit-g for project-local install.Invoke the skill with /frontend-visualqa in Claude Code and$frontend-visualqa in Codex CLI. Agents can also auto-invoke. - Restart your agent (Codex, Claude Code, etc) so the installs are picked up. To uninstall later: uv tool uninstall frontend-visualqa npx skills remove -g frontend-visualqa add-mcp has no remove command. Delete thefrontend-visualqa entry from your client's MCP config (e.g.~/.mcp.json ). Claude Code Plugin (recommended) — installs MCP tools + skill together: /plugin marketplace add yutori-ai/frontend-visualqa /plugin install frontend-visualqa@frontend-visualqa-plugins MCP only (if you prefer not to use the plugin): claude mcp add --scope user frontend-visualqa -- frontend-visualqa serve Codex codex mcp add frontend-visualqa -- frontend-visualqa serve Skills can be installed via npx skills add above, or with $skill-installer inside Codex: $skill-installer install https://github.com/yutori-ai/frontend-visualqa/tree/main/.agents/skills/frontend-visualqa Cursor / VS Code / other MCP hosts Use the checked-in .mcp.json , or point your client at frontend-visualqa serve . From source uv sync uv run playwright install chromium Register the MCP server with your client using uvx --from /absolute/path/to/frontend-visualqa frontend-visualqa serve as the command. Claude Code plugin /plugin uninstall frontend-visualqa@frontend-visualqa-plugins -s user Codex Remove the MCP server entry from ~/.codex/config.toml , then delete the skill directory: rm -rf ~/.agents/skills/frontend-visualqa Restart Codex after removing. The repo includes demo pages you can use immediately — no dev server required: # From the repo root, serve the included demo pages cd /path/to/frontend-visualqa lsof -ti:8000 | xargs kill 2>/dev/null; python3 -m http.server 8000 -d examples & Self-correcting navigation — start on the wrong page and watch n1 find its way: # n1 lands on the product catalog, clicks through to find the product detail page # After each evidence screenshot, the Yutori overlay replays the last action frontend-visualqa verify http://localhost:8000/ecommerce_store.html \ --headed \ --claims 'The product detail page shows Wireless Headphones Pro priced at $149.99' Catching r