Vibe coding · Start by drawing

Start with what you want to make.
Keep design and AI work in one place.

Describe an idea or bring a project you have already started. Refine the flow and work with the AIs you need. Review submitted results and the next changes in the same project.

Draw your first picture → Show me how it works

No card needed · Free for as long as you're building on your own

What you drewdrawing = brief
SCREENSCREENSCREEN Product listCartOrder done To your AI — one task + needed context no long prompt required
Sound familiar?

You know exactly what you want —
then the first sentence stops you

The picture is right there in your head: how many screens, what leads where. But putting it into words means deciding where to start and how much to say — and that's where it stalls.

In your head · and the empty box
it's all in there ? PROMPT I want to build an app that 30 minutes in
Where do I even start

Screens first? Buttons first? Half an hour gone on line one.

You write a lot, you get something else

Each correction gets longer, and the result keeps moving away from your picture.

Every new chat starts over

Yesterday's decisions are gone, so you explain all of it again.

So do the opposite

Describe it or draw it. Start where it feels natural.

Two boxes and one arrow. That's enough to start.
'This screen leads to that one' — one line says it better than ten sentences.

This much is a start2 boxes + 1 arrow
SCREEN Product list SCREEN Cart no need to draw it well · crooked is fine
Three steps, that's it

A design starts the work and guides the next change

Choose what to make and include the relevant background and guidelines in a work request. Your connected AI tool performs the work; compare submitted results in the project.

1 · You draw
Your canvas
SCREEN Cart DRAWING Pay just write the name

Boxes for screens, arrows for steps

Drop a box for each screen and connect the ones that lead to each other. Writing the name is all it takes.

→
2 · DroFi tidies it up
App blueprint
APP BLUEPRINT Product listCartPay MUST HOLD · 7-day refunds IN ORDER

See the whole flow and refine the part you need

What exists, what leads where, what has to hold true — all laid out in order. Nothing extra to write up.

→
3 · Send it with context
Whichever AI you use
DRAWING Cart app Task + context Claude ChatGPT Cursor same picture everywhere

One-line task, with the right context

DroFi selects the relevant blocks and guidelines and sends an execution prompt. Your connected Claude, Cursor or other AI performs the actual work.

Example · A shopping cart app

You do not have to decide everything up front

You don't finish it up front. Start with two boxes, then add things beside them as they come to you.

Frame 1 · Start30 seconds
SCREEN Product list SCREEN Cart the rest is still empty — fill it in later

Two boxes is a start

'Browse products → add to cart.' Thirty seconds and you're going.

Frame 2 · Add as you goas it comes
SCREEN Product list SCREEN Cart FEATURE Pay SCREEN Order done the arrows carry the order

Add whatever comes to mind

'Pay → done.' Got the order wrong? Just move the arrow.

Frame 3 · Fill the gapsDroFi asks
SCREEN Product list SCREEN Cart FEATURE Pay SCREEN Order done DROFI ASKED Pay fails → try again MUST HOLD Refunds within 7 days

Just answer what it asks

'Where do people go if payment fails?' Answer, and a box appears right there.

That's the whole thing. Write one line of work against the drawing, and DroFi sends it to your connected AI with the context it needs.

Blank page? No problem

You never have to stare
at an empty screen

Not sure what to draw? It asks first

DroFi points at the gaps — 'where do people go if payment fails?' — and the moment you answer, a box appears right there.

Half-finished works fine

You don't have to fill everything in. Two boxes is enough to start, and the rest can arrive while you work.

Change it, and the next request sees it

An AI connected over MCP asks DroFi again when it starts the next task and receives the latest source of truth at that moment. Copies and downloaded files remain snapshots.

Pricing

Start free

No card required. Free for as long as you're building on your own.

Starter Free

Start solo · try it out
₩0 / up to 2 editors
  • The drawing canvas · 2 projects
  • Tailored context delivered on request or copy
  • Alerts for relevant changes only
  • 100K tokens per person per month (200K for your first 2 weeks) · after that, connect your own AI for free
  • Email · Google · GitHub login
Start free

Team Pro

When someone joins you
₩9,900 / editor · month
  • Up to 10 editors · viewers free
  • 5 projects · GitHub code import
  • Shared definitions that prevent conflicts · permissions
  • Secure share links · activity log
  • 1M tokens per person per month · after that, connect your own AI for free
Start as a team

Choose Free, Team or an Organization pilot. There are no payments during the current beta; contact us about an organization rollout.
See all plans →

Get started

Keep building your project here

One box is a start. The rest can fill in as you go.

Draw your first picture → See the three steps again