Shipping Designs with AI at Anthropic
The ultimate dogfooding story: how Anthropic's design team uses Claude to ship production designs, and what they've learned building AI tools with AI tools.
Dogfooding at Scale
Anthropic's design team has a unique position in the AI industry: they use the product they're building to build the product they're building. Claude Code is used to design and implement the Claude interface itself. This creates a feedback loop unlike anything else in tech.
Every friction point a designer experiences with Claude Code becomes a potential product improvement. Every workaround they discover becomes a feature request. The design team isn't just using an AI tool — they're actively shaping it through daily use.
The result: Anthropic's design team ships faster than comparable teams at other companies, and the product improvements driven by their internal usage benefit every Claude user. It's dogfooding with real stakes.
The Design Workflow
Anthropic's design team follows a structured workflow that blends Figma and Claude Code.
Concept in Figma
High-level concepts start in Figma. Layout exploration, visual direction, and stakeholder alignment happen here. Figma remains the best tool for fast visual exploration when you're not sure what you want yet.
Prototype with Claude Code
Once direction is set, designers move to Claude Code to build interactive prototypes using Anthropic's actual component library. These prototypes run in the real app environment with real data.
Internal testing with prototypes
Working prototypes are shared internally for feedback. Because they use real components and real data, feedback is higher quality than mockup-based reviews.
Engineer handoff (code, not specs)
Engineers receive working prototype code. They refine it for production: adding error handling, optimization, and edge cases. The design intent is preserved because the designer implemented it.
What Works Internally
Claude Code for Component Exploration
Designers generate 5-10 component variants in minutes, test them in the real interface, and select the best. This replaced the old workflow of designing variants in Figma and guessing how they'd look in code.
Real-Time Design Iteration
During design reviews, designers make changes live using Claude Code. 'Can we try more padding here?' becomes a 10-second change instead of a 'I'll update the Figma and share a new link' workflow.
Accessibility Testing with AI
Claude Code generates accessibility tests for new components automatically. Designers catch contrast issues, missing ARIA labels, and keyboard navigation problems before engineering review.
Documentation Generation
When a new component is finalized, Claude Code generates the design system documentation: usage guidelines, prop descriptions, and example implementations. Documentation stays current because it's generated from the code.
Meta-Lessons
The biggest lesson: AI doesn't replace design thinking — it accelerates design execution. Anthropic's designers spend more time on user research, problem definition, and strategic decisions because the execution phase is compressed.
The surprising benefit: design quality improved, not just speed. When iteration is cheap, designers explore more options and make better decisions. The winner of 10 variations is better than the winner of 3.
The ongoing challenge: keeping the design team's skills sharp. When Claude Code handles implementation, designers risk losing their understanding of code constraints. Anthropic addresses this by encouraging designers to review the generated code, not just the visual output.
The future they're building toward: a workflow where designers describe intent ('make this loading state feel fast and responsive') and AI handles the implementation details (skeleton screens, optimistic updates, animation timing). They're not there yet, but the trajectory is clear.
