A design system called Atlas that teaches AI coding agents a unified design language has been released. Distributed on GitHub, it ships with a Claude Code skill and a framework-agnostic reference CSS.
Design Systems · pacifio/ui
Atlas: "The shadcn for agent UI"
A framework-agnostic design language that teaches AI coding agents — Claude Code, Cursor, Windsurf, Aider — one unified, machine-readable design system, so generated interfaces stop drifting off-brand.
180+
design tokens in the reference CSS
50+
.atlas-* utility classes
55+
documented component pages
10
"non-negotiable" design principles
THREE LAYERS OF ATLAS
01 · SKILL
Agent rules
SKILL.md teaches tokens, vocabulary & composition recipes as Markdown.
→
02 · CSS
Reference impl.
Runs as-is in plain HTML, translatable to Tailwind, React, Vue, Svelte.
→
03 · SITE
Live docs
55+ component pages + 4 full-app mockups, each with "Copy rules".
Core specification
AMOLED black · monochromatic · dark-first
Grid 4px · 13px text · 28px buttons
Radii 3 / 4 / 6 / 9999
Icons Lucide · 1.5px stroke
Why it helps
Human-built design systems (Figma, tokens, docs) are hard for LLMs to read, so agents drift. A machine-readable spec gives them consistent, on-brand judgment criteria to follow.
The caveat
The codebase itself acts as a prompt — teams must rigorously manage not just the rules but the real component implementations, with lint rules, golden examples and verification loops.
Continue reading The rest of this article is for AI News Blitz readers. Choose an option below to keep reading.
Already purchased? Sign in ✓ Signed in — this article isn’t included in your current plan.Unlocking the full article…