Skill
Triển khai interface hoàn thiện với ak:frontend-design
Biến UI brief, screenshot hoặc video reference đã duyệt thành frontend code responsive với craft, accessibility và review gate rõ ràng.
Dùng ak:frontend-design khi deliverable là interface code hoạt động và visual
fidelity là tiêu chí thành công chính. Skill hỗ trợ page từ đầu, prototype
nhanh, replication screenshot hoặc video, descriptive handoff và công việc
motion hoặc 3D phức tạp hơn, đồng thời thực thi quy trình design decision cùng
craft review cuối.
Chọn ak:frontend-design cho implementation
Dùng ak:frontend-design khi
- Bạn muốn implement page hoặc component trong project hiện có.
- Screenshot hay video là visual contract cần tái tạo.
- Bạn cần prototype responsive với state và interaction thật.
- Bạn có direction đã duyệt và muốn code, asset cùng verification.
Chọn workflow khác khi
- Bạn cần recommendation trước implementation. Dùng
ak:ui-ux-pro-max. - Bạn cần review chỉ có finding cho một thiết kế hoặc brief. Dùng
ak:ui-ux-pro-max. Để audit một sản phẩm đang chạy, hãy dùng route UX audit của Skill này. - Bạn cần token dùng lại được trước. Dùng
ak:design-system. - Bạn cần campaign visual thay vì interface code. Dùng
ak:design.
Chuẩn bị project và runtime
Cung cấp audience, loại surface, brand source đã duyệt, target stack, viewport được hỗ trợ, content, interaction bắt buộc, accessibility criteria, reference asset và ranh giới tệp chính xác. Giữ công việc không liên quan và nêu rõ dependency, generated asset, documentation hay test có thể thay đổi không.
| Runtime | Cách gọi | Ranh giới khả dụng |
|---|---|---|
| Claude Code | /ak:frontend-design ... | Phân phối native là mặc định; plugin là lựa chọn rõ ràng. Implementation phụ thuộc project tool cùng visual-analysis hoặc browser capability hiện có. |
| Cursor | /ak:frontend-design ... | Cách gọi bằng slash đã được người dùng xác minh; parity runtime rộng hơn chưa được thiết lập. |
| Codex | $ak:frontend-design ... | Có hỗ trợ native discovery; projection Hook và Agent vẫn một phần hoặc phụ thuộc setup. |
Hoàn thành Làm quen và xem Runtime adapter.
Chạy Skill
/ak:frontend-design Implement the approved campaign landing page in the existing Next.js project. Preserve the current brand tokens, edit only app/launch and its tests, support 375px through desktop, include keyboard and reduced-motion behavior, and do not install packages, commit, publish, or deploy/ak:frontend-design Implement the approved campaign landing page in the existing Next.js project. Preserve the current brand tokens, edit only app/launch and its tests, support 375px through desktop, include keyboard and reduced-motion behavior, and do not install packages, commit, publish, or deploy$ak:frontend-design Implement the approved campaign landing page in the existing Next.js project. Preserve the current brand tokens, edit only app/launch and its tests, support 375px through desktop, include keyboard and reduced-motion behavior, and do not install packages, commit, publish, or deployVới replication, attach hoặc xác định source và nói rõ đó là contract chính xác hay chỉ là inspiration. Nếu muốn documentation thay vì code, hãy yêu cầu workflow describe-only và cấm workspace change. Để audit một sản phẩm đang chạy, hãy truyền URL của nó thay vì brief.
Hiểu các giai đoạn
- Chọn workflow. Skill phân biệt input screenshot, video, describe-only, 3D, quick, immersive, from-scratch và live-product UX audit.
- Viết design brief. Trước khi code, Skill ghi các dòng cố định Register
(Brand hoặc Product), Scene, Direction, Color, Type, Signature và Dials, suy
ra direction từ Scene thay vì một style ưa thích. Khi brief không nêu, Skill
áp dụng register default: dial (variance / motion / density) là
7 / 5 / 3cho Brand và3 / 2 / 6cho Product, cùng starter token file tương ứng. Yêu cầu của bạn, brand asset và design system hiện có luôn override mọi giá trị mặc định. - Kiểm tra project. Skill đọc repository rule, pattern hiện tại, brand input, asset, component contract và behavior gần đó.
- Định nghĩa token và scope. Color, type, spacing, radius, shadow, motion, state, breakpoint và ownership tệp được đặt trước implementation.
- Implement direction đã duyệt. Workflow sửa code và chỉ tạo hoặc xử lý supporting asset khi được cấp quyền.
- Xác minh kết quả. Một render-check script chụp screenshot và tạo text layout report ở 375, 768 và 1440 px; workflow còn kiểm tra interaction, focus, touch target, contrast, reduced motion, content visibility, overflow và validation riêng của project theo UX polish standard.
- Hoàn tất self-review. Vòng self-critique rubric sửa mọi lỗi render-check, rồi chấm rubric, sửa ba mục yếu nhất và lặp lại tối đa ba vòng. Nó báo điểm cuối cùng, mọi mục dưới 2, những gì không render được là chưa xác minh, tệp đã đổi và rủi ro chưa giải quyết.
Audit sản phẩm đang chạy
Route UX audit dùng app dev, staging hoặc production đang chạy như người dùng thật, qua browser session của bạn ở 1440, 768 và 375 px. Nó nhờ bạn tự đăng nhập khi trang cần xác thực và tránh thao tác phá hủy như thanh toán, gửi tin nhắn hay xóa dữ liệu. Nó báo finding theo mức nghiêm trọng kèm screenshot và kế hoạch sửa theo mức ưu tiên, và chỉ triển khai bản sửa khi bạn yêu cầu.
Giữ quyền implementation trong phạm vi hẹp
Design brief có thể tạo thay đổi code rộng
Đây là workflow implementation. Skill có thể sửa frontend file và đề xuất asset, dependency, browser check hoặc documentation. Không điều nào cấp quyền cài package, external generation, dùng secret, refactor không liên quan, thao tác Git, publication hay deployment.
Duyệt riêng external image hoặc font provider. Xác nhận quyền sử dụng và nội dung project nào sẽ rời workspace. Giữ live analytics, form, payment, account và production data ngắt kết nối trừ khi chúng nằm rõ trong scope và được cấu hình an toàn.
Xác minh output và bằng chứng
Một lần chạy hoàn tất nên cung cấp design brief, code và asset diff đúng scope, screenshot và text layout report của render-check script ở 375, 768 và 1440 px, accessibility check, kết quả test hoặc build project thực sự đã chạy, kết quả vòng self-critique rubric và danh sách cuối về rủi ro còn lại.
Kiểm tra interface đã render, không chỉ source. Xác minh content thật, long và empty state, light và dark theme khi được hỗ trợ, keyboard order, focus, touch size, reduced motion, image crop và không có horizontal overflow.
Xử lý sự cố hoặc tiếp tục
| Triệu chứng | Bước tiếp theo an toàn |
|---|---|
Runtime không nhận diện ak:frontend-design | Xác nhận target cùng scope, mở lại runtime, rồi dùng Runtime không tìm thấy Skill hoặc Agent. |
| Direction xung đột với brand | Biến brand source đã duyệt thành contract và derive lại token cùng layout từ đó. |
| Screenshot match hỏng khi responsive | Tách observation cố định từ source khỏi responsive behavior suy ra và test viewport đã định. |
| Animation làm ẩn content hoặc gây vấn đề motion | Khôi phục content visible-by-default và cung cấp reduced-motion alternative đã test. |
| Mobile layout scroll ngang | Kiểm tra off-screen transform, fixed width, content dài và bản render 375px trước khi tiếp tục. |
| Cần dependency hoặc asset mới | Dừng và xin duyệt rõ với package, provider, license, cost cùng ảnh hưởng tệp. |
| Tệp ngoài scope thay đổi | Dừng, giữ công việc không liên quan và đối chiếu ownership trước khi tiếp tục. |
Tiếp tục với Tổng quan Marketing Kit hoặc Projects, artifacts và checkpoints.
Biết các giới hạn hiện tại
- Craft rule của Skill là design guidance. Chúng không chứng minh usability, accessibility, browser support, performance hay conversion.
- Hãy đo implementation thực tế; không có kết quả performance hay chất lượng nào được đảm bảo.
- Phân tích screenshot và video có thể suy ra sai font, spacing và hidden behavior. Hãy đánh dấu inference và xác minh theo source asset hoặc code.
- Workflow 3D, motion, asset-generation và browser cần capability có thể chưa được cài hoặc không tương đương ở mọi runtime.
Xác định token dùng lại được với ak:design-system
Biến giá trị brand và nhu cầu UI đã duyệt thành token phân lớp, component spec, bằng chứng validation hoặc slide artifact theo token.
Thiết kế motion đúng brand với ak:motion-design
Thiết kế UI animation cảm xúc chuẩn kỹ thuật — archetype Motion Personality, nguyên tắc Disney áp dụng cho UI, bảng timing/easing và choreography nhiều element — không phụ thuộc implementation.