Review the live page
with your team -
and your AI agents.
LayoutMark runs the whole design-review loop on the page that actually ships. Comment, screenshot and measure - then hand each issue straight to a teammate or a coding agent over the API. Fixes land in minutes, not Figma round-trips.
Works fully offline and private. No account required.
This gap is off the scale - should be 24, not 25.
Iteration got faster than Figma.
LLMs and coding agents now draft and revise UI in seconds. Making the change isn't the slow step anymore - agreeing on what's wrong and getting it to whoever fixes it is.
Figma is the wrong place for that conversation: it's a copy of the page, not the page. LayoutMark moves review to where the work already lives - the browser - and makes every issue machine-readable, so a human or an agent can act on it.
One review loop - and it never leaves the browser.
Drafts go up, the team reviews the real page, each issue flows straight to whoever - or whatever - fixes it. This is one supported workflow. The possibilities are open.
-
01
Draft
An LLM or coding agent ships a first pass - Claude, a coding agent, a teammate. Whoever put it up, it renders in the browser.
-
02
Review
Your team marks up the live page. Drop a pin on any element - the screenshot captures itself and rides along with the comment.
-
03
Hand off
Every issue is a structured record. Send it to a teammate, or let an AI agent pull it over the documented API and act on it.
-
04
Fix & re-check
The fix ships. Re-review on the real page with the measurements as receipts - green on the scale, amber off it. Then repeat.
Comment on a pixel. The screenshot captures itself.
Drop a pin on any element and LayoutMark grabs the element screenshot automatically - padded, clamped to the viewport - and attaches it to the comment. No cropping, no paste, no "which part did you mean?".
- Pins that survive. Comments anchor by selector, offset-ratio and a text-quote fallback, so they hold through reload, resize and minor DOM changes. The review doesn’t rot when the page moves underneath it.
- Threads, replies, resolve. A full conversation per pin. Mark it resolved when the fix lands - the history stays attached to the spot it was about.
- Screenshots travel with the issue. In the team panel every pin shows its thumbnail - synced from the server, or a local-only badge when you’re offline.
CTA gap reads 25px - nearest token is 24. Can we snap it?
Fixed - token applied. Re-check shows 24px ✓
GET /api/v1/projects/{id}/pages/{key}/annotations
Authorization: Bearer •••
[
{
"id": "a3f29c",
"url": "https://app.acme.com/pricing",
"anchor": { "selector": ".pricing .card:nth-child(2)" },
"measurement": { "gap": 25, "nearestToken": 24 },
"thread": [{ "text": "Gap is off-scale - use 24." }],
"screenshotUrl": "https://…/a3f29c.png",
"resolved": false
}
]Issues your agents can read.
Every annotation - selector, measurement, comment thread and screenshot - is exposed over a documented API (OpenAPI). A coding agent pulls the open issues for a page, sees exactly what's wrong and where, and acts on it. Review feeds the fixer directly, in near real time.
- ▹ Documented REST API - stable, typed, problem+json errors.
- ▹ Validations exposed to Chrome DevTools as third-party tools, so an agent can run the checks itself.
- ▹ Human stays in the loop to review and refine - it's a hand-off, not a black box.
Illustrative response. Fields match the live annotation schema.
Private on your machine, or shared with your team.
Same product, two honest modes. Local isn't a trial tier - it's permanent.
Local & private
Run it solo, fully offline, with zero account. No cloud, no tracking - everything stays in your browser. The honest default for the privacy-minded.
Connected to your team
Sign in to share annotations, design-system profiles and published reviews across the team. Pins sync, screenshots upload, roles are enforced server-side. Built offline-first, so a flaky connection never blocks a comment.
Measurement that turns opinion into proof.
A comment lands harder with a number on it. LayoutMark measures the live page against your design system - so "looks off" becomes 25px · use 24.
Spacing-scale validation
Every gap checked against your tokens. 24px is valid; 25px warns with the nearest token named. Green on the scale, amber off it.
Figma-style measurement
Click an anchor, hover a target, read the horizontal and vertical gaps - the gesture every reviewer already knows.
Per-breakpoint grids
Configurable column/gutter/margin presets, one-click switchable. Every measurement records URL, viewport, DPR and breakpoint.
One keystroke
Alt+Shift+L turns LayoutMark on for the current tab. A floating toolbar switches Inspect, Measure and Grid.
Never touches the page
Overlay and toolbar live in isolated Shadow DOM, the overlay is pointer-events:none, and everything tears down cleanly on disable.
Export the review
Hand the evidence over as JSON, Markdown or CSV - or pipe it into a script or an agent. Don’t retype it.
For everyone in the loop
Front-end
Catch the drift before review does - and drive AI agents to clear the pins.
Designers & UX
Point at the live page, with the number and the screenshot. No screenshot war.
Product
Give feedback on the real, shipping thing - not a deck or a static mock.
AI agents
Read the open issues over the API, run the checks, push the fix.
Stop reviewing screenshots.
Review the live page.
Add LayoutMark to Chrome and run your next design review where the page actually lives.
Free · works offline · no account required to start