Get your free personalized podcast brief

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

Granola found that static canvas tools like Figma are ineffective for designing context-heavy AI features like pre-meeting briefs. Because evaluating an AI output relies on seeing real, personal data under emotional conditions like meeting stress, designers must rapidly prototype in live code to determine if an experience feels right.

Related Insights

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.

Static wireframes fail to represent the dynamic, probabilistic nature of AI. A better method for rapid validation is to build a simple browser plugin that injects live, AI-generated content into your existing product. This allows for immediate, real-world user testing focused on the value of the content, not UI polish.

Instead of static mockups, prompt an AI to create a single HTML file containing multiple interactive UI options. This allows designers to quickly test and compare complex elements like animations or hover states, providing a faster and more tangible feedback loop for UI development.

Instead of simple mockups, AI can generate standalone HTML documents with interactive elements like approve/deny buttons. This creates a conversational artifact, allowing designers to provide structured feedback directly within the prototype, which is then fed back to the AI for the next iteration.

An interaction can look perfect in a static tool like Figma but feel terrible when built. Prototyping allows designers to experience the 'feel' of their work—a crucial step for validating ideas, developing intuition, and creating higher-quality products that you can't get from static mockups alone.

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.

In traditional design sprints, teams vote on static ideas due to the high cost of prototyping. With LLMs, you can skip voting. Instead, generate multiple rich, interactive prototypes for the top ideas simultaneously, allowing decisions based on tangible user experiences, not abstract concepts on sticky notes.