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ác phẩm nguyên bản (không phải replication), lượt chạy sẽ mở đầu bằng một design brief nêu mục đích, audience và register. Khi project chưa có token, Skill seed token từ register default và một starter token file thay vì bắt đầu từ hệ thống trống.
• 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.

ak:ui-ux-pro-max là tùy chọn. Khi được cài, nó bổ sung dữ liệu style, palette và typography có thể tìm kiếm cho brief. Nó không bao giờ là điều kiện tiên quyết, nên Skill vẫn chạy khi không có nó.

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:

Khi brief không nêu, dial mặc định (variance / motion / density, mỗi dial theo thang 1–10) phụ thuộc register: 7 / 5 / 3 cho surface Brand như landing page hoặc portfolio, và 3 / 2 / 6 cho surface Product như app, dashboard hoặc màn hình settings. 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.

/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 viết design brief trước khi viết code. Nó ghi các dòng cố định Register (Brand hoặc Product), Scene, Direction, Color, Type, Signature và Dials, rồi giữ nguyên qua các lần lặp. Với route preserve và replicate, nó điền các dòng này từ hệ thống hiện có hoặc từ source.
2. Lượt chạy suy ra hướng từ Scene. Mỗi dòng phải được biện minh bằng brief hoặc nội dung thay vì một style ưa thích.
3. Lượt chạy áp dụng register default khi brief không nêu. Nó bắt đầu từ token hiện có hoặc starter token file của register, rồi chỉnh hue, font và accent theo brief.
4. Lượt chạy dựng từ token. Mọi màu, kích thước, spacing, radius, shadow và duration đều lấy từ token. Trước mỗi section chính, nó so kế hoạch với cặp ví dụ yếu và tinh tế tương ứng.
5. Lượt chạy hoàn thiện state và access. Layout responsive, hover, focus, active, disabled, loading, empty, error, success, 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 critique kết quả đã render. Nó chạy render-check script đi kèm để chụp screenshot và tạo text layout report ở 375, 768 và 1440 px, rồi sửa mọi lỗi script báo. Sau đó nó chấm self-critique 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 cùng mọi mục dưới 2, và đánh dấu những gì không thể render hoặc nhìn thấy là chưa xác minh.

Áp dụng product UI pattern và audit live product

Reference library của Skill gồm product UI pattern và UX polish standard. Lượt chạy triển khai tham chiếu cả hai khi dựng và review một màn hình.

Live-product UX audit hướng Skill vào một interface đang chạy thay vì brief, screenshot hay video; hãy truyền URL làm argument. Nó dùng sản phẩm qua browser session của bạn ở 1440, 768 và 375 px, 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 ưu tiên dựa trên product UI pattern và UX polish standard, và chỉ triển khai bản sửa khi bạn yêu cầu.

Tài liệu tham chiếu về analysis, extraction và technical trước đây đã được hợp nhất vào hai file, asset-pipeline.md và visual-analysis.md. Nếu hướng dẫn cũ trỏ tới tên file khác, hãy tìm cùng nội dung đó trong hai reference này.

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

• Việc tạo asset thường đi qua ak:ai-multimodal. Khi nó không khả dụng nhưng đã có key tương thích được cấu hình, fallback Multix tùy chọn là npx --yes --package=@mrgoonie/multix@latest -- multix. 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 được tạo 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.

Xác minh kết quả

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

• Design brief cùng route, register và dial đã chọn, và token system mà lượt chạy dựng từ đó.
• 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 và text layout report của render-check script ở 375, 768 và 1440 px, 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.
• Điểm self-critique rubric cuối cùng, mọi mục dưới 2, số vòng đã chạy, mục được đánh dấu chưa xác minh, kiểm tra đã bỏ qua và phê duyệt 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ủ yếu là reference guidance; ngoài ra còn có một render-check script đ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ố đó.
• Vòng self-critique rubric, render-check script, product UI pattern và UX polish standard là guidance và kiểm tra của chính Skill, không phải audit độc lập. Finding từ live-product UX audit vẫn cần con người ưu tiên và một follow-up tường minh trước khi trở thành thay đổi code.