Get your free personalized podcast brief

We scan new podcasts and send you the top 5 insights daily.

For products like data dashboards, traditional design tools like Figma struggle to represent various states (e.g., zero-data, enterprise-scale, different languages). Code-based AI prototypes can generate these dynamic states effortlessly, making designs more realistic and robust.

Related Insights

The debate over designing in code versus a visual canvas is outdated. The modern workflow isn't about choosing one, but fluidly moving between both tools based on the task: canvas for broad exploration and code for deep, interactive prototyping.

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.

The design process has shifted from comprehensive Figma mockups to live in-app prototypes built with AI coding assistants. Figma is now used sporadically to explore multiple variations of a specific component quickly, but it's no longer the start or end of the design journey.

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).

Designing AI experiences in Figma is misleading because it only captures the ideal "golden path." Prototyping in code with live AI models is essential to understand and design for latency, errors, unexpected responses, and the true user "feel" of interacting with an unpredictable system.

Historically, design workflows moved from low-to-high fidelity due to tool constraints. AI tools like Codex remove these barriers, allowing designers to begin with functional wireframes in code for immediate interaction testing, bypassing static sketches.

AI makes iterating in code as inexpensive as sketching in design tools. This allows teams to skip low-fidelity wireframes and start with functional prototypes, blowing up traditional, linear development processes and reinventing workflows daily.

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.

Instead of providing a vague functional description, feed prototyping AIs a detailed JSON data model first. This separates data from UI generation, forcing the AI to build a more realistic and higher-quality experience around concrete data, avoiding ambiguity and poor assumptions.

Documenting every UI state is tedious for designers. Now, engineers can use an AI agent to parse the live codebase and automatically export all existing states (e.g., all five steps of a signup flow) directly into a Figma file for designers to review and refine.