VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:frontend-design

Giao diện frontend production

Tạo giao diện frontend chỉn chu với định hướng thẩm mỹ rõ ràng từ brief, thiết kế, screenshot hoặc video, và audit độ chỉn chu UI/UX của sản phẩm đang chạy trên desktop, tablet và mobile.

01

Chọn route

02

Viết design brief

03

Áp mặc định theo register

04

Dựng từ token

Nguyên tắc 01

Gu thẩm mỹ là một quy trình, không phải cảm hứng: brief, token, mẫu tham chiếu, rồi critique kết quả đã render.

Nguyên tắc 02

Yêu cầu của người dùng, brand asset và design system sẵn có thắng mọi mặc định.

Nguyên tắc 03

Suy hướng thẩm mỹ từ bối cảnh và nội dung, không bao giờ từ một phong cách ưa thích.

Nguyên tắc 04

Đánh giá gu trên trang đã render, không phải trên code.

Nguyên tắc 05

Không bao giờ bịa số liệu, lời chứng thực, logo hay tính năng; placeholder trung thực tốt hơn dữ liệu giả.

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. 1 Chọn route Chọn route: giữ và cải thiện UI sẵn có, bề mặt brand mới, bề mặt product mới, sao chép screenshot hoặc video, chỉ mô tả, prototype nhanh, immersive hoặc 3D, hay audit UX của sản phẩm đang chạy.
  2. 2 Viết design brief Trước khi code, chốt các dòng brief: register (brand hay product), bối cảnh, hướng thẩm mỹ kèm lý do, chiến lược màu OKLCH, cặp font, một điểm nhấn riêng, và các dial variance/motion/density. Route giữ nguyên hoặc sao chép lấy các dòng này từ hệ thống hay nguồn sẵn có.
02

Xử lý

Agent / skill thực thi

  1. 3 Áp mặc định theo register Khi brief không nói gì, dùng mặc định theo register brand hoặc product cho token, dial, thang chữ, màu, bo góc, chiều sâu, motion và layout. Yêu cầu của người dùng, brand asset và design system sẵn có luôn thắng.
  2. 4 Dựng từ token Bắt đầu từ token sẵn có hoặc file token mẫu của register. Mọi màu, kích thước, khoảng cách, bo góc, đổ bóng và thời lượng đều lấy từ token; giá trị nào không có trên thang thì đổi thiết kế, không đổi thang.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 So với mẫu tham chiếu Trước mỗi section lớn, so kế hoạch với cặp ví dụ xấu và đẹp tương ứng trong bộ mẫu tham chiếu.
  2. 6 Tự critique và sửa Chạy scripts/render-check.mjs, sửa mọi lỗi nó báo, chấm rubric từ ảnh chụp 375, 768 và 1440px, sửa ba mục yếu nhất, và lặp tối đa ba vòng.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Đạt mức chất lượng tối thiểu Chỉ dùng nội dung thật, đủ state tương tác, độ tương phản chữ thường tối thiểu 4.5:1, vùng chạm 44px, có phương án reduced-motion, không tràn ở viewport nào, và build cùng test đều pass.
  2. 8 Báo điểm Báo điểm rubric cuối cùng và mọi mục dưới 2, đồng thời đánh dấu chưa xác minh những gì không render hoặc không xem được.

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 [prompt|image-path|component|url]

Đối số

[prompt|image-path|component|url]

Prompt, ảnh, component hoặc URL

Brief, path ảnh/screenshot, tên component, hoặc URL của sản phẩm đang chạy cần audit, đều tùy chọn. Nêu audience, mục đích, brand asset, stack, viewport và ranh giới phê duyệt khi chúng đổi kết quả.

/ak:frontend-design thiết kế và xây một landing page đặc sắc cho sản phẩm observability của chúng tôi

Mode / route nên dùng

Brand surface

Landing hoặc trang marketing mới

Nghiên cứu:
Brief + aesthetic recipes + exemplars
Review:
Brand defaults 7/5/3
Xác thực:
Rendered critique loop
Product surface

App, dashboard, admin

Nghiên cứu:
Brief + product UI patterns + exemplars
Review:
Product defaults 3/2/6
Xác thực:
Rendered critique loop
Screenshot

Sao chép chính xác

Nghiên cứu:
workflow-screenshot
Review:
Source governs composition
Xác thực:
Compare to original
Video

Sao chép chuyển động

Nghiên cứu:
workflow-video
Review:
Match motion and states
Xác thực:
Compare animation
UX audit

Audit sản phẩm đang chạy

Nghiên cứu:
workflow-ux-audit + polish standards
Review:
Don't make me think
Xác thực:
Desktop, tablet, mobile

Đừ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

Mình thích phong cách này nên dùng luôn.

Cách làm đúng

Suy hướng thẩm mỹ từ bối cảnh và nội dung; dòng brief nào không giải thích được thì viết lại.

Lối tắt dễ mắc

Giá trị lẻ này nhìn hợp.

Cách làm đúng

Mọi giá trị lấy từ token. Không có trên thang thì đổi thiết kế, không đổi thang.

Lối tắt dễ mắc

Code ổn thì UI ổn.

Cách làm đúng

Gu được đánh giá trên trang đã render: chạy render-check.mjs và xem ở 375, 768 và 1440px trước khi bàn giao.

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ả:
Viết design brief cho register brand, dựng từ token mẫu của brand, so từng section với bộ mẫu tham chiếu, rồi chạy render-check.mjs và sửa các mục rubric yếu nhất tối đa ba vòng trước khi báo điểm.
Sao chép screenshot 
/ak:frontend-design landing-hero.png
Dùng khi:
Dùng khi path screenshot hoặc ảnh được cung cấp là contract hình ảnh cần khớp.
Kết quả:
Chạy workflow screenshot: lấy các dòng brief từ ảnh gốc, triển khai bản khớp chính xác bằng token, và so bản render với ảnh gốc ở từng viewport.
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.
Audit UX app đang chạy 
/ak:frontend-design https://staging.example.com audit UX luồng checkout
Dùng khi:
Dùng khi app dev, staging hoặc production cần audit trực tiếp độ chỉn chu UI/UX.
Kết quả:
Theo workflow audit UX đối chiếu với chuẩn chỉn chu trên desktop, tablet và mobile, rồi báo các phát hiện xếp hạng kèm bằng chứng; chỉ sửa code khi yêu cầu có phần triển khai.
Component đặt tên 
/ak:frontend-design PricingTable
Dùng khi:
Dùng khi bề mặt cần thiết kế hoặc dựng lại là một component có tên, không phải cả trang.
Kết quả:
Coi PricingTable là contract component, kiểm tra token hiện có nếu có, dựng từ token với đủ interaction state, rồi critique bản render ở 375, 768 và 1440px trước khi bàn giao.

Phạm vi xử lý

  • Design brief và định hướng thẩm mỹ cho register brand và product
  • Hệ token OKLCH với token mẫu cho brand và product
  • Sao chép từ screenshot và video
  • Tự critique trên bản render bằng render-check.mjs ở 375, 768 và 1440px
  • Audit UX trực tiếp trên app dev, staging và production
  • Accessibility, state tương tác và motion craft

Skill liên quan

Tiếp theo