Text to UI
The Text to UI feature lets you describe your interface requirements in plain language, and AI generates the corresponding UI design — lowering the barrier to starting a design from scratch.
Overview
Enter a text description → AI understands the semantic and layout intent → Generates an editable UI design
Use cases:
- Quickly generate page prototypes for requirement reviews
- Explore design directions with multiple generated options
- Generate UI component variants (different states, color schemes)
- Create User Personas
Steps
- Open a design file and click the 「AI」 icon in the toolbar
- Type your design requirements in the AI assistant panel
- Press Send — wait for AI to generate (typically 15–45 seconds)
- The result appears on the canvas and is immediately editable
Writing Effective Prompts
Better prompts lead to significantly better output:
Elements to include
[Page type] + [Core function] + [Visual style] + [Specific content]Examples:
Design a mobile login screen with a phone number input field,
verification code field, and login button. Use a minimal style
with a blue primary color. Include WeChat and QQ third-party
login options at the bottom.E-commerce app product detail page with an image carousel,
product name, price, variant selectors (color/size),
add-to-cart and buy-now buttons, following iOS design guidelines.Prompt tips
| Tip | Example |
|---|---|
| Specify platform | "Mobile", "Desktop", "iPad" |
| Define visual style | "Minimal", "Material Design", "iOS style", "Card-based" |
| Describe layout | "Top navigation bar", "Bottom tab bar", "Left sidebar" |
| List components | "Includes a search bar, filter buttons, and list cards" |
| Mention colors | "Blue as primary color", "Dark theme", "White background" |
Editing the Output
Generated designs are fully editable:
- Edit text content and styles
- Adjust colors, fills, and strokes
- Rearrange layer positions
- Replace placeholder images
- Apply components from your design system
Generating User Personas
The AI assistant supports quickly generating User Personas:
- In the AI panel, type:
Create a user persona for a 25–35 year old professional woman - AI generates a structured persona card including:
- Basic info (age, occupation, location)
- Goals and motivations
- Pain points and needs
- Technology usage habits
Notes
- Text to UI may generate different results each time — generate multiple times to find the best output
- Text content in generated designs is placeholder text — replace with real content as needed
- Complex animations and interaction logic are beyond the generation scope and need to be built manually