Building an AI-Native Design System
A standard design system and an AI-native one are different things. Here's how to build a design system that AI can actually use — and why compression is the key.
The Problem With Full Design Systems
IBM Carbon. Material Design. Atlassian Design System. These are comprehensive, production-grade design systems with hundreds of components, detailed documentation, and thousands of lines of code per component.
They're excellent. And they're almost useless for AI-assisted prototyping in their raw form.
When you paste a component file with 74,000 characters into Claude's context, you're spending most of your context budget on one component. Scale that across the 5–10 components a typical screen uses, and there's no room left for anything else.
AI doesn't fail because the model is bad. It fails because the context is bloated.
The AI-Native Alternative
An AI-native design system is a condensed, purpose-built subset of your design system — optimised for fitting into an AI context window without losing the essential design decisions.
The goal: keep the design intent, remove everything that isn't needed for AI generation.
How to Build One
Step 1: Audit What You Actually Use
Look at the last six months of design and development work. Which components appear in most screens? In a typical B2B product, you'll find a short list accounts for 80% of usage:
- Data Table
- Button
- Text Input
- Dropdown / Select
- Modal
- Form
- Notification
- Navigation (Header, Side Nav)
- Tabs, Tags, Pagination
Pick the 30–40 components that matter. Ignore the long tail.
Step 2: Strip to Atoms and Molecules
Don't include "organisms" — complex assembled layouts. Include only:
- Atoms: Button, Input, Checkbox, Toggle, Tag, Icon
- Molecules: Card, Form Field, Dropdown, Modal shell
The compositions (full pages, complex layouts) should be generated by AI from these building blocks, not pasted in.
Step 3: Compress the Code
The IBM Carbon Dropdown component, in full, is ~74,000 characters. The core interface — what an AI needs to generate a working dropdown — is about 29,000 characters. That's a 60% reduction by removing internal implementation details, comments, edge case handling, and accessibility annotations that don't affect visual output.
Compression steps:
- Remove internal helper functions that aren't part of the API
- Remove verbose prop type definitions (keep the prop names, remove the comments)
- Remove tests and stories
- Keep: the component signature, key props, core structure, Tailwind class patterns
Step 4: Create an AI-Readable Reference
Format the condensed components as a single document or set of files. This becomes your knowledge base for Claude Projects, or the context you paste at the start of a Claude Code session.
A short preamble helps: "These are our design system components. When generating UI, use only these components and follow their prop signatures exactly."
What You Get
When AI has a well-structured, compressed design system as context:
- Generated components use your actual components, not generic HTML
- Visual output matches your design system automatically
- Iteration is faster because AI isn't re-inventing decisions you've already made
- Code is closer to production-ready because it uses the right abstractions
The Maintenance Loop
As your design system evolves, update the AI-native version. It's a lightweight artifact — a fraction of the full system — so keeping it current is manageable. Treat it like a living document that gets updated when components change significantly.
The investment is small. The compounding benefit across every AI-assisted design and development session is significant.