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.
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 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.

Cách hoạt động

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.
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.
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 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, 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, Cài đặt, Design skill
Hướng dẫn	Dùng component, Theme, AI agent và MCP, Khả năng tiếp cận
Nền tảng	Màu sắc, Kiểu chữ, Icon, Token
Tra cứu	CLI, Xử lý sự cố và FAQ, Changelog

Mới bắt đầu? Đọc Cài đặt trước.