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 deploy

Vớ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 / 3 cho Brand và 3 / 2 / 6 cho 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.

Triển khai interface hoàn thiện với ak:frontend-design

On this page