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

# Design-to-Build: turn any mockup into a working app

> Turn any artboard in Design mode into a working HTML, CSS, and JavaScript app in seconds using the AI-powered Design-to-Build workflow.

Design-to-Build is a one-click workflow that bridges Design mode and Compose mode. You sketch a layout on an artboard, click **Generate**, and Portals captures a screenshot of your artboard, analyzes the layout, and streams a working app into the Compose mode viewport — no manual handoff or copy-pasting required.

## How it works

When you trigger Design-to-Build, Portals captures a high-resolution screenshot of your artboard (at 2× scale for crisp detail), passes it to the AI along with your design element metadata, and generates clean HTML, CSS, and JavaScript that mirrors your layout. The AI automatically detects whether your artboard is sized for mobile, tablet, or desktop and adapts the output accordingly.

<Steps>
  <Step title="Create an artboard in Design mode">
    Open Design mode and create an artboard. Use the artboard presets to pick your target form factor — for example, **Mobile Portrait** (1080 × 1920), **Tablet Portrait** (1024 × 1366), or **Desktop HD** (1920 × 1080). Add your shapes, text, images, and other elements to build out the mockup.
  </Step>

  <Step title="Click the Generate / Design-to-Build button">
    With your artboard selected, click the **Generate** button in the toolbar. Portals captures a clean screenshot of the artboard, automatically excluding selection handles, grid lines, snap guides, and other UI chrome so only your design content is sent to the AI.
  </Step>

  <Step title="The AI analyzes your screenshot and layout">
    Portals detects the aspect ratio of your artboard and passes both the screenshot and the vector element data to the AI. The AI determines whether the design targets a mobile, tablet, or desktop viewport and uses that context when generating the app structure, sizing, and layout.
  </Step>

  <Step title="Your app streams live in the Compose mode viewport">
    Portals automatically switches you to Compose mode. The generated app — built from your design elements as real HTML, CSS, and JavaScript — streams into the viewport in real time so you can watch it take shape.
  </Step>

  <Step title="Preview and iterate">
    Review the generated app directly in the Compose mode viewport. You can go back to Design mode, refine your mockup, and run Design-to-Build again to regenerate with the updated design. Each run produces a fresh output based on the current state of your artboard.
  </Step>
</Steps>

## Layout detection

Portals uses the artboard's dimensions to determine the target layout:

<CardGroup cols={3}>
  <Card title="Mobile" icon="mobile">
    Portrait artboards sized around 1080 × 1920 are treated as mobile layouts. The AI generates a vertically-stacked, touch-friendly structure.
  </Card>

  <Card title="Tablet" icon="tablet">
    Artboards around 1024 × 1366 (portrait) or 1366 × 1024 (landscape) are treated as tablet layouts.
  </Card>

  <Card title="Desktop" icon="monitor">
    Wide artboards around 1920 × 1080 are treated as desktop layouts. The AI generates a full-width structure suited to large screens.
  </Card>
</CardGroup>

<Tip>
  The more detailed and complete your design, the better the generated app. Clearly labeled text layers, distinct shapes, and a filled-in layout give the AI more signal to work with. Sparse wireframes produce more generic output.
</Tip>

<Note>
  If you have a Design System configured in your workspace, Portals automatically passes that context to the AI during generation. The output will reference your design tokens, type scale, and color palette rather than generic defaults.
</Note>