Xác định token dùng lại được với ak:design-system

Dùng ak:design-system để chính thức hóa visual decision thành primitive, semantic và component token. Skill còn gồm reference về component state, hướng dẫn mapping Tailwind, helper tạo và validate token cùng một slide system riêng được điều khiển bằng token.

Chọn ak:design-system cho contract dùng lại được

Dùng ak:design-system khi

• Bạn cần token JSON, CSS variable, naming rule, scale hoặc theme alias.
• Bạn cần ghi component variant và state cho design-to-code handoff.
• Bạn muốn kiểm tra source để tìm hardcoded value nên dùng token.
• Bạn cần HTML slide artifact dựa trên token source đã duyệt.

Chọn workflow khác khi

• Bạn cần đề xuất UI/UX rộng trước khi định nghĩa system. Dùng ak:ui-ux-pro-max.
• Bạn cần implement page hay component theo system hiện có. Dùng ak:frontend-design.
• Bạn cần audit chỉ có finding theo web guideline hiện tại. Dùng ak:web-design-guidelines.
• Bạn cần campaign visual thay vì UI contract dùng lại được. Dùng ak:design.

Chuẩn bị source of truth và runtime

Cung cấp brand guide hiện tại, variable hoặc token file có sẵn, theme được hỗ trợ, component inventory, target stack, yêu cầu accessibility và các tệp chính xác có thể thay đổi. Quyết định lần chạy là advisory, tạo tệp mới, validate code hiện có hay build slide.

Hoàn thành Làm quen và xem Runtime adapter.

Chạy Skill

/ak:design-system Audit ./src/styles and the supplied brand guide. Propose primitive, semantic, and button/input component tokens with light and dark mappings. Do not write files yet

/ak:design-system Audit ./src/styles and the supplied brand guide. Propose primitive, semantic, and button/input component tokens with light and dark mappings. Do not write files yet

$ak:design-system Audit ./src/styles and the supplied brand guide. Propose primitive, semantic, and button/input component tokens with light and dark mappings. Do not write files yet

Sau khi duyệt, cấp quyền cho output chính xác, ví dụ tokens.json và tokens.css, cùng source directory cần validate. Generator đi kèm dùng --config hoặc -c cho input, --output hoặc -o cho tệp và --format hoặc -f với css hoặc tailwind. Khi không có --output, helper in ra standard output.

Validator yêu cầu --dir hoặc -d. Tùy chọn --fix hiển thị suggested fix; nó không áp dụng thay đổi. Đây là tùy chọn helper script, không phải flag Skill.

Hiểu các giai đoạn

1. Kiểm kê system hiện tại. Workflow đọc brand value đã duyệt, token có sẵn, theme, component state và quy ước stack.
2. Định nghĩa các layer. Primitive giữ raw value, semantic token gán purpose và component token map purpose vào property cùng state của component.
3. Review tên và mapping. Bạn duyệt theme behavior, accessibility intent, state coverage và migration boundary trước khi tệp thay đổi.
4. Tạo output đã duyệt. Helper có thể biến JSON token config thành CSS hoặc output hướng Tailwind và tạo parent directory cho output file đã chọn.
5. Validate usage. Validator scan directory đã chọn để tìm pattern hardcoded color và size, rồi trả về location cùng suggestion.
6. Xác minh implementation. Các check liên quan về theme, contrast, state, component và repository chạy trên tệp kết quả.

Với slide, hãy tách phê duyệt narrative và data. Slide helper có thể dùng decision table đi kèm, token validation, Chart.js và background resource tùy chọn; chúng không chứng minh câu chuyện hay số liệu là đúng.

Nêu rõ mutation và external resource

Đừng để validation warning kích hoạt bulk replacement tự động. Giữ user-defined value, third-party style, generated file và công việc không liên quan cho đến khi ownership cùng mapping dự kiến rõ ràng.

Xác minh output và bằng chứng

Một lần chạy hoàn tất nên cung cấp layered token map, component/state spec, tệp chính xác đã tạo hoặc đổi, input cùng format của generator, finding từ validator và bằng chứng tập trung về theme cùng accessibility. Với slide, còn cần đường dẫn HTML, nguồn dữ liệu, kết quả token validation, kiểm tra keyboard/navigation và visual review responsive.

Contrast guidance và ví dụ ARIA trong reference là yêu cầu cần test, không phải bằng chứng component hay slide được tạo đã đạt yêu cầu.

Xử lý sự cố hoặc tiếp tục

Tiếp tục với Tổng quan Marketing Kit hoặc Projects, artifacts và checkpoints.

Biết các giới hạn hiện tại

• Stable và beta chứa nội dung ak:design-system byte-identical trong các release đã kiểm tra.
• Starter token và component spec là ví dụ, không phải brand hay accessibility truth của project.
• Validator dựa trên pattern. Nó có thể bỏ sót value gián tiếp và flag exception hợp lệ; đây không phải browser, type checker hay accessibility engine.
• Slide knowledge là nội dung release đi kèm, không phải bằng chứng hiện tại về audience, market, platform, library hay hosted image.
• Generated token file không tự cập nhật mọi consumer, trừ khi implementation work được duyệt riêng thay đổi các consumer đó.