AIUIaiui/docs

Generating UI

AIUI transforms your text descriptions into fully-coded UI designs. This guide covers everything you need to know about generating, iterating, and refining your designs using AI.

The Prompt Bar

The prompt bar is your primary interface for generating UI. Located at the bottom of the canvas, it's always accessible and ready for input.

Basic Generation

  1. Click the prompt bar or start typing
  2. Describe the UI you want to create
  3. Press Enter to generate

That's it. The AI processes your prompt and streams a new design onto the canvas in real-time.

Effective Prompts

Be specific about what you want:

  • "A pricing page with three tiers: Basic, Pro, and Enterprise"
  • "A dark mode settings panel with toggle switches"
  • "An e-commerce product card with image, title, price, and add-to-cart button"

The more context you provide, the better the results. Include details about:

  • Layout structure
  • Specific elements needed
  • Color preferences
  • Style direction
  • Content examples

Streaming Generation

As the AI generates your design, you'll see it build in real-time:

  1. A new node appears on the canvas
  2. HTML and styling stream in progressively
  3. The preview updates live as code arrives
  4. A loading indicator shows generation progress
  5. The node finalizes when generation completes

You can watch your design come to life piece by piece. If the direction looks wrong, you can cancel and refine your prompt.

Prompt Enhancement

The sparkle button next to the prompt bar activates prompt enhancement. When enabled:

  1. Click the sparkle icon to toggle enhancement on
  2. Type a brief, casual prompt
  3. The AI expands your prompt with additional context and detail using a separate helper model
  4. The enhanced prompt generates more refined results

Example:

  • Your input: "login form"
  • Enhanced: "A modern login form with email and password fields, a 'Remember me' checkbox, forgot password link, and a prominent sign-in button with social login options below"

Enhancement is especially useful for quick iterations when you have a general idea but want the AI to fill in best-practice details.

Node Mentions (@)

Reference existing designs directly in your prompt using Node Mentions. This tells the AI to use specific nodes as context for the new generation.

How to use Mentions

  1. Type the @ symbol in the prompt bar
  2. A dropdown appears with a list of nodes in your project
  3. Keep typing to filter the list by node name or prompt
  4. Use arrow keys to select and Enter to insert, or click a node from the list
  5. The mention appears as a styled pill in your prompt bar

Why Use Mentions?

  • Contextual Iteration: "Create a sidebar that matches the style of @Homepage"
  • Component Consistency: "Add a checkout button using the theme from @Pricing Table"
  • Comparison: "Combine the header from @Variant A with the hero section from @Variant B"

You can mention multiple nodes in a single prompt to combine ideas from different parts of your project.

Style Presets

Style presets apply consistent visual aesthetics to your generations. Access presets from the dropdown in the prompt bar.

Available Presets

Preset Description
None No style applied—AI chooses based on prompt context
Modern Clean Minimalist design with ample whitespace, subtle shadows, and refined typography
Glassmorphism Frosted glass effects, translucent backgrounds, and blur overlays
Neo-Brutalism Bold colors, thick borders, stark shadows, and raw aesthetics
Retro 90s Nostalgic web design with gradients, beveled edges, and playful elements
Custom Your own style defined in project settings

Using Presets

  1. Click the style dropdown in the prompt bar
  2. Select a preset
  3. Generate as normal—the preset influences the visual output

Presets combine with your prompt. A "dashboard with charts" prompt with the Glassmorphism preset creates a glassmorphic dashboard, while the same prompt with Neo-Brutalism creates a bold, brutalist version.

Custom Presets

Define custom presets in project settings to maintain brand consistency:

  1. Open Project Settings > Design
  2. Add a custom style description
  3. Reference colors, typography, spacing preferences
  4. Save and select "Custom" from the preset dropdown

Reference Images

Attach reference images to guide the AI's visual understanding.

Adding References

  1. Upload: Click the paperclip icon in the prompt bar to select an image from your computer.
  2. URL Screenshots: Click the Globe icon or paste a URL directly into the prompt bar. AIUI will detect the URL and suggest capturing a screenshot of that website.
  3. Screenshot Options: When capturing from a URL, you can choose between Desktop or Mobile device frames and whether to capture the Full Page or just the visible area.

How References Work

The AI analyzes your reference image for:

  • Layout structure and composition
  • Color palette
  • Typography style
  • Spacing and proportions
  • Visual elements and patterns

Combine references with descriptive prompts for best results:

  • "Create a hero section like this but with our product image and blue accent colors"
  • "Match this card layout but add a rating component"

Supported Formats

  • PNG, JPG, JPEG, WebP
  • Images are processed for visual understanding
  • High-resolution images are automatically optimized

Branching: Creating Variations

Branching lets you explore alternative directions from any existing design.

How to Branch

  1. Select a node on the canvas (click to select)
  2. Type a prompt describing changes or variations
  3. Press Enter to generate

The AI creates a new child node that branches from the selected design. The original node remains unchanged.

Branch Use Cases

  • "Make this darker with more contrast"
  • "Add a sidebar navigation"
  • "Try this with a card-based layout instead"
  • "Convert to mobile layout"

Connection lines visually link parent and child nodes, showing your design evolution.

Editing: Overwriting Designs

When you want to modify an existing node rather than create a new one:

How to Edit

  1. Select a node on the canvas
  2. Type your changes in the prompt bar
  3. Hold Shift + Enter (or click the edit button) to overwrite

The AI modifies the selected node directly, replacing its content with the updated design.

When to Edit vs Branch

Action Use When
Branch Exploring alternatives, keeping the original
Edit Fixing issues, refining the current direction

Branching preserves history; editing streamlines your canvas by updating in place.

Multi-Select Generation

Select multiple nodes to generate based on several designs at once.

Selecting Multiple Nodes

  • Shift + Click to add nodes to selection
  • Drag selection box across multiple nodes
  • Selected nodes show a highlight border

Independent Generation

With multiple nodes selected, a standard generation creates a new independent node that considers all selected designs as context.

Iterate Mode

Toggle Iterate mode to generate variations for each selected node:

  1. Select multiple nodes
  2. Enable Iterate mode in the prompt bar
  3. Type a prompt like "Add a dark mode toggle"
  4. Generate

The AI creates a child node for each selected node, applying the prompt to all of them. This is powerful for batch updates across multiple screens.

Output Format

All generated designs produce:

  • Clean HTML with semantic markup
  • Tailwind CSS classes for styling
  • Responsive structure when applicable
  • Production-ready code you can copy directly

The HTML + Tailwind output is framework-agnostic and can be used in React, Vue, plain HTML, or any web project.

Tips for Better Results

Start broad, then refine: Begin with a general prompt, then branch with specific adjustments.

Use presets consistently: Stick to one preset per project for visual coherence.

Combine references with prompts: Images show the "what," prompts describe the "how."

Iterate quickly: Generate multiple variations and pick the best direction.

Leverage enhancement: The sparkle button helps when you're unsure how to phrase something.

Next Steps

Now that you can generate UI, learn how to manage your creations: