How it works
How Front End fits your workflow
The missing layer between design intent and shipped front-end, for teams who already vibe-code and need business rigor without a second tool to live in.
Sign up and connect
Create a free account. Accept terms (engine access is licensed; no reverse engineering or circumvention). Copy your access key and run:
npx @thefrontend/connect FE-XXXX-XXXX-XXXXYour access key authenticates licensed engine use via MCP. Do not share keys. See Agent Integrity.
Work in your coding agent
v1: Claude Code is the reference host — run connect in your project folder, then invoke Front End from chat. Cursor and VS Code follow the same MCP-in-repo model when your agent supports it. Front End stays idle until you call it.
Example prompts:
Map this repo with Front End and show coverage.
Use Front End to add a pricing section, stay on-system.
Flag off-system values and suggest what to promote.
Open the canvas when you need the map
From Hub, open your project on the infinite canvas: multi-page, desktop and mobile, system ⇄ page. Optional. Most days you're in the repo.
Share a snapshot (optional)
When a page is ready for feedback, use Share preview in the canvas. Your client opens a simple link — no Front End account. Comments for clients land on the Team plan when we ship it.
Capture drift. Ship code.
When reality diverges, promote back into the registry. Coverage stays honest. Output is code, not a spec someone else rebuilds.
Where Front End sits
| Claude Design | Front End | |
|---|---|---|
| Primary surface | Their canvas | Your repo + agent |
| Direction | System → output | Bidirectional |
| Deliverable | Handoff | Code |
| Team rigor | Light | Approvals, coverage, shared system |