Design system concepts for AI-built interfaces
The building blocks behind a good AI-built brand: a DESIGN.md the agent follows, and the semantic color tokens that make light and dark modes coherent.
14 guides in this topic.
How to generate a DESIGN.md (and what it is)
A DESIGN.md is the written design brief your AI coding agent follows so it stops building generic UI. Here is what belongs in one, and how to generate a complete, exportable DESIGN.md from a real design system.
Updated 2026-07-27
Semantic color tokens: the 28 roles, and why hue names fail
A semantic token names a colour by what it does, not what it looks like. That sounds like a naming preference until dark mode, until a rebrand, and until an AI agent has to decide which of your four greys a caption should be.
Updated 2026-07-27
Interface guidelines an AI agent can actually follow
Packaging Apple's HIG, Material, or your own house rules as agent-readable guidance: what survives the translation from human design doc to agent instruction, what doesn't, and why platform guidelines alone still produce generic UI.
Updated 2026-07-27
Font pairings for SaaS: what a product typeface has to do
Every SaaS font list recommends the same faces. Here is why, what a typeface actually has to survive in a dense product UI — tabular numerals, real weight separation, small-size legibility — and when a second family earns its place.
Updated 2026-07-27
Atomic design in the agent era: which parts still hold
Atomic design solved a 2013 problem: giving humans a shared vocabulary for interface parts. An agent already has the vocabulary and lacks the judgement. Which parts of the methodology survive that, and which were always scaffolding.
Updated 2026-07-27
Design system vs component library: the difference that costs money
A component library is code you can install. A design system is the set of decisions that made that code look the way it does. Confusing them is why teams install shadcn, ship a generic product, and cannot work out what went wrong.
Updated 2026-07-27
Design token naming: the three-tier system, and where it breaks
Primitive, semantic, component. The three-tier convention is close to universal and most teams still end up with tokens nobody uses. Why that happens, how to name each tier, and the test that tells you a name is wrong before it ships.
Updated 2026-07-27
Design system governance when most commits are not human
Governance models were designed around the assumption that a person requests a change and a person reviews it. When an agent writes forty screens between reviews, contribution processes stop being the bottleneck and enforcement becomes the whole job.
Updated 2026-07-27
Figma to code: why the output is visually right and structurally wrong
Design-to-code tools reproduce what a frame looks like. They cannot reproduce what it means, because a Figma frame does not contain that. What actually transfers, what does not, and the naming decision that closes most of the gap.
Updated 2026-07-27
Shadcn design system generators: do you need a theme, a system, or an agent handoff?
Compare shadcn theme generators, broader design systems, and coding-agent handoffs by inspecting their documented outputs and exported artifacts.
Updated 2026-07-18
AI UI review checklist: test generated interfaces before you ship
A practical pre-ship checklist for AI-generated UI, with observable acceptance criteria, realistic state testing, issue routing, a controlled-change test, and a copyable review record.
Updated 2026-07-24
Google Stitch design system: diagnose drift and verify handoff
A practical workflow for assigning rule authority in Google Stitch, diagnosing inconsistent screens, testing controlled changes, and verifying DESIGN.md and code handoffs.
Updated 2026-07-26
Brand kit for web developers: what an implementation-ready handoff needs
A practical method for turning brand assets into an implementation-ready website handoff, with ownership boundaries, an intake record, a public kit example, and source-to-surface acceptance checks.
Updated 2026-07-26
Webflow design system: map authority across variables, styles, components, and breakpoints
Set up a governed Webflow design system with a responsibility map, source-to-Webflow register, controlled-change worksheet, responsive verification matrix, and ownership-ordered drift diagnostic.
Updated 2026-07-27