AI-Powered Wireframing
Use the AI chat panel to describe screens in plain language, stage proposed changes before applying them, and iterate faster than ever.
How the AI panel works
The AI panel lives in the right rail (click the ✦ AI icon). You type a natural-language description of what you want — a screen layout, an element tweak, a full flow — and the AI responds with a proposed set of canvas elements.
Crucially, changes are staged first. A yellow diff bar appears above the canvas showing what will be added, modified, or removed. You review the proposal, then either Accept or Discard it. Only on Accept does the change land on the canvas — as a single undo step.
Ctrl/Cmd + Z to roll back the entire AI change.Writing good prompts
The AI works best when you give it context about the screen's purpose, not just its contents.
Too vague
"Add a form to the page."
Much better
"Add a login form with email, password fields, a submit button, and a 'Forgot password?' link below."
Too vague
"Make the header better."
Much better
"Replace the header with a sticky navbar containing a logo on the left, nav links in the centre, and a Sign Up button on the right."
Example prompts to try
Generate a screen from scratch
"Create an onboarding screen for a fitness app. Include a large hero illustration placeholder, a headline 'Track every rep', a subtitle, and a 'Get started' CTA button."
Add a section
"Add a 3-column feature grid below the hero. Each column should have an icon placeholder, a bold heading, and two lines of body text."
Restructure layout
"Move the sidebar to the right side and make the main content area 70% width."
Iterate on a component
"The pricing table has 3 tiers. Highlight the middle 'Pro' tier with an accent border and a 'Most popular' badge."
Configuring your AI provider
Go to Settings → AI to choose your provider and enter your API key. WireFlow supports multiple providers so you can use whichever model your team has access to. The key is stored encrypted and never logged.
AI + Plan panel
The AI is aware of your Plan panel entries. You can prompt: "Generate a screen for the 'Product Detail' page in the Shopping flow" and the AI will target the correct page and mark the wireframe gate as in-progress once accepted.
Limitations
- The AI cannot import real images — it places image placeholder elements.
- Complex animations and micro-interactions are not yet supported via AI (use the element properties panel instead).
- Each prompt is scoped to the active page. To modify multiple pages, send separate prompts per page.