12 tokens · 9 components · 5 pagesevery value editable
This interface was generated from one prompt.auto-advancing · hover to pause
Claude Design gives you a mockup.
Figma Make gives you pages.
Coherent gives you the whole product UI and a Design System.
Built for teams shipping with AI editors
VS Code
Cursor
Claude Code
Windsurf
Zed
JetBrains
VS Code
Cursor
Claude Code
Windsurf
Zed
JetBrains
[01]The problem
You've seen this before.
You prompt a multi-page UI and the first page is great. The second has a different header. The third has different buttons. By page four you're spending more time fixing inconsistencies than shipping. Each page is generated alone, without memory of the last one.
Every AI tool today
✕every page drawn from scratch
✕components drift between generations — no shared foundation
✕change a color? edit every page by hand
✕no Design System — ever
✕hand off = a pile of pages, not a codebase
With Coherent
pages built from shared components, not redrawn each time
edit a component once → every page using it updates
change a style or token → cascades through every component using it
Design System grows alongside the UI — no manual DS work
hand off = product + Design System, shipped together
[02]What is Coherent
One brief. Many pages. One Design System.
Coherent is an AI design method for multi-page products. You write a brief. Coherent turns it into a plan, then generates every page — interconnected, with shared components and a Design System that grows as pages land.
Output is a clean Next.js + Tailwind + shadcn/ui project. Show it to stakeholders. Hand it to devs. Or ship it as your real frontend and wire a backend later. Your code. Your design system. No lock-in.
design-system.config.ts
auto-generated
color · 4 tokens
#3ecf8e
#0a0a0a
#141414
#ededed
typography · 2
AaGeist Sans
aaGeist Mono
radius · 4
sm2
md6
lg10
xl14
spacing · 4pt
4
8
12
16
24
32
components · live · 9 registered
successerror4 shared
togglecheckboxradioslider4 shared
12 tokens · 9 components · 5 pagesevery value editable
As you describe the UI, a Design System builds itself.
Every component gets a stable ID. Every token you touch — a color, a font, a spacing step — lands in design-system.config.ts. By page three, you have a living DS you can open, audit, and edit.
[03]How it works
See it in action.
Five commands from empty folder to a deployable multi-page UI. No templates to clone, no design system to bootstrap.
01
Scaffold the project
$coherent init my-app && cd my-app
30 seconds: a Next.js project with a design-system.config.ts, component folder, and docs — ready to customize.
02
Describe what you need
$coherent chat "add a dashboard with revenue stats and user growth chart"
Coherent generates a complete dashboard. Real components. Real data. Not a wireframe.
03
Add more pages
$coherent chat "add a settings page and pricing page with three tiers"
Every new page automatically reuses the same Header, Footer, and design tokens from the dashboard. No copy-paste. No drift.
04
Preview and iterate
$coherent preview
Hot reload. Open the project in Cursor or Claude Code and describe changes in chat — edits cascade through the DS.
05
Ship it
$coherent export --output ./my-app
Clean Next.js project. No platform code. Deploy to Vercel in one click, or hand off to your team.
[04]Two ways to build
Use the terminal. Or your editor. Or both.
CLI
Run commands in your terminal. Each goes through the full pipeline: AI generation → component reuse → validation → auto-fix.
$coherent init my-app
$coherent chat "add a dashboard"
$coherent preview
Cursor / Claude Code / any AI editor
Describe changes in your editor's chat. Coherent provides context via .cursorrules and CLAUDE.md — your AI knows about shared components, design tokens, and quality rules.
Example prompts
"make the hero headline larger"
"add hover shadow to the feature cards"
"change the footer layout to two columns"
Different tools, shared foundation. CLI runs the full pipeline — generation, reuse, validation, auto-fix. Editor chat gives you speed with AI-powered design-system context. Run coherent check anytime to scan quality, shared components, and internal links.
[05]How it compares
Different tools, different goals. Here's where Coherent fits.
Most AI UI tools optimize for a single artifact — a page, a mockup, a set of screens. Coherent optimizes for the product around them: the shared components, the tokens, the Design System that stays honest as the app grows.
Tool
Scope
Output
What you get
v0 · Lovable
Single page
Next.js / React code
A page, fast
Claude Design
Visual mockup
Canvas + exports (HTML / PPTX / PDF)
A designed mockup
Figma Make
Multi-screen prototype
Code + prototype
Connected screens
Coherent
Multi-page product UI
Next.js repo + Design System
Pages + a DS that grows with them
Use v0 / Lovable for quick one-off pages. Use Claude Design when the output is a visual review. Use Figma Make when the handoff is a prototype. Use Coherent when the end-state is a multi-page product with a Design System you own and can ship.
[06]Atmospheres (optional)
Start from a Design System. Customize everything. Or build your own.
Atmospheres are pre-wired Design System foundations — typography, color, spacing, motion, and layout decisions made in advance, so no generation starts from a blank canvas. Pick one, see the first page, like the direction? Tweak any token from there. Don't like the direction? Drop it and define a Design System from scratch. Atmospheres are the head start, not the ceiling — and the reason generated UI doesn't default to the same Inter-plus-purple-gradient look every AI tool produces.
traces · prodlive
p99 latency
124ms−8ms
Save querycancel
atmosphere
Console
Dev-tool dark. Mono as accent. Electric green. Tight spacing. For tools people will read the docs of.
Cream backgrounds, humanist sans, rounded corners, slow motion. For friendly software that treats users like people.
Fit: Mercury, Basecamp, Hey, Arc
№ 12 · essay
On the art of naming.
Naming is invention. It is also constraint.
by Sergei K.Read →
atmosphere
Editorial
Magazine-like. Serif headlines. Narrow measures. Generous whitespace. For content-first products that want to be read.
Fit: Stripe Press, Every, Are.na, Pudding
acme · overviewv2.1
MRR$42.1k+12%
Users3,204+8%
Churn2.1%−0.4
View reportExport
atmosphere
Minimal
Monochrome. Clean sans. No accent flair. Grid-driven. For pro-neutral products where the product is the story, not the decor.
Fit: Vercel, Linear, Raycast, Plausible
new2026 / drop 04
MAKE IT LOUD.
Get it →Info
atmosphere
Bold
Raw contrast. Huge type. Hard edges. Black-and-white with one loud color. For statement brands that want to be remembered.
Fit: Awwwards portfolios, Gumroad, Pitch, Figma community
define your own
atmosphere
Define your own
Skip the presets. Define fonts, palette, and rhythm in design-system.config.ts. Save it — it becomes your 6th atmosphere.
Fit: anything you want it to be
[07]Getting started
Try it in 60 seconds.
terminal
$npm install -g @getcoherent/cli
$coherent init my-app
$cd my-app
$coherent chat "create a SaaS app with dashboard, settings, and pricing pages"
$coherent preview
That's it. Five commands. A complete multi-page prototype with shared components and a Design System. Bring your own Claude or GPT key — typical cost per page: $0.01–$0.03.
[08]Open source
Free. Forever. MIT.
Everything's in the open source tier. No paid gates, no usage limits. Sponsoring is optional — fuel for shipping the atmosphere engine faster.
Open sourceeverything unlocked
$0· MIT · forever
Everything. No paid tier, no gated features, no usage limits. You bring your own LLM key.
Unlimited projects
All 10 atmospheres (Swiss Grid, Paper Editorial, Neo-Brutalist, Dark Terminal, Obsidian Neon, Premium-Focused, Warm Industrial, Solar SaaS, Wabi-Sabi, Luxury Editorial + your own)
Founders building multi-page prototypes, designers who ship code, product teams that need clickable demos that behave like real software, and devs who want a clean Next.js starting point with a Design System already in place. If your work is one-off single pages or canvas mockups, v0 / Lovable / Claude Design cover you. If you need interconnected pages plus a DS that grows, that's Coherent.
Do I need to know how to code?
No. You describe what you want in plain English — pages, atmosphere, tweaks — and Coherent writes the code. Everything (components, tokens, pages) is editable by describing the change you want. The output is standard code, so if you or your dev wants to open a file directly, everything is transparent and readable. English-first, code-always-available.
How is this different from v0, Lovable, Claude Design, or Figma Make?
Different shape of problem. v0 and Lovable ship a single page fast. Claude Design outputs canvas mockups you export or hand off. Figma Make generates multi-screen prototypes. What none of them hand you: a durable Design System that survives across pages and dev handoff. Coherent targets that gap. Every generation writes to a shared component registry and design-system.config.ts, so by page three you have a living DS you can open, audit, edit, and ship. Use those tools for one-off explorations. Use Coherent when you need a coherent multi-page product (and a DS you own).
Does Coherent work with my existing Next.js project?
Not yet. Today Coherent is a scaffolder: `coherent init my-app` creates a new Next.js 15 project, and `coherent chat` iterates on pages inside it. Retrofit into an existing codebase (`coherent adopt`) is on the roadmap for v0.8.x. For now, the cleanest path is: scaffold a new Coherent project, lift components and tokens over manually, then point your existing backend at it.
Can I import my existing Figma tokens or design system?
No direct import today. Coherent generates tokens into `design-system.config.ts` plus CSS variables at scaffold time. If you already have a palette, typography scale, or spacing system, the fastest path is: pick the closest atmosphere, open `design-system.config.ts` and `globals.css`, and paste your values in — everything cascades from there. A Figma / JSON token import is on the roadmap.
What happens when the LLM context fills up on a large project?
It doesn't. Each page generation receives a curated context — only the shared components the plan says it uses, design rules matched to the page's sections, and up to 3 same-type existing pages. Prompt size stays roughly constant whether the app has 3 pages or 30. With prompt caching (Claude), per-page cost stays linear as the project grows.
Does it support React Server Components and Next.js 15 App Router?
Yes. Coherent targets Next.js 15 with the App Router by default. Generated pages are Server Components unless they need interactivity (hooks, event handlers, browser APIs) — then Coherent adds `'use client'` as needed. Tailwind CSS v3 or v4 is auto-detected from your `package.json`; v4 tokens ship in the right format automatically.
Can I use it with Cursor, Claude Code, or other AI editors?
Yes. Coherent provides context to any AI editor via .cursorrules and CLAUDE.md files. Your AI editor knows about every shared component, every design token, and every quality rule. Start in the terminal with `coherent chat`, continue in Cursor with natural language, switch back for a validation run — same project, shared foundation.
What do I get after export?
A clean Next.js 15 project with Tailwind CSS and shadcn/ui. Standard React, standard TypeScript, no Coherent runtime dependency. Use it as (1) a clickable stakeholder demo, (2) a handoff artifact for a developer, or (3) production frontend with your own backend wired in. Deploy to Vercel, Netlify, Fly, Cloudflare, or self-host. Your code, your choice.
What AI model does it use?
Works with Anthropic Claude (recommended — best results, especially with prompt caching) or OpenAI GPT. You bring your own API key — prompted once at setup. Typical cost: $0.01–0.03 per page. A 5-page app scaffold costs roughly $0.10. No subscription, no middleman, no platform fee.
Is it production-ready?
The current release is stable for prototypes, internal tools, stakeholder demos, and dev handoff. 1,068 tests passing, 23 design principles enforced, MIT licensed. For bet-the-company public product UI, treat the output as a strong starting point and do a human polish pass. For fast internal dashboards and handoffs, ship today.
Where do I get help?
GitHub issues for bugs and feature requests — response usually within 24h. GitHub Discussions for questions. The full RULES_MAP and IDEAS_BACKLOG are open on the repo — you can see exactly what's shipped, what's planned, and why.
Question not here? Open an issue on GitHub — response usually within 24h.Open issue
One brief. Whole UI in hours.
$npm i -g @getcoherent/cli
MIT · open source · bring your own Claude / GPT key