AI Frame Generation
Opening the Frame Creator
After your wireframe project’s documentation has been generated, you’ll see it in your wireframe list as a project card. To begin generating AI frames, click the AI icon in the bottom-right corner of the project card. This opens the frame creator where you can generate and manage individual frames for each screen.
Frame Creator
The frame creator is where you generate and manage individual wireframe frames for each screen. The left sidebar lists all screens in your project (e.g., Dashboard, Task List, Task Detail) with status badges showing whether each is pending, generating, or completed.
Layout
AI Provider
Select the AI model to use for frame generation from the dropdown at the top left (e.g., Claude Code, Opus 4.6).
Screen List
The left sidebar shows all screens in the project. Click a screen to view its details and generate its frame.
Screen Purpose & Instructions
The center panel shows the selected screen\u2019s purpose and key features. Click Edit to modify these before generating.
Frame Preview
The right side shows a preview of the generated frame, or an Empty Frame placeholder if the frame hasn\u2019t been generated yet.
Generate Frame
Click to generate the frame for the selected screen. Use Start All Generation to generate all pending frames at once.
Editing Before Generation
You can edit different aspects of a frame before generating it. Click the Edit button next to the Purpose or Key Features sections to modify the screen’s description, features, and instructions. Once you’re happy with the details, click Generate Frame to create the frame, or adjust and regenerate as needed.
Generating Frames
When a frame is being generated, the screen’s status badge in the left sidebar changes to generating... and a progress indicator appears at the bottom right (e.g., “Generating Frame... (10%)”). The Generate Frame button is replaced with a Stop Generation button, allowing you to cancel if needed.
During Generation
Status Badges
Each screen shows its current state — pending (not started), generating (in progress), or completed (done).
Progress Indicator
A percentage-based progress bar at the bottom right shows how far along the current frame generation is.
Stop Generation
Cancel the current frame generation at any time by clicking the Stop Generation button.
Automatic Linking
Frames are automatically linked between each other — navigation flows between screens are connected during generation.
Completed Frames
Once generation is complete, you’ll see a Frame Generated Successfully message. The screen’s status badge changes to completed (green) along with an element count (e.g., “41 elements”). The generated frame preview appears on the right side of the editor.
After Completion
Frame Preview
The right panel displays a visual preview of the generated frame with all components laid out.
Element Count
The completed badge shows the total number of elements generated for the screen.
Restart Frame
If you\u2019re not satisfied with the result, click Restart Frame to regenerate from scratch.
Start All Generation
Continue generating remaining pending frames, or use this to batch-generate all screens at once.