# Agent viết UI. Werewolf giúp nó trông như có designer làm.

Bạn đang vibe code một sản phẩm? Cắm Werewolf vào một lần, agent sẽ dựng mọi màn hình từ cùng một bộ token, theme và component, kèm tài liệu viết sẵn cho nó đọc. Sản phẩm trông chuẩn ngay từ màn hình đầu tiên, không phải đợi làm lại.

## Có gì bên trong

- **Token đặt tên theo việc nó làm.** Tên như `text-secondary` hay `background-raised` cho agent biết màu đó đặt ở đâu, nên nó không phải đoán.
- **Một màu accent, đủ cả theme.** Chọn một màu là có đủ token cho chế độ sáng và tối. Chữ và viền được kiểm tra độ tương phản trước khi theme được build.
- **45 component React.** Form, overlay, điều hướng, bảng và nhiều thứ khác. Component chỉ dùng token, và có test chặn màu hay khoảng cách viết cứng.
- **Dùng được trên mọi nền tảng.** CSS variables, theme Tailwind, JSON, SwiftUI và Jetpack Compose, tất cả từ cùng một bộ token.

## Làm cho người code bằng agent

Werewolf có sẵn một design skill: file luật để agent đọc trước khi viết UI. Gồm chữ, khoảng cách, bề mặt và chuyển động, mỗi luật có một cách nên viết và một cách nên tránh.

[Đọc design skill](https://werewolf-ui.vercel.app/vi/docs/design-skill.md)

Sắp có: CLI để cài token và thêm component, và MCP server để agent tra token ngay trong chat.

## Cài vào dự án

Cắm vào một lần. Từ đó, màn hình nào agent viết ra cũng trông như cùng một sản phẩm.

[Cài vào dự án](https://werewolf-ui.vercel.app/vi/docs/installation.md)