<- all tokdocs

How a Product Manager Uses AI to Prototype and Ship Features With Engineers

Watch on TikTok

View on TikTok ->

A product manager at a mid-size tech company describes his new workflow now that AI coding tools have changed how product, engineering, and design collaborate. He manages engineers from Google, DoorDash, and Slack, and his day-to-day process has shifted significantly. The core idea: AI is collapsing the talent stack, and the traditional boundaries between product, engineering, and design are dissolving.

The AI-Powered Triple Threat

The concept comes from Claire Vo's talk at the Lenny Summit. Historically, product teams had three distinct groups with separate skills: product management, engineering, and design. Those groups are merging into what Vo calls the "AI-powered triple threat" or triad, where each person operates across all three disciplines to some degree.

Diagram showing the AI-powered triple threat: product, engineering, and design merging into overlapping roles

This shift makes people uncomfortable. If you are already working in product or engineering, the blurring of role boundaries can feel threatening. But the speaker argues this is where the industry is heading regardless.

The New Prototyping Workflow

When a feature involves a new user flow or experience (not pure backend work), the speaker creates an entirely new repo dedicated to prototyping. The setup: a Next.js/React project alongside the company's design system repo, both loaded into the same Cursor workspace. He also includes a BRD (business requirements document) as a markdown file.

Using Claude Code, he runs 30 to 50 prompts to build an initial prototype that uses only components from the existing design system. The result looks and feels like the real product because it pulls from the same component library.

Speaker at his desk explaining the prototyping workflow with Claude Code and Cursor

He then deploys the prototype to Vercel, gets a shareable URL, and distributes it via Slack for feedback. Once the direction is confirmed, he polishes the prototype further.

Bringing Design Into the Loop

After the prototype is solid, he uses Figma's MCP integration to go from code back to design. The tool inserts screenshots of different prototype pages into a Figma file. Designers then review the flow, focusing on look, feel, friction, and whether the flow creates enough motivation for users to complete it.

Feedback from design gets incorporated back into the prototype. At that point, the prototype is refined enough to hand off to engineers.

The Engineer Handoff

Engineers have been involved throughout the process, but the handoff point is clear: the product person takes the feature as far as a working, polished prototype. Engineers then figure out the implementation details. Which repo does this live in? How do we wire up the API to these new components? How do we extract what is useful from the prototype repo and integrate it into production?

Speaker gesturing while explaining the handoff between product prototyping and engineering implementation

The product person now spends significantly more time in the IDE than before. The engineers spend more time on integration and architecture decisions than on building UI from scratch.

Key Takeaways

  • AI tools like Claude Code and Cursor let product managers build functional prototypes using their company's real design system
  • The Figma MCP enables a code-to-design workflow, reversing the traditional design-to-code direction
  • Role boundaries between product, engineering, and design are collapsing into overlapping "triple threat" roles
  • Engineers focus more on integration and architecture while product people handle initial UI prototyping

Resources

  • Cursor -- AI-powered code editor used for prototyping
  • Vercel -- Deployment platform for sharing prototype URLs
  • Figma MCP -- Code-to-design integration for review workflows

Published May 25, 2026. Writeup generated from a favorited TikTok.