> ## 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
> Streamline UI design by converting natural language prompts, Figma Designs or sketches into complete UI layouts with validations and data models.
## Description
The AI Designer is a powerful 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 applications. 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.
## Capabilities
The AI Designer offers two main categories of capabilities:
### Generate New UI
1. **Generate UI from Text**
* 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
* Validates that prompts are UI-related before proceeding with generation
2. **Generate UI from 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
* Supports additional textual context to guide the interpretation
3. **Generate UI from Form**
* 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
* Connects form fields to the corresponding data model properties
### Edit Existing UI
1. **Edit UI from Text**
* 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
* Validates that edit requests are UI-related before applying modifications
## User Experience
The AI Designer is accessed through the FlowX.AI Platform interface. Users can:
1. Access the AI Designer from the platform's design tools section
2. Select the desired capability (Generate or Edit)
3. 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
4. Optionally link to an existing data model to enable automatic field mapping
5. Preview the generated UI components in real-time
6. Make adjustments through the "Edit" capability if necessary
7. Implement the final UI components in their application
The agent performs validation checks to ensure inputs are appropriate for UI generation, providing helpful feedback when adjustments are needed.
## Anatomy
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.
## Top rules for Designer AI Agent prompting
### ✅ DO the following
**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
**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.
**Describe user interactions:**
Explain how users should interact with the UI, including any specific workflows, validation requirements, or dynamic behaviors the UI should support.
**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.
### ⛔ **DON’T** do these
**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.
**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.
**Don’t mention a different device:**
Our 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).
**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.
## Related topics
- [FlowX.AI Designer](/4.7.x/docs/flowx-designer/overview.md)
- [FlowX.AI architecture](/4.7.x/docs/platform-overview/flowx-architecture.md)
- [Integration Designer](/4.7.x/docs/platform-deep-dive/integrations/integration-designer.md)
- [FlowX.AI 5.9.2 Release Notes (LTS)](/release-notes/v5.x/v5.9.2-july-2026/v5.9.2-july-2026.md)
- [FlowX.AI 5.1.2 Release Notes (LTS)](/release-notes/v5.x/v5.1.x-lts/v5.1.2-december-2025.md)