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

# AI Designer

> Convert natural language prompts, Figma designs, or sketches into complete UI layouts with validations and data models.

## Overview

The AI Designer is a tool that transforms design concepts into functional UI components for the FlowX.AI platform. Whether you start with a text description, an image of a design, or a form structure, the AI Designer can generate complete, interactive UI layouts that are immediately usable in your apps. It also handles mapping UI elements to your data model and can modify existing designs based on natural language instructions, significantly accelerating the UI development process.

***

## Key capabilities

The AI Designer offers two main categories of capabilities:

### Generate new UI

<CardGroup cols={2}>
  <Card title="Generate UI from text" icon="keyboard">
    Creates complete UI layouts based on natural language descriptions. Interprets design requirements and converts them into structured UI elements, maps generated UI components to data model entities when available, produces JSON representations that are automatically parsed into FlowX.AI components, and validates that prompts are UI-related before proceeding with generation.
  </Card>

  <Card title="Generate UI from image" icon="image">
    Extracts UI designs from uploaded images (sketches, mockups, screenshots). Works with hand-drawn sketches, Figma designs, or other visual UI representations. Processes complex images by splitting them into sections for parallel analysis, reconstructs the visual design as functional FlowX.AI UI components, and supports additional textual context to guide the interpretation.
  </Card>

  <Card title="Generate UI from form" icon="rectangle-list">
    Creates structured form interfaces based on form descriptions or requirements. Automatically adds appropriate validations for form fields, organizes form elements in a logical, user-friendly layout, and connects form fields to the corresponding data model properties.
  </Card>

  <Card title="Edit UI from text" icon="pen-to-square">
    Modifies specific containers or cards in existing UI designs. Updates layouts, components, or properties based on natural language instructions. Preserves the structure and functionality of unmodified UI elements, maintains data model connections while implementing requested changes, and validates that edit requests are UI-related before applying modifications.
  </Card>
</CardGroup>

***

## How it works

The AI Designer integrates visual recognition and natural language processing to transform various inputs into structured UI representations.

```mermaid theme={"system"}
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#f1774a',
      'primaryTextColor': '#000',
      'primaryBorderColor': '#000',
      'lineColor': '#6b6b6b',
      'secondaryColor': '#f3b861',
      'tertiaryColor': '#bababa'
    }
  }
}%%
graph TD;
    Start([Start]):::primary
    Check_Prompt[Check Prompt]:::secondary
    Classify_Image[Classify Image]:::tertiary
    Edit_Interface[Edit Interface]:::tertiary
    Design_UI[Design UI]:::secondary
    Map_to_Data_Model[Map to Data Model]:::secondary
    END([END]):::primary

    subgraph Parallel_Processing [Parallel Processing]
        Extract_Sections[Extract Sections]:::tertiary
        Component_Identification[Component Identification]:::tertiary
        Map_Components[Map Components]:::tertiary
        Grid_Correction[Grid Correction]:::tertiary
        Validate_Layout[Validate Layout]:::tertiary
    end

    Start --> Check_Prompt;
    Start --> Classify_Image;
    Check_Prompt --> Edit_Interface;
    Check_Prompt --> Design_UI;
    Edit_Interface --> Design_UI;
    Classify_Image --> Parallel_Processing;
    Parallel_Processing --> Design_UI;
    Design_UI --> Map_to_Data_Model;
    Map_to_Data_Model --> END;

    %% Styling
    classDef primary fill:#f1774a,stroke:#000,stroke-width:1px,color:#000;
    classDef secondary fill:#f3b861,stroke:#000,stroke-width:1px,color:#000;
    classDef tertiary fill:#bababa,stroke:#000,stroke-width:1px,color:#000;
```

The workflow begins with user input being categorized and processed based on its type. All inputs undergo validation to ensure they describe UI elements. For valid requests, the UI Generator creates the appropriate components, which are then mapped to the data model if available. The final output is compiled into a JSON representation that the FlowX.AI platform can interpret and display as a functional UI.

***

## How to use

The AI Designer is accessed through the FlowX.AI Platform interface.

<Steps>
  <Step title="Access the AI Designer">
    Open the AI Designer from the platform's design tools section.
  </Step>

  <Step title="Select the desired capability">
    Choose between **Generate** or **Edit** mode depending on whether you are creating a new UI or modifying an existing one.
  </Step>

  <Step title="Provide input in the appropriate format">
    * Text description for generating or editing UI
    * Image upload for visual-based UI generation
    * Form structure for form-specific UI creation
  </Step>

  <Step title="Link a data model (optional)">
    Optionally link to an existing data model to enable automatic field mapping.
  </Step>

  <Step title="Preview the generated UI">
    Preview the generated UI components in real-time.
  </Step>

  <Step title="Make adjustments if necessary">
    Use the **Edit** capability to refine and adjust the generated UI through natural language instructions.
  </Step>

  <Step title="Implement the final UI">
    Implement the final UI components in your app.
  </Step>
</Steps>

The agent performs validation checks to ensure inputs are appropriate for UI generation, providing helpful feedback when adjustments are needed.

***

## Best practices

### DO the following

<Card icon="square-check" color="green" horizontal="true">
  **Specify a type of screen:**
  This means specifying a signup screen, a profile page or anything else that you want to add to your design. Use a context
</Card>

<Card icon="square-check" color="green" horizontal="true">
  **Add extra context:**
  If designing a user bank app UI, and you want a screen solely about my expenses, include this in your prompt. For example, '`A expenses page that tracks a list of expenses that includes merchant value and transaction date`'. This ensures a tailored screen generation focused on expense-related content.
</Card>

<Card icon="square-check" color="green" horizontal="true">
  **Describe user interactions:**
  Explain how users should interact with the UI, including any specific workflows, validation requirements, or dynamic behaviors the UI should support.
</Card>

<Card icon="square-check" color="green" horizontal="true">
  **Have fun and be creative:**
  Most importantly, unleash creativity in your prompts. See what you can generate that will make your UI design stand out from the rest. The screen designer agent has a multitude of capabilities, so make sure to try them out.
</Card>

### DON'T do these

<Card icon="ban" color="red" horizontal="true">
  **Don't specify colors:**
  The single-screen generator cannot create a new design screen in a different color. However, it is easy to switch up the colors of your generated screen using theming feature.
</Card>

<Card icon="ban" color="red" horizontal="true">
  **Don't describe multiple screens**
  The screen generator can only generate one type of screen at once. So if you use a prompt referring to two different screens, only one type will be generated.
</Card>

<Card icon="ban" color="red" horizontal="true">
  **Don't mention a different device:**
  The AI agents don't understand designing in different design screens. So if you want a different device design screen, check in UI designer how your generated design looks on different platforms (Mobile / Web).
</Card>

<Card icon="ban" color="red" horizontal="true">
  **Don't expect platform-specific knowledge:**
  The AI Designer has no knowledge about other nodes or information in your project beyond what you provide in your prompt or the associated data model.
</Card>

***

## Related resources

<CardGroup cols={2}>
  <Card title="Agent Builder" icon="hammer" href="../agent-builder/overview">
    Overview of AI agents and the Agent Builder
  </Card>

  <Card title="AI Analyst" icon="magnifying-glass-chart" href="./ai-analyst">
    Automate process analysis and optimization
  </Card>

  <Card title="AI Developer" icon="code" href="./ai-developer">
    Generate business rules and integration logic
  </Card>
</CardGroup>