Expose Your Design System to LLMs

"The AI made somewhere between 200 and 300 visual micro-decisions during that session: What padding to use on this card, What shade of blue for that link, What border radius on this button, How much spacing between a heading and a paragraph, What font weight for that label, Whether to use 12px or 16px for secondary text. Each of those decisions looked fine in isolation but 200 reasonable guesses don't add up to a consistent design."

"Your design system already exists as code: component libraries, token files, Figma variables. The problem is that LLMs can't use it properly when vibe coding. They fabricate token names, drift on values within a session, lose all context between sessions, and never notice when the upstream library ships breaking changes."

"The method described here restructures your design system into a format LLMs can reliably consume: structured spec files, a closed token layer, and automated auditing that catches every violation. Result: your 10th AI session produces the same visual quality as your 1st."

LLMs make hundreds of micro-decisions during coding sessions—padding values, color shades, border radius, spacing—that individually seem reasonable but collectively create visual inconsistency. Each new session starts from scratch with zero memory of previous decisions, causing token drift and fabrication of non-existent values. Design systems exist as code in component libraries and token files, but LLMs cannot reliably consume them during vibe coding. The solution restructures design systems into machine-readable formats: structured spec files, closed token layers, and automated auditing systems. This approach catches every violation and ensures the tenth AI session produces identical visual quality to the first by eliminating guessing and enforcing consistent design decisions.

Read at Hardik Pandya