Thiết kế một hệ thống giao diện (Design System) dùng chung cho web và mobile giúp đội ngũ duy trì tính nhất quán, giảm thiểu trùng lặp mã và tăng tốc độ phát triển. Dưới đây là quy trình thực tế đã áp dụng thành công trong nhiều dự án sản phẩm. 1. Xác định Design Tokens - Màu sắc, khoảng cách, typography, border-radius, shadow… được định nghĩa ở dạng JSON hoặc TypeScript (ví dụ: tokens/colors.ts). - Sử dụng công cụ như Style Dictionary để xuất token sang CSS variables cho web và React Native StyleSheet cho mobile. 2. Tạo thư viện component chung - Khởi tạo một package nội bộ (ví dụ: @myorg/ui) trong monorepo (Turborepo/Nx). - Viết component cơ bản (Button, Input, Card…) bằng React, tách logic platform‑specific qua file .web.tsx và .native.tsx. - Áp dụng Tailwind CSS cho phiên bản web; đối với mobile, map token sang StyleSheet.create. 3. Cấu hình Storybook đa nền tảng - Cài đặt Storybook cho package @myorg/ui. - Viết story cho từng component, bật addon "@storybook/addon-themes" để chuyển đổi light/dark mode. - Sử dụng "storybook-react-native" để render story trên thiết bị/emulator, đảm bảo giao diện mobile hiển thị đúng. 4. Theming và Dark Mode - Tạo ThemeProvider bọc ứng dụng Next.js (app/layout.tsx) và React Native (App.tsx). - ThemeProvider đọc token từ Context và cung cấp cho cả hai nền tảng. 5. Kiểm thử trực quan (Visual Regression) - Tích hợp Chromatic hoặc Percy cho web; dùng Loki cho React Native. - Mỗi PR tự động chạy so sánh snapshot, phát hiện thay đổi không mong muốn. 6. CI/CD và Publish - Turborepo chạy lint, type‑check, test, build cho @myorg/ui. - Khi merge vào main, tự động publish package lên registry nội bộ (npm/GitHub Packages). - Các app web và mobile chỉ cần cập nhật dependency version. 7. Tài liệu và Onboarding - Storybook đóng vai trò tài liệu sống: dev/designer xem prop, variant, trạng thái loading, error. - Viết hướng dẫn contribution (naming convention, token naming, component checklist) trong README của package. Lời khuyên thực chiến: - Bắt đầu nhỏ: chỉ token màu và Button. - Giữ API component đơn giản, tránh over‑engineering sớm. - Đặt tên token theo ngữ nghĩa (color-primary-500) thay vì giá trị hex. - Review thiết kế cùng designer trước khi code component mới. - Tự động hóa visual test để tránh regression khi refactor. Với quy trình trên, đội ngũ có thể phát triển tính năng mới trên web và mobile song song, đảm bảo giao diện luôn đồng bộ và dễ bảo trì.