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.

Compose mode is where you turn a prompt — or an artboard from Design mode — into a fully rendered output. You write what you want, choose the generation type, and watch the result stream into a real-time preview viewport as it is built. You can refine the output iteratively, switch between layout sizes, and export when ready.

​
The generation viewport

The viewport is a live preview window in the center of the screen. As generation runs, content streams into the viewport in real time — you can see the structure appear and fill in rather than waiting for a completed result. The viewport toolbar above the preview gives you controls for zoom, layout mode, and generation actions.
If you are coming from Design mode, you can send an artboard here using the Generate button in the Design mode toolbar. The AI uses your artboard screenshot as a visual reference. See Design-to-Build for the full workflow.

​
Writing prompts

Type your prompt in the input bar at the bottom of the screen. Be as specific as you need — describe the content, the structure, and any style requirements.
Describe the application’s purpose and key screens. Example: “A project tracker with a Kanban board, a task detail drawer, and a team member sidebar. Use a dark theme.”
Describe the topic, number of slides, and any structure you want. Example: “A ten-slide investor deck for a B2B SaaS product. Include a problem slide, solution, market size, traction, and team.”
Describe the narrative sequence. Example: “A five-frame storyboard showing a user onboarding flow for a mobile finance app, from download to first transaction.”

​
Generation modes

Compose mode supports three generation types. Select the one you want from the mode tabs at the top of the input bar before generating.
Generates an interactive application. The output renders as a live HTML/CSS/JS preview in the viewport. You can click through the app, scroll, and interact with elements as you would in a browser. Use this for dashboards, tools, landing pages, and functional prototypes.

​
Layout modes

The layout mode selector in the viewport toolbar lets you preview and generate output at different screen sizes.
ModeApproximate width
MiniCompact, widget-sized
Mobile~375 px
Tablet~768 px
Desktop~1440 px
Switching layout mode after generation re-renders the preview at the new size. You can also set a layout mode before generating to direct the AI to target a specific form factor.

​
Streaming generation and real-time preview

Generation in Compose mode is streaming — the AI sends output incrementally and the viewport renders each chunk as it arrives. This means you can:
  • See structure early: The overall layout appears before content is finished, letting you catch major issues quickly.
  • Stop mid-generation: If the output is clearly going in the wrong direction, click Stop in the toolbar to halt generation and start a new prompt.
  • Iterate on the result: After generation completes, type a follow-up prompt to refine specific parts — for example, “Change the color scheme to green” or “Add a pricing section after the hero.”
Short, focused follow-up prompts produce more predictable edits than rewriting the entire prompt. Start broad, then refine incrementally.

​
Design System integration

If you have a design system connected in Design mode, Compose mode will use its color tokens, typography, and component styles when generating. Click the Design System button in the toolbar to review or update the connected system before running a generation.