Prototype: your UI
The UI prototype is a working, clickable version of your app's interface. You can test the screens and flows before any production code is written.
Generate your prototype
Your PRD needs enough detail first. Once it's ready, either:
- click UI Prototype under the chat, or
- open the Prototype stage on the Project Lifecycle bar and click Generate UI Prototype.
If your project uses a Design Spec, approve it first (Review design spec). The prototype is built with it.
Building can take up to 10 minutes. You can leave the page: Codalio emails you when your preview is ready.
Explore it
The prototype page has the chat on one side and your app on the other.
- Switch between Preview (your app) and Code (the files behind it).
- Use the full-screen button to see the app on its own.
- In Code view, show or hide the file explorer.
- A status badge shows Saving..., Saved or Unsaved changes.
Refine it in chat
Describe what you'd like changed, for example:
- "Add a search bar to the top of the dashboard."
- "Make the pricing page cards a single column on mobile."
- "Use a darker header with white text."
You can also attach reference images, or use quick actions such as Make the UI more modern, Make the colors more vibrant, Improve spacing and layout and Simplify the design. Each change uses credits.
If Codalio notices a problem with your preview, it asks "There might be a problem with your Preview. Do you want to attempt a fix?" Click Attempt Fix to let it repair the error.
Keep it in sync with your PRD
When your PRD changes after the prototype was built, a banner tells you the prototype is out of date:
| Button | What it does |
|---|---|
| Apply Latest PRD | Updates the prototype to reflect your latest PRD changes. Uses credits. |
| Generate locked pages | Your plan changed and more pages are now available. Builds only those pages. Uses credits. |
If Codalio finds no changes that affect the prototype, it tells you so and nothing is charged.
Some older prototypes were built with Codalio's previous UI system. If yours was, you'll see an upgrade notice. Click Regenerate with new pipeline to move it to the new system. This is free.
Approve it
When the prototype looks right, click Approve prototype (or Continue to Build). This tells Codalio to use it as the interface for your production code.
Publish it as a website
You can publish the prototype as a static website with a shareable link, which is handy for showing investors, users or your team.
- Connect GitHub.
- Open the Prototype stage card and click Preview on web.
- Publishing takes one to three minutes. When it's done, you'll see Published successfully. Your website is now live. and a link to share.
If you change the prototype later, click Republish to update the live site. You can't publish while the prototype has runtime errors, so fix them in the prototype chat first.
After code is generated
Once Codalio has generated code from your prototype, the prototype becomes read-only. Make further design changes from the Build stage instead. Click Go to Code Generation on the banner.