ckm:design

Tổng quan

ckm:design là gì?

ckm:design là một kỹ năng thiết kế hợp nhất, ưu tiên "design-first", giúp agent của bạn lập kế hoạch và sản xuất tài sản hình ảnh cho toàn bộ trải nghiệm thương hiệu. Kỹ năng này được xây cho quy trình UI/UX và branding, không chỉ để đổ ra code, và kết hợp các tài liệu tham chiếu có cấu trúc với các script cục bộ tùy chọn để hỗ trợ:

• Nhận diện thương hiệu và định hướng hình ảnh
• Design tokens và thông số design-system
• Hướng dẫn tạo phong cách UI cho shadcn/ui và Tailwind
• Thiết kế logo và tạo logo bằng AI (55 phong cách)
• Deliverable và mockup Corporate Identity Program (CIP)
• Trình chiếu và pitch deck dạng HTML (kèm Chart.js)
• Thiết kế banner cho social, quảng cáo, web và in ấn (22 phong cách, ma trận kích thước đầy đủ)
• Thiết kế icon với SVG tạo bằng AI (15 phong cách)
• Ảnh social và hình marketing cho các nền tảng chính

Kỹ năng này đi kèm tập tài liệu tham chiếu phong phú và bảng dữ liệu để agent có thể đưa ra khuyến nghị cụ thể, sẵn sàng triển khai, không cần bạn tự đi tra cứu bảng kích thước hay quy chuẩn thương hiệu bằng tay.

ckm:design dành cho ai?

ckm:design phù hợp nếu bạn là:

• Nhà thiết kế UI/UX muốn một trợ lý nói được ngôn ngữ flow, component, token và art direction.
• Lập trình viên frontend cần kích thước banner, thông số icon hay cấu trúc HTML slide chính xác, đồng thời giữ cho code và thiết kế khớp nhau.
• Lead thương hiệu hoặc marketing đang lên kế hoạch logo, rollout CIP, chiến dịch social và slide deck cho các buổi pitch.
• Founder hoặc đội nhỏ cần hướng dẫn end-to-end về thương hiệu và UI nhưng không có cả một phòng design.

Nếu bạn chỉ cần sinh code thô không cần giải thích lý do thiết kế, một kỹ năng thuần engineering nhẹ hơn có thể phù hợp hơn. ckm:design nhắm đến các tình huống nơi chất lượng hình ảnh, tính nhất quán và phù hợp thương hiệu là yếu tố quan trọng.

ckm:design giải quyết vấn đề gì?

Dựa trên tài liệu tham chiếu và dữ liệu được đóng gói sẵn, ckm:design giúp agent của bạn:

• Chuẩn hóa output thương hiệu – thống nhất logo, banner, ảnh social và tài sản CIP trong một hệ thống hình ảnh mạch lạc.
• Đúng kích thước và định dạng ngay từ đầu – nhờ các bảng thông số theo nền tảng cho social media, Google Display Network, web hero và in ấn.
• Mở rộng chương trình nhận diện doanh nghiệp (CIP) – bằng cách mapping ngành, phong cách và bộ deliverable cho các set CIP lớn.
• Kết nối thiết kế với triển khai – nối các quyết định thương hiệu với design tokens, CSS variables, shadcn/ui và cách dùng Tailwind.
• Prototype nhanh – với template slide HTML và mockup CIP có thể review từ rất sớm trước khi bạn có full design system.

---

Cách sử dụng

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

Bạn cài ckm:design vào thiết lập skills tương thích Claude từ repository upstream:

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

Lệnh này lấy skill design từ repository nextlevelbuilder/ui-ux-pro-max-skill về thư mục cục bộ ~/.claude/skills/design (hoặc đường dẫn tương đương với môi trường của bạn).

Sau khi cài đặt, bạn sẽ thấy:

• SKILL.md – mô tả tổng quan và hướng dẫn routing.
• data/ – các dataset CSV cho CIP, phong cách logo và icon.
• references/ – kho kiến thức chính cho các tác vụ thiết kế.
• scripts/ – các tiện ích Python tùy chọn cho CIP và generate icon.

2. Hiểu mô hình routing thiết kế

ckm:design hoạt động như điểm vào cho thiết kế và route công việc sang các sub-skill chuyên sâu như mô tả trong references/design-routing.md và SKILL.md.

Các domain thiết kế chính:

• Brand identity → thường được xử lý bởi skill brand riêng.
• Design systems và tokens → qua skill design-system.
• UI implementation (shadcn/ui, Tailwind) → qua skill ui-styling.
• Tạo logo → tham chiếu thiết kế logo tích hợp sẵn.
• Thiết kế CIP → deliverable và mockup nhận diện doanh nghiệp.
• Slides → trình chiếu HTML dùng Chart.js.
• Thiết kế banner → banner cho social, ads, web, in ấn.
• Thiết kế icon → sinh SVG icon qua scripts.

Trong prompt, bạn có thể gợi ý loại thiết kế bằng pattern argument-hint của skill:

ckm:design [design-type] [context]

Ví dụ:

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. Dùng tài liệu tham chiếu cho quyết định UI/UX và thương hiệu

Điểm mạnh của ckm:design nằm ở các file tham chiếu có cấu trúc. Hãy coi chúng là nguồn chuẩn khi bạn yêu cầu agent đưa ra thông số.

Lên kế hoạch UI/UX và design system

Dù phần thực thi có thể được route sang design-system hoặc ui-styling, bạn có thể dùng ckm:design để:

• Thảo luận tokens và thông số ở mức độ design (màu, typography, spacing, states).
• Map màu sắc và typography của thương hiệu sang CSS variables và Tailwind config.
• Lên kế hoạch hành vi và states của component trước khi triển khai.

Agent có thể kết hợp intent thiết kế cấp cao từ ckm:design với các skill tập trung vào code để triển khai.

Banner và sáng tạo cho chiến dịch

Với campaign và banner UI, hãy dựa vào references/banner-sizes-and-styles.md:

• Chọn đúng kích thước theo nền tảng (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, website, email và các định dạng in).
• Lựa chọn trong 22 phong cách art direction (ví dụ: Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic).
• Yêu cầu agent map thông điệp và bố cục cho từng vị trí cụ thể như:
  • Facebook cover vs event cover
  • LinkedIn company cover vs personal banner
  • GDN billboard vs medium rectangle
  • Website hero vs blog header

Ví dụ prompt cho lập kế hoạch campaign:

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Triển khai Corporate Identity Program (CIP)

Hỗ trợ CIP được trình bày trong:

• references/cip-deliverable-guide.md – nên có gì trong một hệ thống nhận diện hoàn chỉnh.
• references/cip-design.md – cách dữ liệu và scripts hỗ trợ 50+ deliverable, 20 phong cách và 20 ngành.
• references/cip-style-guide.md – các archetype phong cách chi tiết (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic, v.v.).
• references/cip-prompt-engineering.md – cấu trúc prompt cho việc generate mockup.

Dùng các tài liệu này để:

• Xác định phạm vi của một dự án rebrand (name card, biển hiệu, xe cộ, đồng phục, tài sản digital, sự kiện, v.v.).
• Căn từng deliverable với một style guide phù hợp ngành.
• Sinh các prompt rất có cấu trúc cho mockup mà một mô hình Gemini hoặc engine hình ảnh khác có thể hiểu nhất quán.

Ví dụ prompt cấp cao:

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. Tạo brief và mockup CIP bằng scripts (tùy chọn)

Nếu bạn muốn đi xa hơn mức lên kế hoạch khái niệm và thực sự generate mockup CIP bằng các script Python đi kèm, hãy làm theo references/cip-design.md.

Đảm bảo đã cài Python 3 và bạn có quyền truy cập một mô hình Gemini tương thích như mô tả trong toolchain riêng.

4.1. Tra cứu dữ liệu CIP và tạo brief

Dùng script search sử dụng BM25 để khám phá deliverable, phong cách và ngành, đồng thời generate một brief khởi đầu:

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

Bạn có thể tìm kiếm theo domain cụ thể:

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

Các file CSV trong data/cip/ lưu trữ tập deliverable, ngành, phong cách và ngữ cảnh mockup mà tiện ích search này sử dụng.

4.2. Generate hình mockup CIP

references/cip-design.md chứa các lệnh để dùng scripts/cip/generate.py điều khiển quá trình generate mockup dựa trên Gemini:

# Mockup một deliverable kèm logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set kèm logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

Hãy dùng khóa mô hình và cấu hình môi trường của bạn; ckm:design cung cấp cấu trúc dữ liệu, khung prompt và entry point cho script, chứ không đi kèm bản thân mô hình.

4.3. Render trình chiếu HTML cho kết quả CIP

Sau khi có dữ liệu mockup, bạn có thể render một bản trình chiếu HTML bằng:

python3 ~/.claude/skills/design/scripts/cip/render-html.py

Lệnh này sẽ tạo một bản tổng quan HTML mà bạn có thể gửi cho stakeholders như tóm tắt trực quan của hệ thống nhận diện.

5. Thiết kế logo và icon với hỗ trợ AI

ckm:design cũng bao gồm hướng dẫn chuyên sâu và script cho công việc logo và icon.

5.1. Lên kế hoạch logo và thiết kế prompt

Dựa vào:

• references/logo-design.md – các nguyên tắc cơ bản về cấu trúc logo.
• references/logo-color-psychology.md – lựa chọn màu theo tính cách thương hiệu và ngành.
• references/logo-style-guide.md – cách chọn trong 55 phong cách logo sẵn có.
• references/logo-prompt-engineering.md – cấu trúc prompt khuyến nghị cho generate logo bằng Gemini.

Dùng các tài liệu này khi yêu cầu agent:

• Xây một hệ thống logo (bản primary, bản stacked, icon-only, phiên bản monochrome).
• Chọn màu sắc và typography phù hợp với chiến lược thương hiệu.
• Soạn AI prompt đủ chi tiết để tạo ra các phương án logo có thể dùng được.

Khả năng logo tích hợp được thiết kế để hoạt động song song với bộ công cụ CIP và banner, giúp brand mark của bạn nhất quán trên mọi touchpoint.

5.2. Thiết kế icon với output SVG

references/icon-design.md mô tả cách generate icon SVG dùng AI với scripts/icon/generate.py và Gemini 3.1 Pro Preview.

Ví dụ lệnh:

# Icon đơn giản
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

# Icon có tên trong một category
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# Generate hàng loạt
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# Nhiều kích thước
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# Khám phá các style và category có sẵn
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

Điều này đặc biệt hữu ích cho team UI/UX cần các bộ icon đồng nhất, ăn khớp với ngôn ngữ hình ảnh của logo và tài liệu CIP.

6. Xây slide deck HTML và visual cho marketing

ckm:design đi kèm bộ tham chiếu thiết kế slide đầy đủ, rất phù hợp cho product demo, sales deck và trình bày nội bộ:

• references/slides.md – tổng quan hệ thống slide.
• references/slides-create.md – cách chuyển từ dàn ý sang deck hoàn chỉnh.
• references/slides-layout-patterns.md – các layout trang thường dùng.
• references/slides-copywriting-formulas.md – khung thông điệp cho rõ ràng và thuyết phục.
• references/slides-strategies.md – chiến lược xây dựng narrative.
• references/slides-html-template.md – template HTML cho slides (tích hợp Chart.js).

Với các tài liệu này, bạn có thể:

• Yêu cầu agent tạo dàn ý slide và map từng phần sang layout patterns.
• Generate slide deck HTML khớp với brand tokens và màu sắc của bạn.
• Thêm biểu đồ Chart.js cho các slide số liệu và dashboard.

Ví dụ prompt:

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. Ảnh social và chiến dịch đa nền tảng

references/social-photos-design.md cung cấp hướng dẫn thiết kế ảnh social và tài sản cho nhiều nền tảng.

Kỹ năng thiết kế này giúp bạn:

• Phối hợp ảnh profile, cover và template bài đăng trên các nền tảng như Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads và Google Ads.
• Dùng quy trình HTML-to-screenshot để iterate nhanh visual social với typography và layout nhất quán.
• Gắn mọi tài sản social quay lại hệ thống thương hiệu và CIP cốt lõi.

---

FAQ

Khi nào ckm:design là lựa chọn phù hợp?

ckm:design đặc biệt hữu ích khi bạn:

• Cần định hướng hình ảnh end-to-end bao trùm UI/UX, branding, CIP và marketing.
• Muốn agent nói bằng ngôn ngữ design tokens, art direction và brand systems, chứ không chỉ là các đoạn CSS.
• Đang lên kế hoạch rebrand, ra mắt sản phẩm mới, hoặc rollout design system và cần một cách tiếp cận có tham chiếu rõ ràng.
• Muốn kết hợp AI image generation (logo, icon, mockup CIP, ảnh social) với sự giám sát của designer.

Khi nào ckm:design không phù hợp?

Nó có thể không lý tưởng nếu bạn:

• Chỉ cần hỗ trợ backend hoặc thuật toán thuần túy không dính dáng đến thiết kế.
• Muốn một trình tạo logo một bước không quan tâm tới hệ thống thương hiệu rộng hơn.
• Không có khả năng hoặc không muốn chạy các tooling Python tùy chọn (kỹ năng này vẫn hữu ích cho phần định hướng dù không dùng script, nhưng bạn sẽ dựa vào stack generate hình ảnh riêng).

ckm:design có bắt buộc dùng Figma hay app thiết kế cụ thể không?

Không. ckm:design không phụ thuộc công cụ. Nó cung cấp cấu trúc và hướng dẫn mà bạn có thể áp dụng trong:

• Figma hoặc công cụ tương tự cho layout UI/UX và prototyping.
• Codebase frontend dùng shadcn/ui và Tailwind.
• Công cụ trình chiếu hoặc HTML thô cho slides.
• Bất kỳ trình chỉnh sửa ảnh hoặc pipeline AI image nào có thể nhận các prompt và thông số được tạo.

Bạn có thể giữ nguyên stack thiết kế hiện tại; skill này đóng vai trò lớp quyết định và đặc tả ở phía trên.

Tôi có thể dùng ckm:design mà không chạy các script Python không?

Có. Giá trị cốt lõi của ckm:design nằm ở các file tham chiếu và dữ liệu có cấu trúc:

• Bạn có thể hoàn toàn dựa vào references/*.md và data/*.csv thông qua agent cho việc lên kế hoạch và đặc tả.
• Các script trong scripts/cip/ và scripts/icon/ là các accelerator tùy chọn cho team muốn tự động hóa generate mockup và SVG.

Nếu bạn không chạy script, bạn vẫn có:

• Kích thước, phong cách và danh sách deliverable chính xác.
• Khung prompt để dùng trong các công cụ AI image của riêng bạn.
• Hướng dẫn nhất quán cho việc căn chỉnh brand, UI và marketing.

ckm:design phối hợp với các skill thiết kế khác như thế nào?

Repository được tổ chức như một bộ skill thiết kế phối hợp với nhau. ckm:design:

• Đóng vai trò lớp routing và orchestration cho các tác vụ hình ảnh.
• Chuyển các công việc brand identity chuyên sâu sang brand.
• Chuyển kiến trúc token và thông số component sang design-system.
• Chuyển chi tiết triển khai (shadcn/ui, lớp Tailwind) sang ui-styling.

Trong thực tế, bạn sẽ:

1. Bắt đầu với ckm:design để đặt khung vấn đề hình ảnh và chọn đúng sub-skill.
2. Dùng skill chuyên biệt tương ứng cho phần thực thi chi tiết.
3. Quay lại ckm:design để đảm bảo mọi output vẫn nhất quán với kế hoạch thương hiệu và CIP tổng thể.

Sau khi cài ckm:design, tôi nên xem gì đầu tiên?

Để làm quen nhanh nhưng vẫn đầy đủ:

1. Mở SKILL.md để hiểu phạm vi và các workflow chính.
2. Xem references/design-routing.md để nắm cách các tác vụ được phân bổ trong "gia đình" skill thiết kế.
3. Lướt qua các tài liệu tham chiếu quan trọng tùy nhu cầu trước mắt:
   • references/banner-sizes-and-styles.md – cho campaign và banner.
   • references/cip-deliverable-guide.md và references/cip-style-guide.md – cho hệ thống nhận diện doanh nghiệp.
   • references/logo-design.md và references/logo-color-psychology.md – cho dự án logo.
   • references/slides.md và references/slides-html-template.md – cho deck và trình chiếu.
   • references/social-photos-design.md – cho chiến dịch social.

Những tài liệu này sẽ cho bạn đủ bối cảnh để quyết định cách áp dụng ckm:design trong workflow UI/UX, branding hoặc marketing trước khi bạn động tới bất kỳ script tùy chọn nào.