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
Ctrl K
Tóm tắt nhanh / Lệnh
Bộ Marketing
/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.
01
Chọn workflow
02
Tuyên bố cách đọc
03
Seed variation
04
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.
01
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.
02
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.
03
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.
Mode / route nên dùng
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:
- Độ chỉn chu hình ảnh và khác biệt quan trọng hơn triển khai thông thường.
- Kết quả:
- Tuyên bố cách đọc, seed, thesis, token, triển khai UI thật và vượt self-review gate.
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:
- Screenshot được cung cấp là contract hình ảnh.
- Kết quả:
- Dùng phân tích multimodal, lập kế hoạch triển khai, khớp nguồn, xác minh đối chiếu và báo fidelity.
Trải nghiệm 3D
/ak:frontend-design xây dựng hero sản phẩm WebGL với chuyển động tinh tế- Dùng khi:
- Yêu cầu cần trải nghiệm immersive hoặc kiểu Three.js.
- Kết quả:
- Đi theo workflow 3D, xử lý motion và reduced-motion, rồi xác minh hiệu năng cùng an toàn viewport trên UI thậ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