Skip to main content
Frontend generation happens in stages: Archie first lays out every screen your app needs, then builds an interactive prototype from the screens you pick, then turns that prototype into the real, deployed app. This page covers each stage.

​
From plan to UI architecture

Clicking Generate Frontend on the plan page starts by generating a User Interface Architecture — every screen your app needs and how someone moves between them, worked out from your plan. When it finishes, the Frontend tab opens on the Sitemap view: every planned screen as a card, grouped by module and color-coded by who can access it (Public, Auth, Onboarding, Private, Admin). Sitemap view showing every planned screen grouped by module, with a legend by access level

​
Reviewing a screen before generating it

Click See details on any pending screen to open its spec before any code exists: purpose, route, screen metadata (module, capabilities, navigation group), permissions (view-only vs. manage access by user type), and two tabs — Key Jobs (what the screen must let someone do) and Layout Specs (its structure). Edit any of it, then click Generate screen to build that screen from the spec. Screen detail panel showing purpose, permissions, and Key Jobs for a pending screen Use the chat to ask Archie to adjust the architecture itself — add a screen, merge two, change who can access one — before you generate anything. Once a screen has been generated, its detail panel adds a rendered mockup and a Re-imagine this screen action that rewrites the spec and re-renders it.

​
Generating the prototype

The sitemap arrives with a sensible default selection already ticked — typically the bespoke screens your plan calls out specifically. You don’t have to click Select all: untick anything you don’t need yet, or tick additional screens, and the screen count and the Generate button update to match. Custom screen selection: 9 of 23 screens selected instead of the full default, with the Generate button updating to match How many you generate at once is up to you — it depends on what your plan needs and how many AI credits you want to spend now. Untick a screen to save it for later: you can always come back and generate it screen by screen once the rest of the app takes shape. Click Generate to build whatever is ticked. Only those screens are built; everything else stays exactly as it is. The result is an interactive, click-through prototype — wired navigation, your design system applied, no real data or backend yet. Switch to the Grid view to browse every generated screen at once. Generated prototype screens grouped by module in Grid view Reviewing the architecture and each screen’s spec catches design and navigation problems while they are still cheap to fix — moving a screen or rethinking a flow costs nothing close to redoing a generated prototype. Click through the finished prototype as a user would and confirm the flows hold together end to end before moving on. See Prototype for shaping the theme and browsing every generated screen in depth.

​
From prototype to real app

Once a prototype exists, the plan page’s bottom action becomes Generate Full-Stack — it turns your prototype and plan into a real, deployed application with a working frontend connected to Archie Core. From there, use Talking to Archie, the visual editor, or the code editor to keep iterating.

​
FAQ

No. Tick only the screens you want built and click Generate. Untouched screens keep whatever state they were in — pending or already generated.
Yes. Ask the chat to add, remove, or restructure screens, or use Re-imagine on an individual screen. Regenerating a screen replaces its current design.
Most projects tick a handful of screens, review them, then generate the rest once the pattern looks right. If you are regenerating the same screen often, its spec probably needs another pass first.