AI Design Systems
20 articles in series
Twenty articles on DESIGN.md — agent-readable design systems (YAML tokens + rationale) that let AI agents build on-brand UIs. Deep-dives into Stripe, Discord, Spotify, Raycast and more, mapped to the 135-design Designs category.
Inside Raycast's Design System
How Raycast's design system nails the keyboard-first developer aesthetic — sharp dark UI, tight spacing, and monospace accents, captured in an agent-readable DESIGN.md.
Inside Spotify's Design System
How Spotify's design system goes bold and dark — its brand-green accent, expressive large-scale typography, and media-forward layouts, captured in an agent-readable DESIGN.md.
Inside Discord's Design System
How Discord's design system is built for always-on use — its Blurple brand, dark-first surfaces, rounded friendly components, and high chat readability, captured in a DESIGN.md.
Inside Stripe's Design System
How Stripe's design system balances technical precision and luxury — its restrained palette, crisp typography, and generous spacing, captured in an agent-readable DESIGN.md.
Stitch-Style Design Systems Explained
Stitch-style design systems package design tokens and rationale into one agent-readable file. Here's Google's Stitch pattern and why a standard format matters.
How Agents Build On-Brand UIs
How AI agents turn a DESIGN.md file into on-brand components: the workflow that replaces generic AI output with UI that actually matches your product.
Design Tokens Explained for AI Agents
Design tokens are named, reusable values for color, type, spacing, and radii. Here's what they are and how AI agents consume them to build on-brand UIs.
What Is a DESIGN.md File?
A DESIGN.md file is an agent-readable design spec: YAML design tokens plus markdown rationale that teaches AI agents to build on-brand UIs, not generic output.