Wireframes
Welcome
The Wireframes area lets you design and prototype your UI layouts visually. Create wireframes to plan your application’s structure before coding. When you first open Wireframes, you’ll see the welcome screen with a Create Wireframe card to get started, or use the + New Wireframe button in the top-right corner.
Key Features
Manual Design
Build wireframes by hand using the visual canvas editor — drag and drop components to design your screens.
AI-Powered Generation
Describe what you want and let AI generate wireframe documentation and frames for you automatically.
Voice Input
Use the built-in microphone button or middle-click to dictate your wireframe description with voice.
Wireframe to Code
Once your wireframe is ready, send it directly to code generation — going from design to working code in one seamless workflow.
Creating a Wireframe
Click Create Wireframe or + New Wireframe to open the creation dialog. You’ll enter a title, select the target platform (Mobile, Desktop, or Web), write a description of your wireframe, and choose between Manual or AI-Powered mode.
Project Setup Fields
Title
Give your wireframe project a name so you can identify it later in the wireframe list.
Platform
Select the target platform — Mobile, Desktop, or Web — to tailor the wireframe layout and constraints.
Description
Describe what you want to build. This is used by AI-Powered mode to generate documentation and frames. Supports voice input via the microphone button.
Mode
Choose Manual to jump straight into the canvas editor, or AI-Powered to have AI generate documentation and frames for you.
Manual Mode
When you select the Manual tab and click Create, you’ll be taken directly into the wireframe canvas editor where you can start building your screens immediately. This is the best option when you already have a clear idea of your layout and want full hands-on control from the start.
When to Use Manual
You have a specific design in mind and want to build it yourself.
You want to quickly sketch out a rough layout before refining it.
You prefer full control over every element from the beginning.
AI-Powered Mode
When you select the AI-Powered tab, additional options appear. You can write or dictate your description, optionally define individual frames, select your preferred AI model from the dropdown at the top, and then click Generate to have AI create the wireframe documentation for you.
How It Works
Enter Details
Fill in the title, select a platform, and write a description of your project.
Define Frames (Optional)
Switch to the Define Frames tab to specify individual screens or views you want the AI to generate.
Select AI Model
Choose your preferred AI model from the dropdown (e.g., Claude Code, Opus 4.6).
Generate
Click Generate to start AI documentation generation. The wireframe project will appear in your list while documentation is being created.
Build Frames
Once documentation is complete, you can begin generating each individual frame from the wireframe editor.
Enhance with AI
In AI-Powered mode, clicking the Enhance with AI button opens a dialog that lets you improve your description using AI. This takes whatever you’ve written in the description field and enhances it based on your instructions — making it more detailed, structured, or complete before generating the wireframe.
Enhancement Options
AI Model
Select the AI model to use for enhancing your description (e.g., Claude Code, Opus 4.6).
Enhancement Instructions
Optionally provide specific instructions for how the AI should improve the description. Supports voice input.
Enhance Description
Click to run the enhancement. The AI will rewrite and improve your description based on your input and instructions.
Documentation Generation
After clicking Generate in AI-Powered mode, your wireframe project appears in the wireframe list with a Generating Documentation... status. The AI is creating structured documentation for your project based on the title, platform, description, and any frames you defined.
What Happens Next
Documentation Generation
The AI creates a structured document defining each screen, component, and layout based on your description.
Frame Generation
Once documentation is complete, you can open the wireframe and begin generating each individual frame from the editor.
Refinement
After frames are generated, you can manually adjust, add, or remove components in the canvas editor to fine-tune the design.