Tóm tắt nhanh:
ak-design-systemgom màu, khoảng cách, cỡ chữ thành token ba lớp, viết spec trạng thái cho từng component và dựng slide HTML bằng token của dự án. Màu và chữ gốc có thể lấy từak-brand; đưa token vào Tailwind thì chuyển choak-ui-styling. Dự án đã có thương hiệu hay template thì nó giữ nguyên, không tự đẻ hệ thống mới.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi mã màu và số px đang rải khắp code, khi cần đổi một màu mà không làm vỡ chỗ khác, khi cần spec trạng thái cho một component, hoặc khi cần deck HTML đúng token của dự án. Không cần khi bạn muốn deck PPTX: việc đó đi qua công cụ trình chiếu đã cài, các quy tắc slide của skill này chỉ áp dụng cho HTML.
flowchart LR
BR["ak-brand: màu, chữ của thương hiệu"] -.-> B["ak-design-system"]
A["Yêu cầu token, component hoặc slide"] --> B
B --> C["File token CSS hoặc JSON"]
B --> D["Bảng spec trạng thái component"]
B --> E["Slide HTML dùng token"]
C --> F["ak-ui-styling: đưa token vào Tailwind"]Bốn điều cần nắm:
| Điều | Câu hỏi | Ví dụ |
|---|---|---|
| Ba lớp token | Giá trị này nằm ở lớp nào? | Lớp gốc --color-blue-600: #2563EB, lớp ý nghĩa --color-primary trỏ tới nó, lớp component --button-bg trỏ tới --color-primary |
| Đổi theme ở lớp ý nghĩa | Muốn có dark mode thì sửa chỗ nào? | Trong .dark, gán lại --color-background sang màu xám đậm. Nút, thẻ, ô nhập tự đổi theo vì chúng chỉ đọc lớp ý nghĩa |
| Spec trạng thái | Component trông thế nào ở từng trạng thái? | Nút chính: mặc định nền primary, hover đậm hơn, active đậm nhất, disabled nền muted và mờ đi. Khi nhiều trạng thái chồng nhau, disabled thắng, rồi tới loading, active, focus, hover |
| Không mã cứng | Component có dùng thẳng mã màu hay số px không? | color: #2563EB là sai, color: var(--color-primary) là đúng. Slide cũng theo luật này |
Prompt mẫu cho dự án chưa có token:
/ak-design-system Tạo bộ token ba lớp cho <tên app>.
Màu thương hiệu: <mã màu chính>, <mã màu phụ>. Khoảng cách theo bước 4px.
Ràng buộc: có cả light và dark mode.
Xong khi: có file tokens.css dùng được ngay và một file JSON nguồn.Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 6 tình huống kèm prompt, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-design-system: dựng token, spec component và slide theo thương hiệu" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-design-system". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-design-system
