Exxat Design OS
Speak in outcomes. The system asks the right questions and ships UX that respects users.
I · Pick a path
One command for new projects. Three for existing ones, the same three after every release.
Vite + React, fully wired. Components, demo routes, Cursor skills. One command.
# inside an empty project folder — scaffold + install + sync Cursor skills npx --package=@exxatdesignux/ui@latest exxat-ui init . # start dev server pnpm dev
Drop into any React app. Same three commands cover install and every release.
# 1 · install or bump the dep pnpm add @exxatdesignux/ui@latest # 2 · port safe shell fixes + re-sync skills, rules, docs npx --package=@exxatdesignux/ui@latest exxat-ui upgrade # 3 · see what moved npx --package=@exxatdesignux/ui@latest exxat-ui changelog
II · How to use it
No build configs. No tokens to wire up. Open a folder, paste one command, ask the AI to run it. The Design OS handles the rest.
One scaffold command. It pins the right DS version, installs dependencies, and copies skills + rules into the folder you're in.
# scaffold Exxat DS into the folder you're in npx --package=@exxatdesignux/ui@latest exxat-ui init .
Anywhere on disk. Name it after the product, not the framework. The CLI scaffolds Vite, React, and the DS inside it.
mkdir my-app · cd my-app
Drag the folder into Cursor, or open it in Claude Code. Either editor reads the same rules and skills the CLI installs.
File → Open Folder
Paste the command into the AI chat and say "please install this for me." The agent runs init, installs dependencies, and tells you when it's ready.
⌘V then ↵
The editor needs a restart to pick up the freshly synced skills and rules. After it relaunches, your agent knows the whole design system.
Speak in outcomes — "build a students hub with filters and bulk actions." The AI uses Exxat patterns by default.
See the prompt theatre ↓III · Your first prompt
Speak in outcomes. Watch UX get built.
IV · Tips & tricks
Pick your tool, pick a goal. We'll show you the exact slash command to type — the chatbox below mirrors what lands in your editor.
Paste a screenshot or a route. The skill returns prioritised UX rewrites — IA, density, error states, empty states. Ship the rewrite, not the first draft.
New to skills? Read UX patterns for the full library, or browse .cursor/skills/exxat-* after install.
V · How smart it is
Components are table stakes. The AI inside ships user-centric UX on purpose, not by accident.
Discovery protocol runs first. Who, what decision, dense or visual. You answer once.
No raw tables. No hex. No toasts. 31 binding rules enforce the floor.
Every hub, the same seven views. Every record, the same IA. The system already chose.
Re-run sync-extras. Rules refresh. Your code never moves.
These are the files exxat-ui sync-extras drops into your repo (and
re-runs after every release). They're not just docs. Together they form the
ruleset that lets the AI ship user-centric designs without supervision. None of
them touch your hub code, routes, or data.
| What | Where it lands | Why it matters |
|---|---|---|
| 16 Cursor skills | .cursor/skills/exxat-* | Workflows + checklists the agent steps through before writing code (incl. exxat-token-economy pre-flight, ~50% fewer tokens) |
| 16 Claude skills | .claude/skills/exxat-* | Same shape, mirrored for Claude Code & Claude.ai |
| 31 binding rules | .cursor/rules/exxat-*.mdc | The MUST / MUST NOT floor. What the AI is not allowed to ship. |
| 6 pattern docs | docs/exxat-ds/*-pattern.md | How the system thinks about hubs, KPIs, command menu, collaboration, etc. |
| 1 upgrade checklist | docs/exxat-ds/consumer-upgrade-checklist.md | Run after every sync-extras. Surfaces what changed. |
| 4 handbook docs | docs/exxat-ds/handbook/*.md | Top-of-funnel HANDBOOK + glossary + voice/tone + reference implementations |
All in one command. Re-run after upgrades; the package's
CHANGELOG.md tells you which files moved. None of these overwrite
your code.
VI · What's new
May 26–29, 2026 · 0.6.28 — a composable product platform shipped in four days:
builder onboarding with a live sidebar preview, a four-app switcher, settings that split Profile from Organization,
Product Studio for tenant authoring, and AI guardrails that make agents post a brief before they edit a surface.
Read the full release →
Step 1 · Product — Prism, One, or Custom. Built-ins lock wordmark + brand; Custom opens the name and color editor.
Drill-in
SidebarDrillIn swaps primary nav for a flat ← Back list — see Tokens & themes in the carousel. Library keeps its secondary panel for folder scope; drill-in is a different pattern for flat section nav.
Onboarding
Five-step wizard: pick Custom (or Prism / One), name the product, choose scope + persona, build starter nav. Sidebar preview updates on every pick. Restart from Profile any time.
Guardrails
Brief-gate hook + exxat-senior-ux skill: Cursor posts Product / Scope / Persona before writing hubs. Sonner is gone — banners, inline status, and dialogs carry feedback.
Engineering history:
RELEASES.md
· package bumps via sync-extras on install.
VII · After it's in
Read New
May 26–29 release — onboarding, switcher, Product Studio, settings, AI brief-gate. Light + dark hero shots.
DESIGNER_RELEASE_NOTES.html
Read
Why the product feels the way it does. Patterns, personas, defaults.
UX_PATTERNS.html
Cookbook
Step-by-step specs for the patterns you'll reach for first.
docs/blueprints/*.md
Browse
Eighty-four components rendered in real flows you can copy from.
git clone · pnpm dev:web
Maintain
Every renamed token and removed piece, in plain prose.
docs/migrations/*.md