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

# Generation Modes

> Sketch mode for fast drafts, Code mode for real React components.

21st AI has two generation modes. Pick the one that matches how finished you need the output to be.

## Sketch mode

Sketch mode produces fast **HTML/Tailwind** drafts rendered directly in the browser. It's built for exploring layout and visual direction in seconds, before committing to real code.

* Generates several drafts in parallel so you can compare directions.
* Each draft ("take") renders live with its own loading / ready / error state.
* Lock a marketplace **theme** so every draft uses your palette and typography.
* Refine a single take with natural language — each refinement is saved as a new version so you can step back.
* Copy the take's HTML, or copy a **paste-ready prompt** to hand off to an AI agent.

<Tip>
  Sketch mode is the fastest way to answer "what should this look like?" — reach
  for Code mode once you've picked a direction.
</Tip>

## Code mode

Code mode produces full **React / shadcn** components with a live sandboxed preview and multi-turn editing.

* Generates multiple component variants; pick one to continue with.
* A live preview runs the real component in a sandbox.
* Refine through a multi-turn chat — describe changes and watch the component update.
* Attach images or files for extra context.
* Copy the component code when you're happy with it.

## Refining a draft

Both modes work the same way once you've generated: pick one draft, then describe what to change.

<Steps>
  <Step title="Pick a draft">
    Select the take or variant closest to what you want.
  </Step>

  <Step title="Describe the change">
    "Make the CTA bigger", "switch to a two-column layout", "use a darker
    background". Small, specific instructions work best.
  </Step>

  <Step title="Iterate">
    Each refinement builds on the current draft. Keep going until it's right,
    then take the code.
  </Step>
</Steps>

## Starting from a marketplace component

You can seed a generation from an existing [community component](/community/components) and remix it, instead of starting from a blank prompt — a fast way to adapt a proven component to your needs.

<Info>
  Generating and refining draw from your monthly **credits**. See
  [Pricing & Credits](/ai/pricing) for what each action costs.
</Info>