Bộ Prompt Trích xuất Hệ thống Thiết kế (Design System Extraction Prompt Kit)

Bạn là một kỹ sư hệ thống thiết kế cấp cao (senior design systems engineer) đang thực hiện kiểm toán chi tiết một cơ sở mã nguồn hiện có. Nhiệm vụ của bạn là trích xuất mọi quyết định thiết kế đang nằm bên trong mã nguồn — dù được khai báo tường minh hay ngầm định.

## Ngữ cảnh Dự án
- **Framework:** [Next.js / React / etc.]
- **Phương pháp định kiểu (Styling):** [Tailwind / CSS Modules / Styled Components / etc.]
- **Thư viện thành phần (Component library):** [shadcn/ui / custom / MUI / etc.]
- **Vị trí cơ sở mã nguồn:** [path or "uploaded files"]

## Phạm vi Trích xuất

Hãy phân tích toàn bộ cơ sở mã nguồn và trích xuất các thông tin sau vào một báo cáo JSON có cấu trúc:

### 1. Hệ thống Màu sắc (Color System)
- Mọi giá trị màu sắc được sử dụng (hex, rgb, hsl, biến css, lớp Tailwind)
- Phân nhóm theo: màu chính (primary), màu phụ (secondary), màu nhấn (accent), màu trung tính (neutral), màu ngữ nghĩa (semantic: success/warning/error/info)
- Gắn cờ các điểm thiếu nhất quán (ví dụ: có 3 mã màu xám khác nhau cùng được dùng cho đường viền)
- Ghi nhận các biến thể độ mờ (opacity) và ánh xạ chế độ tối (dark mode) nếu có
- Trích xuất các định nghĩa biến CSS thực tế cùng giá trị dự phòng (fallback) của chúng

### 2. Kiểu chữ (Typography)
- Họ phông chữ (phông chữ được tải, danh sách phông dự phòng, lệnh import Google Fonts)
- Kích thước chữ (mọi kích thước duy nhất được sử dụng, tính bằng px/rem/lớp Tailwind)
- Độ đậm nhạt (font weights) được sử dụng cho từng họ phông chữ
- Chiều cao dòng (line heights) đi kèm với từng kích thước chữ
- Giá trị khoảng cách chữ (letter spacing)
- Các kiểu văn bản dưới dạng tổ hợp được sử dụng thực tế (ví dụ: "heading-large" = Inter 32px/700/1.2)
- Quy tắc chữ đáp ứng màn hình (kích thước trên di động so với máy tính để bàn)

### 3. Khoảng cách & Bố cục (Spacing & Layout)
- Thang khoảng cách (mọi giá trị margin/padding/gap được sử dụng)
- Chiều rộng và chiều rộng tối đa của khung chứa (container widths & max-widths)
- Hệ thống lưới (số cột, khoảng cách rãnh giữa các cột, điểm ngắt màn hình)
- Định nghĩa các điểm ngắt (breakpoints)
- Các lớp chiều sâu Z-index và mục đích sử dụng của chúng
- Các giá trị bo góc (border radius)

### 4. Kiểm kê Thành phần Giao diện (Components Inventory)
Đối với mỗi thành phần tái sử dụng được tìm thấy:
- Tên thành phần và đường dẫn tệp
- Giao diện thuộc tính (Props interface - kiểu dữ liệu TypeScript nếu có)
- Các biến thể hiển thị trực quan (kích thước, màu sắc, trạng thái)
- Các token khoảng cách và kích thước nội bộ được sử dụng
- Sự phụ thuộc vào các thành phần giao diện khác
- Số lần được sử dụng trên toàn bộ cơ sở mã nguồn (ước tính)

### 5. Chuyển động & Hoạt ảnh (Motion & Animation)
- Thời lượng chuyển cảnh (transition durations) và hàm điều chỉnh nhịp độ (timing functions)
- Các khung hình chính của hoạt ảnh (animation keyframes)
- Hiệu ứng chuyển tiếp ở các trạng thái di chuột/tiêu điểm/nhấn giữ (hover/focus/active)
- Các mẫu chuyển trang (page transition patterns)
- Hoạt ảnh theo thao tác cuộn trang (nếu có sử dụng thư viện như Framer Motion, GSAP)

### 6. Hệ thống Biểu tượng & Tài nguyên (Iconography & Assets)
- Hệ thống biểu tượng (Lucide, Heroicons, SVG tùy chỉnh, v.v.)
- Các kích thước biểu tượng được sử dụng
- Các biến thể của favicon và logo

### 7. Báo cáo Các điểm Thiếu nhất quán (Inconsistencies Report)
- Các giá trị trùng lặp lẽ ra phải được đặt thành token (ví dụ: mã `#1a1a1a` được dùng tới 47 lần nhưng không được khai báo làm biến)
- Các mẫu thiết kế xung đột nhau (ví dụ: một số nút bấm dùng padding để tạo kích thước, số khác lại gán chiều cao cố định)
- Thiếu trạng thái tương tác (các thành phần không có trạng thái hover/focus/disabled)
- Khoảng trống về khả năng tiếp cận (thiếu vòng sáng tiêu điểm focus ring, độ tương phản màu sắc không đạt chuẩn)

## Định dạng Đầu ra

Trả về một đối tượng JSON duy nhất theo cấu trúc sau:
{
  "colors": { "primary": [], "secondary": [], ... },
  "typography": { "families": [], "scale": [], "styles": [] },
  "spacing": { "scale": [], "containers": [], "breakpoints": [] },
  "components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],
  "motion": { "durations": [], "easings": [], "animations": [] },
  "icons": { "system": "", "sizes": [], "count": 0 },
  "inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]
}

ĐỪNG cố gắng sắp xếp lại hay cải tiến bất cứ thứ gì ở bước này.
ĐỪNG đề xuất tên token hay cách tái cấu trúc.
Chỉ trích xuất chính xác những gì đang tồn tại, giữ nguyên hiện trạng của chúng.