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

# Web builder

> Hosted site builder inside the V3Code hub.

V3Code's web builder is an **open-source, local, agent-driven design platform**. Instead of starting every site or UI from a blank file, you start from a library of hundreds of high-end designs, make them yours by setting your colors and tokens, and hand the build to an agent.

## Where the designs come from

The builder is a **fork of Open Design**, packaged into a design repo the agent pulls from and served in webviews inside V3Code's own browser. It ships hundreds of designs — full websites, decks, prototypes — spanning first-party/official templates and community submissions. You browse and curate them in [Discover](/studio/discover), then build the ones you like.

## Make it yours: tokens first

Pick a design, then set the palette. A theme editor exposes your design tokens as editable swatches — app background, surfaces, borders, foreground/muted/dim text, and the accent — with a live side-by-side so you can compare, say, "Current" against a "Proposed Darker" variant before committing.

Representative tokens:

| Token                                     | Role                                         |
| ----------------------------------------- | -------------------------------------------- |
| `--bg`                                    | App background                               |
| `--surface`, `--surface-2`, `--surface-3` | Panels/sidebar, inputs/cards, hover/overlays |
| `--border`, `--border-2`                  | Dividers, focus ring                         |
| `--fg`, `--fg-muted`, `--fg-dim`          | Primary / secondary / placeholder text       |
| `--accent`                                | Accent                                       |

It's the "choose your colors" step you'd expect from a modern tool — you set the system, the design conforms to it.

## Any agent builds it

Once you've picked a design and set your tokens, an agent builds it out — the same agent stack that powers the rest of V3Code, served through the editor and the built-in browser. This ties into [Design mode](/editor/design-mode), which loads the design skill so output stays on-system.