# Your agent writes the UI. Werewolf makes it look designed.

Vibe coding a product? Plug Werewolf in once and your agent builds every screen from the same tokens, theme and components, with docs written for it to read. It looks right from the first screen, not after a redesign.

## What's inside

- **Tokens named for their job.** Names like `text-secondary` or `background-raised` tell your agent where a color goes, so it doesn't guess.
- **One accent, a full theme.** Pick one color and get every token for light and dark mode. Text and borders are checked for contrast before the theme builds.
- **45 React components.** Forms, overlays, navigation, tables and more. They only use the tokens, and a test blocks hardcoded colors and spacing.
- **Every platform.** CSS variables, a Tailwind theme, JSON, SwiftUI and Jetpack Compose from the same tokens.

## Built for coding agents

Werewolf ships a design skill: a rules file your agent reads before it writes UI. Type, spacing, surfaces and motion, each rule with one thing to write and one to avoid.

[Read the design skill](https://werewolf-ui.vercel.app/docs/design-skill.md)

Coming: a CLI to set up tokens and add components, and an MCP server so agents can look up tokens in the chat.

## Get started

Plug it in once. Every screen your agent writes after that looks like part of the same product.

[Get started](https://werewolf-ui.vercel.app/docs/installation.md)