如何利用 AI 快速设计多平台社交媒体 Banner 广告图

解决设计资源匮乏与尺寸适配繁琐的痛点：通过一套标准化的 AI 工作流，自动生成符合各社交平台规格的视觉素材，并结合 HTML/CSS 实现精准的排版与文字叠加。

为什么需要这个技能

在运营社交媒体或上线产品时，我们需要为不同平台（如 Twitter Header、Instagram Story、Google Ads）制作大量尺寸各异的 Banner。如果手动设计，重复性工作极高；如果纯靠 AI 生成图片，文字排版往往会出现乱码或位置不精准。

本技能采用“AI 视觉素材 + 前端排版 + 自动化截图”的组合方案。它先由 AI 生成高质量背景图，再通过代码精准控制文字、CTA 按钮的位置，最后导出为标准尺寸的 PNG 图片，确保视觉效果专业且尺寸绝对精准。

适用场景

• 需要快速为社交媒体账号（Facebook, LinkedIn, YouTube 等）创建封面图。
• 为营销活动设计多尺寸的展示广告（Display Ads）。
• 为网站首页快速构建视觉冲击力强的 Hero Section 图像。
• 需要在短时间内输出多种艺术风格（如极简风、玻璃拟态、3D 渲染）的方案进行 A/B 测试。

核心工作流

1. 需求定义与风格调研：明确平台尺寸、核心文案及品牌色。通过 ui-ux-pro-max 技能在 Pinterest 等平台检索参考图，选定 2-3 种艺术方向（如 Neon 或 Minimalist）。
2. 视觉素材生成：调用 ai-artist 与 ai-multimodal 技能。使用 Standard 模型生成快速背景，使用 Pro 模型生成 4K 高清主体图。

   # 使用 Pro 模型生成高质量 Banner 视觉主体
   .claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
     --task generate --model gemini-3-pro-image-preview \
     --prompt "<creative banner prompt>" --aspect-ratio <platform-ratio> \
     --size 4K --output assets/banners/

3. 前端排版合成：利用 frontend-design 技能编写 HTML/CSS，将 AI 生成的图片作为背景，叠加符合品牌规范的文字和按钮，并确保关键内容处于 70-80% 的安全区域内。
4. 自动化导出：使用 chrome-devtools 脚本将 HTML 页面直接渲染并截屏为指定尺寸的 PNG 文件。

   # 将 HTML 方案导出为 1500x500 的 PNG 图片
   node .claude/skills/chrome-devtools/scripts/screenshot.js \
     --url "http://localhost:8765/banner-01-minimalist.html" \
     --width 1500 --height 500 \
     --output "assets/banners/{campaign}/{variant}-{size}.png"

下载和安装

下载 ckm:banner-design 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐