Spacing

Dùng design-system skill để tạo hoặc rà soát một UI system, trích xuất token từ code hiện có và kiểm tra tính nhất quán của styling trong các repo thực tế.

design-review là kỹ năng QA thiết kế theo hướng UX để audit giao diện đang chạy, phát hiện vấn đề về khoảng cách, thứ bậc thị giác, tính nhất quán hình ảnh và tương tác, rồi chỉnh sửa lặp lại kèm bước xác minh. Kỹ năng này hỗ trợ review ở chế độ lập kế hoạch trước khi triển khai và rất hữu ích khi bạn cần một hướng dẫn design-review cho các thay đổi nguồn cụ thể thay vì lời khuyên chung chung.

design-consultation là một skill design-consultation giúp biến một ý tưởng sản phẩm thô thành một hướng thiết kế hoàn chỉnh. Skill này tạo ra một nguồn sự thật DESIGN.md, bản xem trước và hướng dẫn ở cấp hệ thống cho typography, màu sắc, khoảng cách, bố cục và chuyển động. Phù hợp nhất cho các sản phẩm mới và các bề mặt UI cần một điểm khởi đầu mạch lạc.

visual-design-foundations giúp các nhóm xây dựng hệ thống UI thực tiễn với thang kiểu chữ, token màu, quy tắc khoảng cách và hướng dẫn iconography. Hãy dùng skill này để thiết lập nền tảng thiết kế vững chắc, tạo style guide, rà soát phân cấp thị giác và tạo CSS variables sẵn sàng triển khai từ các ràng buộc thiết kế rõ ràng.

polish là kỹ năng rà soát UI ở bước cuối để bắt lỗi căn chỉnh, khoảng cách, tính nhất quán, việc dùng token và các chi tiết nhỏ trước khi phát hành. Kỹ năng này phù hợp nhất với những màn hình, luồng hoặc component đã dùng được nhưng vẫn còn cảm giác gần đúng chứ chưa thật sự hoàn thiện. Hãy dùng nó để nâng mức sẵn sàng ra mắt, bám sát design system hơn và cải thiện chất lượng tổng thể mà không cần thiết kế lại quá mức.

Skill layout giúp cải thiện khoảng cách, phân cấp thị giác và bố cục khi giao diện UI trông phẳng, chật chội hoặc sắp xếp máy móc. Hãy dùng khi gặp vấn đề về bố cục, căn chỉnh và nhịp điệu thị giác, với hướng dẫn thực hành dành riêng cho UI Design thay vì các mẹo styling chung chung. Phù hợp nhất khi bạn cần chỉnh sửa ở tầng cấu trúc, nhóm nội dung rõ ràng hơn và thứ tự đọc tốt hơn.

distill giúp tinh gọn thiết kế UI rối mắt bằng cách loại bỏ yếu tố gây nhiễu, hệ thống phân cấp yếu và các lựa chọn dư thừa để tác vụ cốt lõi trở nên rõ ràng. Hãy dùng khi một màn hình cần được lược giản có kỷ luật, ưu tiên rõ hơn và một lượt đơn giản hóa tập trung.

Skill layout giúp rà soát và cải thiện bố cục UI, khoảng cách, thứ bậc, căn chỉnh và nhịp điệu thị giác. Phù hợp nhất cho các màn hình chật chội hoặc có cấu trúc yếu, và cần dựa vào /impeccable để thu thập ngữ cảnh trước khi dùng.

Kỹ năng industrial-brutalist-ui cho thiết kế UI tạo ra các giao diện cơ học, mật độ cao với lưới kiểu Swiss, tương phản chữ cực mạnh, bảng màu thực dụng và chất liệu analog. Hãy dùng hướng dẫn industrial-brutalist-ui này cho dashboard, hệ thống biên tập và trang portfolio cần cảm giác như một bảng điều khiển có kỷ luật.

arrange giúp chẩn đoán và cải thiện bố cục UI, khoảng cách và hệ thống phân cấp thị giác. Hãy dùng kỹ năng arrange này để xử lý màn hình quá chật, lưới lặp lại nhàm chán và bố cục tổng thể yếu, với thiết lập bắt buộc qua $frontend-design và ngữ cảnh $teach-impeccable là tùy chọn.

Skill typeset giúp rà soát và cải thiện typography cho UI bằng cách chỉnh lựa chọn font, phân cấp, kích thước, độ đậm và khả năng đọc. Phù hợp nhất cho UI sản phẩm, dashboard và landing page. Cần có ngữ cảnh /frontend-design trước; nếu chưa có ngữ cảnh thiết kế thì dùng /teach-impeccable.

polish skill giúp các nhóm thực hiện lượt rà soát chất lượng UI cuối cùng trước khi phát hành. Hãy dùng kỹ năng này để phát hiện các vấn đề về khoảng cách, căn chỉnh, trạng thái tương tác, nội dung chữ và các trường hợp biên sau khi giao diện đã hoàn thiện về chức năng và bối cảnh thiết kế đã được xác lập rõ ràng.

Skill normalize giúp rà soát một tính năng UI và đưa nó về đúng với design system của bạn. Tìm hiểu các lựa chọn cài đặt normalize, phần chuẩn bị frontend-design cần có và cách dùng thực tế cho page, route và component.

distill là một skill thiết kế UI dùng để tinh gọn màn hình, component và luồng về đúng mục tiêu cốt lõi. Hãy dùng khi cần giảm rối mắt, nhiễu thị giác và tình trạng phình to tính năng, nhưng lưu ý distill phụ thuộc vào /frontend-design và đôi khi cần /teach-impeccable trước khi sử dụng.

arrange giúp cải thiện bố cục UI, khoảng cách và thứ bậc thị giác. Hãy dùng skill này để chẩn đoán màn hình quá chật, lưới lặp lại đơn điệu, nhóm nội dung yếu và bố cục thiếu điểm nhấn, rồi áp dụng cấu trúc rõ ràng hơn cùng nhịp khoảng cách hợp lý. Phù hợp nhất khi dùng trong pbakaus/impeccable sau /frontend-design, và đôi khi sau /teach-impeccable, để khai thác arrange hiệu quả hơn.

Skill quieter giúp giảm cường độ thị giác trong UI Design, làm giao diện bớt chói, gắt hoặc gây quá tải cảm giác mà vẫn giữ được thứ bậc, độ rõ ràng và cá tính thương hiệu. Phù hợp nhất khi dùng sau quy trình /frontend-design bắt buộc trong repository pbakaus/impeccable.

Skill polish hướng dẫn quy trình rà soát UI ở bước hoàn thiện cuối cùng để chỉnh khoảng cách, căn chỉnh, câu chữ, trạng thái và chuyển động trước khi phát hành. Phù hợp nhất khi tính năng đã hoàn thiện về mặt chức năng, có đủ ngữ cảnh thiết kế, tiêu chuẩn chất lượng rõ ràng và mục tiêu cụ thể như một màn hình, luồng hoặc component.

Skill normalize dùng để rà soát một tính năng UI và đưa nó về đúng với design system của bạn. Tìm hiểu bối cảnh cài đặt normalize, phần chuẩn bị bắt buộc với /frontend-design và cách dùng thực tế cho page, route và component.

distill là skill giúp tinh gọn thiết kế UI bằng cách lược bỏ màn hình về đúng tác vụ cốt lõi. Dùng skill này để dọn bớt chi tiết thừa, giảm nhiễu và làm rõ thứ bậc thị giác. Hiệu quả nhất khi chạy sau /frontend-design, với một màn hình cụ thể, một mục tiêu người dùng chính và các ràng buộc bắt buộc phải giữ rõ ràng.

Kỹ năng arrange giúp cải thiện bố cục UI, khoảng cách, cách nhóm thành phần và thứ bậc thị giác. Tìm hiểu khi nào nên dùng, cách arrange install từ repo GitHub hoạt động, và cách áp dụng arrange với ngữ cảnh /frontend-design để đưa ra quyết định UI Design tốt hơn.

Skill infographic biến nội dung có cấu trúc thành các bố cục infographic chỉn chu bằng DSL `infographic`. Dùng cho KPI cards, timeline, roadmap, luồng từng bước, so sánh A vs B, SWOT, funnel, cây tổ chức và các biểu đồ đơn giản. Đây là lựa chọn rất phù hợp cho infographic cho UI Design và các bản tóm tắt kiểu thuyết trình với 4–8 mục. Không lý tưởng cho phân tích dữ liệu phức tạp hoặc sơ đồ kỹ thuật.

high-end-visual-design là một skill định hướng UI cao cấp để tạo ra các giao diện mang tính editorial, điện ảnh và được trau chuốt kỹ lưỡng. Skill này giúp AI tránh các bố cục chung chung bằng cách định hướng font chữ, khoảng cách, bóng đổ, chuyển động và bố cục cho landing page, site marketing, dashboard và các bề mặt ứng dụng được hoàn thiện tinh xảo.

Skill redesign-existing-projects nâng cấp các website và ứng dụng hiện có lên chất lượng cao cấp. Skill này kiểm tra thiết kế hiện tại, phát hiện các mẫu AI chung chung, và áp dụng triển khai thiết kế cao cấp mà không làm hỏng chức năng. Hoạt động với mọi CSS framework hoặc vanilla CSS.

gpt-taste là một skill thiên về thiết kế, dùng để tạo các trang UI chỉn chu với định hướng nghệ thuật kiểu biên tập, kỷ luật về khoảng trắng và chuyển động GSAP. Hãy dùng skill gpt-taste cho các trang marketing, landing page và site trưng bày khi bạn muốn bố cục đa dạng hơn, kiểm soát typography tốt hơn và tránh các pattern frontend quá chung chung. Hướng dẫn này có kèm ghi chú cài đặt và cách dùng để triển khai thực tế.