visual-design-foundations

Tổng quan

visual-design-foundations là gì?

visual-design-foundations là một kỹ năng thực tiễn dành cho các nhà thiết kế và phát triển UI muốn xây dựng giao diện nhất quán về mặt hình ảnh và dễ tiếp cận. Nó cung cấp hướng dẫn nền tảng về tỷ lệ chữ, lý thuyết màu sắc, hệ thống khoảng cách và biểu tượng, giúp các nhóm thiết lập các token thiết kế và hướng dẫn phong cách cho cả giao diện web và sản phẩm.

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

• Nhà thiết kế UI/UX xây dựng hoặc hoàn thiện hệ thống thiết kế
• Lập trình viên frontend triển khai các token phong cách
• Các nhóm muốn cải thiện thứ bậc thị giác và khả năng đọc
• Bất kỳ ai kiểm tra hoặc cập nhật tính nhất quán hình ảnh trên các sản phẩm

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

• Thiết lập hệ thống tỷ lệ chữ và khoảng cách có thể mở rộng
• Hướng dẫn tạo bảng màu dễ tiếp cận (bao gồm chế độ tối)
• Hỗ trợ thiết kế hệ thống biểu tượng và duy trì sự nhất quán tài sản hình ảnh
• Giúp kiểm tra và cải thiện thứ bậc thị giác trong giao diện

Cách sử dụng

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

1. Cài đặt visual-design-foundations bằng lệnh:

   npx skills add https://github.com/wshobson/agents --skill visual-design-foundations
   

2. Bắt đầu bằng cách xem qua SKILL.md để nắm tóm tắt các nguyên tắc cốt lõi và quy trình làm việc được khuyến nghị.
3. Khám phá các tệp hỗ trợ:
   • references/color-systems.md: Tìm hiểu về các thang màu đồng nhất về nhận thức và các token màu sắc mang tính ngữ nghĩa.
   • references/spacing-iconography.md: Hiểu về lưới 8 điểm và các token khoảng cách mang tính ngữ nghĩa để đảm bảo sự nhất quán bố cục.
   • references/typography-systems.md: Xây dựng các tỷ lệ chữ mô-đun và áp dụng các thuộc tính CSS tùy chỉnh.

Điều chỉnh theo quy trình làm việc của bạn

• Tích hợp các thuộc tính CSS tùy chỉnh và hệ thống token được khuyến nghị vào kho mã hoặc thư viện Figma của bạn.
• Sử dụng tỷ lệ mô-đun và hệ thống khoảng cách làm nền tảng, sau đó tùy chỉnh tỷ lệ và đơn vị sao cho phù hợp với thương hiệu hoặc sản phẩm.
• Tham khảo hướng dẫn hệ thống màu để tạo bảng màu dễ tiếp cận và các token ngữ nghĩa cho việc tạo chủ đề.

Khi nào visual-design-foundations phù hợp?

• Khi bắt đầu một hệ thống thiết kế hoặc thư viện UI mới
• Khi kiểm tra các giao diện hiện có để đảm bảo tính nhất quán
• Khi triển khai chế độ tối hoặc các biến thể chủ đề
• Khi xây dựng tài sản hình ảnh có thể mở rộng và dễ tiếp cận

Khi nào không nên sử dụng

• Nếu dự án của bạn đã có hệ thống thiết kế trưởng thành và được tài liệu hóa đầy đủ
• Với các phong cách hình ảnh tùy biến cao hoặc thử nghiệm không dựa trên các token thiết kế chuẩn

Câu hỏi thường gặp

Tôi có thể tìm tất cả các tệp hỗ trợ ở đâu?

Mở tab Files để xem toàn bộ cấu trúc thư mục, bao gồm các tham chiếu lồng nhau và các script hỗ trợ.

visual-design-foundations có hỗ trợ quy trình làm việc với Figma không?

Có. Các nguyên tắc và hệ thống token có thể được điều chỉnh để sử dụng trong thư viện Figma và các tệp hệ thống thiết kế.

Tôi có thể dùng visual-design-foundations cho chế độ tối không?

Chắc chắn rồi. Kỹ năng này bao gồm hướng dẫn tạo bảng màu dễ tiếp cận và các token ngữ nghĩa, rất cần thiết cho việc tạo chủ đề và hỗ trợ chế độ tối.

Làm thế nào để tùy chỉnh tỷ lệ chữ hoặc hệ thống khoảng cách?

Xem lại references/typography-systems.md và references/spacing-iconography.md để biết công thức tỷ lệ mô-đun và ví dụ thuộc tính CSS. Điều chỉnh tỷ lệ và đơn vị cơ sở theo nhu cầu dự án của bạn.

Kỹ năng này có phù hợp với các nhóm phát triển hệ thống thiết kế không?

Có. visual-design-foundations rất phù hợp cho các nhóm đang thiết lập hoặc hoàn thiện các token thiết kế, hướng dẫn phong cách và các mẫu UI đồng nhất.