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ộ Marketing

/ak:design-system

Kiến trúc token và hệ thống slide

Xây design token ba lớp, biến CSS, đặc tả component, handoff Tailwind và slide đúng brand có kiểm tra token.

01

Xác định bề mặt

02

Tải kiến trúc token

03

Tạo CSS

04

Đặc tả component

Nguyên tắc 01

Token primitive → semantic → component giúp thiết kế linh hoạt và đổi theme được.

Nguyên tắc 02

Biến CSS sinh ra là nguồn sự thật duy nhất cho triển khai và slide.

Nguyên tắc 03

Slide là hệ thống thuyết phục: strategy, cảm xúc, copy, layout, chart, animation và navigation phải phối hợp với nhau.

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 Xác định bề mặt Xác định yêu cầu là token, đặc tả component, handoff Tailwind hay tạo slide.
  2. 2 Tải kiến trúc token Dùng cấu trúc ba lớp: primitive là giá trị gốc, semantic là alias theo mục đích, rồi token riêng cho component.
02

Xử lý

Agent / skill thực thi

  1. 3 Tạo CSS Tạo biến CSS từ JSON token để component và slide dùng chung một nguồn sự thật.
  2. 4 Đặc tả component Ghi rõ trạng thái default, hover, active, disabled, border, shadow, text và background.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Lập kế hoạch slide Với deck, tìm slide strategy để chọn cấu trúc, nhịp cảm xúc và pattern break kiểu Duarte.
  2. 6 Giải từng slide Với từng slide, tra layout logic, typography, màu theo cảm xúc, nhu cầu background, công thức copy, loại chart và animation.
04

Đóng

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

  1. 7 Dựng HTML Tạo HTML đúng brand, import CSS token, dùng var(), dùng Chart.js khi có chart và hỗ trợ điều hướng.
  2. 8 Kiểm token Chạy validator cho slide hoặc token để bắt giá trị hardcode và slide không tuân thủ.

Đừ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ột mã màu hardcode trong slide cũng được.

Cách làm đúng

Tuân thủ token nghĩa là dùng biến CSS làm nguồn sự thật duy nhất.

Lối tắt dễ mắc

Bar bằng CSS đơn giản hơn dùng thư viện chart.

Cách làm đúng

Yêu cầu slide ghi rõ phải dùng Chart.js cho chart.

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ế.

Hệ token Khuyến nghị 
/ak:design-system token nút cho bảng điều khiển SaaS
Dùng khi:
Dùng khi styling component cần các lớp token tái sử dụng được.
Kết quả:
Hướng dẫn token primitive, semantic, component kèm đặc tả state.
Biến CSS 
/ak:design-system biến CSS cho màu thương hiệu và typography
Dùng khi:
Dùng khi design system cần biến sẵn sàng để triển khai.
Kết quả:
Cấu trúc chuyển token sang biến CSS và cách kiểm tra.
Deck slide 
/ak:design-system bài thuyết trình nhà đầu tư 10 slide cho AgentKit Marketing
Dùng khi:
Dùng khi cần tạo presentation vừa đúng brand vừa có tính thuyết phục.
Kết quả:
Strategy, cung cảm xúc, layout, HTML đúng token, chart Chart.js và điều hướng.

Phạm vi xử lý

  • Token primitive
  • Token semantic
  • Token component
  • Biến CSS
  • Trạng thái component
  • Tích hợp Tailwind
  • Chiến lược slide
  • Deck Chart.js
  • Kiểm tra token

Skill liên quan

Tiếp theo