Designing User Interfaces Directly with Claude Code and Artifacts
Developers are increasingly bypassing traditional design tools like Figma by using Claude to directly generate, iterate, and deploy frontend components. This paradigm shift bridges the gap between static design and interactive prototypes in seconds.
Why it matters
You can build fully functional UI components directly in your workspace without waiting for design-to-code translation.
TL;DR
- 01Describe responsive UI states in plain text to generate production-ready React components.
- 02Use Claude Artifacts to test layout interactions before integrating them into your primary codebase.
- 03Constrain the model with your company's Tailwind config to prevent visual inconsistencies.
Key facts
- Institution
- Jane Street
- Key Frontend Frameworks
- Bonsai, OCaml
Code as the True Design Medium
Edwin, a designer on the options desk at Jane Street, outlines how modern LLMs are replacing traditional tools like Figma for building frontend prototypes. By writing a problem description and launching Claude alongside a local build server, designers can create fully functional features directly inside the codebase using frameworks like OCaml and Bonsai, skipping static vector mockups entirely.
Eliminating Middleman Artifacts
This workflow enables rapid, free iteration of interface elements, such as layout behavior, state transitions, keyboard shortcuts, and button placements. Instead of spending valuable hours formatting design documentation or aligning layers in Figma, 100% of the creative and engineering effort goes directly into refining the actual code repository.
Collaborative and Creative Challenges
While highly empowering for individual designers, this approach introduces collaboration friction. Reviewers are presented with a fully working, baked feature, which can limit their co-design feedback. Jane Street mitigates this by treating prototypes as disposable 'living proposal docs' where code is easily thrown away before final production implementation.
✓ When to use
- When rapidly prototyping interactive internal tools and user workflows.
- When working directly in the target codebase where code generation is cheaper than manual UI-to-code translation.
✕ When NOT to use
- When strict high-fidelity brand consistency and centralized design systems must be established before coding.
- When working with external clients who rely strictly on visual static sign-offs.
What the community says
“This. Keep a list of sites you like and just jam screenshots of the best bits into Claude Design when you are asking it for help.”
“Vibecode a clone of the production stack and give them the keys and tell them to figure it out lol”
Sources