Designers should resist the urge to create fully functional, pixel-perfect components in AI prototyping tools. This work is often throwaway because it doesn't leverage the actual production codebase or design system, leading to wasted time and effort.
Prototyping directly in the production environment makes high-quality interactions achievable without extensive resources. This dissolves the traditional design dilemma of sacrificing quality for speed, allowing teams to build better products faster.
To keep pace with AI development, the barrier between design and engineering must fall. Intercom made it a non-negotiable job requirement for every product designer to ship code to production. This empowers them to fix UI bugs directly and accelerates the entire development cycle.
To enable AI-powered prototyping without production risks, large tech companies are creating separate, forked repositories for designers. This "designer playground" approach avoids the friction of production environments (e.g., linting, deploys) while providing a real-world starting point for stateful design exploration.
Contrary to claims that "handoff is dead," designers at top companies use AI-generated prototypes as highly detailed specs. These interactive prototypes provide more information than static designs but are still handed off to developers for implementation, rather than being merged directly into production.
To ensure AI prototypes match your product's design system, don't just describe the style. Instead, start by prompting the tool to "recreate" a screenshot of your live app. Refine this initial output to create a high-fidelity "baseline" template for all future feature prototypes.
Connecting to a design system is insufficient. AI design tools gain true power by using the entire production codebase as context. This leverages years of embedded decisions, patterns, and "tribal knowledge" that design systems alone cannot capture.
While forked codebases empower designers with AI tools, they create a new operational cost. Teams must now maintain two copies of the app—the real one and the designer one—which risks falling out of date. This mirrors the long-standing problem of syncing Figma design systems with production code.
Instead of building UI elements from scratch, adopt modern libraries like Tailwind's Catalyst or Shad CN. They provide pre-built, accessible components, allowing founders to focus engineering efforts on unique features rather than reinventing solved problems like keyboard navigation in dropdowns.
The panel suggests a best practice for AI prototyping tools: focus on pinpointed interactions or small, specific user flows. Once a prototype grows to encompass the entire product, it's more efficient to move directly into the codebase, as you're past the point of exploration.
Resist the temptation to treat AI-generated prototype code as production-ready. Its purpose is discovery—validating ideas and user experiences. The code is not built to be scalable, maintainable, or robust. Let your engineering team translate the validated prototype into production-level code.