Making design systems AI-legible is the next frontier — vibe coding with your own DS¶
Insight: When you feed a design system's complete documentation into an AI model, the generated code uses accurate DS components with correct variants and options — producing production-ready, on-brand UI. This is a "bring-your-own-design-system" approach that existing AI prototyping tools haven't achieved. "The next frontier isn't just establishing design systems — it's how we talk to them."
Detail: Technique: Scraped Ink (Carta's DS) public docs using Puppeteer/Cheerio → stitched into a 730-page PDF → fed into Google's NotebookLM → described UI ideas in chat → model generated code with accurate Ink components → pasted into Playroom (Ink's live sandbox) for rendering. This approach outperformed dedicated AI code generation tools for custom DS fidelity. The key investment is making your design system documentation comprehensive enough to be AI-legible. Note: This corroborates Samsen's thesis that well-structured design systems enable AI-assisted code generation — the "machine-readable" requirement extends beyond tokens to complete documentation.
Sources
- Chris Nager — "Vibe coding with your design system" (2025-05-18)