Your coding agent
cannot see
Agents ship frontends fast, and blind. They diff text, not pixels — so one finishes a UI task, declares it done, and has no way to know whether the thing it built looks anything like the thing it was asked for.
Normascope gives it a camera and a measuring tape. The agent builds, compares against the mock it was handed, reads a number, fixes, and repeats — converging on the design instead of guessing at it.
npm install normascope-mcpFree, local, and the same engine the CLI runs. No account.
compare → 25.4% aligned · SSIM 71
… edits .pricing-grid gap
compare → 8.1% aligned · SSIM 88
… edits card padding
compare → 0.4% aligned · SSIM 99 ✓
An illustrative run of the loop below. The scores are what the same three commands print on any project.
A measurable signal beats “looks good to me”
This is the whole value in one sentence: the agent gets a number it can move, so it can tell whether its last edit helped.
The agent loop
Agent writes CSS → captures → compares → sees 25% → fixes → compares → sees 0%. It converges, because for the first time it has something to converge on.
Give it one command, or give it five tools
No setup at all
Hand it one picture and one URL. No init, no config file, no account — the fastest way to give an agent a score to work against.
--target mock.png --url http://localhost:3000
Always writes summary.json — no --json needed. The threshold is fixed at 5% in this mode.
Five tools, natively
Point any MCP-capable agent at the server and it gets structured output plus origin-policy enforcement on top of the same engine.
list_framesWhat pages am I tracking?captureTake screenshots of the running appcompareHow close am I?get_summaryGive me the last scores as JSONexplainWhy is it off?
Both call the same comparison code. The MCP server adds the origin policy and structured output — it is not a reimplementation, so a score means the same thing either way.
An agent will absolutely try to fetch anything
Handing a network-capable tool to something that improvises is exactly where visual testing becomes a security question. These are the three guarantees.
Default-deny origins
Only origins in your config can be captured. Cloud metadata endpoints, private network ranges and file:// are refused even when an agent asks — and every refused attempt is written to an audit log.
Five hostile URLs, five refusals, all logged (test T6.2)
Path containment
A target path that escapes the project directory is refused. This is why target mode requires the mock to live inside your project — the guardrail exists precisely because agents drive this command.
Enforced on every target invocation
Page content is data
Text captured from a page comes back as data and is never treated as instructions. If a page contains something telling a model what to do, it is flagged rather than obeyed.
One of the two trust boundaries in the security model
Point your agent at it
The MCP server ships as its own package. Configure it as a command in your agent’s MCP settings, then ask it something like “use normascope to check my homepage against mock.png”.
npm install normascope-mcpTo use explain through MCP, install the optional Anthropic SDK where the server runs and set your key in the MCP server’s environment — not your shell’s.
An agent runs at machine speed. So does its spending.
Cloud issues an agent its own key with a monthly credit budget and a rate cap. When it runs out, it gets a clear message and CI stays green.