AI Experiment2025Shipped

Design System with Claude Code

Designer & Implementer

I designed a complete design system in Figma (foundations, atomic components, composite patterns), then implemented it on a dedicated site in Astro and Tailwind, driven entirely by Claude Code and Figma MCP. The gap between the intended design and the implemented result was near zero on atomic components. This experience confirmed that in an AI-assisted workflow, the design system becomes the interface contract between the designer and the code agent.

Design System with Claude Code

Deliverables

Design SystemFigma TokensAstro + TailwindClaude CodeFigma MCP