Over the years, I've learned Swift to build real iOS apps at Airbnb, created Chrome extensions to test new interfaces at Google, and constantly pushed Figma to its limits trying to communicate complex interactions — creating enough prototype spaghetti to feed a small Italian village. 

I believe that while a picture is worth a thousand words, a prototype is worth a thousand meetings. There's something magical about building and showing how things actually feel, rather than just talking about them.

But traditional prototyping always had limits. Testing complex enterprise scenarios with multiple user roles and system states required enormous setup. Dialing in fine-grained interaction details that bring ideas to life meant weeks of development work. Validating usability across realistic end-to-end flows was time-consuming and often came too late in the process. These constraints meant we often had to imagine how experiences would work rather than actually experiencing them.

Over the past few months, we've been experimenting with AI coding tools like Cursor, Augment, and Copilot for prototyping. The results convinced us to build something more systematic: a prototyping platform that transforms how our entire design team works.

What we built (and why)

We created a dedicated prototyping platform that bridges the gap between design ideas and functional prototypes. At its core, it's a GitHub repository that packages our Spring design system into AI-friendly conventions, complete with educational materials and Webflow Cloud deployment infrastructure. The vision was simple: enable any designer to go from concept to shareable prototype in under an hour.

Rather than using our existing production codebase to start, we built this as a separate repository partly for speed (no complex build processes slowing down experimentation), and partly for AI optimization given the current performance expectations of frontier models. Modern models excel at commonly used web patterns like Next.js, React, and Tailwind, while our custom design system conventions require additional fine tuning.

The prototyping platform itself is deceptively simple but strategically designed:

• Pre-configured foundation: A Next.js app with our Spring design system components, already styled with Tailwind classes that AI understands. No more explaining custom CSS conventions. The AI can immediately use familiar patterns that it has been pre-trained on.
• Smart constraints: Cursor Rules that guide AI toward good design system usage. The AI knows to use our icon library, follows our spacing conventions, and structures layouts according to our patterns.
• Basic app structure: Pre-built navbar, canvas area, left sidebar, and right panels that mirror our product structure for Design and Dashboard experiences. Designers can focus on their specific feature without rebuilding UI chrome from scratch every time. It also allows designers to contribute to improvements to the base structure for others to reuse similar to our design templates.
• Deployment pipeline: Integrated with Webflow Cloud so prototypes can be shared with a URL instantly. No more screen recordings or static screenshots. Stakeholders, colleagues, and research participants can get a real feel for the software by interacting with the actual prototype. We’ve also taken the opportunity to “eat our own ice cream” and give feedback to the engineering team about ways to improve Webflow Cloud deployment workflows.
• Educational materials: Step-by-step setup guides, prompting best practices, and video walkthroughs were published to ramp the team smoothly. We discovered that the setup process is as important as the platform itself. We organized a Build Day to encourage the whole team to onboard and create their ideas. We plan to continue hosting full day sessions with more team members on Design and beyond.

The entire workflow is: Clone repo → Open in Cursor (or other IDE) → Start prompting → Deploy and share.

Real examples from our team

The best way to understand this approach is through the prototypes we've actually built. Each one solved a different design challenge and taught us something new about what's possible when you can build functional experiences instead of describing them.

AI Assistant state management

How do you communicate a complex, multi-surface assistant experience to stakeholders? We built a working prototype with real Anthropic API integration, conversation state management, and contextual entry points. Instead of explaining how an AI Assistant might work across our platform, we could show it and build it faster than creating static screens in Figma.

Interactions timeline behavior

We needed to validate complex animation controls for our new interactions timeline. We built a working version with sophisticated multi-track controls that looked like basic wireframes. This taught us that interaction fidelity can be independent of visual fidelity. We could validate the interaction model without getting distracted by visual details. Those patterns are now shipping in production.

Access control simulation

Testing granular permission states in our CMS seemed impossible to document clearly. One team member built a working simulation that let us experience how complex permission hierarchies would actually feel to users. We discovered UX issues that would have been invisible in written specs—this was functional exploration of complex product concepts, not just interface mockups.

Scrollmaps

How do you validate whether a complex analytics visualization will actually be useful to designers? We needed to test scrollmaps— a visual, page-by-page view of how far visitors scroll with heat-style gradients and dynamic overlays. We built a working prototype that let us experience the actual interaction patterns, test the visual clarity of different gradient approaches, and validate whether the persistent scroll ruler would feel helpful or intrusive. This helped us dial in the interactions and experience of such a visual feature before committing to the full implementation.

Each prototype taught us something new about this approach and gave us some great demos for design crits and org level show-and-tell meetings.

Getting started: What we've learned

Start with setup 

The technical setup is crucial but often overlooked. Invest time in creating a smooth onboarding experience because friction can kill adoption. You’ll need to help your team get comfortable with using the terminal and some basic git commands.

Design system integration 

AI needs consistent patterns. Teach it about your design system, add components, typography, and color rules. You will find yourself experimenting and updating the rules and system prompts to get better results with fewer shots. 

Prompting is a skill 

Good prompting requires understanding both the design problem and how AI models processes context. We've developed internal best practices and share them through training. For example:

• Avoid: "Build a commenting system," that’s like ordering 'coffee' when you actually want a 'venti-iced-brown-sugar-oatmilk-shaken-espresso with extra cinnamon.' 
• Try: "Create a commenting feature with a toggle in the nav bar that switches to comment mode, hides the left toolbar, replaces the right panel with a comments list, and lets users click canvas elements to add threaded comments with timestamps." Planning the interaction details upfront — state changes, UI behavior, data structure — leads to much better results than iterating through vague requests.

Think interactive-first

The biggest mindset shift is starting with behavior rather than appearance. What should this feel like? How should it respond? Visual polish can come later (nothing wins over a skeptical PM like a prototype that actually responds to their clicks).

Encourage sharing 

We created a dedicated Slack channel where team members share their prototypes, techniques, and learnings. This motivates others to get over the initial setup hurdle, teaches effective prompting strategies, and gets everyone excited about what's possible. Seeing colleagues build impressive prototypes is the best advertisement for the platform.

The bigger picture

We're sharing this approach because we believe it represents a fundamental shift in how digital products get built. As AI makes execution easier, ideas become more valuable—but not just any ideas. The Designers and Builders who can rapidly translate user-centered concepts into working prototypes, then validate them with real user interactions, will have an enormous advantage.

This isn't about replacing traditional design tools either. It's about adding a new capability to our ever expanding, always evolving, toolkit. Figma remains essential for visual design, design systems, and collaboration. But when we need to validate complex user flows, test how customers will actually experience new features, or communicate sophisticated interactions, our prototyping platform has become indispensable.

The lines between design and development are blurring, and that creates opportunities for designers willing to expand their toolkit. We're not becoming developers. We're becoming builders who can combine design thinking with technical capability while maintaining our focus on user needs to create better products for the people who use them.

What's next

We're continuing to evolve the platform based on team feedback and exploring ways to share our learnings with the broader design community. We're also investigating how to better connect our prototyping platform with production development, creating stronger pathways from validated prototype to shipped feature leveraging our product design system. The future of design is interactive, collaborative, and built on the foundation of rapid experimentation. 

The question isn't whether AI will change how we design — it's whether we'll embrace that change to amplify our creative capabilities or watch the world move forward without us. At Webflow, we're choosing to build the future. What about you?

‍