Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:frontend-design

Giao diện frontend production

Tạo giao diện frontend production chỉn chu, khác biệt từ brief, screenshot, video, yêu cầu 3D hoặc redesign mà không rơi vào AI slop.

Chọn workflow

Tuyên bố cách đọc

Seed variation

Viết thesis

Nguyên tắc 01

Chủ ý quan trọng hơn độ mạnh: maximalism táo bạo hay minimalism tinh tế đều có thể đúng.

Nguyên tắc 02

Token trước; mọi giá trị phải truy về design scale.

Nguyên tắc 03

Chỉ đẩy một chiều lên cực đáng nhớ và giữ các chiều còn lại kỷ luật.

Nguyên tắc 04

Bề mặt brand cần khác biệt; bề mặt product cần sự quen thuộc đáng tin.

Nguyên tắc 05

Lỗi self-review phải sửa, không được hợp lý hóa.

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

Khởi động

Đầu vào, phạm vi, route

1 Chọn workflow Định tuyến yêu cầu screenshot, video, chỉ mô tả, 3D/WebGL, nhanh, phức tạp hoặc làm từ đầu vào workflow phù hợp.
2 Tuyên bố cách đọc Nêu loại trang, audience, ngôn ngữ vibe và hướng thẩm mỹ trước khi default design tự bật.
3 Seed variation Tạo seed từ request, chọn hướng, kiểu hero và pattern component, rồi tránh lặp lại palette/font vừa dùng gần đây.

Xử lý

Agent / skill thực thi

4 Viết thesis Chốt một thesis thẩm mỹ: palette, tính cách chữ, dấu ấn layout, điểm đáng nhớ và motif lấy từ nội dung.
5 Đặt token Định nghĩa màu OKLCH, font, type scale, spacing, radii, shadow, easing và một chiều được đẩy mạnh để đáng nhớ.
6 Triển khai giao diện Xây UI chạy thật với typography, màu, chiều sâu, motion, state, hình ảnh, copy, layout, grid và accessibility phù hợp register.

Kiểm chứng

Gate, review, xác thực

7 Tự review Đếm cơ học kicker, từ cấm, em dash, lặp layout, spacing scale, contrast, state, motion và hành vi viewport.
8 Xác minh viewport Kiểm tra UI thật ở mobile và desktop, đặc biệt 375px để không scroll ngang và không vỡ headline.
9 Bàn giao Báo độ khớp context, an toàn triển khai, viewport đã kiểm, giới hạn đã biết và cập nhật design guideline nếu được duyệt.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:frontend-design [design request and constraints]

Đối số

[design request and constraints] Bắt buộc

Yêu cầu thiết kế

Brief bằng ngôn ngữ tự nhiên, mục tiêu tái tạo screenshot/video, yêu cầu 3D/WebGL, prototype nhanh hoặc tác vụ chỉ mô tả. Nêu audience, mục đích, nội dung, brand asset, framework, file được sửa, công cụ được phép, viewport cần kiểm và ranh giới phê duyệt cho cài package, tạo asset, kiểm thử browser và cập nhật tài liệu.

/ak:frontend-design "Implement screenshot landing-page 1440 px được cung cấp trong stack hiện có. Giữ nguyên layout và brand assets, bao gồm responsive behavior ở 375 px, mọi interaction states, reduced motion, và visual comparison. Không install packages, generate assets, hoặc update design guidelines khi chưa được phê duyệt."

Mode / route nên dùng

Screenshot

Sao chép chính xác

Nghiên cứu:: workflow-screenshot + ak:ai-multimodal
Review:: Source is contract
Xác thực:: Compare to original

Video

Sao chép có animation

Nghiên cứu:: workflow-video
Review:: Motion matches source
Xác thực:: Compare animation

3D/WebGL

Immersive

Nghiên cứu:: workflow-3d
Review:: Performance and controls
Xác thực:: Actual surface run

From scratch

Decision procedure

Nghiên cứu:: aesthetic direction menu
Review:: Anti-slop bans
Xác thực:: Self-review gate

Đừng bỏ qua bước bắt buộc

Mỗi mục đối chiếu một lối tắt dễ mắc với cách làm đúng mà skill yêu cầu.

Lối tắt dễ mắc

Hero giữa trang với ba card là an toàn.

Cách làm đúng

Đó là template AI bị cấm rõ ràng. Hãy suy lại layout từ nội dung.

Lối tắt dễ mắc

Thêm trang trí là có design.

Cách làm đúng

Trang trí rẻ hơn design. Xóa ornament nếu nó không gánh bố cục hoặc ý nghĩa.

Lối tắt dễ mắc

Desktop nhìn ổn là được.

Cách làm đúng

Phải kiểm ở 375px: không scroll ngang, không tràn chữ, layout phải tự dàn lại chứ không chỉ thu nhỏ.

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Giao diện từ đầu Khuyến nghị

/ak:frontend-design thiết kế và xây dựng một trang đích đặc sắc cho sản phẩm quan sát của chúng tôi

Dùng khi:: Dùng khi fidelity hình ảnh và UI chỉn chu là ưu tiên chính cho một bề mặt mới.
Kết quả:: Hiển thị Design Read, seeded variation và aesthetic thesis, định nghĩa hệ token OKLCH/type/spacing, triển khai code thật rồi sửa mọi lỗi Self-Review Gate trước khi bàn giao.

Sao chép screenshot

/ak:frontend-design tái tạo ảnh chụp màn hình này thành một component hoạt động

Dùng khi:: Dùng khi screenshot được cung cấp là contract hình ảnh cần khớp.
Kết quả:: Chạy workflow screenshot: phân tích nguồn bằng ak:ai-multimodal, lập kế hoạch với subagent UI design, triển khai bản khớp chính xác, xác minh đối chiếu ảnh gốc và chỉ ghi guideline nếu được duyệt.

Khớp video hoặc motion

/ak:frontend-design tái tạo tương tác trong video demo sản phẩm này

Dùng khi:: Dùng khi nguồn tham chiếu là video và fidelity animation quan trọng.
Kết quả:: Chọn workflow sao chép video, trích timing và hiệu ứng từ nguồn, triển khai motion có lý do kèm reduced-motion, rồi so sánh kết quả với chuỗi gốc.

Trải nghiệm 3D

/ak:frontend-design xây dựng product hero Three.js với chuyển động tinh tế

Dùng khi:: Dùng khi yêu cầu cần giao diện immersive kiểu WebGL hoặc Three.js.
Kết quả:: Đi theo workflow 3D/WebGL, coi hiệu năng, điều khiển, bố cục viewport và reduced-motion là ràng buộc triển khai, rồi báo hành vi đã xác minh và giới hạn đã biết.

Phạm vi xử lý

Sao chép giao diện từ screenshot và video bằng phân tích multimodal
Art direction web khác biệt khi làm từ đầu
Định tuyến 3D/WebGL và giao diện immersive
Typography, palette OKLCH, motion craft, hình ảnh, state tương tác và accessibility
Review chống slop cho copy, layout, surface, card, hero pattern và hành vi viewport

Giao diện frontend production

Bản đồ thực thi

Cú pháp, đối số, subcommand

Đối số

Mode / route nên dùng

Đừng bỏ qua bước bắt buộc

Prompt mẫu

Phạm vi xử lý

Skill liên quan

Tiếp theo