design-system-patterns

Tổng Quan

design-system-patterns là gì?

design-system-patterns là một kỹ năng thực tiễn giúp xây dựng hệ thống thiết kế có khả năng mở rộng và đồng nhất. Nó cung cấp hướng dẫn và mẫu thiết kế cho việc tạo design token, hạ tầng theming và kiến trúc component, chủ yếu dành cho thiết kế UI và các dự án dựa trên React.

Ai nên sử dụng kỹ năng này?

• Các nhà thiết kế UI và kỹ sư frontend muốn thiết lập hệ thống thiết kế dễ bảo trì
• Các nhóm xây dựng thư viện component hoặc theming đa thương hiệu
• Các nhà phát triển triển khai chuyển đổi theme hoặc hệ thống token ngữ nghĩa

Các vấn đề được giải quyết

• Tập trung các quyết định thiết kế với token cho màu sắc, kiểu chữ, khoảng cách và nhiều hơn nữa
• Hỗ trợ chuyển đổi theme mạnh mẽ (sáng/tối, theme thương hiệu)
• Hỗ trợ API component có khả năng mở rộng và mẫu component phức hợp
• Kết nối quy trình thiết kế đến mã nguồn, bao gồm tích hợp token từ Figma

Cách Sử Dụng

Các bước cài đặt

1. Cài đặt design-system-patterns qua Agent Skills Finder:

   npx skills add https://github.com/wshobson/agents --skill design-system-patterns
   

2. Xem qua các file chính:
   • SKILL.md để tổng quan và hướng dẫn sử dụng kỹ năng
   • references/design-tokens.md về cấu trúc token và quy ước đặt tên
   • references/theming-architecture.md về thuộc tính CSS tùy chỉnh và chuyển đổi theme
   • references/component-architecture.md về mẫu component React

Design Tokens: Bắt đầu

• Sắp xếp token thành các nhóm primitive, semantic và component
• Sử dụng JSON hoặc thuộc tính CSS tùy chỉnh để tạo token đa nền tảng
• Ví dụ cấu trúc token màu:

  {
    "color": {
      "primitive": { "gray": { "100": { "value": "#f5f5f5" } } } }
  }
  

Hạ tầng Theming

• Triển khai chuyển đổi theme với thuộc tính CSS tùy chỉnh và bộ chọn [data-theme]
• Sử dụng React context provider để quản lý theme động
• Hỗ trợ ưu tiên hệ thống (ví dụ: prefers-color-scheme)

Mẫu Kiến Trúc Component

• Xây dựng component phức hợp sử dụng React context để chia sẻ trạng thái
• Áp dụng mẫu đa hình (as prop) để render linh hoạt
• Định nghĩa các biến thể và kích thước cho API có khả năng mở rộng

Hướng dẫn thích nghi

• Sử dụng các tài liệu tham khảo như mẫu, không sao chép trực tiếp
• Tích hợp các mẫu vào repo của bạn, điều chỉnh phù hợp với công nghệ và thương hiệu

Câu Hỏi Thường Gặp

Tôi có thể tìm ví dụ chi tiết ở đâu?

Xem thư mục references/ để tìm hiểu sâu về design token, theming và kiến trúc component.

design-system-patterns chỉ dành cho React phải không?

Mặc dù nhiều mẫu sử dụng React context, hướng dẫn về token và theming là độc lập nền tảng và có thể điều chỉnh cho các framework khác.

Làm sao để xem trước cấu trúc kỹ năng?

Mở tab Files để kiểm tra tất cả các file, bao gồm các tài liệu tham khảo và script hỗ trợ.

Khi nào design-system-patterns không phù hợp?

Nếu dự án của bạn không cần theming mở rộng, thư viện component hoặc quản lý design token, các giải pháp UI đơn giản hơn có thể phù hợp hơn.

Tôi có thể dùng kỹ năng này cho ứng dụng di động không?

Có, design token và mẫu theming có thể được điều chỉnh cho các nền tảng iOS và Android.