1
Add real elements
Build screens out of divs, text, buttons, inputs, and images — the same building blocks as a real web interface.
Mobile-first UI builder for developers
Mock up real UI from your phone.
Divloon lets you build screens out of real HTML elements — divs, text, buttons, inputs — and style them visually with Tailwind-powered presets. No dev environment, no heavyweight design tool.
Save styles as named presets like Card or Primary Button, reuse them across screens, and grow a design system while you sketch.
Real HTML
not canvas drawings
Tailwind
powering every style
Reusable
named styles everywhere
How it works
From idea to screen in minutes.
Divloon is for the moment a UI idea hits while you're away from your computer.
2
Style visually
Pick from sensible choices like small, medium, and large padding. Tailwind CSS does the heavy lifting behind the scenes.
3
Save reusable styles
Bundle choices into named styles like Card or Primary Button and attach them to elements across your whole project.
4
Flip through screens
Add Home, Login, Profile, and more. Change a shared style and page through every screen to see the effect.
Reusable styles
Name a style once. Use it everywhere.
Group styling choices into named presets like Card, Page, or Muted Text. Attach them to any element, stack several together, and when you tweak a preset, every screen that uses it updates instantly. You end up with a design system without ever sitting down to make one.
Why Divloon
Built like the web, sized for your thumb.
Real HTML, not a canvas
Mockups are constructed the way a real web interface works, so what you design maps directly to what you would build.
Tailwind under the hood
Every visual choice maps to Tailwind utilities, keeping your mockups consistent with how modern web UI is styled.
A design system as you go
Reusable named styles grow into a visual language for your app while you sketch — no separate design-token exercise.
Multiple screens per project
Keep Home, Login, Profile, and Settings in one project and move between them quickly while you design.
Made for your phone
The editor is designed for touch first: select, nest, arrange, and style elements comfortably on a small screen.
Instant preview
Switch to preview at any time to see the resulting interface exactly as the elements and styles define it.
FAQ
Quick answers.
Is Divloon a design tool like Figma?
No. Instead of drawing shapes on a canvas, you construct screens from real HTML elements and Tailwind-powered styles, so mockups behave like actual web UI.
Do I need to know CSS?
No. Styling is done through simple visual choices such as small, medium, and large padding. Tailwind CSS handles the details behind the scenes.
What are reusable styles?
Named bundles of styling choices — like Card or Primary Button — that you can attach to elements throughout a project. Update the style once and every screen using it changes.
Can I use Divloon on a desktop?
Yes. Divloon runs in any modern browser, but the editor is designed mobile-first so designing from your phone feels great.
Is Divloon free?
Yes, you can start for free. Create an account or continue as a guest and start mocking up screens right away.
Next time a UI idea hits, mock it up on your phone.
Create a project, add a few screens, and start building your visual language — free.