> ## Documentation Index
> Fetch the complete documentation index at: https://archie.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Prototype is where you shape how your generated screens look — before you build the real frontend.

Once [Generating the frontend](/docs/features/frontend/generating) produces a prototype, Prototype is where you shape how it looks: pick a visual direction, adjust the underlying design values, and browse every screen it produced — before you move into the real, deployed frontend.

Everything you set here applies globally. Change the primary color once, and it updates across all generated screens at the same time.

## What's in Prototype

<CardGroup cols={2}>
  <Card title="Theme" icon="swatchbook" href="/docs/features/frontend/prototype/design/theme">
    Pick a complete, pre-built visual direction, or generate new alternatives.
  </Card>

  <Card title="Branding" icon="image" href="/docs/features/frontend/prototype/design/branding">
    Upload your logo, icon, and favicon for light and dark mode.
  </Card>

  <Card title="Feel" icon="gauge" href="/docs/features/frontend/prototype/design/feel">
    Set density and motion — how tightly things are packed and how they move.
  </Card>

  <Card title="Read" icon="font" href="/docs/features/frontend/prototype/design/read">
    Choose a typographic personality and let it map to font families and sizes.
  </Card>

  <Card title="Color" icon="palette" href="/docs/features/frontend/prototype/design/color">
    Set your primary color and neutral tone; Archie generates the rest of the palette.
  </Card>

  <Card title="Polish" icon="wand-magic-sparkles" href="/docs/features/frontend/prototype/design/polish">
    Corners, shadows, and icon stroke — the surface character of every element.
  </Card>

  <Card title="Components" icon="shapes" href="/docs/features/frontend/prototype/design/components">
    A live gallery that proves your design values hold together across real UI.
  </Card>

  <Card title="Screens" icon="table-cells-large" href="/docs/features/frontend/prototype/screens/overview">
    Browse every generated screen as a single page, a grid, or a full sitemap.
  </Card>

  <Card title="Comments" icon="comment" href="/docs/features/frontend/prototype/comments">
    Leave feedback pinned to an exact spot on a screen, and tag teammates.
  </Card>
</CardGroup>

## How Prototype fits together

This section splits into three parts:

* **Design** — Theme, Branding, Feel, Read, Color, and Polish define the design system: the colors, type, spacing, motion, and surface treatment your app uses everywhere. Components is a live proof that renders those values on real UI so you can see them hold together before committing.
* **Screens** — the generated prototype itself. Every route in your plan gets a screen, and the Screens views let you browse them as a single page, a thumbnail grid, or a full sitemap.
* **Comments** — feedback pinned to a specific screen, for you or a teammate to act on.

Picking a **Theme** sets a starting point for every value at once. From there, the individual Branding, Feel, Read, Color, and Polish sections let you fine-tune anything the theme got close but not exact.

## Where Prototype sits in the workflow

* [**Generating the frontend**](/docs/features/frontend/generating) produces the prototype — one screen for every route your plan describes.
* **Prototype** (this section) defines what it looks like, and is where you review every generated screen.
* The theme you set here becomes the starting values in the frontend's own [theming](/docs/features/frontend/theming) system once you build — you can keep refining it there with the visual editor, chat, or code.

## FAQ

<AccordionGroup>
  <Accordion title="Do changes here affect the real app, or just the prototype?">
    Prototype works on the generated prototype — the screens Archie produces from your plan. When you build, the theme and screens you land on here become the starting point for the actual frontend. You can keep adjusting afterward from [Frontend → Theming](/docs/features/frontend/theming).
  </Accordion>

  <Accordion title="Do I have to finish Prototype before I build?">
    No. The build uses whatever theme and screens are in place at the time. Many teams pick a theme, glance at a few key screens, and build — then fine-tune from the frontend once real data and interactions are in place.
  </Accordion>

  <Accordion title="Can different user types see different screens?">
    Yes. The [Screens](/docs/features/frontend/prototype/screens/overview) view has a **User Type** filter that shows only the screens relevant to a given user type — useful for checking an admin dashboard separately from the end-user experience.
  </Accordion>
</AccordionGroup>