Thiết kế banner

Tạo banner đa định dạng cho social, ads, website hero, print và creative campaign với kích thước theo nền tảng, nhiều art direction, visual AI, bố cục HTML/CSS và xuất PNG.

Thu thập yêu cầu

Nghiên cứu reference

Chọn art direction

Đặt luật canvas

Nguyên tắc 01

Việc banner chỉ nằm trong social, ads, website hero, print banner và creative asset cho campaign.

Nguyên tắc 02

Kích thước nền tảng và safe zone quyết định layout trước khi polish visual.

Nguyên tắc 03

Visual tạo bằng AI thường không nên có chữ; chữ và CTA được overlay bằng HTML/CSS.

Nguyên tắc 04

Mỗi phương án cần art direction rõ và đường dẫn asset đã xuất, không chỉ là concept.

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

Khởi động

Đầu vào, phạm vi, route

1 Thu thập yêu cầu Hỏi mục đích, nền tảng hoặc kích thước, headline, subtext, CTA, vị trí logo, brand guideline, style mong muốn và số phương án.
2 Nghiên cứu reference Kích hoạt design intelligence và nghiên cứu Pinterest hoặc nguồn tham khảo tương đương theo mục đích, nền tảng và style được yêu cầu.
3 Chọn art direction Chọn hai hoặc ba hướng art direction bổ trợ từ reference style: minimalist, bold typography, gradient, photo-based, geometric, editorial, 3D, neon, v.v.

Xử lý

Agent / skill thực thi

4 Đặt luật canvas Dùng kích thước chính xác theo nền tảng, safe zone, tối đa hai typeface, một CTA, tương phản đủ và inject brand context.
5 Tạo visual Dùng ai-artist để tìm prompt và ai-multimodal để tạo background, product shot, illustration, pattern hoặc hero visual.
6 Dàn banner Dựng banner HTML/CSS, overlay text, CTA, logo và visual tạo bằng AI, giữ nội dung quan trọng trong vùng an toàn trung tâm.

Kiểm chứng

Gate, review, xác thực

7 Xuất ảnh Serve HTML và chụp PNG đúng kích thước nền tảng bằng agent-browser, Chrome MCP qua use-mcp hoặc browser tooling có sẵn của project.
8 Nén và đặt tên Nén file vượt ngưỡng, lưu dưới assets/banners/{campaign}, và đặt tên kebab-case dạng {style}-{width}x{height}.{ext}.
9 Trình bày và lặp Trình bày các phương án đã xuất cạnh nhau kèm style, lý do thiết kế, đường dẫn, kích thước và lặp theo feedback đến khi được duyệt.

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Header LinkedIn Khuyến nghị

/ak:banner-design LinkedIn tối giản 1584x396

Dùng khi:: Khi cần header social có nền tảng, style và kích thước rõ ràng.
Kết quả:: Nhận yêu cầu, art direction, visual tạo bằng AI, banner HTML/CSS, PNG đã xuất và đường dẫn.

Creative quảng cáo

/ak:banner-design Google Display typography đậm 300x250

Dùng khi:: Khi display ad cần đúng kích thước nền tảng và nhiều phương án creative.
Kết quả:: Bộ banner tuân thủ size display, tỷ lệ chữ, CTA, tương phản và luật đặt tên.

Banner LinkedIn webinar

/ak:banner-design LinkedIn 1200x627 banner cho webinar founder

Dùng khi:: Khi cần banner đúng size nền tảng với headline, proof và CTA.
Kết quả:: Các phương án banner đúng kích thước, khớp brand, phân cấp copy và spec xuất file.

Phạm vi xử lý

Banner social
Display ads
Website hero
Banner in ấn
Art direction
Visual AI
Dàn HTML/CSS
Xuất PNG

Thiết kế banner

Bản đồ thực thi

Prompt mẫu

Phạm vi xử lý

Skill liên quan

Tiếp theo