Get started · 5 min read
A design language, not a dependency.
Kairoz is a design language your coding agent absorbs and applies to generate UI native to your stack. No framework to bolt on. shadcn stays shadcn. Tailwind stays Tailwind. Your agent reads the rules, then generates consistent UI in whatever stack you use. This entire site was built that way in a single pass.
The mental model
Three assets, three roles. Read them in this order.
Give your agent the skill
That is the entire install. The skill is plain markdown plus one reference CSS file. Any coding agent that reads a repo can absorb it — Claude Code, Cursor, Windsurf, Cody, or whatever you run. No proprietary format, no lock-in.
# Claude Code — two commands (marketplace, then plugin) /plugin marketplace add sujal7103/kairoz /plugin install kairoz@kairoz-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 detects your stack, then translates Kairoz rules into its native idiom. Identical visual output, idiomatic code. Pick your stack below to see the result.
# Claude Code — two commands /plugin marketplace add sujal7103/kairoz /plugin install kairoz@kairoz-ui # Cursor, Windsurf, Cody, etc. # Point the agent at this repo's skills/kairoz/ directory. # Everything an agent needs is plain markdown + one CSS file: # # skills/kairoz/SKILL.md — entry rules (read first) # skills/kairoz/references/tokens.md — every design token # skills/kairoz/references/components.md — class vocabulary + variants # skills/kairoz/references/theming.md — dark/light + shadcn map # skills/kairoz/references/patterns.md — layout rules # skills/kairoz/references/responsive.md — multi-surface guidance # skills/kairoz/references/motion.md — motion inventory # skills/kairoz/colors_and_type.css — reference implementation
The Kairoz aesthetic, stack-independent
Regardless of codebase, the output follows the same rules: AMOLED black, 28px buttons, 4px grid, border-defined surfaces, near-white primary actions, blue reserved strictly for focus and selection.
<Button variant="default">Ship it</Button> with Kairoz tokens mapped into shadcn variables. Same pixels. Different code.Repository anatomy
github.com/sujal7103/kairoz — MIT licensed. Three top-level directories:
Frequently asked
Where to go from here
Browse components
50+ live previews, each with copy-ready markup.
Study the tokens
Every color, spacing value, radius, and shadow defined.
Fork a pattern
Landing pages, dashboards, chat views, mobile shells.
Explore the mockups
Email, e-commerce, multi-agent, news, and stocks.