The Shift from Figma to Code-Based Prototyping

Patrick Morgan, a product designer at Sublime Security, moved away from traditional design tools like Figma to build a custom, agent-native prototyping environment. The primary driver for this shift was the disconnect between static design artifacts and actual product code. While AI-generated prototypes were fast, they lacked persistence and context, making it difficult to build upon them over time or align them with the complex constraints of an enterprise cybersecurity application.

Designing the Prototyping Playground

Morgan’s solution was to create a centralized "playground" that acts as a bridge between design intent and production-ready code. By leveraging agentic coding harnesses (such as Cursor and Claude), he created a system where designers can:

  • Fork Production Blueprints: Start with "production-faithful" reference screens that act as a foundation for new explorations.
  • Maintain Fidelity Control: Use low-fidelity styles (grayscale, handwritten fonts) to prevent stakeholders from misinterpreting prototypes as final production work, while still using the actual underlying React components.
  • Iterate via Natural Language: Use AI to run design critiques against internal design principles and generate multiple structural variants for exploration.
  • Centralize Feedback: Integrate tools like the Vercel toolbar to allow for direct, comment-based feedback on deployed prototypes, mimicking the collaborative feel of Figma without the limitations of static files.

The Role of Fidelity and Systems Thinking

Morgan emphasizes that his environment is intentionally designed as a rendering surface rather than a traditional UI. Because the primary interaction is through an AI agent, the interface is stripped of unnecessary user-facing controls. This allows him to focus on systems design—thinking through complex state combinations and data models—which is critical for enterprise software but often difficult to visualize in static design tools. By using mock data modeled on the actual production database, he ensures that the prototypes remain technically grounded while remaining flexible enough for rapid divergent exploration.

Key Takeaways

  • Build for Your Workflow: Don't rely solely on off-the-shelf tools if they don't support your specific product constraints. Building internal tooling can significantly level up a design team's output.
  • Use Low-Fidelity to Manage Expectations: When prototyping with production-grade code, use visual cues (grayscale, specific fonts) to signal that the work is exploratory, preventing communication gaps with stakeholders.
  • Centralize Your Artifacts: Move prototypes out of ephemeral chat windows and into a persistent, browsable canvas where they can be annotated and built upon over time.
  • Design for the Agent, Not the User: When building internal AI tools, focus on creating a "rendering surface" that is optimized for agent interaction rather than a traditional, action-heavy UI.
  • Leverage Existing Infrastructure: Use tools like Vercel for deployment and commenting to bridge the gap between code-based prototypes and the collaborative feedback loops designers are accustomed to.

Notable Quotes

  • "I was very much still just like in Figma 95% of the time in December and now I'm almost never in Figma."
  • "I didn't want to mislead people by creating something that was like almost production fidelity but not actually production fidelity and then I end up with this big communication gap."
  • "The UI that we're looking at is really just like a rendering surface... it's designed intentionally to be used in the context of these agent coding harnesses."
  • "I just point and talk man that's what I do as a designer. I see things, I point and talk more, and you kind of built an entire tool around it."