ckm:banner-design

Tổng quan

ckm:banner-design là gì?

ckm:banner-design là một kỹ năng thiết kế banner dùng AI, tập trung vào các tài sản hình ảnh tĩnh. Kỹ năng này giúp bạn thiết kế banner cho mạng xã hội, quảng cáo số, hero section trên website, ấn phẩm chiến dịch và các banner in đơn giản. Với mỗi yêu cầu, nó có thể khám phá nhiều hướng art direction khác nhau bằng cách sử dụng các yếu tố hình ảnh do AI tạo.

Kỹ năng này được thiết kế phạm vi hẹp: nó chỉ xử lý thiết kế banner. Nó không bao gồm dựng video, thiết kế trọn bộ layout website, hay thiết lập chi tiết cho sản xuất in ấn.

Các trường hợp sử dụng chính

• Ảnh cover và header cho kênh social (Facebook, Twitter/X, LinkedIn, YouTube)
• Bài đăng social dạng chiến dịch hoặc luôn bật (Instagram, Pinterest)
• Banner quảng cáo và display ads (ví dụ: các định dạng Google Display Network)
• Hero website và banner cho các section
• Banner in đơn giản cho sự kiện và khuyến mãi

Nền tảng và định dạng được hỗ trợ

Kỹ năng này xoay quanh các điểm đến banner phổ biến, bao gồm:

• Mạng xã hội: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest
• Quảng cáo: kích thước Google Display Network và các định dạng display tương tự
• Web: hero image website, banner cho các section, header blog, header email
• In ấn: banner roll-up, banner sự kiện bằng bạt, hình ảnh cho gian hàng hội chợ

Bên trong, repository có tệp references/banner-sizes-and-styles.md với bảng kích thước chi tiết, được kỹ năng sử dụng làm tham chiếu để gợi ý hoặc kiểm tra kích thước.

Phong cách hình ảnh và art direction

ckm:banner-design có thể làm việc với nhiều phong cách khác nhau, ví dụ:

• Tối giản (minimalist), gradient, glassmorphism
• Chữ đậm (bold typography), editorial, collage
• Dựa trên ảnh, minh hoạ, hình học, retro
• 3D, neon, duotone

Nó cũng liên kết về mặt ý tưởng với các kỹ năng sáng tạo khác trong cùng repo, như ui-ux-pro-max, frontend-design, ai-artist và ai-multimodal, để hỗ trợ định hướng hình ảnh phong phú hơn.

Kỹ năng này phù hợp với ai?

Hãy dùng ckm:banner-design nếu bạn là:

• Marketer hoặc social media manager cần banner nhanh, đúng brand cho nhiều nền tảng
• Designer hoặc front-end developer muốn AI hỗ trợ hero image và visual cho chiến dịch
• Founder hoặc indie maker cần banner trình bày ổn mà không phải thuê cả team thiết kế

Kỹ năng này rất phù hợp khi bạn đã có thông điệp và định hướng thương hiệu rõ ràng nhưng cần hỗ trợ chuyển hoá thành các phương án hình ảnh. Nó kém phù hợp hơn nếu bạn cần phong cách minh hoạ tuỳ biến rất cao phải vẽ tay thủ công, hoặc motion graphics phức tạp.

Khi nào nên và không nên dùng

Phù hợp để:

• Nhanh chóng khám phá nhiều concept banner cho một chiến dịch
• Tạo ra các kích thước phù hợp từng nền tảng từ một ý tưởng gốc
• Sản xuất hình ảnh tĩnh cho quảng cáo, kênh social và hero website

Không phù hợp để:

• Quảng cáo video, banner động hoặc motion design
• Thiết kế trọn bộ UX/UI website vượt quá một hero hoặc header đơn lẻ
• Công việc tiền in ấn chi tiết cho các lần in phức tạp (bleed, quản lý màu, thông số gia công)

---

Cách sử dụng

Cài đặt và thiết lập

1. Thêm kỹ năng banner-design vào môi trường của bạn

Cài đặt ckm:banner-design từ repository nextlevelbuilder/ui-ux-pro-max-skill:

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

Lệnh này sẽ kéo kỹ năng banner-design từ thư mục .claude/skills/banner-design trong repo.

2. Xem tệp kỹ năng cốt lõi

Sau khi cài đặt, mở SKILL.md trong thư mục banner-design. Tệp này định nghĩa:

• Mô tả kỹ năng và phạm vi
• Định dạng argument-hint: [platform] [style] [dimensions]
• Hướng dẫn kích hoạt (khi nào nên dùng kỹ năng)

Hiểu rõ các quy ước này sẽ giúp bạn đặt yêu cầu theo cách mà kỹ năng xử lý ổn định hơn.

3. Sử dụng tài liệu tham chiếu về kích thước và phong cách

Mở references/banner-sizes-and-styles.md để xem:

• Các kích thước social media phổ biến (ví dụ: Facebook cover, Twitter header, YouTube channel art, bài đăng/story Instagram)
• Các định dạng display ad (ví dụ: 300×250, 728×90, 160×600 và các kích thước Google Display Network khác)
• Hướng dẫn banner cho website và email
• Danh sách các định nghĩa phong cách art direction (minimalist, gradient, 3D, v.v.)

Dùng các tham chiếu này để:

• Chọn đúng kích thước cho từng nền tảng
• Chọn các nhãn phong cách mà kỹ năng đã hiểu sẵn

---

Gọi kỹ năng sao cho hiệu quả

1. Tuân theo quy trình thu thập yêu cầu

SKILL.md mô tả một workflow bắt đầu bằng việc thu thập yêu cầu. Trước khi gọi ckm:banner-design, hãy đảm bảo bạn đã có:

• Mục đích: social cover, ad banner, website hero, banner in, hoặc creative cho chiến dịch
• Nền tảng/kích thước: nền tảng mục tiêu (ví dụ: Facebook cover, YouTube channel art) hoặc kích thước pixel cụ thể
• Nội dung: headline, subtext, CTA, logo hoặc brand mark và mọi dòng pháp lý cần thiết
• Brand: bảng màu, font và guideline thương hiệu hiện có (nếu có)
• Phong cách: art direction mong muốn (ví dụ: minimalist, retro, glassmorphism)

Bạn cung cấp càng nhiều, các concept banner tạo ra càng sát nhu cầu.

2. Sử dụng argument-hint

Khi gọi kỹ năng, hãy làm theo định dạng hint:

• [platform] – nơi banner sẽ hiển thị (ví dụ: Twitter-header, Google-Display 300x250, website-hero)
• [style] – hướng art direction (ví dụ: minimalist gradient, bold-typography, photo-based editorial)
• [dimensions] – kích thước pixel cuối cùng nếu bạn cần kích thước tuỳ chỉnh (ví dụ: 1920x600)

Ví dụ prompt được cấu trúc tốt:

• "Design a LinkedIn-company-cover in a minimalist style, 1128x191, with a SaaS B2B headline and a primary CTA."
• "Create a Google-Display leaderboard 728x90 banner in bold typography style for a 50% off summer sale."
• "Generate a website-hero 1920x800 in a photo-based editorial style for a fintech startup launch."

3. Kỳ vọng nhiều phương án art direction

ckm:banner-design được thiết kế để tạo nhiều hướng concept cho mỗi yêu cầu. Sau đó bạn có thể:

• So sánh các layout, hình ảnh và chiến lược màu sắc khác nhau
• Chọn concept mạnh nhất và tiếp tục tinh chỉnh

Hãy dùng các prompt follow-up để chỉnh sửa hướng đã chọn (ví dụ: điều chỉnh thứ bậc nội dung, đơn giản hoá nền, nhấn mạnh CTA).

---

Ví dụ quy trình làm việc

Quy trình A: Làm mới header mạng xã hội

1. Cài đặt ckm:banner-design và mở SKILL.md.
2. Tra kích thước khuyến nghị cho nền tảng mục tiêu trong references/banner-sizes-and-styles.md (ví dụ: Twitter/X Header 1500×500).
3. Chuẩn bị yêu cầu: màu thương hiệu, logo, câu tagline chính và tệp đối tượng mục tiêu.
4. Gọi kỹ năng với nền tảng, phong cách và kích thước, yêu cầu nhiều hướng thực hiện.
5. Xem các phương án tạo ra, rồi yêu cầu tinh chỉnh phiên bản mạnh nhất.

Quy trình B: Bộ banner quảng cáo đa kích thước

1. Xác định một concept chiến dịch duy nhất (ưu đãi, thông điệp, chủ đề hình ảnh).
2. Từ references/banner-sizes-and-styles.md, chọn vài kích thước quảng cáo chính (ví dụ: 300×250, 728×90, 160×600).
3. Dùng ckm:banner-design tạo một concept master ở kích thước lớn hơn.
4. Yêu cầu kỹ năng chuyển thể concept đó sang các kích thước còn lại, đảm bảo thứ bậc nội dung và độ rõ vẫn tốt.

Quy trình C: Hero website cho ra mắt sản phẩm

1. Xác nhận kích thước hero cần dùng (ví dụ: 1920×800) trong phần website của tệp tham chiếu.
2. Cung cấp định vị sản phẩm, headline chính, nội dung phụ và phong cách mong muốn.
3. Gọi ckm:banner-design, chỉ định website hero, phong cách và kích thước.
4. Lặp lại việc chỉnh khoảng cách, độ tương phản và điểm nhấn cho đến khi sẵn sàng để triển khai vào front-end.

---

Mẹo tích hợp

• Kết hợp ckm:banner-design với công cụ thiết kế hiện tại của bạn: xuất concept sang Figma, Sketch hoặc trình chỉnh sửa ảnh để tinh chỉnh cuối cùng và cắt asset.
• Tận dụng brand guideline: nếu dự án có bộ quy tắc thương hiệu (màu, sử dụng logo, tone), hãy đưa vào prompt để banner luôn nhất quán.
• Xây thư viện tham chiếu: lưu lại các concept banner hoạt động hiệu quả nhất để dẫn dắt prompt sau này và đảm bảo tính liên tục cho chiến dịch.

---

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

ckm:banner-design chỉ dùng cho banner mạng xã hội thôi sao?

Không. Mặc dù ckm:banner-design rất mạnh với cover và bài đăng social, nó cũng được thiết kế cho display ads, hero image website, banner cho các section và các banner in đơn giản. Tệp references/banner-sizes-and-styles.md có kích thước cho social, quảng cáo, web và in ấn.

ckm:banner-design có xử lý video hoặc banner động không?

Không. Kỹ năng này được giới hạn rõ ràng cho thiết kế banner tĩnh. Nó không chỉnh sửa video, không làm animation hay motion graphics. Nếu bạn cần GIF động hoặc video, hãy dùng kỹ năng này để định nghĩa layout tĩnh rồi dựng animation trong các công cụ chuyên dụng.

Kỹ năng có tạo được file in ấn hoàn chỉnh với bleed và profile màu không?

ckm:banner-design có thể hỗ trợ layout và định hướng hình ảnh cho banner in và gợi ý các kích thước in phổ biến. Tuy nhiên, nó không xử lý các tác vụ sản xuất in chi tiết như bleed, crop mark, cân chỉnh màu hay profile máy in. Với các đợt in chuyên nghiệp, bạn nên hoàn thiện asset trong phần mềm thiết kế desktop và làm việc theo thông số của nhà in.

Làm sao biết nên dùng kích thước banner nào cho từng nền tảng?

Mở references/banner-sizes-and-styles.md trong repository. Tệp này liệt kê kích thước và tỉ lệ khung hình khuyến nghị cho:

• Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest
• Các định dạng Google Display Network
• Các kích thước banner website và email phổ biến
• Banner tiêu chuẩn cho sự kiện và hội chợ

Hãy dùng các bảng này làm điểm xuất phát, và chỉ điều chỉnh kích thước nếu nền tảng của bạn có khuyến nghị mới khác đi.

ckm:banner-design có tuân theo brand guideline của tôi được không?

Có. Bạn có thể cung cấp chi tiết thương hiệu trong prompt: màu chủ đạo và màu phụ, font ưa dùng, quy tắc dùng logo và các ràng buộc layout. Kỹ năng này được thiết kế để đưa định hướng thương hiệu vào các phương án art direction, đặc biệt khi kết hợp với các kỹ năng thiên về thiết kế khác trong cùng repository.

Tôi nên chuẩn bị thông tin gì trước khi gọi kỹ năng?

Để đạt kết quả tốt nhất, hãy chuẩn bị:

• Mục đích của banner (ví dụ: ra mắt tính năng mới, giảm giá theo mùa, thông báo sự kiện)
• Nền tảng và kích thước (hoặc kích thước pixel)
• Nội dung copy chính (headline, subheading, CTA, text pháp lý nếu có)
• Asset brand (màu, font, logo, hình ảnh nếu cần)
• Phong cách mong muốn (ví dụ: minimalist, retro, photo-based, editorial)

Cung cấp bối cảnh đầy đủ giúp ckm:banner-design tạo ra các concept sát nhu cầu và có thể dùng được, thay vì hình ảnh chung chung.

ckm:banner-design sẽ tạo bao nhiêu concept trong một lần?

Kỹ năng này được thiết kế để đưa ra nhiều lựa chọn art direction trong mỗi lần gọi, để bạn so sánh và tinh chỉnh. Số lượng cụ thể còn phụ thuộc vào cách bạn cấu hình agent runtime, nhưng triết lý là ưu tiên khám phá nhiều phương án thay vì chỉ một đầu ra.

Tôi có thể dùng ckm:banner-design để thiết kế toàn bộ website không?

Không. ckm:banner-design tập trung vào visual ở cấp độ banner: hero image, header và các section mang tính quảng bá. Nó không thay thế một kỹ năng UX/UI hoàn chỉnh cho toàn bộ flow site, cấu trúc điều hướng hoặc interaction design. Để thiết kế website end-to-end, hãy kết hợp nó với các kỹ năng UI/UX rộng hơn như ui-ux-pro-max.

Kỹ năng này dùng license nào?

Theo SKILL.md, ckm:banner-design được phát hành theo MIT license. Luôn kiểm tra lại license hiện tại trong repository để chắc chắn về điều kiện sử dụng cho trường hợp của bạn.

Tôi có thể tìm hiểu chi tiết hơn ở đâu?

Sau khi cài đặt, hãy xem:

• SKILL.md – để hiểu phạm vi, tham số và workflow
• references/banner-sizes-and-styles.md – để tra kích thước theo nền tảng và tham chiếu phong cách

Hãy sử dụng các tệp này như tài liệu chính khi tích hợp ckm:banner-design vào quy trình làm việc của agent.