frontend-design

Tổng quan

frontend-design là gì?

frontend-design là một kỹ năng chuyên biệt giúp tạo ra các giao diện frontend có tính thẩm mỹ cao, đạt chuẩn sản xuất. Khác với các công cụ thiết kế AI thông thường, nó tập trung vào hướng sáng tạo, thẩm mỹ, kiểu chữ, chuyển động, bố cục và sự tinh tế trong giao diện. Kỹ năng này rất phù hợp với các dự án cần chất lượng thiết kế cao—như các thành phần web, trang web, ứng dụng, poster hoặc bất kỳ sản phẩm nào đòi hỏi bản sắc hình ảnh mạnh mẽ.

Ai nên sử dụng frontend-design?

Kỹ năng này phù hợp nhất với các nhà phát triển frontend, nhà thiết kế UI và nhóm sản phẩm muốn nâng cao chất lượng giao diện vượt trội so với các kết quả AI mặc định hoặc chung chung. Nó đặc biệt hữu ích khi bạn cần:

• Xây dựng giao diện thể hiện rõ cá tính và tông màu thương hiệu
• Đảm bảo hướng thiết kế sáng tạo, không mang tính đại trà
• Áp dụng các nguyên tắc thiết kế nâng cao về màu sắc, kiểu chữ, chuyển động và bố cục

Những vấn đề frontend-design giải quyết

• Tránh thẩm mỹ "AI slop" bằng cách yêu cầu bối cảnh dự án thực tế
• Hướng dẫn bạn thu thập bối cảnh, đảm bảo thiết kế phù hợp với đối tượng và mục đích sử dụng
• Cung cấp các tham chiếu hữu ích về màu sắc, tương tác, chuyển động, đáp ứng, không gian, kiểu chữ và viết UX

Cách sử dụng

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

1. Cài đặt kỹ năng bằng lệnh:

   npx skills add https://github.com/pbakaus/impeccable --skill frontend-design
   

2. Bắt đầu với tập tin SKILL.md để có cái nhìn tổng quan nhanh về yêu cầu và quy trình làm việc.
3. Xem xét các tập tin và thư mục hỗ trợ:
   • README.md (nếu có)
   • AGENTS.md cho hướng dẫn dành riêng cho agent
   • metadata.json chứa metadata của kỹ năng
   • Thư mục reference/ để tìm hiểu sâu về màu sắc, tương tác, chuyển động, đáp ứng, không gian, kiểu chữ và viết UX

Mẹo quy trình làm việc

• Luôn thu thập bối cảnh dự án trước khi bắt đầu thiết kế. Xác nhận đối tượng mục tiêu, trường hợp sử dụng và tông màu thương hiệu.
• Điều chỉnh quy trình của kỹ năng phù hợp với kho mã và công cụ của bạn. Đừng sao chép nguyên văn—hãy dùng các nguyên tắc và tham chiếu để hướng dẫn quy trình riêng.
• Xem trước các tập tin chính để có hướng dẫn thực tiễn:
  • reference/color-and-contrast.md
  • reference/interaction-design.md
  • reference/motion-design.md
  • reference/responsive-design.md
  • reference/spatial-design.md
  • reference/typography.md
  • reference/ux-writing.md

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

frontend-design có phù hợp với dự án của tôi không?

Sử dụng frontend-design nếu bạn cần giao diện frontend sáng tạo, chất lượng cao và muốn tránh thiết kế AI đại trà. Nó không phù hợp cho các nguyên mẫu nhanh mà không ưu tiên sự tinh tế về mặt hình ảnh.

Tôi nên kiểm tra tập tin nào trước?

Bắt đầu với SKILL.md để hiểu bối cảnh. Sau đó khám phá thư mục reference/ để tìm các nguyên tắc thiết kế và ví dụ mã thực tế.

frontend-design xử lý thế nào về khả năng truy cập và tính đáp ứng?

Kỹ năng bao gồm các tham chiếu về độ tương phản màu sắc, trạng thái tương tác, thời gian chuyển động, bố cục đáp ứng, hệ thống không gian và kiểu chữ—tất cả đều theo các thực hành tốt nhất về khả năng truy cập.

Tôi có thể tìm thêm chi tiết ở đâu?

Mở tab Files trong kho lưu trữ để xem toàn bộ cây thư mục, bao gồm các tham chiếu lồng nhau và script hỗ trợ. Đối với câu hỏi về cài đặt hoặc quy trình, hãy tham khảo các tập tin README.md và SKILL.md.