Thiết kế và triển khai giao diện khác biệt với ak:frontend-design

Dùng ak:frontend-design khi độ trung thực trực quan và chất lượng giao diện là kết quả chính. Skill có thể phân tích reference, mô tả design system, triển khai frontend hoạt động, tạo visual asset qua capability đi kèm và xác minh kết quả bằng kiểm tra thiết kế và accessibility có thể đếm được.

Chọn ak:frontend-design cho kết quả trực quan

Dùng ak:frontend-design khi

• Bạn tạo giao diện từ brief hoặc tái tạo screenshot hay video được cung cấp.
• Bạn cần prototype nhanh, UI production, brand surface giàu motion hoặc trải nghiệm Three.js nhập vai.
• Bạn muốn tài liệu thiết kế sẵn sàng cho triển khai mà không sửa code.

Chọn quy trình khác khi

• Trọng tâm là hành vi component, data flow, routing hoặc application state. Dùng ak:frontend-development, rồi đưa Skill này vào phần quyết định trực quan.
• Bạn cần hướng dẫn riêng cho routing, rendering hoặc deployment của framework. Dùng ak:web-frameworks.
• Bạn chỉ cần tạo hoặc sửa một ảnh độc lập. Dùng trực tiếp capability tạo ảnh hoặc media processing đang có.
• Bạn không có quyền tái tạo thiết kế hay asset được cung cấp. Hãy xin phép hoặc thiết kế từ brief nguyên bản.

Chuẩn bị brief và công cụ trực quan

Trước khi bắt đầu:

• Hoàn tất Onboarding, rồi xác nhận Engineer Kit được cài cho runtime và scope hiện tại.
• Cung cấp audience, mục đích page hoặc product, nội dung bắt buộc, brand asset, design token hiện có, framework, browser và device hỗ trợ cùng các file được phép sửa.
• Với replication, đính kèm source media chất lượng cao và nêu viewport, trạng thái responsive, interaction cùng mục tiêu giữ nguyên hay redesign đã duyệt.
• Với tạo hoặc phân tích asset, chuẩn bị ak:ai-multimodal và quyền provider của nó. Post-processing dùng ak:media-processing; công việc 3D còn cần ak:threejs và target hỗ trợ WebGL.
• Quyết định trước việc cho phép gọi mạng, tải package, tạo ảnh, kiểm thử browser và cập nhật tài liệu project.

Một số workflow reference nêu ak:ui-ux-pro-max và subagent chuyên biệt là điều kiện tiên quyết. Chúng không nằm trong thư mục Skill này. Nếu bản cài hiện tại không cung cấp, hãy báo bước đó bị chặn hoặc dùng phương án tương đương được duyệt; không nói rằng bước đã chạy.

Chọn workflow

Skill không khai báo dạng positional argument, flag hay input mặc định. Hãy đưa yêu cầu thiết kế và constraint bằng ngôn ngữ tự nhiên. Skill chọn workflow theo input:

Với yêu cầu từ đầu, design dial mặc định là DESIGN_VARIANCE=8, MOTION_INTENSITY=6 và VISUAL_DENSITY=4, mỗi dial theo thang 1–10. Preset theo surface có thể thay thế và người dùng có thể override.

/ak:frontend-design "Triển khai screenshot landing page 1440 px được cung cấp trong stack hiện có. Giữ layout và brand asset, thêm responsive tại 375 px, mọi interaction state, reduced motion và so sánh trực quan. Không cài package, tạo asset hay cập nhật design guideline khi chưa được duyệt."

/ak:frontend-design "Triển khai screenshot landing page 1440 px được cung cấp trong stack hiện có. Giữ layout và brand asset, thêm responsive tại 375 px, mọi interaction state, reduced motion và so sánh trực quan. Không cài package, tạo asset hay cập nhật design guideline khi chưa được duyệt."

$ak:frontend-design "Triển khai screenshot landing page 1440 px được cung cấp trong stack hiện có. Giữ layout và brand asset, thêm responsive tại 375 px, mọi interaction state, reduced motion và so sánh trực quan. Không cài package, tạo asset hay cập nhật design guideline khi chưa được duyệt."

Quan sát workflow thiết kế

1. Lượt chạy khai báo design read. Nó xác định surface, audience, bối cảnh vật lý, register brand hoặc product và một hướng thẩm mỹ rõ ràng.
2. Lượt chạy suy ra thay vì dùng mặc định. Với tác phẩm nguyên bản, nó dùng seed từ request, chọn hoặc điều chỉnh có lý do một hướng, nêu aesthetic thesis và nguồn trong nội dung tạo ra hình thức.
3. Lượt chạy định nghĩa token trước. Màu, typography, type scale, spacing, radius, depth, easing, density và motion được thiết lập trước component.
4. Lượt chạy lập kế hoạch và triển khai. Replication coi source là hợp đồng; tác phẩm nguyên bản đẩy đúng một chiều trực quan lên cực điểm và giữ các chiều khác có kỷ luật.
5. Lượt chạy hoàn thiện state và access. Layout responsive, hover, focus, active, disabled, loading, error, reduced motion, touch target, contrast và khả năng hiển thị khi không có JavaScript được xử lý khi phù hợp.
6. Lượt chạy xác minh trước khi giao. Nó so sánh media reference, kiểm tra ở 375 px, đếm pattern bị cấm, đo contrast và báo bằng chứng cùng khoảng trống.

Giữ tác động bên ngoài và project tường minh

• Ví dụ Multix trong reference dùng npx -y -p @mrgoonie/multix@0.2.0. Chạy lệnh này sẽ tải và thực thi package, gửi prompt và media tới model provider bên ngoài, dùng mạng và ghi ảnh hoặc report phân tích xuống disk.
• Media được tạo hoặc cung cấp có thể chứa nội dung riêng tư, được cấp phép hoặc định danh. Xác nhận quyền xử lý và không gửi asset nhạy cảm tới provider khi chưa được phép.
• Cài package, Three.js, Anime.js, Motion, GSAP, font và image asset có thể đổi dependency, bundle size, loading, mức dùng GPU hoặc CPU, accessibility và khả năng tương thích browser. Tái dùng stack project trừ khi việc đổi dependency được duyệt.
• Cập nhật docs/design-guidelines.md là thay đổi repository tường minh và chỉ thực hiện sau khi thiết kế được duyệt. Skill không được giả định file tồn tại hay nằm trong scope.

Reference đi kèm ước tính thao tác ảnh mất khoảng 5–10 giây cho fast generation, 10–20 giây cho standard, 20–30 giây cho ultra và 2–5 giây cho analysis. Nó cũng nêu chi phí lịch sử xấp xỉ lần lượt là $0.02, $0.04, $0.08 và $0.001. Đây là ước tính reference, không phải giá hiện tại hay cam kết dịch vụ; hãy xác minh provider và model đang hoạt động trước khi chi tiền. Triển khai, so sánh browser, phân tích video và tối ưu 3D không có thời lượng cố định.

Xác minh kết quả

Một triển khai đầy đủ nên cung cấp:

• Khai báo design read, workflow và dial đã chọn, aesthetic thesis, token system và một chiều được chủ ý đẩy lên cực điểm.
• File chính xác đã đổi, asset được tạo hoặc tái dùng, dependency đã đổi cùng lệnh hay dịch vụ bên ngoài đã dùng.
• Screenshot hoặc so sánh tại viewport và state được yêu cầu, cùng bằng chứng responsive, interaction, reduced motion và no-JavaScript.
• Kết quả contrast trên background thật, độ phủ font và ngôn ngữ, tối ưu ảnh, alt text, quan sát performance và khoảng trống browser đã biết.
• Kết quả self-review bắt buộc dạng đếm được và nhị phân của Skill, sau đó là judgment call, kiểm tra đã bỏ qua và quyền còn thiếu.

Kết quả chỉ phân tích nên cung cấp màu, typography, spacing, layout, component, state, motion, accessibility, điểm chưa chắc và ghi chú triển khai có thể hành động, nhưng không tuyên bố code hay visual QA đã hoàn tất.

Khắc phục sự cố hoặc tiếp tục

Xem Project, artifact và checkpoint trước thay đổi trực quan lớn hoặc tiếp tục với Engineer Kit.

Biết các giới hạn hiện tại

• Skill này chỉ chứa reference guidance; không có executable hay test suite đi kèm. Việc triển khai và xác minh phụ thuộc repository và công cụ runtime.
• Một số ví dụ reference và tên model là hướng dẫn theo thời điểm; vài tên file hoặc companion capability được tham chiếu không có trong thư mục Skill này. Hãy xác minh khả dụng thay vì tự giả định.
• Điểm số từ visual model và phép đo suy luận không chứng minh pixel parity, WCAG compliance, usability, performance hay tính nguyên bản. Dùng kiểm tra đo được và human review cho các tuyên bố đó.
• Stable và beta có cùng hướng dẫn Skill cho cặp bản phát hành này.