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.
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.
There is no config file here, so if you send runs to Cloud we tell pages apart by what the command actually looked at: the URL, the element, the window size. Run the same command twice and it builds one chart. Point it at a different URL and that is a different page.
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-mcpThe MCP tool is called explain and it requires a route of local or cloud. There is no default and no fallback: asking for cloud without organization credentials is refused rather than quietly billed to your personal key, and an agent can never pick the account by accident.
For the local route, install the optional Anthropic SDK where the server runs and set your key in the MCP server’s environment — not your shell’s.
Every command and flag →