We scan new podcasts and send you the top 5 insights daily.
The design process has shifted through three phases: 1) Figma mocks, 2) isolated code prototypes, and now 3) "vibing in prod"—creating a branch of the actual product to test wild ideas in a realistic, high-fidelity environment.
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.
To validate user interaction patterns without premature backend complexity, OpenAI designers build fully interactive UI prototypes directly in the codebase. These connect to a non-functional "painted door" backend, allowing the team to gather real usage data before committing engineering resources to full implementation.
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.
With advanced AI coding tools and a robust design system, Snap's engineers build functional prototypes so quickly that the traditional design-first workflow is inverted. Instead of waiting for Figma mock-ups, teams now build and show working code to decide which ideas win.
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.
At OpenAI, the development cycle is accelerated by a practice called "vibe coding." Designers and PMs build functional prototypes directly with AI tools like Codex. This visual, interactive method is often faster and more effective for communicating ideas than writing traditional product specifications.
Designers at OpenAI who have never coded before are now using tools like Codex to create branches of the main ChatGPT application to prototype ideas. This shift dramatically lowers the barrier to high-fidelity, native prototyping and changes how designers build and test concepts.