frontend-design

Tổng Quan

frontend-design là gì?

Kỹ năng frontend-design là bộ công cụ chuyên biệt để 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 trình tạo mã chung chung, kỹ năng này nhấn mạnh vào định hướng sáng tạo, thẩm mỹ, kiểu chữ, chuyển động, bố cục và sự tinh tế của giao diện. Nó được thiết kế để giúp bạn cung cấp các thành phần web, trang và ứng dụng nổi bật và có chủ ý, không giống như sản phẩm AI thông thường.

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

Kỹ năng này lý tưởng cho các nhà phát triển frontend, nhà thiết kế UI/UX và các nhóm sản phẩm muốn nâng cao chất lượng hình ảnh và tương tác của dự án web. Sử dụng frontend-design khi bạn cần:

• Thiết kế UI sáng tạo, chất lượng cao cho ứng dụng web, trang đích hoặc sản phẩm kỹ thuật số
• Hướng dẫn về màu sắc, kiểu chữ, chuyển động và bố cục đáp ứng
• Tránh các giao diện AI tạo ra chung chung, thiếu cảm hứng
• Đảm bảo tuân thủ các nguyên tắc truy cập và thiết kế tốt nhất

Kỹ năng này giải quyết những vấn đề gì?

• Ngăn chặn "AI slop" bằng cách yêu cầu bối cảnh dự án và thương hiệu thực tế trước khi bắt đầu thiết kế
• Cung cấp hệ thống thiết kế có thể áp dụng cho màu sắc, khoảng cách, kiểu chữ và tương tác
• Đảm bảo truy cập và thiết kế đáp ứng được tích hợp ngay từ đầu
• Cung cấp mã và mẫu thiết kế thực tiễn, sẵn sàng cho sản xuất

Cách Sử Dụng

Các Bước Cài Đặt

1. Thêm kỹ năng vào dự án của bạn:
   Chạy:

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

2. Xem qua tài liệu cốt lõi:
   • Bắt đầu với SKILL.md để có cái nhìn tổng quan và quy trình thu thập bối cảnh.
   • Kiểm tra README.md, AGENTS.md và metadata.json để biết thêm hướng dẫn cài đặt và sử dụng.
3. Khám phá tài liệu tham khảo thiết kế:
   Thư mục reference/ chứa các hướng dẫn thực tiễn về:
   • Màu sắc và độ tương phản (reference/color-and-contrast.md)
   • Thiết kế tương tác (reference/interaction-design.md)
   • Thiết kế chuyển động (reference/motion-design.md)
   • Thiết kế đáp ứng (reference/responsive-design.md)
   • Thiết kế không gian (reference/spatial-design.md)
   • Kiểu chữ (reference/typography.md)
   • Viết UX (reference/ux-writing.md)
4. Điều chỉnh theo quy trình làm việc của bạn:
   Tích hợp các nguyên tắc thiết kế và ví dụ mã vào kho mã và công cụ của bạn. Kỹ năng này được thiết kế để tùy biến, không phải sao chép nguyên văn.

Mẹo Quy Trình Làm Việc Chính

• Luôn thu thập bối cảnh dự án (đối tượng, trường hợp sử dụng, tông thương hiệu) trước khi bắt đầu thiết kế.
• Sử dụng hệ thống màu sắc, khoảng cách và kiểu chữ được cung cấp để đảm bảo giao diện nhất quán và dễ tiếp cận.
• Tham khảo hướng dẫn chuyển động và tương tác để giao diện của bạn cảm thấy tinh tế và trực quan.
• Kiểm tra các file trong reference/ để có CSS và mẫu thiết kế sẵn sàng sử dụng.

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

Khi nào tôi nên sử dụng kỹ năng frontend-design?

Sử dụng frontend-design khi bạn cần tạo hoặc cải thiện chất lượng hình ảnh và tương tác của các thành phần web, trang hoặc ứng dụng — đặc biệt khi bối cảnh thiết kế và cá tính thương hiệu quan trọng.

Tôi nên xem những file nào trước?

• SKILL.md để có cái nhìn tổng quan và yêu cầu bối cảnh
• reference/color-and-contrast.md để hướng dẫn hệ thống màu sắc
• reference/interaction-design.md để biết các thực hành tốt nhất về trạng thái và truy cập
• reference/motion-design.md cho hoạt ảnh và thời gian
• reference/responsive-design.md cho bố cục thích ứng
• reference/spatial-design.md cho khoảng cách và lưới

frontend-design tạo mã hay chỉ cung cấp hướng dẫn?

Nó cung cấp cả hai: các đoạn mã thực tiễn, sẵn sàng cho sản xuất (chủ yếu là CSS) và hướng dẫn thiết kế chi tiết để bạn triển khai hiệu quả.

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

Kỹ năng này phù hợp nhất với các dự án ưu tiên chất lượng thiết kế, sự khác biệt thương hiệu và khả năng truy cập. Với các công cụ thuần chức năng hoặc nội bộ mà thẩm mỹ không quan trọng, cách tiếp cận đơn giản hơn có thể phù hợp hơn.

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

Duyệt toàn bộ cây thư mục trong tab Files, bao gồm tất cả các tài liệu tham khảo và script hỗ trợ để có hướng dẫn và ví dụ chi tiết.