I recently ran a complete experiment: designing a full design system in Figma (tokens, components, variants, documentation), then implementing it on a dedicated site built in Astro and Tailwind, driven entirely by Claude Code. The design system covers foundations (color, typography, spacing, elevation), atomic components (buttons, inputs, badges, tags), and composite patterns (cards, navigation, forms). What this approach changes in the relationship between design and development is fundamental. The design system becomes a single source of truth that both the designer and the AI can read. Claude Code does not interpret screenshots, it reads structured design data. The gap between the intended design and the implemented result shrinks to almost nothing.
AI
Designing a design system in Figma, then implementing it with Claude Code

Victor Soussan
January 20261 min read

Victor Soussan
Lead Product Designer
More articles