Before writing code, you can string together hyperlinked screenshots in a design tool like Figma. This creates a 'hacky' prototype that feels like a fully built app to potential customers, allowing for rapid, low-cost user testing and validation.
Related Insights
Vercel's Pranati Perry explains that tools like V0 occupy a new space between static design (Figma) and development. They enable designers and PMs to create interactive prototypes that better communicate intent, supplement PRDs, and explore dynamic states without requiring full engineering resources.
AI-powered "vibe coding" is reversing the design workflow. Instead of starting in Figma, designers now build functional prototypes directly with code-generating tools. Figma has shifted from being the first step (exploration) to the last step (fine-tuning the final 20% of pixel-perfect details).
To rapidly iterate on mobile UI, Lynn sketches screens on physical index cards, which have a similar aspect ratio to a phone. He then photographs these low-fidelity mockups and uses GPT-4's image generation to "upscale" them into high-fidelity designs, bridging the gap between physical brainstorming and digital prototyping tools like Figma.
For a solo founder moving fast, a comprehensive Figma UI kit is often a waste of time. Instead, use Figma at two extremes: for very rough structural exploration (even wireframing with screenshots) and for creating specific graphic assets (gradients, icons). Build the details directly in code.
Validate business ideas by creating a fake prototype or wireframe and selling it to customers first. This confirms demand and secures revenue before you invest time and money into development, which the speaker identifies as the hardest part of validation.
Product teams often use placeholder text and duplicate UI components, but users don't provide good feedback on unrealistic designs. A prototype with authentic, varied content—even if the UI is simpler—will elicit far more valuable user feedback because it feels real.
Instead of creating static mockups in Figma, Cursor's design team prototypes directly in their AI code editor. This allows them to interact with the "life states of the app" and get a more realistic feel for the product, bridging the gap between design and engineering.
Historically, resource-intensive prototyping (requiring designers and tools like Figma) was reserved for major features. AI tools reduce prototype creation time to minutes, allowing PMs to de-risk even minor features with user testing and solution discovery, improving the entire product's success rate.
In design thinking, early prototypes aren't for validating a near-finished product. They are rough, low-cost "artifacts" (like bedsheets for walls) designed to help stakeholders vividly pre-experience a new reality. This generates more accurate feedback and invites interaction before significant investment.
Crisp.ai's founder advocates for selling a product before it's built. His team secured over $100,000 from 30 customers using only a Figma sketch. This approach provides the strongest form of market validation, proving customer demand and significantly strengthening a startup's position when fundraising with VCs.
