Skip to content
werewolf-ui

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.

Get startedBrowse components

Change the accent in the header. This screen, and the whole site, re-themes in light and dark.

Workspace

Settings for your team.

InvoiceStatusAmount
INV-001Paid$250.00
INV-002Due$1,200.00

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

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

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

Get started