Rapid prototyping with Claude Code: How we transformed our design sprint process

For more than ten years, we’ve been running product design sprints, but now Claude and Claude Code are helping us prototype faster than ever—without sacrificing quality.

Design sprints are intense, focused one-week engagements (sometimes two!) where we help our clients understand the problem, identify assumptions and align on the product’s direction. The finale? We build a clickable prototype, typically in just one day, and test with real users. It’s always been ambitious, but recently, we’ve been able to deliver even more through rapid prototyping with AI.

Senior Designer Kevin Kwon sat down with Chad to demo how he’s using Claude and Claude Code to digest research, spike a landing page, and then apply design-driven prompting to refine as we start to create a product. Watch the full video here or read on for the highlights of our design sprint process.

From Figma to functional code

When we first started doing product design sprints, we’d build HTML and CSS prototypes. Then we switched to Sketch and Figma for clickable mocks because we could achieve better polish and detail within our time constraints, especially for mobile apps. Now we’ve come full circle, and we’re using Claude and Claude Code to generate working prototypes with actual functionality.

Kevin recently led one such design sprint for our client TellaDraft, a guided book-writing platform that uses AI prompts and coaching principles to help nonfiction authors write with clarity, structure and confidence. As TellaDraft Founder Heather Hays wrote on her Substack:

“I was handed a cutting-edge, technologically functional prototype. Not just pictures, but actual screens, real interactions, and a product we could already start testing. It was very exciting to say the least!”

The secret: Context first, code second

The key to accomplish so much, so fast isn’t just asking Claude to generate a landing page. It starts with the sprint itself. During the TellaDraft sprint, we gathered extensive notes from discovery exercises, as well as existing user personas, research, and detailed workflows. Instead of keeping this scattered across Google Docs and FigJam boards, we used Claude Projects to organize everything in one place. This also gives the AI a comprehensive reference when you’re prompting for a given project.

We had Claude generate a comprehensive CLAUDE.md file, essentially a “brain dump” of the entire product context it would reference to write features. This included the product mission, target users, core methodology, and specific features uncovered during the sprint. The context is irreplaceable for arriving at a good result.

Finding inspiration, not copying it

When designing TellaDraft’s landing page, we didn’t start from scratch. Our design team browsed saaslandingpage.com for inspiration, took screenshots of a site design we liked and asked Claude to analyze the design direction. Then we asked Claude to craft a prompt that would allow Claude Code to replicate the aesthetic—not the content. The result? A landing page that felt polished and on-brand, generated in minutes instead of hours.

This isn’t about replacing designers. It’s about empowering them to work at the speed of thought. Our team still made creative decisions, provided feedback and refined the output. We just didn’t have to push pixels around for hours to get there.

When to use AI-assisted prototyping

This approach works best for:

  • Discovery sprint prototypes that need to feel real enough for user testing and investor presentations
  • Temporary artifacts that validate concepts before committing to full design systems
  • Time-constrained projects where you need to explore functionality quickly

It’s not about creating the ultimate design; that comes later. This is about validating ideas with working prototypes that stakeholders can actually use.

The designer’s role evolves

For sprints, our designers have moved from drawing shapes to chatting with AI. It’s the same overall process, but the way we’re executing is a bit different. We still:

  • Choose design directions and inspiration
  • Make creative decisions about layout and flow
  • Review and refine every output (we found broken icons, for example)
  • Ensure the prototype tells the right story

Now we just spend less time on implementation and more time on strategy and direction. Sometimes this means plowing ahead when an output is close, and other times, we might have to start again with a new prompt. Or finding enough patience to convince the AI we really meant it when we said no emojis.

Real results, real fast

For TellaDraft, this process meant we could build out an entire onboarding flow, dashboard, and discovery session interface in the time we’d normally spend on a few static screens. Founder Heather Hays walked away with a working prototype she could share with her community and prospective investors.

The sprint process hasn’t changed. We still do the same discovery exercises, synthesize insights, and identify critical paths. But AI helps us prototype the results faster and with more functionality than ever before.

Want to see how AI-assisted prototyping could accelerate your product development? Get in touch with us.

About thoughtbot

We've been helping engineering teams deliver exceptional products for over 20 years. Our designers, developers, and product managers work closely with teams to solve your toughest software challenges through collaborative design and development. Learn more about us.