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

# Overview

Frontic gives you two places to build against your project: **Frontic Studio** and the **Experience Designer**. Both are agent-driven, both run against your live data, and both draw on the same [Context Base](/context-base/overview) — they differ in what they produce and who they're for.

<CardGroup cols={2}>
  <Card title="Frontic Studio" icon="sparkles" href="/studio/frontic-studio">
    **Build an entire frontend.** A real Git repository, a sandboxed
    workspace, a live preview, and GitHub built in. Studio ships code.
  </Card>

  <Card title="Experience Designer" icon="palette" href="/designer/overview">
    **Build a single page.** A campaign landing page, a seasonal
    moment, a promo section — designed against your real storefront and
    published into it. No repository, no code surface.
  </Card>
</CardGroup>

## Which one to use

The split is about the unit of work, not about skill level.

|                   | Frontic Studio                                    | Experience Designer                                        |
| ----------------- | ------------------------------------------------- | ---------------------------------------------------------- |
| **You build**     | A whole frontend — storefront, app, agent surface | One experience — a landing page or a section of one        |
| **You get**       | Code in a Git branch                              | A self-contained fragment published to a URL or a CMS slot |
| **Runs against**  | A repository you own (or a framework template)    | Your existing storefront, rendered live behind the canvas  |
| **Ships through** | Commit, pull request, your deploy pipeline        | Publish — a version goes live in place                     |
| **Built for**     | Developers and technical teams                    | Marketing and e-commerce teams                             |
| **Talks about**   | Files, branches, builds, blocks and listings      | The experience, the canvas, the hero, the offer            |

Reach for **Studio** when the answer to "where does this live?" is "in the codebase" — a new template, a component library, a checkout change, a data-fetching fix. Reach for the **Designer** when the answer is "on this one page" — a Black Friday landing page, a brand collaboration, a category takeover that shouldn't wait on a sprint.

## What they share

Neither tool starts from zero. Both read the same project-level knowledge, so a decision you record once shows up in both.

<CardGroup cols={2}>
  <Card title="Context Base" icon="brain" href="/context-base/overview">
    Skills, rules, commands, and guides. A rule like "no rounded
    corners on the brand" applies in Studio, in the Designer, and in
    your editor.
  </Card>

  <Card title="Initialize" icon="wand-magic-sparkles" href="/context-base/initialize">
    The one-time reading of your shop that writes the first draft of
    that knowledge — styleguide, tone of voice, assortment, brand
    tokens.
  </Card>

  <Card title="Design Library" icon="palette" href="/context-base/design-library">
    Your brand as tokens — colors, typography, corners, logos. One
    published brand, referenced by everything Frontic builds.
  </Card>

  <Card title="The backend" icon="boxes-stacked" href="/api-builder/overview">
    Blocks, listings, pages, and Menu Trees. Both surfaces read live
    product and category data through the same typed API.
  </Card>
</CardGroup>

Each surface also keeps its **own** system prompt and its own always-on project rules, so the two can diverge where they should — Studio's rules can talk about repository layout and commit conventions, the Designer's about campaign voice and what a hero must never do. See [Studio Settings](/studio/settings) and [Designer settings](/designer/building#designer-settings).

## Where each one runs

Both live in the admin app:

* **Studio → Board** for jobs and workspaces
* **Designer** for experiences

The Designer is also reachable from outside Frontic. With the [Shopware connector](/connectors/shopware) installed, an editor can create and open an experience straight from a Shopping Experience layout in the Shopware admin — see [Frontic Experiences in Shopware](/connectors/shopware#frontic-experiences-in-shopware).

## Related

<CardGroup cols={2}>
  <Card title="Frontic Studio" icon="sparkles" href="/studio/frontic-studio">
    Jobs, workspaces, plan mode, and shipping through GitHub.
  </Card>

  <Card title="Experience Designer" icon="palette" href="/designer/overview">
    Experiences, the canvas, versions, and publishing.
  </Card>

  <Card title="Build in Your IDE" icon="terminal" href="/ide/overview">
    The third surface — your own editor, with the CLI and MCP server.
  </Card>

  <Card title="Your first feature" icon="rocket" href="/essentials/your-first-feature">
    Walk through a complete Studio job end-to-end.
  </Card>
</CardGroup>