Bạn là người viết tài liệu về hệ thống thiết kế, tạo ra đặc tả thành phần
cho tệp CLAUDE.md. Tài liệu này sẽ được sử dụng bởi các trợ lý mã hóa AI
(Claude, Cursor, Copilot) để tạo mã UI nhất quán.
## Bối cảnh
- **Hệ thống mã thông báo:** [Paste or reference Phase 2 output]
- **Thành phần của tài liệu:** [Component name, or "all components from inventory"]
- **Khung:** [Next.js + React + Tailwind / etc.]
## Đối với từng Component, Document:
### 1. Tổng quan
- Tên thành phần (PascalCase)
- Mô tả một dòng
- Danh mục (Điều hướng/Đầu vào/Phản hồi/Bố cục/Hiển thị dữ liệu)
### 2. Giải phẫu
- Liệt kê mọi phần trực quan (ví dụ: Nút = vùng chứa + nhãn + biểu tượng bên trái + biểu tượng bên phải)
- Phần nào là tùy chọn và bắt buộc
- Quy tắc lồng nhau (những gì có thể/không thể vào bên trong thành phần này)
### 3. Thông số đạo cụ
Đối với mỗi chỗ dựa:
- Tên, loại, giá trị mặc định, bắt buộc/tùy chọn
- Giá trị cho phép (nếu enum)
- Mô tả ngắn gọn về những gì nó điều khiển trực quan
- Ví dụ sử dụng
### 4. Các biến thể trực quan
- Các biến thể kích thước có giá trị mã thông báo chính xác (phần đệm, cỡ chữ, chiều cao)
- Các biến thể màu có tham chiếu mã thông báo chính xác
- Các biến thể trạng thái: mặc định, di chuột, hoạt động, tập trung, vô hiệu hóa, đang tải, lỗi
- Đối với MỖI trạng thái: chỉ định mã thông báo nào thay đổi và giá trị nào
### 5. Bản đồ tiêu thụ token
Thành phần: Nút
├── nền → nút-bg- → màu-thương hiệu-
├── màu văn bản → nút-văn bản- → màu trắng
├── đệm-x → nút đệm-x- → khoảng cách-{n}
├── đệm-y → nút đệm-y- → khoảng cách-{n}
├── bán kính đường viền → bán kính nút → bán kính-md
├── cỡ chữ → nút-font- → cỡ chữ-{n}
├── font-weight → nút-font-weight → font-weight-nửa đậm
└── chuyển đổi → thời lượng chuyển động nhanh + chuyển động dễ dàng-mặc định
### 6. Nguyên tắc sử dụng
- Khi nào nên sử dụng (và khi nào KHÔNG sử dụng - đề xuất các lựa chọn thay thế)
- Số phiên bản tối đa trên mỗi khung nhìn (ví dụ: "chỉ 1 CTA chính cho mỗi phần")
- Nguyên tắc nội dung (độ dài nhãn, viết hoa, sử dụng biểu tượng)
### 7. Khả năng tiếp cận
- Thuộc tính ARIA bắt buộc
- Mẫu tương tác bàn phím
- Quy tắc quản lý tập trung
- Hành vi của trình đọc màn hình
- Tỷ lệ tương phản tối thiểu được đáp ứng theo mã thông báo mặc định
### 8. Ví dụ về mã
Cung cấp ví dụ về mã sẵn sàng sao chép-dán bằng cách sử dụng cơ sở mã thực tế
các mẫu (đường dẫn nhập, quy ước className, v.v.)
## Định dạng đầu ra
Markdown, được cấu trúc với các tiêu đề cho mỗi phần. Điều này sẽ trực tiếp
được chèn vào tệp CLAUDE.md.
