mcpField
B
banner-design

banner-design

github.com/arnavpuri设计与 UI17129 次安装5 周前更新
代码仓库

关于 banner-design

banner-design 是用于设计网站横幅、邮件标题、活动横幅和主视觉区域的技能，面向需要制作品牌宣传图的设计工作流。它涵盖尺寸、构图、响应式布局、动画和行动号召层级。

主要功能

  1. 01网站、邮件与活动横幅设计
  2. 02常见横幅尺寸与比例参考
  3. 03主视觉构图和行动号召布局
  4. 04动画与响应式设计方法
  5. 05季节和促销主题方案

适用场景

  1. 01制作适配不同断点的网站主视觉
  2. 02设计邮件营销标题横幅
  3. 03为活动页面制作宣传横幅
  4. 04规划促销或季节主题横幅

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/arnavpuri/designskills --skill banner-design

安装后在 Claude Code 中输入/banner-design确认已加载。

详细介绍

横幅设计

设计网站横幅、电子邮件页眉、活动横幅和首屏区域。涵盖标准尺寸、静态与动态方案、CTA 层级、响应式缩放以及季节性／促销设计框架。

第 1 步：加载设计上下文

  1. 首先读取 .agents/design-context.md —— 品牌颜色（hex）、字体、风格原型
  2. 如果文件不存在，请使用 design-context 默认回退设置，并告知用户已使用默认设置
  3. 横幅是高曝光度的品牌触点 —— 必须严格遵循品牌指南

Gemini 图像生成路径

流程／CLI：image-generation。提示词撰写、裁剪和文字叠加回退方案：graphic-design 第 3 步。

  1. 按照第 2 步表格中的 Gemini 比例生成，然后使用 --resize WxH（例如 --aspect-ratio 21:9 --resize 1440x600）。网页／电子邮件横幅以 2 倍尺寸导出（例如 2880x1200、1200x400），并以 1 倍尺寸显示，以确保在 Retina 屏幕上清晰呈现
  2. 网页首屏在不同断点下的裁剪方式不同：将主体保持在中央，并为文字留出清晰空间，或者单独生成 4:5 的移动端版本
  3. 对于网页和电子邮件，优先生成不含文字的视觉素材，并将标题和 CTA 设为实时 HTML 文字（便于访问、编辑，并且在电子邮件图片被屏蔽时仍可见）
  4. 阅读输出的 PNG：检查拼写、显示尺寸下的可读性，以及文字区域是否干净。每轮后续调整只修复一个问题
示例提示词
  • 首屏横幅：“为 [brand] 创建一个宽幅网站首屏横幅。[product/service] 视觉素材位于右侧，左侧为标题‘[text]’，使用 [font-style]。背景采用 [color] 渐变。CTA 按钮‘[action]’。布局现代、大胆。”
  • 电子邮件页眉：“为 [brand] 创建一个宽幅电子邮件页眉横幅。使用 [color palette] 展现 [campaign theme]。Logo 居中置顶，标题‘[text]’置于下方。设计简洁清晰，可在所有电子邮件客户端中正常显示。”
  • 活动横幅：“为 [event name] 创建一个宽幅活动横幅。采用 [style] 背景和 [decorative elements]。醒目展示活动名称‘[text]’。下方显示日期‘[date]’和地点‘[venue]’。[mood/tone]。”

第 2 步：确定横幅类型和尺寸

网站横幅
类型尺寸Gemini 比例用途
首屏横幅（全宽）1440 x 60021:9首页首屏，首屏可见区域
首屏横幅（高版）1440 x 80016:9全视口首屏区域
分区横幅1440 x 4004:1内页分区分隔
侧边栏横幅300 x 250 或 300 x 6005:4 / 9:16品牌自有推广（付费投放：ad-creative-design）
通知栏全宽 x 48px页面顶部公告
Cookie／同意栏全宽 x 80px底部通知
电子邮件横幅
类型尺寸Gemini 比例备注
电子邮件页眉600 x 20021:9标准电子邮件宽度
电子邮件首屏600 x 30016:9全宽电子邮件首屏
电子邮件横幅600 x 1504:1紧凑型促销横幅

电子邮件限制：宽度为 600px（最高约 640px），使用表格布局，采用内联 CSS；网页字体仅在部分客户端（Apple Mail、iOS）中呈现，因此务必声明 Arial／Helvetica 作为回退字体；每张图片都需要替代文本；关键文案应使用实时文字，因为许多客户端默认会屏蔽图片。

活动／促销横幅
类型尺寸Gemini 比例用途
活动横幅（宽版）1200 x 40021:9活动页面页眉
聚会横幅1200 x 67516:9Meetup.com 活动封面
Eventbrite 横幅2160 x 108016:9Eventbrite 活动封面（2:1）
会议横幅1920 x 6004:1会议网站首屏

第 3 步：首屏横幅构图

布局模式
左侧内容、右侧视觉素材的分栏首屏

网格 1fr 1fr，最小高度 600px，内边距 80px，间距 60px。内容侧：眉题（14px 大写，品牌色）、标题（clamp(36px, 4vw, 56px)，字重 800，text-wrap: balance）、描述（18px，弱化色）、CTA 组（flex，间距 16px）。

居中主视觉区（背景上叠加文字）

采用纵向 Flex 布局并居中，最小高度为 600px，内边距为 80px。背景图上叠加渐变，以确保文字清晰易读。标题使用白色，字号为 clamp(40px, 5vw, 72px)，最大宽度为 800px。

非对称主视觉区（焦点偏离中心）

使用 55% 45% 网格布局。内容区域的内边距为 80px。视觉区域使用 clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%)。

全幅视觉主视觉区（精简文字）

背景图使用 cover，最小高度为 80vh，设置 align-items: flex-end。使用 ::after 渐变遮罩确保文字清晰易读（从底部的 0 渐变至 0.7 黑色）。内容层的 z-index 为 2，最大宽度为 600px，文字为白色。

第 4 步：CTA 的位置与层级

主 CTA + 次 CTA 模式

使用 Flex 容器（gap: 16px; flex-wrap: wrap）。主 CTA：品牌色纯色背景、白色文字、内边距为 14px 28px、圆角为 8px，并添加阴影。次 CTA：透明背景、中性色边框（1.5px），尺寸相同。两者均设置 font-weight: 600，悬停时使用 translateY(-1px) 或填充背景色。

CTA 位置规则
  • 主视觉横幅： CTA 位于标题和描述下方，左对齐
  • 居中横幅： CTA 居中，位于描述下方
  • 侧边栏横幅： CTA 位于底部，宽度铺满
  • 通知栏： CTA 与文字同行，位于右侧
  • 邮件横幅： CTA 为大型按钮，居中显示

第 5 步：横幅动画技巧

动画技巧
  • 视差： 滚动容器设置 perspective: 1px; height: 100vh; overflow-y: auto；背景层设置 transform: translateZ(-1px) scale(2)（scale = 1 + depth / perspective）
  • 动态渐变： 设置 background-size: 600% 600%，并在 12s 内为 background-position 设置动画
  • 浮动形状： 设置透明度为 0.08 的绝对定位圆形，为每个圆形设置独特的 translate/rotate 关键帧（时长为 7-10s）
  • 文字显现： 将文字包裹在设置了 inline-block 的 <span> 中，通过错开 0.1s 延迟，为 translateY(100%) -> 0 设置动画
  • 打字效果： 设置 white-space: nowrap; width: 0，使用 steps() 为宽度设置动画，并通过 border-right 添加闪烁光标
  • 将所有动效包裹在 @media (prefers-reduced-motion: no-preference) 中，并确保标题在首帧即可读

第 6 步：响应式横幅技巧

流式缩放
  • 使用 clamp() 设置最小高度、内边距和字号，例如：font-size: clamp(28px, 4vw, 64px)
  • 在 768px 断点处：将分栏网格堆叠为 1fr，文字居中，并使用 order: -1 将视觉内容移到文字上方
  • 按断点替换背景图：移动端（默认）、平板（768px）、桌面端（1200px）

第 7 步：季节性与促销框架

促销／折扣横幅

采用红色渐变背景（135deg, #DC2626, #991B1B），居中布局。折扣数字字号为 clamp(60px, 10vw, 120px)，字重为 900。添加对角条纹装饰，使用 repeating-linear-gradient(-45deg)，透明度为 0.03。

产品发布横幅

采用深色背景（#0F172A 至 #1E293B），文字居中。添加药丸形眉题徽章（大写、13px、品牌色搭配半透明背景／边框）。标题为白色，字号为 clamp(36px, 5vw, 64px)。在上方居中添加带有 radial-gradient 的聚光辉光 ::after。

活动倒计时横幅

采用品牌色背景，居中显示。倒计时单位按 Flex 行布局（间距为 24px）。每个单位包含：大号数字（48px/800、tabular-nums、深色半透明背景）和下方的小号标签（12px 大写）。各单位之间使用分隔符。

通知／公告栏

宽度铺满，采用品牌色背景，Flex 居中布局，内边距为 10px 20px。文字为 14px/500，链接加粗并带下划线。关闭按钮绝对定位在右侧。

季节主题
季节／活动颜色元素氛围
春季绿色、粉色、黄色花朵、叶子、蝴蝶清新、焕新
夏季蓝色、橙色、亮黄色太阳、海浪、棕榈树活力、温暖
秋季橙色、红色、棕色叶子、南瓜、暖色调温馨、丰收
冬季蓝色、白色、银色雪花、霜、常青树清爽、喜庆
黑色星期五黑色、金色、红色醒目的字体、价格标签紧迫感、奢华
新年金色、黑色、香槟色五彩纸屑、烟花、闪光庆祝
情人节红色、粉色、玫瑰金爱心、花朵、柔和渐变浪漫、温暖

第 8 步：主视觉横幅与侧边栏横幅样式

主视觉横幅最佳实践
  • 宽度铺满视口，高度为 50–80vh
  • 使用一个清晰的标题和一个明确的 CTA
  • 背景：渐变、带叠加层的图像或动画
  • 内容区域最大宽度：1200–1440px，居中
  • 移动端：改为垂直排列，并缩小标题字号
  • 加载时间：优化背景图像，尽可能使用 CSS 渐变
侧边栏横幅最佳实践
  • 固定宽度（通常为 300px）
  • 较高的格式（300x600）比矮一些的格式（300x250）效果更好
  • 内容无需滚动即可完整显示
  • 与页面内容之间使用清晰的边框或分隔
  • 文本尽量精简：只保留标题和 CTA
  • 与周围页面形成强烈的视觉对比

侧边栏横幅样式：300x600px，弹性纵向布局，品牌渐变背景，内边距为 32px 24px，白色文字。顶部放置 Logo，视觉元素居中（flex:1），标题为 22px/700，正文为 14px 且不透明度为 0.85，CTA 位于底部（margin-top: auto，白色背景、品牌色文字、居中）。

第 9 步：电子邮件页眉要点

电子邮件 HTML 有严格限制。采用以下方案：

使用基于表格的布局，最大宽度为 600px，仅使用内联样式。字体：Arial, Helvetica, sans-serif。结构：外层 <table> 使用渐变背景，居中放置 Logo <img>，<h1>（28px、粗体、白色），<p>（16px、白色、不透明度为 0.9），CTA 使用嵌套表格，白色背景加品牌色文字链接。

电子邮件设计规则
  • 使用 Arial, Helvetica, sans-serif（网页字体在电子邮件中不可靠）
  • 背景图像：始终设置 background-color 作为备用（Outlook 会忽略背景图像）
  • 最大宽度为 600px，并针对 320px 移动屏幕进行设计
  • 图像：始终设置 width、height、alt、display:block
  • 避免使用 CSS 简写属性；改用完整属性
  • 使用 Litmus 或 Email on Acid 进行测试

质量检查清单

  • 横幅尺寸与目标位置相符（使用 --resize 裁剪 Gemini 输出）
  • 输出 PNG／渲染后的截图已检查：文字拼写正确，且在显示尺寸下清晰可读
  • 视觉层次清晰：标题 > 描述 > CTA
  • CTA 醒目且以行动为导向
  • 已应用 design-context 中的品牌颜色和字体
  • 文字对比度：普通文字为 4.5:1，大号文字（>=24px 或 >=18.66px 粗体）为 3:1；在图像中最繁杂的区域进行测量（必要时添加遮罩）
  • 响应式：从移动端到桌面端均能良好适配
  • 动画流畅且不分散注意力
  • 加载性能：优先使用 CSS 渐变，而非大型图像
  • 电子邮件横幅使用表格布局和内联样式
  • 季节／促销横幅符合相应场合的视觉风格
  • HTML/CSS 输出自包含

评论

支持 Markdown