Skip to main content

Guided setup

When you start from the Codalio start page, your project opens in a guided setup. It walks you through each decision in order and pauses for your approval at every important step. A strip of steps across the top shows where you are.

It's free

The guided setup is free, whatever plan you are on: your documents, your prototype and your edits. You only need a paid plan when you start building production code.

Step 1: A few questions​

Codalio reads your idea, works out what it still needs to know, and asks one question at a time. Questions cover things like:

  • the problem your product solves,
  • who it's for,
  • key features,
  • your revenue model,
  • your launch goal.

For each question you can pick one or more answers (Select all that fit), choose Something else and answer In your own words, or let Codalio choose (You decide). To skip every remaining question, click Skip all. Let AI decide. Nothing is written until you answer.

Step 2: Your Product Desk​

Your answers become the Product Desk: the plan your app is built from. It runs everything downstream.

  • Sections appear as they are written. You can start reading straight away.
  • Click Edit on any section to change it by hand.
  • Ask in the chat to rewrite anything, for example "make the pitch punchier".

When you're happy, click Approve Product Desk. You can still change any section afterwards.

Step 3: Show us your taste​

The design studio asks for your taste before anything is styled:

  • Tone: pick a feel, or describe it in your own words.
  • Reference sites: links to sites whose look you like.
  • Screenshots: drag in screenshots of apps you like (PNG, JPG or WebP).

All of this is optional. Click Start the design spec to continue, or skip ahead and let the studio propose a look you can redirect.

Step 4: Your Design Spec​

Codalio lays out your screens and navigation, then chooses your look and feel. Each decision appears as it is made. Review the colours, fonts, corner radius and planned screens, change what you like, then click Approve design spec. See Design Spec for every option.

Step 5: Building your prototype​

Codalio builds your prototype screen by screen and checks each one against your Product Desk. You can watch each screen appear. When everything is built, Codalio checks the code so your first look opens cleanly. This usually takes under a minute.

If the build doesn't finish, your Product Desk and Design Spec are safe. Click Try building again. It builds from the design you approved and doesn't re-think it.

Step 6: First look​

Your prototype opens, built from your two documents. Click through it, ask for changes in the chat, and click Approve prototype when it looks right.

Step 7: How building works​

Codalio explains what happens next and shows the plans. You can:

  • Pick your plan and start building production code, or
  • Stay on the free plan for now and keep refining. Your prototype and documents are yours either way.

After this, your project opens on the normal project page, with the Build stage next. A short tour shows you where to refine your PRD and where to start the build.

Reopening a step​

You can reopen the Product Desk, the Design Spec and the plans step from the step strip at any time.