Image to UI
The Image to UI feature uses AI visual recognition to automatically convert design screenshots or reference images into editable Tencent Design files, making design restoration and migration faster.
Overview
Upload a UI screenshot or reference image → AI analyzes the visual structure → Generates a layered, editable design file
Use cases:
- Quickly restore competitor screenshots into editable designs
- Convert hand-drawn sketches into digital designs
- Rapidly scaffold the structure of a reference design
Supported Image Formats
| Format | Max size | Notes |
|---|---|---|
| PNG | 10MB | Recommended — high clarity |
| JPG / JPEG | 10MB | Suitable for photo-based assets |
| WEBP | 10MB | Modern web format |
| BMP | 5MB | Bitmap format |
Tip: Upload high-resolution, uncompressed screenshots for best AI recognition accuracy.
Steps
Method 1: Workspace AI Page
- Click 「AI」 in the left sidebar of the workspace
- Select 「Image to UI」 on the AI features page
- Click 「Upload Image」 or drag an image into the upload area
- Wait for AI analysis (typically 10–30 seconds)
- Preview the result and click 「Import to File」 or 「New File」
Method 2: Inside the Editor
- Open a design file and click the 「AI」 icon in the toolbar
- Switch to the 「Image to UI」 tab in the AI panel
- Upload an image and wait for generation
- The result is inserted directly into the current canvas
Understanding the Output
AI-generated designs include the following layer types:
| Layer type | Description |
|---|---|
| Frame | Page or module container |
| Group | Grouping of related elements |
| Rectangle | Backgrounds, cards, buttons, etc. |
| Text | Recognized text content |
| Media | Image or icon placeholders |
All layers are fully editable after generation — modify colors, sizes, text content, and more.
Limitations & Best Practices
Limitations:
- Complex interactive animations cannot be recognized
- Handwritten font text recognition accuracy is lower
- Heavily complex backgrounds may interfere with foreground detection
Best practices:
- Upload clean screenshots with white or solid-color backgrounds
- Avoid images with heavy gradients or noise
- After generation, compare with the original image layer by layer and correct inaccuracies
- Combine with 「Text to UI」 to fill in missing details