# Introduction

Werewolf is a design system for building UI with AI coding agents. It gives your agent tokens, components and written rules, so screen 10 follows the same design as screen 1.

## What you get

- **Tokens**: color, size, radius, spacing, type and motion by role, generated for dark and light mode from three choices. Every theme passes contrast checks before it builds.
- **Components**: 73 React components on Tailwind CSS v4, copied into your project as source you own. Browse them on [Components](https://www.werewolf-ui.dev/components.md).
- **CLI**: `npx werewolf-ui` sets up tokens and agent rules, adds components, changes the theme, checks styling and exports tokens.
- **Agent rules**: the [design skill](https://www.werewolf-ui.dev/docs/design-skill.md) plus rule files for Cursor, Claude Code, Codex, Copilot, Windsurf, Gemini CLI, Cline and any agent that reads `AGENTS.md`.
- **MCP server**: five read-only tools that let your agent look up components, tokens and rules offline.
- **Docs for agents**: a Markdown version of every page and [llms.txt](https://www.werewolf-ui.dev/llms.txt).

## How it works

1. **One seed**

   `tokens/seed.json` holds three choices: accent color, gray tint and radius. The theme generator turns them into every token for both modes and refuses a theme that fails contrast.

2. **Tokens by role**

   Components use token classes such as `bg-background-surface` and `text-text-secondary`, never raw colors. Change the seed and every component follows.

3. **Rules for your agent**

   The design skill tells your agent which token, size and spacing to pick. `npx werewolf-ui lint` catches what slips through.

## Platforms

Components need React 19 and Tailwind CSS v4, in Next.js (app router) or Vite. Tokens also export to CSS, JSON, SwiftUI and Compose. Native components are planned for v2.

## Alpha status

The CLI is published on npm as `werewolf-ui@0.1.0-alpha.1`. Component APIs are drafts and can change between alpha releases; each component page shows its spec status. The [changelog](https://www.werewolf-ui.dev/docs/changelog.md) lists what changed.

## Free and Pro

Tokens, components, the CLI and the MCP server are free under the MIT license. Pro is in pre-sale: whole screens and large agent components, bought once on the [Pro page](https://www.werewolf-ui.dev/pricing.md), with installation opening in January 2027. Docs and Pro share one sign-in: sign in on the Pro page with your email and a 6-digit code, and the header shows your account on every page.

## How these docs are organized

| Section | Pages |
| --- | --- |
| Get started | [Introduction](https://www.werewolf-ui.dev/docs/introduction.md), [Installation](https://www.werewolf-ui.dev/docs/installation.md), [Design skill](https://www.werewolf-ui.dev/docs/design-skill.md) |
| Guides | [Using components](https://www.werewolf-ui.dev/docs/usage.md), [Theming](https://www.werewolf-ui.dev/docs/theming.md), [AI agents and MCP](https://www.werewolf-ui.dev/docs/agents.md), [Accessibility](https://www.werewolf-ui.dev/docs/accessibility.md) |
| Foundations | [Colors](https://www.werewolf-ui.dev/docs/foundations/colors.md), [Typography](https://www.werewolf-ui.dev/docs/typography.md), [Iconography](https://www.werewolf-ui.dev/docs/iconography.md), [Tokens](https://www.werewolf-ui.dev/docs/tokens.md) |
| Reference | [CLI](https://www.werewolf-ui.dev/docs/cli.md), [Troubleshooting and FAQ](https://www.werewolf-ui.dev/docs/troubleshooting.md), [Changelog](https://www.werewolf-ui.dev/docs/changelog.md) |

New here? Start with [Installation](https://www.werewolf-ui.dev/docs/installation.md).