Zi Ui Skill

Zi UI Skill

**English** · [中文](./README.zh-CN.md)

A portable, token-driven CSS design system — packaged as an agent skill compatible with Claude Code, Cursor, GitHub Copilot, and 18+ other agents via the [Vercel Skills](https://skills.sh) ecosystem.

**Two things at once:**

1. A working design system — drop two CSS files into any project and build calm, editorial UIs out of documented classes. No npm install, no build step, no React dependency.
2. A reference implementation of the Claude Design architecture — a concrete, readable example of the "tokens + semantic classes + visual proofs + skill packaging" pattern that Anthropic's Claude Design is built on. Clone it, read it, fork it, reshape it into your own system.

This repo was reverse-engineered from a Claude Design project to make that architecture legible and reusable outside Claude Design itself.

---

Install (as a skill)

npx skills add bravohenry/zi-ui-skill

This installs the skill into your local agent (Claude Code, Cursor, Copilot, etc.). After installation, your agent can build Zi UI interfaces on demand — just ask: _"build a settings page in Zi UI"_ and it will follow the system's rules automatically.

Works with any agent listed at [skills.sh](https://skills.sh).

Use (as raw CSS, no agent required)

Save changes
Live

That's it. Two stylesheets, a handful of semantic classes, and you're done. Works with plain HTML, React, Vue, Svelte, Astro, Rails, email templates, anything that speaks CSS.

---

Why this exists — the Claude Design architecture, made portable

On April 17