Guides
From design to Builder
New Mobile App and Website projects begin in Elmony Design. Shape the screens first, save the design, and then let Builder turn that visual handoff into a working project.
1. Choose what you are building
From What are you building today?, choose Mobile App or Website. Elmony creates a design project and opens the embedded design editor. Choose Skip design only when you want to begin directly in a classic prompt-driven Builder project.
2. Design and save
Create the screens, content, and navigation you want Builder to implement. Save before starting Step 2—the handoff is generated from the latest saved design. If you try to leave with unsaved work, Elmony lets you save and leave or discard those edits.
You can connect Figma from the design workflow when you need to work with a Figma account. The saved Elmony design remains the source used for the Builder handoff.
3. Confirm the Step 2 setup
When you continue to Step 2, review the product decisions Builder should honor. The available questions depend on whether the design is a website or a mobile app and can include:
- the subscription agent or API model Builder should use;
- a logo or mobile app icon and additional build instructions;
- onboarding, login, and paywall placement;
- Stripe for website payments or RevenueCat for mobile purchases;
- Firebase or Supabase authentication and data choices, where appropriate;
- mobile data, file-storage, and notification requirements.
Only select services the product actually needs. Builder may pause and ask you to finish an integration before it writes code that depends on that service.
4. Start Builder
Elmony converts the saved design into Builder-readable files, copies the selected brand assets, creates the linked code project, and opens the first Step 2 chat. Continue working in Builder as you would with any other project: inspect the preview, refine the result in chat, and use the Code, Problems, Configure, Security, and Publish tools when needed.
Sync later design changes
A design and its Builder project stay linked. Reopen the design editor, save the new changes, and continue to Builder again to sync the latest design files into the linked project. Review the resulting Builder work before publishing because a design sync can affect several screens at once.