Get started · 5 min read
A reference system, not a dependency.
Atlas is a design language your coding agent reads and uses to generate UI that fits your stack. It's not a CSS framework you bolt on. shadcn projects stay shadcn. Tailwind stays Tailwind. Your agent just knows how to make them look like Atlas. This entire site was one-shot generated that way.
The mental model
Three assets, three jobs. Read them in this order.
Give your agent the skill
This is the whole install. The skill is plain markdown plus one reference CSS file. Any coding agent that can read a repo can ingest it — Claude Code, Cursor, Windsurf, Cody, etc. No proprietary format, no vendor lock-in.
# Claude Code — two commands (marketplace, then plugin) /plugin marketplace add pacifio/ui /plugin install atlas@atlas-ui # Other agents — point them at the skill directory # They read the markdown, learn the rules, and generate code in your stack.
Let it generate code in your stack
The agent asks what stack you're on, then translates Atlas rules into the right idiom. Same visual result, native code. Pick your stack below to see what the output looks like.
# Claude Code — two commands /plugin marketplace add pacifio/ui /plugin install atlas@atlas-ui # Cursor, Windsurf, Cody, etc. # Point the agent at this repo's skills/atlas/ directory. # Everything an agent needs is plain markdown + one CSS file: # # skills/atlas/SKILL.md — entry rules (read first) # skills/atlas/references/tokens.md — every design token # skills/atlas/references/components.md — class vocabulary + variants # skills/atlas/references/theming.md — dark/light + shadcn map # skills/atlas/references/patterns.md — layout rules # skills/atlas/references/responsive.md — multi-surface guidance # skills/atlas/references/motion.md — motion inventory # skills/atlas/colors_and_type.css — reference implementation
What Atlas looks like, regardless of stack
Whatever codebase the agent generates into, the output obeys these rules: AMOLED black, 28px buttons, 4px grid, border-defined surfaces, near-white primary actions, blue reserved for focus and selection.
<Button variant="default">Ship it</Button> with the Atlas tokens mapped into shadcn's variables. Same visual. Different code.What's in the repo
github.com/pacifio/ui — MIT. Three top-level folders:
Common questions
Next steps
Browse components
50+ live previews with copy-ready HTML.
Read the tokens
Every color, space, radius, shadow.
Fork the patterns
Landing, dashboard, chat, mobile app.
See full mockups
Email, e-commerce, multi-agent, news.