Design System to LLM Architecture bridges Figma design tokens through a three-layer CSS variable system into AI-readable specification files that guide LLM agents in generating compliant component code. The upstream design system feeds tokens.css (foundations, aliases, component references) and 64 LLM-readable specs organized by tier (foundations, atoms/molecules/organisms, patterns), while CI enforcement via token-audit.js and drift detection ensures consistency across 39 pinned dependencies. An AI coding agent reads CLAUDE.md rules and spec files to write var(--token) references, with every commit validated by an audit gate that blocks non-compliant code. This architecture eliminates manual token mapping, reduces design-to-code drift, and enables LLMs to generate on-brand components at scale. Fork this diagram on Diagrams.so to customize token layers, add enforcement rules, or integrate with your CI/CD pipeline. The pattern is ideal for teams scaling design systems across multiple products while maintaining AI-assisted development velocity.