See the real thing.
Open the URL, preview, simulator, image, or rendered PDF. Capture locale, theme, data, and permissions.
OPEN SOURCE AI AGENT SKILL
Turn any reference
into a working interface.
An evidence-first protocol for mirroring websites, apps, images, and PDFs into editable interfaces — with the proof to show what changed.
npx mirror-goal install
Install once · use /mirror with any compatible AI agent · MIT licensed
MIRROR JOB / DEFAULT STATE
evidence captured
source → targetfrom reference to component
every stateloading · empty · error · focus
3% linedefault visual threshold
open by designMIT · public on npm
THE PROTOCOL
Make the interface
measurable.
Mirror Goal treats the source as a contract. It opens the real thing, turns sight into structured evidence, and gives the agent a line it cannot quietly move.
Turn sight into structure.
Segment surfaces and controls. Record coordinates, styles, roles, content, and actions.
Use real components.
Translate the source into accessible HTML/CSS or native components. Never use the screenshot as a background.
Let the diff decide.
Replay every state, compare the evidence, and block completion when the threshold is exceeded.
WHY MIRROR GOAL
A screenshot is a clue.
The contract is the product.
Coordinates, computed styles, semantic roles, and interaction states turn visual similarity into an implementation you can inspect, change, and trust.
Read how the artifacts work01segments.jsonregions + normalized bounds↗
02elements.jsonroles + actions + content↗
03styles.jsontype + color + spacing tokens↗
04report.visual.jsondiff + threshold + verdict✓
ANY SURFACE
One command.
Every direction.
From web to app, image to web, or PDF to a working surface — the evidence changes shape, not standards.
SOURCETARGETMEASURED
WEBWEB / APP
DOM · accessibility · computed styles · states
APPWEB / APP
native tree · testIDs · simulator captures · safe areas
IMAGEWEB / APP
pixels · segments · bounds · inferred semantics
PDFWEB / APP
pages · text blocks · page coordinates · layout
CONTROL THE DELTA
Set the line
before you mirror.
Visual tolerance is explicit, versioned, and visible in the final report. Tighten it for production. Loosen it only with a reason.
DIFFERENT PIXELS3%
1% strict10% exploratory
A production-minded default for a faithful mirror.
BEFORE YOU MIRROR
Questions before
the first mirror.
A short guide to the inputs, outputs, tolerance, and implementation rules behind an evidence-first mirror.
What is Mirror Goal?
Mirror Goal is an open-source AI agent skill that inspects a source, captures its states, segments its surfaces, records coordinates and styles, builds an editable target, and verifies the result against a configurable visual tolerance.
What can Mirror Goal mirror?
It supports web, app, image, and PDF sources, with web or app targets. The source and target can be chosen for the direction of the work.
How do I install Mirror Goal?
Run npx mirror-goal install in a terminal. Then use the /mirror command in a compatible AI agent with a source and a target.
Can I configure the visual tolerance?
Yes. The default visual threshold is 3%, and Mirror Goal keeps the tolerance explicit in the job configuration and verification report.
Does Mirror Goal use screenshots as backgrounds?
No. Screenshots are evidence for measurement and comparison. The destination is built with real HTML, CSS, or native components.
GET THE SKILL
Bring the protocol
into your next build.
Install it into any compatible AI agent, point it at a source and a target, and keep the artifacts when the UI matters.
npx mirror-goal install