ckm:brand

Tổng quan

ckm:brand là gì

ckm:brand là một kỹ năng tập trung vào xây dựng thương hiệu trong repository nextlevelbuilder/ui-ux-pro-max-skill. Nó giúp bạn định nghĩa, duy trì và đảm bảo một thương hiệu nhất quán trên nội dung, UI và các tài sản marketing.

Thay vì xem thương hiệu như một file PDF tĩnh, ckm:brand khuyến khích một hệ thống thương hiệu sống: guideline có cấu trúc, checklist và script kết nối các quyết định thương hiệu với design tokens, CSS và tài sản thực tế.

Năng lực chính

Khi kích hoạt ckm:brand, bạn có thể:

• Xác định giọng và tông thương hiệu với các framework có thể tái sử dụng.
• Định hình nhận diện hình ảnh: cách dùng logo, màu sắc, typography và hình ảnh.
• Tạo và tinh chỉnh messaging framework cho chiến dịch và sản phẩm.
• Thực hiện brand consistency review dựa trên các checklist chi tiết.
• Cải thiện quản lý tài sản thông qua quy ước thư mục và metadata.
• Đồng bộ brand guideline sang design tokens và CSS qua các script.
• Kiểm tra cách dùng màu và khả năng truy cập (accessibility) trên tài sản và giao diện.

ckm:brand phù hợp với ai

Kỹ năng này phù hợp cho:

• Các team brand và marketing đang xây mới hoặc cập nhật brand guideline.
• Product designer và team UI/UX cần quy trình bàn giao sạch từ brand sang front-end.
• Content strategist và copywriter phụ trách giọng thương hiệu và thông điệp.
• Vai trò DesignOps / marketing ops xây dựng workflow thương hiệu mang tính lặp lại.

Đặc biệt hữu ích nếu công việc thương hiệu của bạn chạm cả nội dung biên tập lẫn sản phẩm số, nơi tính nhất quán và khả năng truy cập là rất quan trọng.

Khi nào nên (và không nên) dùng ckm:brand

Hãy dùng ckm:brand khi bạn:

• Muốn có một single source of truth cho brand guideline (docs/brand-guidelines.md).
• Cần quy trình review lặp lại cho tài sản marketing trước khi phê duyệt.
• Sẵn sàng chuyển đổi quyết định thương hiệu thành tokens và CSS variables.
• Cần một framework giọng điệu và thông điệp có cấu trúc cho team nội dung.

Có thể không phù hợp nếu bạn:

• Chỉ cần nhanh một logo và bảng màu, không có nhu cầu quản trị dài hạn.
• Không duy trì thương hiệu trong repository hoặc workflow dựa trên code.
• Đang tìm một công cụ thiết kế trực quan (Figma, Sketch) hơn là guideline và script.

Nếu thương hiệu của bạn đã Git-backed hoặc bạn muốn chuyển sang mô hình đó, ckm:brand cung cấp một điểm khởi đầu có quan điểm rõ ràng và dễ mở rộng.

Cách sử dụng

1. Cài đặt kỹ năng ckm:brand

Cài kỹ năng vào agent hoặc môi trường hỗ trợ skills của bạn bằng URL GitHub repository và skill slug brand:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Sau khi cài, các workflow và tài liệu tham chiếu của ckm:brand sẽ có thể được agent hoặc công cụ của bạn phát hiện. Dùng kiểu argument-hint để dẫn hướng cách gọi:

[update|review|create] [args]

Ví dụ:

• brand update homepage-hero – cập nhật guideline hoặc quyết định cho một bề mặt cụ thể.
• brand review campaign-email – review một asset hoặc flow về độ nhất quán thương hiệu.
• brand create launch-messaging – tạo thông điệp mới dựa trên framework.

Lưu ý: Hãy dùng đúng lệnh cài đặt ở trên nhưng tùy chỉnh đường dẫn và chi tiết tích hợp cho môi trường của riêng bạn.

2. Hiểu cấu trúc và các file cốt lõi

Sau khi cài, hãy mở các file này trước để hiểu ckm:brand được thiết lập như thế nào:

• SKILL.md – Mô tả cấp cao, khi nào nên dùng, lệnh bắt đầu nhanh và Brand Sync Workflow.
• references/ – Guideline chi tiết, checklist và framework cho thương hiệu.
• scripts/ – Các Node script kết nối guideline với tài sản và design tokens.
• templates/ – Template khởi điểm để xây tài liệu thương hiệu riêng của bạn.

Các file tham chiếu quan trọng:

• references/brand-guideline-template.md – Cấu trúc đầy đủ của brand guideline.
• references/visual-identity.md – Cách thể hiện khía cạnh hình ảnh của thương hiệu.
• references/logo-usage-rules.md – Khi nào và cách dùng từng biến thể logo.
• references/color-palette-management.md – Hệ phân cấp palette và pattern tài liệu hóa.
• references/typography-specifications.md – Thang chữ (type scale), font stack và cách dùng.
• references/voice-framework.md – Đặc tính giọng thương hiệu, nên và không nên làm.
• references/messaging-framework.md – Sứ mệnh, tầm nhìn, value prop và kiến trúc thông điệp.
• references/asset-organization.md – Cấu trúc thư mục và metadata gợi ý cho tài sản.
• references/approval-checklist.md – Checklist phê duyệt tài sản từ đầu đến cuối.
• references/consistency-checklist.md – Audit tính nhất quán đa kênh.

3. Bơm ngữ cảnh thương hiệu vào prompt và workflow

Để ngữ cảnh thương hiệu luôn sẵn có cho agent hoặc công cụ, hãy dùng script đi kèm để inject brand guideline vào prompt:

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

Cách dùng điển hình:

• Thêm phần brand guideline lên đầu các prompt tạo nội dung.
• Xuất bản JSON chứa các quy tắc thương hiệu chính cho công cụ khác.
• Giữ copywriter và designer luôn căn chỉnh mà không phải dán guideline dài thủ công.

Nếu môi trường hỗ trợ, hãy tích hợp inject-brand-context.cjs vào pipeline xây prompt để mọi tác vụ liên quan đến thương hiệu tự động bao gồm các quy tắc mới nhất.

4. Kiểm tra tài sản marketing về thương hiệu và accessibility

Dùng script validation để kiểm tra tài sản cụ thể so với hệ thống thương hiệu của bạn:

node scripts/validate-asset.cjs <asset-path>

Script này được thiết kế để hoạt động cùng với cấu trúc và checklist được mô tả trong references/approval-checklist.md, references/consistency-checklist.md và các file liên quan. Thực tế bạn có thể:

• Chạy trên một graphic chiến dịch mới trước khi launch.
• Tích hợp vào CI để phát hiện asset lệch brand trong pull request.
• Dùng trong design review như một checklist có cấu trúc.

Kết hợp output của script với approval checklist để đảm bảo:

• Cách dùng logo và màu sắc chính xác.
• Font thương hiệu và hệ phân cấp typography được tuân thủ.
• Hình ảnh đúng phong cách thương hiệu và đạt tiêu chuẩn chất lượng.
• Các yếu tố accessibility cơ bản (độ tương phản, alt text, khả năng thấy focus) được đáp ứng.

5. Quản lý và tài liệu hóa hệ màu của bạn

Màu sắc là một phần lõi của brand và UI/UX. ckm:brand cung cấp hướng dẫn và script hỗ trợ để giữ palette của bạn nhất quán và được tài liệu hóa tốt.

Dùng script màu để inspect hoặc so sánh palette:

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

Cách dùng tiêu biểu:

• Trích xuất màu từ các asset hiện có để kiểm tra chúng có khớp palette chính thức không.
• So sánh một palette đề xuất mới với guideline hiện tại.
• Xây và duy trì bảng màu và CSS variables như mô tả trong references/color-palette-management.md.

Tài liệu quản lý màu bao gồm:

• Hệ phân cấp màu primary, secondary, neutral và semantic.
• Pattern tài liệu hóa trong bảng Markdown và CSS variables.
• Cách biểu diễn màu trong cấu hình kiểu Tailwind.
• Tiêu chuẩn accessibility về độ tương phản (WCAG 2.1).

6. Tạo hoặc tinh chỉnh brand guideline bằng template

Khởi tạo tài liệu brand guideline có cấu trúc bằng:

• references/brand-guideline-template.md
• templates/brand-guidelines-starter.md

Copy một trong các file này vào repo của bạn với tên docs/brand-guidelines.md hoặc tương tự, sau đó tùy chỉnh:

• Quick reference (màu, font, đặc tính giọng).
• Bảng màu chi tiết với ghi chú cách dùng.
• Font stack và type scale cho responsive.
• Các biến thể logo, khoảng trống bảo vệ (clear space) và kích thước tối thiểu.
• Nguyên tắc giọng, tông theo ngữ cảnh và ví dụ câu chữ.
• Hệ phân cấp thông điệp và thông điệp theo từng nhóm đối tượng.

Các template này vừa đủ dễ đọc với designer và marketer, vừa đủ có cấu trúc để script (như sync-brand-to-tokens.cjs) xử lý.

7. Đồng bộ brand guideline sang design tokens và CSS

Một trong những phần mạnh nhất của ckm:brand là Brand Sync Workflow được mô tả trong SKILL.md. Nó kết nối guideline viết tay với hiện thực front-end.

Quy trình điển hình:

# 1. Chỉnh docs/brand-guidelines.md (hoặc dùng /brand update)
# 2. Đồng bộ sang design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Kiểm tra
node scripts/inject-brand-context.cjs --json | head -20

Các file liên quan (như mô tả trong skill):

• docs/brand-guidelines.md → Source of truth cho các quyết định thương hiệu.
• assets/design-tokens.json → Định nghĩa design token được tạo hoặc cập nhật.
• assets/design-tokens.css → CSS variables dùng cho front-end.

Cách áp dụng trong thực tế:

• Cập nhật màu, typography hoặc spacing trong docs/brand-guidelines.md.
• Chạy sync-brand-to-tokens.cjs để lan truyền các thay đổi đó.
• Import assets/design-tokens.css vào code UI để cập nhật brand chảy thẳng vào sản phẩm.

Cách làm này giữ brand guideline, design system và implementation luôn ăn khớp mà không cần nhập tay hai lần.

8. Thực hiện brand review và audit bằng checklist

Với team hoặc chiến dịch lớn, hãy dùng các checklist tham chiếu như một quy trình review có thể lặp lại:

• references/approval-checklist.md – Quy trình phê duyệt tài sản từng bước.
• references/consistency-checklist.md – Kiểm tra tính nhất quán thương hiệu đa kênh.

Bạn có thể:

• Chuyển chúng thành form review hoặc checklist trong công cụ quản lý dự án.
• Dùng chúng như tiêu chí nghiệm thu trong ticket cho trang hoặc chiến dịch mới.
• Kết hợp với validate-asset.cjs cho kiểm tra bán tự động.

Điều này giúp đảm bảo tiêu chuẩn brand, UI/UX và accessibility được áp dụng nhất quán trên web, email, social và in ấn.

Câu hỏi thường gặp (FAQ)

ckm:brand thực tế mang lại gì cho team của tôi mỗi ngày?

ckm:brand mang lại cho bạn ba lợi ích thực tế:

1. Brand guideline được chuẩn hóa – Template và tài liệu tham chiếu có cấu trúc để viết quy tắc thương hiệu rõ ràng.
2. Workflow vận hành – Script và checklist giúp công việc thương hiệu có tính lặp lại thay vì ad hoc.
3. Căn chỉnh triển khai – Đồng bộ guideline vào design tokens và CSS để UI phản ánh đúng quyết định thương hiệu.

Thay vì chỉ là checklist branding chung chung, ckm:brand được thiết kế xoay quanh cách thương hiệu được dùng trong workflow UI/UX và marketing hiện đại.

Tôi cài đặt ckm:brand từ GitHub như thế nào?

Dùng trình cài đặt skills với repository và skill slug đã công bố:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Lệnh này kéo skill brand từ .claude/skills/brand trong repository. Sau đó, hãy xem SKILL.md và thư mục references/ để tích hợp vào repo và quy trình của riêng bạn.

Tôi có thể tùy biến brand guideline mà vẫn dùng được các script không?

Có. ckm:brand được thiết kế để bạn tùy biến. Bạn nên:

• Copy các template đi kèm vào thư mục docs/ hoặc brand/ của riêng bạn.
• Chỉnh sửa với màu sắc, typography, messaging và quy tắc của thương hiệu bạn.
• Giữ cấu trúc tương đối giống để các script như sync-brand-to-tokens.cjs vẫn parse được.

Nếu bạn thay đổi đáng kể tên file hoặc cấu trúc, có thể cần chỉnh lại script để khớp vị trí hoặc format mới.

ckm:brand có thay thế design system hoặc CMS của chúng tôi không?

Không. ckm:brand nằm song song với design system và CMS của bạn:

• Nó định nghĩa các quy tắc và token thương hiệu mà design system sẽ triển khai.
• Nó tài liệu hóa giọng điệu và messaging mà nội dung trong CMS nên tuân theo.

Design system (ví dụ: component library) và CMS vẫn là kênh phân phối. ckm:brand giữ logic thương hiệu phía sau chúng nhất quán và có thể đọc được bằng máy.

ckm:brand hỗ trợ accessibility như thế nào?

Accessibility được tích hợp trong nhiều tài liệu tham chiếu:

• references/approval-checklist.md bao gồm các bước kiểm tra accessibility về mặt hình ảnh và nội dung.
• references/color-palette-management.md mô tả yêu cầu về độ tương phản và cách dùng màu semantic.

Hãy dùng các tài liệu này trong design review và phê duyệt tài sản để đảm bảo độ tương phản màu, khả năng thấy focus, alt text và cấu trúc nội dung đáp ứng những tiêu chuẩn phổ biến như WCAG 2.1 AA.

ckm:brand có giúp người không chuyên thiết kế vẫn giữ đúng thương hiệu không?

Có. Dù một số tài sản hướng đến designer và front-end engineer, nhiều tài liệu được viết cho marketer, team nội dung và các bên liên quan nói chung:

• Voice và messaging framework cung cấp các mẫu sẵn để sử dụng.
• Checklist đưa ra tiêu chí rõ ràng dạng có/không, không dùng jargon thiết kế.
• Ngữ cảnh thương hiệu được inject giúp người không chuyên dùng AI một cách “on-brand”.

Bằng cách tập trung hóa các tài nguyên này, ckm:brand giảm bớt nhu cầu hướng dẫn thương hiệu theo kiểu ad hoc.

Nếu chúng tôi đã có brand PDF hoặc style guide bên ngoài thì sao?

Bạn có thể dùng ckm:brand để vận hành hóa (operationalize) tài liệu hiện tại:

• Chuyển các phần chính trong PDF sang docs/brand-guidelines.md bằng template có sẵn.
• Mã hóa quy tắc logo, palette và typography vào các tài liệu tham chiếu có cấu trúc.
• Dùng các script sync và validation để đưa những quy tắc đó vào tokens và kiểm tra tài sản.

Bạn không cần bỏ tài liệu brand cũ; hãy xem ckm:brand như phiên bản dựa trên repository, thân thiện với tự động hóa của nó.

ckm:brand chỉ dành cho sản phẩm UI hay dùng cho marketing chung cũng được?

ckm:brand bao phủ cả hai:

• Với UI/UX và front-end, nó cung cấp design-token sync, CSS variables, thông số màu và typography.
• Với marketing và nội dung, nó cung cấp messaging framework, approval checklist và hướng dẫn tổ chức tài sản.

Nếu thương hiệu của bạn xuất hiện trên web, sản phẩm và chiến dịch marketing, ckm:brand giúp giữ mọi thứ căn chỉnh trong một hệ thống duy nhất.

Khi dùng ckm:brand, chúng tôi nên cập nhật brand guideline thường xuyên thế nào?

Workflow này giả định thương hiệu của bạn là một hệ thống sống. Cách thực tế là:

• Cập nhật guideline bất cứ khi nào bạn có thay đổi đáng kể về hình ảnh hoặc thông điệp.
• Chạy Brand Sync Workflow ngay sau khi thay đổi để tokens và CSS luôn đồng bộ.
• Định kỳ chạy consistency audit bằng checklist trên các kênh chính.

Vì mọi thứ nằm trong repository, các lần cập nhật có thể tuân theo quy trình version control và review như code.