The AI Design Tool Field Guide for PMs: First Round

Welcome to Product Cocktail, where the takes are as polarizing as a shot of Fernet—but the insights come together like a perfectly crafted daiquiri.

In ancient times, there were two paths: The Designer and The Engineer. The Designer conceptualized the product, determining how the user would interact with and perceive the product. The Engineer wrote the code to bring product ideas to life, built the architecture, and ensured that the product did not break down.

There was conflict between these factions, over questions of feasibility, practicality, and complexity. Enter: The Product Manager. The Product Manager brought stakeholder alignment, prioritization, and tradeoffs.

The Product Manager brought an opinion on the design, but some PMs communicated it better than others. The design perspective was rough (wireframes, back of the envelope sketches) or reactive ("that doesn't look quite right.")

Fast forward to 2026: the ancient paths have flattened into a new archetype: The Product Builder. Whether this is an explicit job title realignment, or an implicit blurring of lines of ownership, the tools now exist for Figma-illiterate PMs to deliver pixel perfect AI slop product designs. The expectation has changed: showing up to the product review without a high fidelity mockup is as gauche as showing up to a dinner party without a bottle of ever-so-thoughtfully-selected Josh Cabernet Sauvignon.

This piece will kick off a four-week series to deep dive into this world of "vibe design" and frontend prototyping. I'll be investigating Claude Design, Google Stitch, Lovable, and v0 by Vercel to give you a practitioner POV on what you should use so you can deliver on your VP's 'moar AI' mandate without wasting a week figuring out which tool to grab.

While this term isn't quite at the Andrej Karpathy-scripture-adopted-by-the-AI-pilled-acolytes like vibe coding, it's gaining significant traction (even if it did emerge from Google's marketing materials).

Vibe design doesn't start with wireframes. It starts with intent. What is the desired mood, business objective, or feeling you want users to have? Describe it, then the AI creates the interface for you.

It's a crowded market of tools promising to help you "vibe design" or deliver design-forward prototypes: Stitch, v0, Lovable, Bolt, Claude Design, Replit, Figma Make. We're still very early and there isn't an agreed upon meta for how to segment the market, which means that it feels like homework for a busy PM to figure out which tool is right for their goals.

Lazy takes lump that entire set of products together into "Top 10 vibe coding apps to create a digital whoopie cushion" listicles. Inaccurate and useless. Conversely, the more careful guides sort by the output. They frame this as a decision tree where Stitch = exploration, v0 = components, Lovable = apps, and Bolt = prototypes. That's closer to being right, but it still falls short for operators.

There are a few problems with this paradigm:

These lanes aren't even real. Claude Design hands a structured bundle to Claude Code, shortcutting the trip from idea to working in production. Stitch exports HTML and Figma. Lovable can build an app end-to-end, but it's also commonly used for rapid prototyping.

My reframe is a classic PM archetype: stop focusing on what the tool is, and evaluate them based on what you need to walk out of the room with. That's what I'm doing here —evaluating four tools across three fixed scenarios, then scoring them. I suspect there won't be one "right answer" across all three scenarios.

Anthropic bills Claude Design as the answer to two problems: time scarcity and design skill. In theory, the product is a way for designers to do more and to democratize the creation of visual work for others.

I briefly experimented with Claude Design before running the scenarios you'll read about below. There's a heavy emphasis on creating or bringing in "design systems" in the tool and the help docs. From what I can parse, bring your own design system (the cool kids call that "BYODS") is the hack to steering it away from AI slop. I asked it to redesign my portfolio to be more "interactive and engaging," not bringing a strong design POV, and my initial output was a very clean looking but obviously "Claude-coded" AI slop version of my portfolio.

The "Tweaks" overlay is a powerful touch, enabling me to significantly change the vibe of the output with different accents and typeface, which changed the feel of the entire design. This was the best interactivity of the four.

I decided to push it a bit further, asking it to turn my portfolio into a 16-bit RPG style "game" experience drawing on Legend of Zelda and Super Mario World. It took some incredible creative license, building a really cool SNES game menu style case study toggle.

One call out - Claude Design used to pull from a separate usage bucket (the help docs continue to state that it does), but it seems that Anthropic collapsed this all into one. This thing burns tokens faster than Snoop Dogg burns blunts. That 16-bit prompt alone took me from 0 to 43% of my Pro usage.

Handoff: Claude Design exports to PDF, PowerPoint, zip file, or a self-contained HTML. Additionally, you can send to Claude Code and Canva. The port to Claude Code worked perfectly.

Price check: Claude Design requires a paid subscription — Pro starts at $20/mo ($17/mo billed annually).

IP check: Trains on Pro/Max user data by default; free opt-out.

Google Stitch positions itself as the answer to the designer to engineer handoff, bridging that gap with designs that "seamlessly" transition to usable development artifacts: Figma or even front-end code.

This product feels like the most designer-oriented one. It reads as Figma-without-the-learning curve, sort of the iMovie to Figma's (Adobe) Premiere. It feels fast, because of their recent move to "Stitch Agent" - where you watch your digital companion working in real-time across the canvas, rather than sitting there waiting for images to pop up. Practically, it still takes a while, you're just shifting up your "first contentful paint" (the three front-end devs reading this appreciated that).

I used Stitch to explore an idea I had - changing my (fake) ski lifestyle brand website into a heavily stylized, over the top "skiing over the decades" theme, toggling between 1970, 1980, and 1990. The initial result was a fun "so bad it's good" set of screens, but when I tried to iterate on one element, it changed all three designs into something that resembled a cyberpunk nerd's HTML/CSS 101 class project from 2003.

Stitch has some serious usability rough edges - the agent chat output, agent "log," and prompt are all three separate components flanking the bottom left corner of the window and it's not always clear how they work together. Worse, the number one vibe coding get out of jail free card "revert changes" wasn't readily apparent.

Stitch felt basically free to use, relative to other tools. I kept checking my daily free credits and even after a handful of design experiments, I only used 12 of 400.

Handoff: Stitch seemingly has a lot of flexibility, but some of it overreaches. They have handoffs to Figma, a zip file (containing an HTML file, DESIGN.md, and a screenshot), and (HTML) code to clipboard.

Stitch also claims to hand off to Google AI Studio / Lovable / Bolt / Netlify, but it's pretty half-assed. When I tried it with the first three, it deeplinked to a pre-filled prompt with an attached screenshot to recreate the page and it missed some of the key interactions. This would be more annoying if you were double paying for tokens, but for now that's not the case.

Price check: Stitch is currently free — no paid tiers announced. It's a Google Labs experiment, not a production product, which tracks with the usability rough edges.

IP check: Trains on your data by default; free opt-out (feedback excepted).

Lovable is the well-established vibe coding tool that everyone knows and (maybe) loves. They've significantly deepened the capabilities with integrations into database and auth providers, payments, ecommerce, and numerous other tools.

With more of a vibe coding orientation, it makes sense that Lovable has things like "plan mode" that allows you to "try before you buy" in a sense. This creates a spec before it goes and builds the thing. Potentially helpful for prescriptive tasks, although less useful if you're building 0 to 1 and just want to see and react to designs.

Unlike the other tools, Lovable did actually create a truly novel paradigm for my portfolio - building an interactive mind map. This was cool conceptually, but pretty unusable from a readability / practicality standpoint.

Their credit system feels generous, but is confusing in a way that creates low-grade FOMO. For my Lovable subscription, I get 5 daily credits, 100 monthly, and 100 "extra" (not sure what that means). Maybe the "daily credits" are an engagement DAU growth hack, but it's kind of annoying if I don't need to use Lovable every day.

Handoff: Lovable generates full stack React-based apps and the handoff reflects that. You can sync your code to GitHub and that's... pretty much it. Getting this into Figma would require another step like using html.to.design or a similar converter.

Price check: Free tier includes 5 daily credits; Pro is $25/mo (100 credits/mo + rollovers + custom domains). Note: since July 2025, Lovable switched to complexity-weighted pricing — a "credit" is no longer a flat unit.

IP check: Trains on your data by default; free opt-out toggle.

v0 is the tool I was least familiar with going into this analysis. v0 was an early entrant into vibe coding in 2024, and the product has evolved to be more "production grade" (irony in their naming convention abounds).

v0 was the most utilitarian on-ramp, more resembling ChatGPT than something I would expect to produce brilliant designs. Here's the part that should bother anyone selling you a decision tree: v0 — the tool those guides file under "components" — gave me the best one-shot redesign of the four. It beat the "exploration" tool at exploration.

v0 understood the assignment: it created a brand new design for my portfolio with real, working "interactive" elements as I had asked for.

The design: a bold, tech-oriented black background with lime green accents. The interactivity: a scrolling list of my previous companies (less impactful because it botched the list), a hero number panel that counts up as you scroll, a case studies preview panel that shifts as you scroll, and a playful reframing of my "Projects" as side quests.

While I'm probably more cognizant than the average user, there seemed to be a weird emphasis on model selection upfront, with somewhat opaque and confusing options ("v0 Max" on Opus 4.8 was the default, but "v0 Pro" on Sonnet claimed "superior performance for most assignments").

Their account creation paywall popped up after it worked through my initial prompt — in place of the preview pane. Nice touch.

Handoff: v0 generates full stack Next.js apps by default (other languages supported) and allows you to export your code to zip file and GitHub. Same Figma gap as Lovable.

Price check: Free tier gets $5 in monthly credits (plus a 7-message/day cap); Team is $30/user/mo with $30 of included credits.

IP check: Trains on your data by default; opt-out paywalled to Business plan ($100/user/mo).

Here's the breakdown. I'm going to run three scenarios ("Jobs to be Done" for the product purists), identical across all four tools, with a locked rubric. The scenario tiers escalate in interaction depth.

I suspect that this is more of a jump ball than it may seem going in. In fact, I'd be surprised if one tool carried even two of these categories.

Each tool will be set up per its own published best practices. I'll keep this to 20 minutes hands-on per tool per scenario, allowing for some light iteration.

I'll score each according to the following rubric.

Overall Criteria, consistent across scenarios:

Scenario-specific Criteria, weighted for double the points and double the fun:

During scenario 2, I'll also perform a "dark pattern check" to make sure that the AI didn't block cancellation. If the flow breaks the experience, 0 points will be awarded for the Flow & State score.

The tools will be scored per scenario only. I'm not interested in crowning an overall winner, because it doesn't help you with the job you need to do.

Now that I've got you all hyped up, I'll leave you with a teaser of what's to come next.

June 18 - Issue 2: The Tasting Flight (Scenarios 1 and 2). I'll bring you my POV with the receipts.

June 25 - Issue 3: Off Menu (Scenario 3). Let’s see what these tools can do without a spec to follow.

July 2 - Issue 4: Last Call. Test vs. reality. We’ll see what real PMs think about these tools in their actual daily workflows.

Series: The PM's AI Design Tool Field Guide — Issue 1 of 4.

Send me questions, feedback, and cocktail recipes:
[email protected]

_{Icons made by Icongeek26 from www.flaticon.com.}