Home
DESIGN.mdStar on GitHub

What do you want to create?

Your collaborative AI assistant to design, iterate, and scale full-stack web apps.

Colors
Foreground & surfaces (light)
Surfaces (dark)
Text
Typography
Geist / 600
Display · 46px
What do you want to create?
Geist
Geist / 500
Heading · 15px
Design, iterate, and ship
Geist
Geist / 400
Body · 14px
A collaborative AI assistant for full-stack web apps.
Geist
Geist Mono
Code · 12px
<Button variant="outline" />
Geist Mono
Signature · v0 generate
Ask v0 to build a three-tier pricing table… ◆ v0 Max ▾
Preview Code
Generated in 4.2s
Ask v0 to build a component — it streams the work, renders a live Preview, and gives you the real React + Tailwind Code. Pick a prompt or regenerate.
Components
Buttons
Generation state
◆ v0 Max Preview Code ● Generated
React Tailwind shadcn/ui
Prompt (input)
prompt → preview → code → deploy
Radius
input · 8
bar · 11
panel · 14
Guardrails
Do
Keep the surface monochrome — near-white / near-black, Geist; let the generated UI carry color.
Make Preview ↔ Code the core interaction — real, readable component source.
Generate real shadcn/ui + Tailwind patterns, not lorem boxes.
Set the Code tab & model name in Geist Mono; everything else in Geist.
Don't
Add a v0 brand hue — the neutral surface is the point.
Set body or UI copy in the mono — Geist carries sentences.
Show only a preview or only code — the split is the identity.
Invent fake component output — mirror what v0 actually generates.