Checking a build against its design
Picking a design is half the job. The other half is getting your app to look like it. An agent that builds from a screenshot guesses at spacing, font sizes, and colors, and the guesses add up. Wirely closes that gap with a build check.
How it works
- You pick a page on the canvas and ask your agent to build it in your codebase.
- The agent reads the HTML it wrote for that page, so it starts from the real values instead of a picture.
- Once the page runs locally, the agent calls
capture_local_page. Wirely hands back a short command and a signed upload link. - The agent runs the command. It opens your page in a headless copy of your own Chrome, measures it, and uploads the result to that project.
- Wirely renders the design page, measures it the same way, and answers with a report and a diff image.
What the report says
The report lists what differs between the design and your build:
- Copy that is missing or reworded.
- Fonts, sizes, and colors that do not match.
- The areas where the pixels differ most.
The agent fixes what the report names and captures again. The upload link lasts an hour, which is enough for a few rounds without asking for a new one.
What you see
The capture lands on the canvas as a page next to the design. Open either page's menu and pick Compare to see them side by side, overlaid, or as a difference where everything that matches turns black. Wirely does not store the report itself. It goes to the agent, and the two pages stay on your canvas.
What runs on your machine
The capture script is the one thing Wirely asks your agent to run. It uses a fresh Chrome profile, so it carries no cookies unless you pass one with --cookie, and its link can only write to one project. Security has the details.
Without a design page
A capture does not need a design to compare against. Point it at any localhost page and it lands on the canvas, where you can mark it up and ask your agent for directions from there.