Skip to main content
DOGFOOD / VERIFIED LIVE This site is generated and debugged with vlmkit itself.

vlmkit / UI verification Node.js 24+v0.11.1

# VLM-assisted UI.
Verified in the browser.

vlmkit connects an AI agent's VLM vision to real-browser measurements, so it can implement UI from screenshots, find breakage, fix it, and prove the result.

Install one skill. The AI picks and runs the right UI workflow.

APM / RECOMMENDED `apm install mizchi/vlmkit`
SKILLS CLI / NPX `npx skills add mizchi/vlmkit`

Need APM first? `curl -sSL https://aka.ms/apm-unix | sh`

See real results ↓ See how it works
KEY-FREE BY DEFAULT — most gates need no API key
REAL RUN / SCREENSHOT → HTML HAIKU / 4 ROUNDS
AGENT OUTPUT

structure
  6 / 6
component IoU
  0.97–0.99
pixel diff
  1.40%

✓ VERIFIED BY VLMKIT

- 01 VLM VISION
- 02 DOM GEOMETRY
- 03 PIXEL DIFF
- 04 BEHAVIOR GATES

01 / REAL OUTPUT

## Actual output,
measured.

The VLM reads visual intent. vlmkit turns the result into measurements an agent can act on, then reruns the browser until the implementation converges.

01 Reference screenshot The only implementation input
02 Agent implementation Generated HTML/CSS, unedited
03 Measured residual Heatmap gives the next edit
6/6 components matched
≤2px maximum position drift
1.40%pixel diff after 4 rounds
112s small-model completion

CASE 01 / VLM IMPLEMENTATION

### A small model rebuilt the page from pixels alone.

Haiku used its vision with vlmkit's deterministic signals. Four rounds produced all copy, all six regions, the five-color palette, and 0.97–0.99 component IoU.

Read the full run ↗

CASE 02 / ADOPTION FEEDBACK

### It found defects the existing VRT suite missed.

At 375px, integrity found 13px of page overflow. During the fix it caught a new button protruding 29px past its parent—with the selector and exact delta. Four captured states moved from DEFECTS to CLEAN.

`page-overflow-x · 375px · +13px` `button:nth-of-type(5) · +29px`

CASE 03 / MIGRATION

### A visual migration reached zero drift.

An agent migrated Tailwind markup to vanilla CSS using only VRT feedback, reaching 0.0% pixel diff across 7 viewports in 3 rounds.

Read the migration report ↗

02 / PLAYABLE PROOF

NEW IN 0.11 The interaction gates stopped reading markup and started performing the gesture.

## Some defects only exist
while you are dragging.

A pixel diff cannot see a drag that never starts, a card that lands in the wrong pile, or a win banner that never appears. So the site publishes a real game, and proves it the way behavior has to be proved: by playing it.

SEED 1 · PLY 60 · ANIMATIONS OFF Reproducible from the seed: same deal, same 60 moves, animations off.

- 52/52 two seeds played to a win in CI
- 144 plies, with the DOM audited after each one
- 57 tests: the rules headless, the view in Chromium
- 6 interaction families the 0.11 probes drive

Red on any of these blocks the deploy

`vlmkit check integrity` `vlmkit check a11y focus` `vlmkit check a11y touch --level AAA`
Play the demo → Read what 0.11 changed ↗

03 / THE LOOP

## Turn visual opinions
into fixable facts.

A kickback returns the broken location and measurements. Fix it, run again, and keep going until green.

1. 01

   MEASURE

   ### Measure in a real browser

   Capture DOM geometry, rendered pixels, computed styles, and accessibility states under identical conditions.

2. 02

   KICK BACK

   ### Return the exact location

   Go beyond “failed” with the viewport, selector, diff size, and a concrete direction for the fix.

3. 03

   PROVE

   ### Prove it again

   People and agents rerun the same gates and share a single exit-code contract for done.

04 / ROUTE THE TASK

## Route the task
with one command.

No reference image? Tracking change? Defining release conditions? The entry point stays short and the result stays machine-readable.

NO REFERENCE / 3 VIEWPORTS

$ ``

05 / PRINCIPLE

## Vision proposes.
Measurements decide.

An agent saying “done” does not make the page correct. vlmkit turns visual claims into reproducible measurements.

> “The loop is the product.”

◎

### Deterministic

The same input gets the same verdict—geometry and pixels, not a VLM's opinion.

↯

### Actionable

Kickback includes the viewport and selector, connecting each failure to the next edit.

⇄

### Shared by people and agents

CLI, Playwright, MCP, or CI: every entry point follows the same exit-code contract.

06 / AGENT SKILL

## Install once.
Ask naturally.

Add vlmkit once—there are no skill names to learn. Describe the outcome, and the AI classifies the request and artifacts, loads the right workflow, and runs it until the checks pass.

ROUTER 1 install · automatic routing · 11 workflows

00 / Meta entry

### `vlmkit`

Activates automatically for frontend work and selects the matching workflow. It never asks you to pick a skill, and prepares the CLI and Chromium only when needed.

- “Implement this mock.”`mock-markup`
- “Check responsiveness and interactions.”`dynamic-markup`
- “Turn this spec into stable tests.”`spec-to-playwright`

What the AI can choose

01 / VERIFY

### Everyday verification

Check HTML/CSS with no reference design through integrity, copy, responsive, and interaction gates, or scope a diff to one component.

`markup-assist` `component-vrt`

02 / CREATE

### UI creation

Recreate static or dynamic pages from mocks, references, UI Contracts, and behavior briefs.

`mock-markup` `auto-markup` `dynamic-markup` `markup-decompose`

03 / TEST

### Test generation

Turn natural-language specs into Playwright tests, reproducible VRT, and drift healing.

`spec-to-playwright`

04 / MONITOR

### Comparison and monitoring

Explain render deltas, watch recurring regressions, and judge visual equivalence after migrations.

`vrt-markup-synth` `vrt-visual-diff` `vrt-regression-watch` `vrt-migration-eval`

05 / EVALUATE

### Evaluation and hardening

Measure repair performance on known CSS regressions and improve agent-facing tool usability.

`vrt-css-fix-loop` `agent-validation-loop`

Open the detailed guide to all 13 skills ↗

ONE INSTALL / APM

### Install with APM

Install or update APM with its official bootstrap, then add the single automatic router.

$`curl -sSL https://aka.ms/apm-unix | sh`
$`apm install mizchi/vlmkit`

ONE INSTALL / SKILLS CLI

### Install with skills CLI

Add the same automatic router directly through npx.

$`npx skills add mizchi/vlmkit`

07 / START NOW

## Measure the page
you have now.

Node.js 24+. Chromium setup is required only once.

INSTALL

`npm install -D @mizchi/vlmkit`
THEN `npx playwright install chromium`

Read the docs on GitHub ↗