> ## 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](https://docs.frontic.com/context-base/overview.md) - they differ in what they produce and who they're for.

> [card] [Frontic Studio](https://docs.frontic.com/studio/frontic-studio.md)
>
> **Build an entire frontend.** A real Git repository, a sandboxed
> workspace, a live preview, and GitHub built in. Studio ships code.

> [card] [Experience Designer](https://docs.frontic.com/designer/overview.md)
>
> **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.

## 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.

> [card] [Context Base](https://docs.frontic.com/context-base/overview.md)
>
> 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] [Context Setup](https://docs.frontic.com/context-base/setup.md)
>
> The one-time reading of your shop that writes the first draft of
> that knowledge - styleguide, tone of voice, assortment, brand
> tokens.

> [card] [Design Library](https://docs.frontic.com/context-base/design-library.md)
>
> Your brand as tokens - colors, typography, corners, logos. One
> published brand, referenced by everything Frontic builds.

> [card] [The backend](https://docs.frontic.com/api-builder/overview.md)
>
> Blocks, listings, pages, and Menu Trees. Both surfaces read live
> product and category data through the same typed API.

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](https://docs.frontic.com/studio/settings.md) and [Designer settings](https://docs.frontic.com/designer/building.md#designer-settings).

## Where each one runs

Both live in the admin app:

* **Studio**, which opens on the Board, for jobs and workspaces
* **Designer** for experiences

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

## Related

> [card] [Frontic Studio](https://docs.frontic.com/studio/frontic-studio.md)
>
> Jobs, workspaces, plan mode, and shipping through GitHub.

> [card] [Experience Designer](https://docs.frontic.com/designer/overview.md)
>
> Experiences, the canvas, versions, and publishing.

> [card] [Build in Your IDE](https://docs.frontic.com/ide/overview.md)
>
> The third surface - your own editor, with the CLI and MCP server.

> [card] [Your first feature](https://docs.frontic.com/essentials/your-first-feature.md)
>
> Walk through a complete Studio job end-to-end.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.