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.
A core design philosophy for B2B SaaS is to shorten the time it takes for a design to face the realities of a production-like environment. Prototyping directly in the browser, powered by AI coding assistants, reveals issues like loading states and responsiveness that static design tools completely miss.
Notion built a `/figma` command that enters a "verification loop." It uses multi-modal tools to open the browser, visually compare its coded implementation to the original Figma file, and automatically iterate on the code until it matches. This moves beyond simple generation to a self-correcting system.
To encourage designers intimidated by Git and terminals to use a code playground, Notion created custom slash commands like `/create` and `/deploy`. These commands abstract complex processes, provide instructions if prerequisites are missing, and guide users through workflows like branching and deploying, lowering the barrier to entry.
The Notion team was frustrated by their AI assistant repeatedly hallucinating icon names. They built a custom "skill" that, when prompted to add an icon, runs a script to programmatically search their icon library for the correct filename using synonyms (e.g., searching for "magnifying glass" when asked for "search").
Notion created a shared Next.js app where each designer has a namespace. This centralizes prototypes, making it easy to see others' work, share code, and use shared Notion-style components. This visibility and code reuse significantly speeds up the design and prototyping process for the entire team.
Instead of blaming the AI model, recognize that AI output quality is directly correlated to input quality. When frustrated with poor AI results, the most effective solution is often to step away, rest, and return later to provide a clearer, more coherent prompt. A tired mind provides bad context.
When an AI coding assistant asks you to perform a manual task like checking its output, don't just comply. Instead, teach it the commands and tools (like Playwright or linters) to perform those checks itself. This creates more robust, self-correcting automation loops and increases the agent's autonomy.
Notion's team uses a `claude.md` file in their repo root to provide global instructions (e.g., tech stack) to their AI assistant. A git-ignored `claude.local.md` file is then used by each developer to provide personal context, like their username, which prevents the AI from modifying others' work.