Wireframing with Balsamiq AI (Beta)

Balsamiq AI (Beta) is a conversational wireframing assistant that helps you turn early product ideas into wireframes and user flows—fast.

It supports multiple input types (text, code, screenshots), generates editable wireframes or reference visuals, and now allows you to generate full user flows before converting them to wireframes.

Getting Started

Open Balsamiq Cloud and click the ✨ Balsamiq AI button to access the AI assistant.

From here, you can:

• Generate a user flow with multiple wireframes
• Generate a single wireframe from text
• Convert a screenshot or sketch
• Generate an image

You can type a prompt, paste code, or upload a file directly into the chat. Balsamiq AI will respond in your language.

Generate a user flow with wireframes

Use this feature to create a structured user journey (e.g. onboarding flow, shopping cart, sign-up process, etc...) and have Balsamiq AI (Beta) generate wireframes for each step in that flow.

How it works

1. Click the ✨ Balsamiq AI button.
2. Select Generate a user flow with multiple wireframes.
3. Enter a short prompt, such as:
   • "Help me plan a project of a user onboarding flow with welcome screen, profile setup, and confirmation"
4. The AI will display a user flow diagram.
5. Refine it and/or generate wireframes for each step.

Generate a single wireframe from text

This feature helps you generate a wireframe layout from a simple, natural-language prompt. It’s useful when you want to quickly visualize an idea without starting from a blank canvas.

How it works

1. Click the ✨ Balsamiq AI button.
2. Select Generate a single wireframe from text.
3. Enter a description like:
   • "Create a screen for a settings page with toggles for notifications and privacy"
   • "Create a screen for a blog post editor with a title, body, and save button"
4. Press ENTER to generate your editable wireframe.

The AI will return an editable wireframe made up of Balsamiq components. You can modify or extend it as needed.

Convert a screenshot or sketch

You can convert a screenshot of an existing UI or a photo of a hand-drawn sketch into an editable wireframe. It’s a fast, functional way to skip the blank canvas and move your idea forward.

How it works

1. Click the ✨ Balsamiq AI button.
2. Select Convert a screenshot or sketch.
3. Drop a file in the Balsamiq AI dialog (or use "Choose file").

The AI will extract and build a wireframe using Balsamiq components.

This feature is useful when:

• You want to digitize a hand-drawn sketch.
• You’re working from a screenshot of an existing interface.
• You need a starting point for iterating on a visual.

Generate an image from text

This feature produces a static image (non-editable) based on a short text prompt. It’s helpful for exploration and inspiration.

How it works

1. Click the ✨ Balsamiq AI button.
2. Select Generate an image.
3. Enter a short prompt, such as:
   • "Generate an image of a mobile shopping app homepage"
   • "Generate an image of a multi-step form with progress indicator"

Balsamiq AI (Beta) will generate a visual preview image you can use for inspiration.

This feature is useful when:

• Mocking up concepts before committing to wireframes.
• Generating quick visuals to inspire layout decisions.
• Exploring UI ideas visually before dragging components onto the canvas.

Create Wireframes from Code

Balsamiq AI can also convert front-end code into low-fidelity wireframes. Paste your HTML, JavaScript, or React code to generate a rough wireframe layout.

How it works

1. Click the ✨ Balsamiq AI button.
2. Paste your front-end code into the prompt area.
3. AI will generate a wireframe layout based on the structure and content of your code.

Great for:

• Visualizing dev-built components
• Reverse engineering an interface
• Quickly mocking up coded prototypes

Multi-language Support

Balsamiq AI (Beta) accepts prompts in multiple languages and will reply in the same language. You can wireframe in English, Italian, Spanish and more.

About Balsamiq AI (Beta)

All AI-generated outputs are editable (except for static images), so you can customize the layout to fit your needs. These tools are optional and designed to support early-stage exploration—not replace manual wireframing.

Got feedback? These features are still evolving. We’d love to hear your thoughts—reach out to support@balsamiq.com.