OPEN SOURCE · LOCAL-FIRST WORKFLOW · YOUR MODEL, YOUR CALL

Your code
can see the page
now.

FORMA gives your coding agent eyes, a browser, and a UI/UX specialist. It spots what the DOM can’t explain, then helps your coding model fix what it finds.

INSTALL FORMA ↓SEE HOW IT WORKS ↘
⌖ Made for developers and vibe coders who want to ship interfaces that feel right.
LIVE AUDIT / WEB.APP390 × 854 ●
localhost:3000 / checkout
•••
MONOFORMSHOP   JOURNAL   BAG (2)
OBJECT
NO. 04

Less stuff.
More feeling.

Thoughtful everyday objects, made to stay.

DISCOVER THE COLLECTION ↗
01 — VISUAL HIERARCHY02 — TOUCH TARGETS03 — COLOR CONTRAST
FORMA VISION AUDIT3 SIGNALS
01Primary action gets lost against the hero.HIERARCHY
02Mobile nav links fall below 44px.TOUCH
03Body copy is 12px at 390px viewport.TYPE
AGENT: FIXING 3 ISSUES
VISUAL DEBUGGING SYSTEM → 001—∞
SCREENSHOT×MEASURED CONTEXT×MODEL JUDGEMENT×CODE CHANGE×VISUAL PROOF×SCREENSHOT
// 001 — THE LOOP

Not another
code autocomplete.

Most coding agents are good at changing code. FORMA adds the missing feedback loop: open the real page, collect browser facts, ask a vision model what feels off, let your coding model make the change, and compare the result.

01 / LOOKOpen your page at desktop, tablet, mobile.
02 / MEASURECapture pixels, DOM, console, network, accessibility.
03 / REASONFORMA audits the screenshot with measured context.
04 / FIXYour coding model edits. FORMA checks the delta.
// 002 — THE BROWSER TOOLBOX

See the details.
Ship the fix.

One MCP server. Every MCP-compatible coding agent and IDE can plug in. Keep your editor; give it a browser.

01
◉
LIVE BROWSER

Responsive page capture across real viewports.

02
▧
SCREENSHOT + DIFF

Before/after visual change map.

03
⌁
DEVTOOLS TELEMETRY

Console, crashes, requests, fonts, overflow, targets.

04
◈
AXE + LIGHTHOUSE

Accessibility violations and performance signals.

05
⊞
SPACING + GRID

Sibling gaps, padding, section rhythm, 8px grid.

06
◍
CONTRAST + TARGETS

WCAG text contrast and undersized controls.

M
C
P

Bring your own agent. OpenCode, Claude Code, Cursor, Windsurf, VS Code, or any MCP host. FORMA’s browser tools stay portable.

MCP SETUP ↗
// 003 — TWO MODELS. TWO JOBS.
VLM / THE EYE

FORMA sees
the interface.

A fine-tuned Qwen2.5-VL adapter trained for single-turn UI/UX audits. It reads the screenshot and measured browser context, then returns a structured report.

NO TOOL CALLINGNO CODE EDITINGONE JOB: AUDIT
LLM / THE HAND

Your coding model
makes the change.

Choose an OpenAI-compatible provider or local Ollama model. It gets the normal coding workflow—files, shell, search, plans—plus the browser tools.

YOU PICK PROVIDERASK BEFORE ACTIONSYOU STAY IN CONTROL
SCREENSHOT + TELEMETRY→FORMA AUDIT→CODE EDIT→VISUAL DIFF↻
// 004 — BOOT SEQUENCE

From zero
to eyes open.

Start the FORMA model in your Kaggle notebook, install the CLI, then connect your endpoint and coding model. Your tunnel URL changes when the notebook restarts.

$ npm install --global @forma-ai/forma
01
START THE MODEL

Run the single-cell Kaggle server. Copy the URL and bearer token printed at startup.

02
INSTALL THE AGENT

Install Forma with npm. Chromium is downloaded on first browser use.

03
CONNECT YOUR MODELS

Paste the Kaggle endpoint and token. Choose your coding model provider.

04
ASK FOR THE FIX

Run forma audit https://your-site.dev, or enter a workspace and describe what to build.

// READY WHEN YOU ARE

Make the loop
visible.

Bring your local page. Bring the model you trust to write code. Let FORMA tell you what the screenshot sees.

EXPLORE THE REPO ↗READ THE QUICKSTART →
FORMA / VISUAL UI DEBUGGING
OPEN SOURCE TOOLING · EARLY BUILD
NO ACCOUNTS. NO PRODUCT TELEMETRY.