Designing with Claude: Shifting from Figma to Code-First Prototyping

AI-Driven Prototyping is Replacing Traditional Design Mockups

For designers, the traditional workflow of creating specification documents and Figma mockups is being superseded by the ability to build functional prototypes directly in the codebase using LLMs. By using Claude to generate working code, designers can move from a problem description to a live, interactive feature without the "ancillary in-between work" of creating components in design tools or formatting documentation.

This shift allows designers to prove the feasibility of an idea and test it with real users immediately. Instead of convincing engineers to build a proof-of-concept, designers can submit a "feature" (a pull request) that behaves exactly as intended, reducing the back-and-forth typically required between design and engineering teams.

The Code-First Design Workflow

Implementing a design directly in code via AI follows a specific iterative loop that bypasses traditional wireframing:

  1. Problem Definition: Write a description of the problem and the proposed solution.
  2. AI Generation: Use the description as a prompt for Claude within the editor to generate basic functionality.
  3. Rapid Iteration: Refine the feature through unlimited iterations—tweaking copy, adding keyboard shortcuts, and adjusting prompts—without the friction of manual design updates.
  4. User Validation: Push changes to a development environment for immediate user feedback.
  5. Submission: Submit the working prototype as a pull request for review.

This approach was demonstrated in the creation of an LLM-prompting interface for JSQL (an internal SQL dialect at Jane Street), where the designer spent days living with and testing the real artifact rather than a static mockup.

Challenges in AI-Integrated Design

While empowering, the transition to code-first design introduces new tensions in the development lifecycle:

The Reviewer's Dilemma

When a reviewer is presented with a "fully baked" feature, the opportunity for collaborative design input can diminish. To mitigate this, Jane Street employs a specific mental model for these submissions:

  • Prototypes as Living Docs: The code is treated as disposable and serves as a proposal.
  • Feedback-Centric Review: The reviewer's primary role is to provide feedback on the design and user experience, not just the code.
  • Production Handoff: Once the design is validated, reviewers typically take over the idea and implement it in a separate feature to ensure production-grade code quality.

Creative Constraints

There is a risk that relying on LLMs shifts the designer's mindset from a fluid, creative state to a purely iterative one. Because the designer may be constrained by what they believe the AI can produce, they might miss unconventional ideas that a blank canvas or pen-and-paper approach would reveal.

Community Perspectives and Counterpoints

Technical discussions surrounding this shift highlight several critical trade-offs:

  • Engineering Friction: Some frontend engineers report that the decline of written specifications increases cognitive burden. They note that reading generated code to determine intended changes versus "slop" (unintended AI-generated changes) can be more frustrating than following a Figma file.

  • Design Quality vs. Speed: While AI accelerates the "divergent early stage exploration," some designers argue that the output quality often adheres to contemporary web tropes and lacks the precision of hand-crafted designs, particularly for mobile interfaces where space is limited.

  • The Role of Design Tools: Some practitioners still prefer Figma for collaboration and high-fidelity polishing, suggesting that AI is best used for the initial prototype, while Figma remains the tool for final refinements.

"The benefit here is designers learning to code... However, designing in code is technology-first. One could argue that the purpose of design—to shape the artifacts for human purpose—is better done NOT starting with the strict rules of code."

Technical Context: OCaml and Bonsai

At Jane Street, this workflow is particularly useful because the firm uses a specialized tech stack involving OCaml and the Bonsai framework. For designers unfamiliar with these exotic languages, LLMs act as a bridge, allowing them to contribute technically to the codebase without needing years of mastery in functional programming.

Sources