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. Dùng
ak:web-design-guidelines. - 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.
Hiểu các giai đoạn
- Chọn workflow. Skill phân biệt input screenshot, video, describe-only, 3D, quick, immersive và from-scratch.
- Tuyên bố design read. Trước khi code, Skill xác định surface, audience, visual language, direction được chọn, design thesis và nguồn content của form.
- 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ả. Workflow kiểm tra interaction, focus, touch target, contrast, reduced motion, content visibility, responsive composition ở 375px, overflow và validation riêng của project.
- Hoàn tất self-review. Check countable, binary và judgment vẫn hiển thị, cùng tệp đã đổi và rủi ro chưa giải quyết.
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 read cùng thesis, code và asset diff đúng scope, bằng chứng responsive cùng interaction, accessibility check, kết quả test hoặc build project thực sự đã chạy 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
- Stable và beta chứa nội dung
ak:frontend-designbyte-identical trong các release đã kiểm tra. - Craft rule của Skill là design guidance. Chúng không chứng minh usability, accessibility, browser support, performance hay conversion.
- Reference gồm wording lịch sử về model, cost, timing và performance. Hãy đo implementation thực tế; không có kết quả 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.