The product design system behind XAgent.
Design tokens, shadcn-style primitives, and brand wrappers — one quiet, compact,
workflow-first language, documented so a human or an agent can reuse it exactly.
xagt.ai · DESIGN.md · Design skill · @XAgent_official
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·A self-contained seed of the design system that XAgent's product UI is built on — not a marketing page and not a generic SaaS dashboard kit. It is the single source of truth for how the product looks and behaves at the component level.
The system is deliberately token-first: every color, radius, and spacing step is a named CSS variable mapped to a semantic Tailwind utility. Nothing decorative is hard-coded. That is what lets it be lifted into another project — or handed to an agent — and reproduced faithfully rather than approximately.
| ◧ Tokens CSS variables + Tailwind semantic mappings. The one place color, radius & spacing are defined. |
◱ Primitives shadcn-style Button, Input, Card, Badge, Spinner — typed, forwardRef, CVA variants. |
◈ Brand wrappers Thin Xerpa compositions over the primitives for recurring product language. |
▦ Preview A state-complete /preview fixture — the visual regression & onboarding surface. |
| Path | What it is |
|---|---|
DESIGN.md |
AI-readable source of truth for the whole system |
src/index.css |
Token source — every color / radius / spacing CSS variable |
tailwind.config.js |
Tailwind semantic mappings (bg-canvas, text-muted, bg-lime, …) |
src/components/ui/* |
Brand-neutral, token-aware primitives (Button, Input, Card, Badge, Spinner) |
src/components/brand/* |
Xerpa wrappers (Button, LoginCard, StatusBadge, TaskCapsule) |
src/pages/PreviewPage.tsx |
/preview — every token, variant, and state, rendered |
skills/xerpa-product-ui-designer/ |
A reusable skill so an agent can extend the system by its own rules |
Quiet, compact, workflow-first. Warm stone shell, near-black ink, and a single lime accent reserved for active / selected / running / success states — never decoration.
| Role | Token | Value |
|---|---|---|
| Ink | --color-text |
#191919 |
| App shell | --color-canvas |
#f5f5f4 |
| Accent (lime) | --color-lime |
#cefe7d |
| Warning | --color-warning |
#ffecae |
| Success | --color-success |
#1f8f3a |
| Destructive | --color-destructive |
#fc4645 |
Shape is compact by default: 32px buttons, radius-sm 6px controls, radius-md 12px inputs, radius-lg 16px cards, spacing on an 8 / 16px step. Raw hex values are not allowed in component code — introduce a named token first. The full contract lives in DESIGN.md.
pnpm install
pnpm dev # open /preview to see every token, primitive & state
pnpm buildPorting into another project — copy the minimum set and verify against a preview fixture:
src/index.css # or merge tokens into the target global CSS
tailwind.config.js # semantic mappings
src/lib/utils.ts
src/components/ui/*
src/components/brand/*
DESIGN.md
skills/xerpa-product-ui-designer/SKILL.md
Then run the target app, open /preview (or an equivalent fixture route), and confirm every state visually before applying the system to production pages.
skills/xerpa-product-ui-designer/SKILL.md encodes the rules — token-first, primitive-first, keep wrappers thin, update /preview in the same change. Point Cursor, Codex, or Claude Code at it and new work stays inside the system by construction instead of drifting.
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·MIT © XerpaAI. Use it, port it, build on it. See CONTRIBUTING.md to propose changes.
xagt.ai · @XAgent_official · Tokyo, JP