Skip to main content

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

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

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

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

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

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.

​
Layout detection

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

Mobile

Portrait artboards sized around 1080 × 1920 are treated as mobile layouts. The AI generates a vertically-stacked, touch-friendly structure.

Tablet

Artboards around 1024 × 1366 (portrait) or 1366 × 1024 (landscape) are treated as tablet layouts.

Desktop

Wide artboards around 1920 × 1080 are treated as desktop layouts. The AI generates a full-width structure suited to large screens.
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.
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.