Mục tiêu: Tự xây dựng một Design System từ con số 0, áp dụng đầy đủ 10 kiến thức đã học từ Tokens đến Adoption.
Đề bài: "Nexus UI System"
Bạn được giao nhiệm vụ xây dựng hệ thống Design System cho Nexus - một startup công nghệ đa quốc gia. Họ cần một hệ thống có tính thực chiến cao, hỗ trợ cả Web app phức tạp và Landing page marketing.
Yêu cầu kỹ thuật
- Framework: React + TypeScript.
- Styling: Tự chọn một trong 3 hệ thống (Tailwind, CSS Modules, hoặc CSS-in-JS).
- Bundling: Sử dụng Vite hoặc Tsup để đóng gói thư viện.
- Documentation: Sử dụng Storybook hoặc tự xây dựng Docs site (giống như trang bạn đang xem).
Danh mục Deliverables (Sản phẩm bàn giao)
1. Foundation (Module 1-3)
- Token System: Xuất ra file JSON/CSS cho Colors, Spacing, Typography, Shadows.
- Type Scale: Ít nhất 7 cấp độ bậc chữ.
- Themes: Hỗ trợ Light mode và Dark mode (sử dụng CSS Variables).
2. Component Library (Module 4-6)
Xây dựng tối thiểu 15 components, trong đó phải có:
- Buttons Group: Button, IconButton, SplitButton.
- Forms Group: TextField, Select, Checkbox, Switch.
- Feedback Group: Toast, Modal, Alert, Spinner.
- Layout Primitives: Stack, Inline, Box.
3. Standards & Quality (Module 7-9)
- Accessibility: Đạt chuẩn WCAG 2.1 AA (có thể test bằng Axe).
- Testing: Ít nhất 30% components có Unit Test.
- Interactive: Các components phức tạp (Modal, Tabs) phải có Keyboard Navigation.
4. Governance (Module 10)
- Storybook: Public link (vd: qua Vercel hoặc Netlify).
- README: Hướng dẫn cài đặt, sử dụng và đóng góp.
Gợi ý quy trình thực hiện (Roadmap)
- Giai đoạn 1 (2 ngày): Định nghĩa Tokens và setup Tech stack (Vite + Storybook).
- Giai đoạn 2 (4 ngày): Build bộ Atoms (Button, Input, Box, Text).
- Giai đoạn 3 (3 ngày): Build bộ Molecules & Organisms (Modal, Toast, Form layouts).
- Giai đoạn 4 (2 ngày): Đánh giá Accessibility và viết Unit Tests.
- Giai đoạn 5 (1 ngày): Viết tài liệu (Documentation) và Publish.
Tiêu chí chấm điểm
| Tiêu chí | Trọng số | Mô tả |
|---|---|---|
| Tính hệ thống | 30% | Các components có dùng tokens không? API có nhất quán không? |
| UX/UI Chất lượng | 20% | Giao diện nhìn có chuyên nghiệp, chỉn chu không? |
| Accessibility | 20% | Có thể dùng phím Tab để đi hết mọi tương tác không? |
| Code Quality | 15% | TypeScript chặt chẽ, cấu trúc thư mục rõ ràng. |
| Tài liệu | 15% | Hướng dẫn có dễ hiểu cho người mới không? |
Nộp bài & Nhận xét
Khi bạn đã sẵn sàng, hãy đẩy code lên GitHub và chia sẻ link repo vào mục thảo luận bên dưới. Cộng đồng và Mentor sẽ tham gia review và đưa ra những lời khuyên để bạn hoàn thiện sản phẩm của mình tốt nhất.
Chúc bạn thành công trên con đường trở thành Design System Master!