RefKit
Closed alpha · design memory for coding agents

Stop explaining design to your agent.

You can describe a feature to a coding agent. You cannot describe a design to it. RefKit reads a real page, turns it into a contract your agent works from — and then checks whether it actually followed it.

Request AccessHow It Works
refkit — side panel
The RefKit side panel beside a pricing page, showing the palette, spacing grid, type scale and interaction states it derived from that page.
Every value here was derived by the engine that ships — including which colour is the primary, and how strictly the page keeps its own grid.

How it works

Four steps, and the fourth is the one that matters.

Handing an agent a style guide is the easy part. Checking that it followed the oneyou approved — not a generic quality score — is where the second prompt usually becomes a worse version of the first.

  1. 01

    Capture

    Read a real page in a real browser, including pages behind a login, and record what was measured rather than guessed.

  2. 02

    Profile

    Merge references into one accepted truth and write it into your repository as DESIGN.md.

  3. 03

    Build

    Your agent reads the contract before it writes a line of interface code.

  4. 04

    Recheck

    Capture the result and lint it against the profile. See what it missed, in exact numbers.

The contract

A file, not a prompt.

The profile is written into your repository. It survives the chat, travels with the branch, and shows up in a diff like any other decision — so a design change is reviewed rather than remembered.

Colour roles come from how a colour was used, not how saturated it is. The grid carries a confidence figure, so a weak grid can never become a strong rule. And when something was not captured, the file says so — an agent told a page has no hover styles will ship an interface without them.

DESIGN.mdgenerated
# DESIGN.md

## Colour

| Role         | Hex       | OKLCH                    | Coverage |
| ------------ | --------- | ------------------------ | -------- |
| `background` | `#ffffff` | `oklch(100.0% 0.000 0.0)` | 87.0%    |
| `surface`    | `#f9fafb` | `oklch(98.5% 0.002 247.8)` | 10.9%    |
| `text`       | `#374151` | `oklch(37.3% 0.031 259.7)` | 0.7%     |
| `primary`    | `#2563eb` | `oklch(54.6% 0.215 262.9)` | 0.7%     |

## Spacing

**Grid:** 8px (100% of observed spacing sits on it)

**Steps (px):** 8 · 16 · 24

## Interaction states

**Captured states:** `hover`, `focus`

## Rules for agents

1. Use only colours from the table above; if a new one seems
   necessary, say so instead of adding it silently.
2. Keep every spacing value on the grid, and every font size
   on the scale.
3. Text must meet WCAG AA contrast — this is not negotiable
   against taste.

The check

Verified, not assumed.

After your agent changes the interface, capture it again. design_lint compares what shipped against what was agreed and reports the difference in exact numbers.

Contrast failures are errors, because accessibility is measured, not preferred. Everything else is a finding with a confidence score, and you decide where the bar sits.

design_lint4 findings
  • errorcontrast.below-wcag
    Text contrast 1.66:1 is below WCAG AA (4.5:1) for 13px/400.
  • warningcolor.off-palette
    #7c3aed is not in the project palette; the nearest accepted colour is #2563eb (primary).
  • warningspacing.off-grid
    13px is not on the 8px grid; use 16px.
  • warningtypography.off-scale
    13px is not on the type scale; the nearest step is 16px.

Install

One command, every agent you have.

RefKit is a browser extension that captures pages and an MCP server that serves the profile to your tools. The installer registers it with every agent CLI on your machine, skips the ones you do not have, backs up each config first, and reverses cleanly.

Then load the extension from apps/extension/.output/chrome-mv3 and ask your agent to call get_style_guide.

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • Windsurf
terminal4 lines
# once you have access
corepack pnpm install
corepack pnpm run install:agents -- --bridge

# registers RefKit with every agent CLI you have,
# skips the ones you don't, backs up each config first

Boundaries

What RefKit will never do.

A tool that reads your screen earns trust by what it refuses. These are enforced by the manifest and by tests that fail closed, not by a promise on a page.

Edit Your Repository

RefKit produces a pack a person reviews and applies. The product that automated this step closed down; the lesson stands.

Run In The Background

No content script, no host permissions. A capture happens because you clicked, on the tab you were looking at.

Read Cookies Or History

It reads computed styles and a bounded set of layout facts. Raw page HTML is never collected.

Send Anything By Default

Everything stays local. The optional bridge talks only to a server you started, behind a token you granted.