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

# Design mode

> Generate UI that matches your design system.

Ask most agents to "make it look good" and they invent a look — usually the same generic, AI-flavored one. V3Code's **Design** capability doesn't invent. When you ask for anything visual, it opens a **live gallery of 169 proven, production-grade design directions** and builds your UI from the one *you* pick.

## How it works

1. **Ask for design** — "build a landing page," "make it look good," "give me a dark-premium dashboard," or name an aesthetic.
2. **Pick from the gallery** — V3Code opens a browsable gallery in its built-in browser. You choose a design direction (a "plugin") and add a quick brief. Each direction is a real, coherent system — color, typography, spacing, components — not a mood board.
3. **The agent builds it, section by section** — against that direction's spec *and* the craft laws, so every section is on-system from the first draft.
4. **Refine with Love / No / Note** — react to each section: **Love** locks it, **No** regenerates it, **Note** lets you type exactly what to change. The build converges on what you actually want.

## Craft laws: quality you can check

The gallery gives the agent a real system; the **craft laws** keep it honest. These are enforceable rules, not taste — they ban the tells of AI-generated UI (the default indigo accent, emoji icons, filler copy) and enforce real discipline: a limited number of accent uses per screen, a proper type scale, contrast gates. That combination — a proven direction *plus* checkable rules — is why the output looks designed, not generated.

## What it's for

Any user-facing visual deliverable: **websites, landing pages, dashboards and app skins, marketing pages, portfolios, slide decks.** For a one-line CSS tweak it stays out of your way — you don't get a gallery for a color change.

## Where the gallery lives

The 169 directions and craft laws live in a **separate design library** (forked from Open Design) so the editor stays lean — the agent pulls from it on demand. It's the same library behind [Discover](/studio/discover) and the [web builder](/studio/web-builder); Design is how the agent turns a pick into real, on-system code, which you can then preview and tweak live with [Visual Edit](/studio/live-previews).