AI wireframing: How to build clickable prototypes in code in 20 minutes

What happened to wireframing? {#what-happened-to-wireframing}

AI wireframing is the practice of using AI tools to rapidly generate low-fidelity interface structures that validate user flows and information architecture before moving into visual design. The problem is that most teams aren't doing it anymore.

A wireframe is supposed to validate structure and flow before you design. It forces you to answer hard questions: Does this step need to exist? Where does the user go next? What happens at the decision point? But wireframes were traditionally static — sketches on paper or grey boxes in Figma that your team had to squint at and imagine clicking through.

Then AI prototyping tools got good. Really good. Tools like v0, Lovable, and Figma's AI features can generate polished, high-fidelity interfaces in seconds. So teams made a rational choice: why spend a week wireframing when you can have a working prototype by lunch?

The skip-ahead problem

The issue isn't the tools — it's what gets lost when you skip the thinking phase. A hi-fi prototype looks finished, which means:

• Feedback shifts to aesthetics. Stakeholders say "I like how this looks" instead of "this flow doesn't make sense."
• Sunk cost kicks in. You've already built something polished, so you're less willing to rethink the structure.
• Logic gaps hide behind pixels. A pretty interface can mask a broken onboarding flow or a missing edge case.

We've been working with over 50 B2B SaaS companies at TDP, and we see this pattern constantly. Teams ship fast but then spend months patching UX problems that a wireframe would have caught in a day.

AI wireframing vs. traditional wireframing

Traditional wireframing means static mockups in Figma, Balsamiq, or on paper. They validate layout and hierarchy but can't simulate real interactions. Your team has to imagine the flow.

Code-based AI wireframing — what I'm going to walk you through — produces a functional prototype that lives in your actual codebase. It's clickable. It uses your real components. And when you're ready to go hi-fi, you're not starting over. You're building on top of the foundation.

AI wireframing vs. AI prototyping (v0, Lovable)

Tools like v0 and Lovable generate polished, deployable UIs from prompts. They're great for validating ideas quickly. But they output something that feels finished — which is precisely why they don't replace wireframing. The whole point of a wireframe is to be intentionally rough so you can focus on what matters: the flow, the logic, the steps.

Why low-fidelity still matters in an AI-first workflow {#why-low-fidelity-matters}

Here's a pattern I keep seeing: teams use AI to get straight to the "end result" and skip the middle steps. PRD goes in, polished UI comes out. But the middle is where the actual product thinking happens.

When a wireframe looks rough, something powerful happens — people focus on flow instead of form. Nobody says "I don't like the font" when there is no font. Nobody debates the button color when everything is grey. The conversation stays on the right level: Does this step need to exist? Is the order intuitive? Where do users drop off?

This isn't nostalgia for the old process. It's about using AI to make wireframing faster and more useful than it ever was before — not to eliminate it entirely.

• Validate faster. A code-based wireframe is clickable from the start. Put it in front of your team or users in minutes, not days.
• Catch structural problems early. When you slow down to map the flow, you find the logic gaps before they're buried under a polished UI.
• Build on a real foundation. Because the wireframe lives in your codebase, going from wireframe to hi-fi is iterative, not a handoff. No starting over.

How to build a functional wireframe in code with Claude Code {#how-to-build}

I'm going to walk through exactly how I built two wireframe concepts for a cal.com onboarding flow in 20 minutes. You don't need to be using cal.com — the process works the same for any product.

Prerequisites

Before you start, have these ready:

1. A PRD or problem definition. You should know what you're building.
2. A user flow. This doesn't have to be fancy — a FigJam diagram or even a bulleted list of steps works. The point is you've thought through the flow before asking AI to build it.
3. Your project set up locally with Claude Code running and (optionally) the Figma MCP connected.

The user flow is non-negotiable. If you skip this, you're right back to "let AI decide everything" territory. The research and flow mapping is what makes the wireframe meaningful.

1. Share your user flow with Claude Code

If your flow lives in FigJam or Figma, grab the link and paste it into Claude Code. With the Figma MCP connected, it can read the flow directly.

If your flow is in a doc or a list, paste the steps in your prompt. Either way, Claude Code needs to understand the sequence before it builds anything.

2. Prompt with intent — and start in planning mode

Here's the key: always start in planning mode. This is probably the most important step. When you start in planning mode, Claude Code acts like a CTO or co-founder — it asks clarifying questions, surfaces decisions you haven't thought through, and makes sure you're aligned before a single line of code gets written.

My prompt looked something like:

> You are a world-class product designer. I want to create a wireframe off of this user flow for onboarding. I want it to be simple, straightforward, and built knowing I'll iterate on top of it. Make sure it feels like a wireframe — no unnecessary details, just something clickable to validate the structure. First, let's start in planning mode.

Planning mode asked me questions like:

• Should we use existing components from the codebase or build standalone?
• What fidelity level — pure grey boxes or brand colors with minimal styling?
• Click-through navigation only, or include form validation?

These are exactly the kinds of decisions that get skipped when you jump straight to hi-fi. Spending two minutes answering them saves hours of rework later.

3. Review the plan, then build

Claude Code produces a clear plan: which files it will create, the wireframe components, the steps mapped from your user flow, navigation logic, and decision points.

Read through the plan. This is your last chance to catch misalignment before execution. In my case, Claude Code identified user role selection as a decision point that I hadn't explicitly included in my user flow — it pulled that from understanding the product context. That's the kind of thing planning mode catches.

Once you approve, it builds. For a standard onboarding flow, this takes a few minutes.

4. Click through and iterate in real time

This is where it gets powerful. You now have a functional clickable wireframe running in your browser. Click through every step. You'll immediately notice things:

• "This step needs more logic" (I caught this on the availability picker)
• "There are too many steps — this feels long"
• "I didn't think about what this confirmation screen should actually say"

Each observation becomes a prompt. Tell Claude Code what to change, and it updates the wireframe on the spot. The feedback loop is minutes, not days.

When I clicked through my cal.com wireframe, I realized the "Your dashboard is ready" screen didn't actually show the user what had been set up. That insight only surfaced because I was interacting with the flow, not staring at a static mockup.

5. Explore alternative concepts

Once your first wireframe works, you can explore radically different approaches with a single prompt. I noticed the traditional step-through felt too long, so I asked:

> I want another option for this onboarding. What if it's chat-based instead of this traditional walkthrough? Let's start in planning mode.

Claude Code searched the existing codebase for chat-like patterns, then designed a conversational onboarding concept where an AI assistant named "Cal" guides users through setup. Rich UI components like the availability picker appeared inline within the chat.

In 20 minutes, I had two completely different wireframe concepts ready to put in front of my team.

Traditional vs. chat-based: testing two wireframe concepts {#two-concepts}

Here's what each approach looked like for the cal.com onboarding:

| | Traditional walkthrough | Chat-based onboarding | |---|---|---| | Structure | Linear, card-based steps | Conversational, message-based | | Steps visible | One at a time, with progress | Messages fade, focused on current | | Complex inputs | Full-page forms | Rich cards inline in chat | | Tone | Functional, app-like | Friendly, personal | | Best for | Users who want control and clarity | Users who find long forms intimidating |

The chat-based version felt way less intimidating than clicking through 10 separate steps. But the traditional version gave users a clearer sense of progress and control. Both are valid — and that's the point. You need to see them and test them before committing.

Neither wireframe took more than 10 minutes to build. Imagine spending weeks in Figma to produce two static versions of this same comparison.

Why this changes the product development process {#why-this-changes-everything}

The traditional product process for a feature like onboarding looks something like: research (a week), wireframes in Figma (a week), stakeholder feedback (a few days), hi-fi design (a week), dev handoff and build (a week or more). That's a month minimum.

With code-based AI wireframing:

1. Research and flow mapping — still human-led, still necessary (a day or two)
2. Wireframe in code — 20 minutes, functional and clickable
3. Test and iterate — immediate, in real time
4. Go hi-fi — iterate on top of the wireframe using the component library. No handoff, no starting over.

The wireframe-to-production pipeline collapses because every step builds on the last. Your wireframe is the early version of the product. Plug in the design system, apply the real UI, and you're shipping — not re-implementing a Figma file from scratch.

This isn't about replacing designers or skipping UX rigor. It's about putting that rigor where it belongs — in a medium you can actually test — and doing it 10x faster.

The real expert is you

One thing I want to be clear about: AI should not be making your product decisions. When Claude Code surfaces a plan in planning mode, read it. Push back. Say "this doesn't make sense." The teams that build the best products with AI are the ones that treat it as a collaborator, not an oracle. If it was your product, you'd spend real time on every question planning mode asks. You'd go back and forth until the plan is right. That's the job. AI just makes the execution part fast.

Start wireframing in code today

If you're skipping wireframes because "AI makes it fast enough to go straight to hi-fi" — try this instead. Take your next feature, map the user flow, and build a clickable wireframe in Claude Code. It'll take 20 minutes. You'll catch things you would have missed. And when you're ready to go hi-fi, you won't be starting over.

We have openings for teams looking to formalize their design systems. Reach out and let's talk about your design challenges.