Visual language in words
If you can say “editorial, lots of air, one gold line,” you can get close on the first build.
Designers
Keep the eye. Get a running interface.
Boards do not have hover, focus, or a back button that actually goes back. CodeLoom writes the CSS and the components. You stay in the loop by naming type, space, motion — then fixing the last 10% in Monaco if you want.
CSS
From the prompt
Iframe
Source of truth
Monaco
When a pixel is off
Motion
If you ask for it
Why this exists
Your designs, built.
The working loop
Describe the atmosphere: paper, ink, one accent, no junk shadows. Call out the typeface mood. The agent implements a system you can then tighten. Preview is the product, not a screenshot of a frame.
Type ramp
- Display serif 64
- Body 16 / 28
- Caption 12 uppercase
- Button 13.5
In the product
What you actually get.
Not a theme store
Templates are briefs. The CSS is generated for that project.
Live preview
Hover, scroll, type in fields. That is the review.
Edit the file
Studio editor is Monaco. Change a token, save, Vite reloads.
Responsive
Ask for the phone layout. Check it in the builder’s preview pane.
Motion with intent
Name duration and what moves. Random bounce is a follow-up you should reject.
How
A path you can follow without a call.
01
Set the atmosphere
Paper, ink, accent, what is forbidden (drop shadows, stock photos, etc.).
02
Name the screens
Home, product, account. Not “a modern UI.”
03
Review in the iframe
Click every state. Write the three misses as one message.
04
Tighten in code if you want
You do not have to. The option is there.
Questions
Ask these before you waste a week.
Is this a mock or a real app?
Real Vite + React + TypeScript files in a project you own. Preview is a running Vite server proxied through the studio iframe.
What happens when I hit the token cap?
The agent stops until the month resets or you upgrade. Pro is $19.99/month via Whop card checkout. The webhook sets your plan to Pro.
Can I take the code?
Yes. Export a zip from the studio. Secrets are not stuffed into the zip as plaintext from the ciphertext store — add env files yourself after export.
Can I paste Figma?
Not as a file import today. Describe the system and attach screenshots in the prompt if you must. The agent still writes code, not a screenshot.
Who owns the design system?
The generated CSS in that project. Extract tokens when you export if you want a shared package later.
Next
Keep going.
Describe it. Watch it become real.
Free is live. Pro is $19.99/month on Whop. The studio, preview, and export are on this host — not a waitlist.