A file, not a prompt
Your design decisions, written down and binding.
Capture a reference and your own page. Choose what to borrow, what to keep, and what nothing may touch. Your agent gets a versioned contract — and the rendered result is measured against it.
Local-first · Chrome · Codex · Claude Code · Cursor
Change contract — checkout
Headingfont size and weight, from the referenceBorrow
Cardpadding, as your baseline has itKeep
Primary CTAposition — a regression here is an errorLock
Nav linkcolour, as your baseline has itKeep
Primary CTAhover background, from the referenceBorrow
Approved by a humanamended twice · never rewritten in place
The problem
An agent can be told a feature. It cannot be told a design.
You describe what you want, something arrives, it is wrong in a way you can see and cannot name, and the next prompt is a worse version of the first.
What you send today
“Make it feel more premium. Cleaner. You know — like Stripe.”
Nothing here is checkable. The agent guesses, you react to the guess, and neither of you can point at the thing that was agreed.
What RefKit sends
Borrow this heading. Keep this card. Never move this button.
Five clauses, each naming one element and one measurable property. The same file decides whether the result passed.
Reference → your page
You point at two pages. You decide three things.
One capture of the design you admire, one of the page you are changing. Every value is read from what the browser actually rendered — including which colour is doing the work of a primary, and how strictly the page keeps its own grid.
Plate 1 — reference
Plate 2 — your page
13px · off the 8px grid
BorrowTake it from the referencea miss is a requested change that did not land
KeepLeave your own as it isa drift is a finding, with a confidence score
LockNothing may touch thisa regression here is an error
Not a drawing
The panel, on a real page.
Everything else on this page is drawn — plates, clauses, a run. This is not. It is the capture panel beside the test page that ships in the repository, and every value in it was read from that page: the palette with its hex codes, how much of the spacing sits on the grid, the type scale that was found, and which interaction states the CSS declares.
It is a still, not a recording. The loop below is described here, not filmed — when there is a run worth the word proof, it replaces this.
The handoff
It lands in your repository, not in a chat.
The contract is a versioned file on your branch. It survives the session, it shows up in a diff like any other decision, and it can be amended but never rewritten in place — each version names the one it replaced, so an edit made after approval is visible.
Your agent reads it before it writes a line of interface code. Codex, Claude Code, Cursor, Gemini CLI and Windsurf are registered by one install command, and the ones you do not have are skipped.
npx -y refkit-mcp install
Needs Node 20.19 or newer. It backs up every config before it writes, touches only its own entry, and uninstall removes exactly what it added — add --dry-run to see the plan first.
The check
Stop asking whether the agent understood.
Capture the page again. Every clause you approved is measured against what actually rendered. Failures carry numbers, not adjectives — and anything that could not be measured says so rather than passing.
Verification run · 5 clauses · contract v33 violations
Primary CTA moved outside the locked region+62px
Heading weight is not the borrowed one640 → 700
Card padding drifted from the baseline24px → 20px
Nav link colour held#3157ff
CTA hover was declared in CSS, never renderedunknown
after the agent’s fix, and a person’s accept4 / 5 verified · 1 unknown
The last two rows are the ones worth reading twice. A capture that did not cover an element returns unknown — never a pass — and the stamp above refuses to round four measurements up to five. A tool that stays quiet about where it did not look is a tool whose green tick means nothing.
Compared with what you do now
A screenshot shows. A prompt asks. A diff reports. A contract decides.
| Screenshot | Prompt | Visual regression | RefKit | |
|---|---|---|---|---|
| What it carries | How it looked | What you hoped for | What moved | What was decided |
| Written when | After the change | Before it, in words | After the change | Before it, in values |
| What it flags | Nothing — you compare by eye | Nothing | Every pixel that moved | Only the clauses a human approved |
| Who interprets it | The agent, freely | The agent, freely | You, diff by diff | Nobody — the values are named |
| Where it lives | A folder | The chat, until it ends | A dashboard | Your branch, in a diff |
What it refuses
Your signed-in pages stay yours.
A tool that reads your screen earns trust by what it will not do. These are enforced by the extension manifest and by tests that fail closed.
No background captureNo content script and no host permissions. A capture happens because you clicked, on the tab you were looking at.
No cookies, no historyComputed styles and a bounded set of layout facts. Raw page HTML is never collected.
Nothing sent by defaultEverything stays on your machine. The optional bridge talks only to a server you started, behind a token you granted.
Your repository is yoursRefKit produces a pack a person reviews and applies. It never edits your code and never opens a pull request.
Licence
Apache-2.0. Every project. The whole loop.
RefKit is free open-source software. Capture, contract, verification, accept — on as many projects as you run, with no account, no key, and nothing to pay.
Apache License 2.0Free · engine, MCP, and extension
- The whole loop on every project
- Use, modify, and redistribute under Apache-2.0
- Every agent you have installed
- Everything local, and yours to keep
The name and logo stay reserved. Source is at github.com/squadic-ai/refkit. The extension is in the Chrome Web Store unlisted; version 0.1.3 is in review. Terms of use →
The whole thing in one line
Show the design. Make it prove the result.
Join the private beta on TelegramOne person builds this. You will be talking to him.