Tổng quan
Curriculum này đưa bạn từ Zero đến Hero trong việc xây dựng Design System cho Frontend production-ready. Mỗi module được cấu trúc: Lý thuyết → Nguyên tắc then chốt → Thực hành → Thảo luận.
Frontend Design System là gì?
Design Tokens + UI Components + Patterns + Guidelines + Tooling đảm bảo mọi giao diện đồng nhất, dễ scale, dễ maintain.
Learning Tracks
Chọn điểm bắt đầu dựa trên kinh nghiệm:
Track Nền tảng (Tuần 1-3)
Yêu cầu: HTML/CSS/JavaScript cơ bản
Bắt đầu từ đây nếu bạn chưa quen Design Systems.
- Module 1: Design Tokens Fundamentals
- Module 2: Typography & Spacing Systems
- Module 3: Color Systems & Theming
Kết quả: Thiết lập token system hoàn chỉnh cho org.
Track Component (Tuần 4-7)
Yêu cầu: Foundations Track hoàn thành
Xây dựng UI components tái sử dụng.
- Module 4: Component Architecture
- Module 5: Form Components & Validation
- Module 6: Layout & Composition
- Module 7: Accessibility (A11y) Fundamentals
Kết quả: Component library production-ready với accessibility.
Track Nâng cao (Tuần 8-10)
Yêu cầu: Component Track hoàn thành
Master styling systems và testing strategies.
- Module 8: Styling Systems (CSS-in-JS, Modules, Utility)
- Module 9: Component Testing & Visual Regression
- Module 10: Documentation & Adoption Strategy
- Module 11: Essential Frontend Skills (skills.sh)
Kết quả: Design System hoàn chỉnh với docs, governance và bộ kỹ năng frontend hiện đại.
Chi tiết Modules
MODULE 1 — Design Tokens Fundamentals
Thời lượng: 1 tuần | Level: Beginner
Học cách tạo design tokens - "ngôn ngữ" chung giữa designers và developers.
Bài học
- 1.1: Tokens là gì và tại sao cần?
- 1.2: Token Taxonomy (Colors, Spacing, Typography)
- 1.3: Token Platform & Tooling
MODULE 2 — Typography & Spacing Systems
Thời lượng: 1 tuần | Level: Beginner
Thiết lập typography scale và spacing system nhất quán.
Bài học
- 2.1: Type Scale & Hierarchy
- 2.2: Spacing Scale (4px, 8px base)
- 2.3: Responsive Typography
MODULE 3 — Color Systems & Theming
Thời lượng: 1 tuần | Level: Beginner
Tạo color palette có khả năng theming (light/dark mode).
Bài học
- 3.1: Color Palette Design
- 3.2: Semantic Color Tokens
- 3.3: Dark Mode Implementation
MODULE 4 — Component Architecture
Thời lượng: 1 tuần | Level: Intermediate
Thiết kế components có tính tái sử dụng cao và API rõ ràng.
Bài học
- 4.1: Component API Design
- 4.2: Composition vs Configuration
- 4.3: Compound Components Pattern
MODULE 5 — Form Components & Validation
Thời lượng: 1 tuần | Level: Intermediate
Xây dựng form components với validation và error handling.
Bài học
- 5.1: Input Components (Text, Select, Checkbox)
- 5.2: Form Validation Patterns
- 5.3: Error States & Messaging
MODULE 6 — Layout & Composition
Thời lượng: 1 tuần | Level: Intermediate
Master layout primitives và composition patterns.
Bài học
- 6.1: Stack, Inline, Grid Primitives
- 6.2: Responsive Layout Strategies
- 6.3: Container Queries
MODULE 7 — Accessibility Fundamentals
Thời lượng: 1 tuần | Level: Intermediate
Đảm bảo Design System accessible cho mọi người.
Bài học
- 7.1: ARIA & Semantic HTML
- 7.2: Keyboard Navigation
- 7.3: Screen Reader Testing
MODULE 8 — Styling Systems
Thời lượng: 1 tuần | Level: Advanced
So sánh và chọn styling approach phù hợp.
Bài học
- 8.1: CSS-in-JS vs CSS Modules vs Utility CSS
- 8.2: Scoping & Theming Strategies
- 8.3: Performance Optimization
MODULE 9 — Component Testing
Thời lượng: 1 tuần | Level: Advanced
Testing strategies cho Design System components.
Bài học
- 9.1: Unit Testing với Jest/Vitest
- 9.2: Accessibility Testing
- 9.3: Visual Regression Testing
MODULE 10 — Documentation & Adoption
Thời lượng: 1 tuần | Level: Advanced
Build infrastructure cho Design System dài hạn.
Bài học
- 10.1: Storybook & Component Docs
- 10.2: Adoption Metrics & Strategy
- 10.3: Versioning & Release Process
MODULE 11 — Essential Frontend Skills
Thời lượng: 1 tuần | Level: Advanced
Tổng hợp bộ kỹ năng frontend hiện đại từ skills.sh.
Bài học
- 11.1: Performance & Framework Optimization
- 11.2: Frontend Design Thinking
- 11.3: Quality Control & Testing Standards
Capstone Project
Yêu cầu để hoàn thành khóa học
Xây dựng một Design System hoàn chỉnh:
Deliverables Checklist
- Token System: Colors, Typography, Spacing (50+ tokens)
- Component Library: 15+ components (Button, Input, Card, Modal, etc.)
- Theming: Light/Dark mode support
- Accessibility: WCAG 2.1 AA compliant
- Documentation: Storybook với 100% component coverage
- Testing: Unit + A11y + Visual regression tests
- Package: Published npm package
- Adoption Guide: "Quick Start" cho developers
Sản phẩm sau khi hoàn thành
Sau khi hoàn thành 10 modules và capstone, bạn sẽ có:
- Token System v1.0 - Design tokens cho toàn org
- Component Library - 15+ React components production-ready
- Theming Engine - Light/Dark mode + custom themes
- Accessibility Kit - A11y guidelines + test scripts
- Documentation Site - Storybook hoặc custom docs
- Build Tooling - Bundler config, linter, prettier
- Testing Suite - Unit, A11y, Visual regression
- Starter Templates - Boilerplate cho new projects
Bắt đầu học
- Đánh giá Level: Bắt đầu từ Foundations nếu chưa quen Design Systems
- Đặt tốc độ: Mỗi module = 1 tuần (điều chỉnh theo lịch trình)
- Tham gia cộng đồng: Chia sẻ tiến độ và nhận hỗ trợ
- Áp dụng thực tế: Apply từng bài học vào dự án thật