# Ship app nhìn như có designer, ngay từ prompt đầu tiên.

AI viết code, Werewolf lo phần đẹp.

## AI agent của bạn

Dán đoạn này vào AI agent bạn đang dùng. Nó tự cài phần còn lại.

```text
Run `npx werewolf-ui@latest init --agent <id> --yes --json`. Use your tool's id: cursor, claude, copilot, windsurf, gemini, cline, or other (Codex and anything else). Don't add --overwrite. If there's a conflict, stop and show me. Then tell me which files were created, updated or unchanged.
```

Thích dùng terminal? `npx werewolf-ui@latest init`

```bash
npx werewolf-ui init
```

```bash
npx werewolf-ui mcp
```

## Có gì bên trong

- **Tokens.** Màu, bo góc, khoảng cách đặt theo vai trò, đổi theme không vỡ.
- **Components.** React và Tailwind v4, copy thẳng vào dự án, code là của bạn.
- **CLI.** Một lệnh là có token và rule cho agent.
- **Agent rules.** `init` ghi rule để agent đọc trước khi động vào UI.
- **MCP.** Agent tra đúng component thay vì đoán.
- **Docs song ngữ.** Docs tiếng Anh và tiếng Việt, người đọc được, AI cũng đọc được.

## Bắt đầu từ đây

- [Cài đặt](https://www.werewolf-ui.dev/vi/docs/installation.md): Thêm Werewolf vào dự án mới hoặc dự án đang có.
- [Nền tảng](https://www.werewolf-ui.dev/vi/docs/foundations/colors.md): Màu, chữ, bo góc và quy tắc đằng sau.
- [Components](https://www.werewolf-ui.dev/vi/components.md): Toàn bộ component kèm ví dụ chạy thật.

## Câu hỏi

- **Werewolf là gì?** Một design system làm cho việc build bằng AI. Có token, component và rule để agent làm theo.
- **Dùng với AI tool nào?** `init` tạo rule cho Cursor, Claude Code, Codex, Copilot, Windsurf, Gemini CLI và Cline.
- **Sao không prompt "làm đẹp vào" là xong?** Prompt đó mỗi lần ra một kiểu. Werewolf đưa agent cùng một bộ rule, nên màn thứ 10 vẫn khớp màn đầu tiên.
- **Có cần biết design không?** Không. Phần quyết định design đã nằm sẵn trong token và rule.
- **Bắt đầu thế nào, cần stack gì?** Cách dễ nhất: copy prompt ở trên dán vào AI tool, để nó tự chạy `init`. Component và CLI cần React 19 và Tailwind v4 (Next.js hoặc Vite). Token còn xuất được ra CSS, JSON, SwiftUI và Compose.
- **Cái gì miễn phí, cái gì là Pro?** Token, component, CLI và MCP server miễn phí theo MIT. Pro đang mở bán trước: các màn hình hoàn chỉnh và component lớn cho agent, mua một lần trên trang Pro, cài đặt mở từ tháng 1/2027.

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

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