Making wireframing as fast as thinking

Case Study — Michael Angeles

Making wireframing as fast as thinking

Adding generative AI to Balsamiq without breaking the simple tool 1.4 million people trusted.

Role

Design Lead

Duration

2024 – 2025

Scope

Web Application

Team

Design Lead, Engineering, Product

The Product

From drag-and-drop to describe-and-draft

The User

The ICP.

Alex is a product manager. She thinks in flows, not components, so the idea takes a minute and the wireframe takes an hour.

Ideal Customer Profile

Her pain

The scale

~1 hr

to sketch a flow she could explain verbally in 10 min: the vocabulary gap

Balsamiq User Research

1.4M+

Balsamiq users globally, the majority non-designers like Alex

Balsamiq Internal

Market context: nearly 80% of product managers actively participate in design activities (McKinsey, The Product Management Talent Dilemma) · 65% of senior managers say meetings keep them from completing their own work (HBR, “Stop the Meeting Madness,” 2017, survey of 182 senior managers)

The Problem

The ceiling of drag-and-drop

The gap we saw

Product managers and stakeholders were using Balsamiq as thinkers. Drag-and-drop was fast, but there was still friction between the idea in their head and the artifact on screen.

The design challenge

How do you make wireframing as fast as thinking? How do you let a PM describe a full user flow without knowing what a "bottom nav bar" is called?

The Origin

It started from a demo.

01

Practicing what I preached

I was building prototypes in my own design practice using generative AI, going from sketch to build with AI doing the heavy lifting. I saw the same potential for Balsamiq users.

02

Started the conversation

I started exploring what connecting intent to a wireframe with natural language could look like for Balsamiq's non-designer user base. That became the conversation that got CEO buy-in.

03

A demo that changed the roadmap

We built a concept demo, showed it to customers privately, then company-wide. That reaction changed the trajectory of our roadmap.

"AI shouldn't replace your judgment. It should speed up the work, so you can find the right solution."

The principle that guided every design decision

The Process

How we designed for PMs

01

Research with real non-designer users

Research to interview users, observe their workflows and learn about their use and expectations with generative AI. Demonstrated concept videos to gauge interest and get feedback.

02

Prototyped the AI interaction layer

Explored natural language input, smart suggestions, and component generation. Tested multiple models of how AI enters the existing Balsamiq workflow without disrupting it.

03

Preserved the Balsamiq ethos

The hardest constraint: keeping the tool fast, low-fi, and non-precious while adding a powerful new capability layer. Empowering users without taking away the core experience that helps get them in "flow" was the design problem.

1 / 2

The AI Craft

Specifying the behaviors.

01

Writing the system instructions

Collaborated closely with engineering to author the system prompt, rules, and guardrails that governed AI behavior. Translated design intent into the constraints the model needed to produce useful, predictable output.

02

Teaching the model to lay out screens

Contributed domain knowledge about how LLMs construct HTML to improve the generative layout feature. Bridged the gap between how designers think about visual composition and how a language model actually builds structure.

03

Specifying and reviewing evals

Helped define what "good output" looked like by contributing to the evaluation framework, reviewing generated wireframes against those criteria, and feeding findings back into the model's instructions to improve quality over time.

1 / 2

Decisions & Trade-offs

What we traded

01

Ship the narrow version, not the whole demo.

The Call

Generate one perfectly laid-out screen on the first try. Hold the rest — including prototype generation, the loudest wow in every session.

The Cost

The launch felt smaller than the demo promised. The feature that got the biggest reaction wasn’t in it. People who saw the magic had to wait.

Why Anyway

A convincing demo raises the bar, but a weak full version would land worse than a strong narrow one. A reliable first shot earns the trust that funds the ambitious work.

02

Say no to full automation.

The Call

Keep the user in the loop. AI gives a first draft, never a final answer. We turned down a mode where the AI did the whole thing.

The Cost

We kept friction on purpose, so at first glance the feature seems less impressive than “type once, done.”

Why Anyway

Balsamiq is a thinking tool, not a generating tool. Remove the user and we break the core promise. The output has to feel like a draft people shape, not an answer they accept.

03

Let the model output HTML.

The Call

Have the LLM generate HTML and let our application handle layout from that, instead of the more complex route the team had been taking to place elements directly from text output.

The Cost

Previously written code had to change direction.

Why Anyway

HTML is the layout language the model already knows from training. Working with that grain instead of against it made output far more reliable, and let our application own element placement deterministically.

Three different calls, one principle.

Each time we chose output people could trust over output that looked impressive.

The Results

Faster, and more capable.

Speed
Idea-to-design cycles drop from hours to minutes for non-designer users.

Confidence
The output matched what users intended and got them past the blank screen.

Collaboration
PMs could now show up to design reviews with something real, accelerating team alignment.

3–4×

higher trial-to-paid conversion for qualified users who engaged with the feature, measured after launch. The number validated the bet on iteration over blank-canvas generation.

The Payoff

The PM comes back to the design review.

01

From idea to canvas

She typed what she was thinking. The tool met her there.

02

Faster than drag-and-drop

What used to take an hour took minutes.

03

Design superpowers

She showed up with a real artifact instead of a napkin sketch or a bulleted list.

Reflection

What I learned

01

Write intent as constraints, not wishes

The model honors rules it can test.
Working with engineering on the system prompt, we learned to turn "keep it low-fi and non-precious" into constraints the model could actually follow.

02

Evals change what a designer does

When output is probabilistic, taste alone isn't enough.
I had to define "good" precisely, judge generated wireframes against it, and feed the failures back into the instructions.
The job became building a quality loop, not drawing a screen. That's the skill I'd bring to any AI product.

03

I deferred on the ambitious ideas too long

The founder's demo set a clear direction. I accepted it as the implementation plan rather than treating it as a starting point to question.
That kept the higher-value ideas parked in future releases longer than they needed to be.
Next time I'd push to validate the ambitious ideas earlier, instead of waiting for the quick wins to earn that permission.

Then & Now

Balsamiq: then and now

Then — The original promise

A simple, opinionated wireframing tool built for speed. Drag-and-drop components. Low-fidelity by design. No design skills required. Loved by customers because it got out of the way and let you think.

Now — The AI leap

Natural language input meets the wireframe canvas. Type what you're thinking and the tool builds it. The same low-fi philosophy, but now AI closes the gap between intent and artifact without changing what made Balsamiq trusted.

Balsamiq gained a capability without losing its identity, and the discipline was knowing what to protect.

What I Bring

Here to help you get there.

Intent as constraints, not wishes

At Balsamiq I learned to turn design intent like “keep it low-fi and non-precious” into rules a model can actually follow and be tested against. It’s the discipline every AI product needs, and I’ve done it in production.

Trustworthy AI at scale

Led the AI feature on a tool 1.4M people relied on. I made generated output reliable enough for non-experts to trust, and kept the product feeling like itself while it scaled.

Build, not just spec

I ship real prototypes in code using Claude Code, the same agentic workflow your team runs on. That removes the usual friction between design and engineering before it starts.

AI as a first draft

I design AI output as a first draft people shape, never a final answer they accept. That’s the trust problem every AI product has to solve: people only act on output they trust.

1 / 8

Case Study — Michael Angeles

Thank you.

Interested in seeing more work, process, and background?

View Full Portfolio → Browse Media Gallery →