Eight design directions, six screens
Describe the app.Get the design.
Zivo commits to a design direction — editorial, precision, nocturne — then designs six mobile screens in it, on a palette derived from one hue. Tap through them in the browser, then take the whole thing away as code.
Six screens, one direction, every file yours
Lumen
Track how much daylight you actually get
Today
06:58
Label
19:24
Label
48.2k
Label
01Today
History
02History
Settings
Daily goal
Reminders
03Settings
Why it does not look generated
Anything can produce six rounded cards on a grey page. Producing six screens that look like one designer made them, on purpose, is the hard part — so most of Zivo is structure that makes the generic answer impossible to reach for.
It commits to a direction
Editorial, precision, utility, nocturne — eight design languages with real parameters: type family, radius, density, and the one signature move. The brief picks one and every screen holds it. That commitment is the difference between a design and a template.
One hue, one coherent palette
Every surface, border, and state derives from a single hue chosen for the product. An incoherent palette is not something the design can express — it is ruled out by the token system, not by asking nicely.
Real screens, real code
The design runs in a micro-VM as an actual Next.js app. Tap through it, then read or download every file behind it. Nothing is a flat image and nothing is hidden.
Refine in conversation
Ask for a warmer palette, a denser list, a different home screen. Follow-ups patch the same design with the full history and the files already written, so changes stay surgical.
A description, then a design
- 1
Describe it
A name is enough. A line about what it does is better. A line about how it should feel — dark and calm, dense and precise, editorial — is best, and is taken as an instruction rather than a hint.
- 2
A direction is chosen
An agent decides what the product actually is, then commits to one of eight design directions and a single accent hue. That decision fixes the type, the radius, the density, and the signature move before a screen exists.
- 3
Then built in it
Six screens, each against a real phone frame, all holding the same direction. Open the preview, tap any screen to walk through it, and download the source.
Your keys, routed by job
The design agent gets the strongest model you have a key for, because the design is the product. The three short agents — brief, title, reply — go to a fast one, which also keeps them off the design agent’s rate limit. Add a key and Zivo routes to it; pin any role by hand.
# .env
ANTHROPIC_API_KEY=sk-ant-…
GROQ_API_KEY=gsk_…
# optional per-agent pins
AI_CODE_PROVIDER=anthropic
AI_TITLE_PROVIDER=groq
- Anthropic
- OpenAI
- Google Gemini
- Groq
- DeepSeek
- Mistral
- OpenRouter
- Cerebras
- xAI
Your first design takes about two minutes
Sign in with Google or GitHub, describe what you want, and watch six screens come together in one direction.
Start designing