# Giới thiệu

Werewolf là design system để dựng UI cùng agent code AI. Nó đưa cho agent token, component và luật viết sẵn, nên màn hình thứ 10 vẫn theo đúng thiết kế của màn hình đầu tiên.

## Bạn có gì

- **Token**: màu, kích thước, bo góc, khoảng cách, chữ và chuyển động theo vai trò, tạo cho cả chế độ tối và sáng từ ba lựa chọn. Mọi theme phải qua kiểm tra tương phản mới được build.
- **Component**: 73 component React trên Tailwind CSS v4, copy vào dự án dưới dạng mã nguồn của bạn. Xem tất cả ở [Component](https://www.werewolf-ui.dev/vi/components.md).
- **CLI**: `npx werewolf-ui` cài token và luật cho agent, thêm component, đổi theme, kiểm tra style và xuất token.
- **Luật cho agent**: [design skill](https://www.werewolf-ui.dev/vi/docs/design-skill.md) cùng file luật cho Cursor, Claude Code, Codex, Copilot, Windsurf, Gemini CLI, Cline và mọi agent đọc `AGENTS.md`.
- **MCP server**: năm công cụ chỉ đọc để agent tra component, token và luật, chạy offline.
- **Tài liệu cho agent**: bản Markdown của mọi trang và [llms.txt](https://www.werewolf-ui.dev/llms.txt).

## Cách hoạt động

1. **Một seed**

   `tokens/seed.json` chứa ba lựa chọn: màu accent, độ ám xám và bo góc. Bộ tạo theme biến chúng thành mọi token cho cả hai chế độ, và từ chối theme không đạt tương phản.

2. **Token theo vai trò**

   Component dùng class token như `bg-background-surface` và `text-text-secondary`, không bao giờ dùng màu thô. Đổi seed là mọi component đổi theo.

3. **Luật cho agent**

   Design skill chỉ cho agent chọn token, kích thước và khoảng cách nào. `npx werewolf-ui lint` bắt những gì còn sót.

## Nền tảng

Component cần React 19 và Tailwind CSS v4, trong Next.js (app router) hoặc Vite. Token còn xuất được ra CSS, JSON, SwiftUI và Compose. Component native dự kiến có ở v2.

## Trạng thái alpha

CLI đã có trên npm với tên `werewolf-ui@0.1.0-alpha.1`. API của component vẫn là bản nháp và có thể đổi giữa các bản alpha; trang mỗi component ghi trạng thái spec của nó. [Changelog](https://www.werewolf-ui.dev/vi/docs/changelog.md) liệt kê những gì đã thay đổi.

## Miễn phí và Pro

Token, component, CLI và MCP server miễn phí theo giấy phép MIT. Pro đang mở bán trước: các màn hình hoàn chỉnh và component agent lớn, mua một lần trên [trang Pro](https://www.werewolf-ui.dev/vi/pricing.md), mở cài đặt vào tháng 1 năm 2027. Docs và Pro dùng chung một lần đăng nhập: đăng nhập trên trang Pro bằng email và mã 6 số, header sẽ hiện tài khoản của bạn trên mọi trang.

## Tài liệu được sắp xếp thế nào

| Mục | Trang |
| --- | --- |
| Bắt đầu | [Giới thiệu](https://www.werewolf-ui.dev/vi/docs/introduction.md), [Cài đặt](https://www.werewolf-ui.dev/vi/docs/installation.md), [Design skill](https://www.werewolf-ui.dev/vi/docs/design-skill.md) |
| Hướng dẫn | [Dùng component](https://www.werewolf-ui.dev/vi/docs/usage.md), [Theme](https://www.werewolf-ui.dev/vi/docs/theming.md), [AI agent và MCP](https://www.werewolf-ui.dev/vi/docs/agents.md), [Khả năng tiếp cận](https://www.werewolf-ui.dev/vi/docs/accessibility.md) |
| Nền tảng | [Màu sắc](https://www.werewolf-ui.dev/vi/docs/foundations/colors.md), [Kiểu chữ](https://www.werewolf-ui.dev/vi/docs/typography.md), [Icon](https://www.werewolf-ui.dev/vi/docs/iconography.md), [Token](https://www.werewolf-ui.dev/vi/docs/tokens.md) |
| Tra cứu | [CLI](https://www.werewolf-ui.dev/vi/docs/cli.md), [Xử lý sự cố và FAQ](https://www.werewolf-ui.dev/vi/docs/troubleshooting.md), [Changelog](https://www.werewolf-ui.dev/vi/docs/changelog.md) |

Mới bắt đầu? Đọc [Cài đặt](https://www.werewolf-ui.dev/vi/docs/installation.md) trước.