以 skill 自身的术语
通过在 HTML/CSS 中生成多种美术方向方案，为社交媒体封面、广告投放、网站主视觉和印刷品设计 Banner。通过结构化提问收集需求（平台、内容、品牌、风格、数量），参考内置的尺寸与安全区指南，并按平台精确尺寸导出像素级精准的 PNG。
支持 22 种美术方向风格，包括极简主义、渐变、粗体排版、照片型、几何风格、玻璃拟态和霓虹风格。支持 Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display 以及自定义尺寸。默认每次请求生成 3 个方案。使用用户提供的素材、以 CSS 构建的视觉效果或可选的生成式背景——绝不臆造品牌规范。不处理视频编辑、完整网站设计或印刷生产。
它产出什么
- 按平台精确尺寸生成的 PNG 图像文件，以 kebab-case 命名导出至 assets/banners/{campaign}/
- 当无法进行图像截取时，为每个 Banner 变体提供 HTML/CSS 源代码
工作方式
- 01通过结构化提问收集需求
收集用途（社交封面、广告、主视觉、印刷品）、平台或自定义尺寸、内容（标题、副文本、CTA、Logo）、品牌规范、风格偏好，以及数量（默认 3 个方案）。
- 02调研美术方向与安全区
读取内置的 banner-sizes-and-styles.md 参考文件，获取目标格式、安全区及适用风格。
- 03以 HTML/CSS 设计每个方案
按平台精确尺寸创建 Banner，并遵循安全区规则（关键内容置于中央 70–80% 区域），最多使用 2 种字体、单一 CTA，文本对比度不低于 4.5:1。
- 04为每个方案选择视觉来源
优先使用用户提供的素材，或使用以 CSS 构建的视觉效果（渐变、几何图形）以实现无依赖的结果，若运行环境支持，也可选择按目标宽高比生成背景。
- 05将 Banner 导出为 PNG 图像
在浏览器中以精确视口预览每个 Banner，使用标准截图能力捕获为 PNG，并核验像素尺寸、安全区裁切、字体加载与图像质量。
- 06呈现方案并说明理由
并排展示所有导出的图像，附上美术方向风格名称、预览图、关键设计理由、文件路径与尺寸。