social-media-graphic

社交媒体图形设计

生成尺寸正确、留有安全区域且符合平台特定设计模式的社交媒体图形。默认输出为 Gemini 生成、裁剪到平台精确像素尺寸的 PNG；对于使用共享模板的多页轮播图或文字较多的帖子，请使用 HTML/CSS（步骤 8）。

---

步骤 1：加载设计背景

1. 首先阅读 .agents/design-context.md——品牌颜色（十六进制）、字体和风格原型
2. 如果文件缺失，请使用 design-context 默认回退设置，并告知用户使用了默认设置
3. 社交媒体图形必须高度符合品牌风格——保持一致有助于建立品牌认知

---

Gemini 图像生成路径

流水线/CLI：image-generation。提示词编写、裁剪和文字叠加回退方案：graphic-design 步骤 3。

1. 按下表所示的 Gemini 比例生成；使用 --resize WxH 裁剪到精确像素尺寸
2. 告诉 Gemini 安全区域的位置（“所有文字保持在垂直方向中间 70% 的区域内”）——它无法识别平台 UI
3. 阅读生成的 PNG：检查每个词的拼写、在手机信息流尺寸下的可读性，以及步骤 3 中的安全区域；后续每轮只修复一个问题

目标	Gemini --aspect-ratio	--resize
IG/FB/LinkedIn 方形	1:1	1080x1080
IG/FB/LinkedIn 竖版	4:5	1080x1350
IG 信息流 3:4	3:4	1080x1440
Story / Reel / TikTok 封面	9:16	1080x1920
X 信息流	16:9	1200x675
链接卡片 / FB / LinkedIn 横版（1.91:1）	16:9	1200x628
X 页眉（3:1）	21:9	1500x500
LinkedIn 个人主页横幅	4:1	1584x396
LinkedIn 公司主页封面（约 5.9:1）	8:1	1128x191
Facebook 主页封面	21:9	1640x624（820x312 的 2 倍）
Pinterest 长图	2:3	1000x1500

提示词示例

• Instagram 帖子：“为 [brand] 创建一张方形 Instagram 帖子图形。[product] 位于 [color] 渐变背景的中央。使用醒目的 [font-style] 字体显示文字 ‘[headline]’。风格简洁、现代。”
• Instagram Story：“为 [brand] 创建一张竖版 Story 图形。[product/subject] 为视觉焦点，背景采用 [color scheme]。在中上方放置文字 ‘[headline]’，在底部五分之一上方放置 CTA ‘[action]’；顶部和底部 15% 的区域不放文字。时尚、编辑风格。”
• LinkedIn 帖子：“为 [brand] 创建一张专业的横版 LinkedIn 帖子图形。使用 [chart type or icon] 将 [topic/statistic] 可视化。使用 [font-style] 字体显示标题 ‘[text]’。采用企业蓝色调，布局简洁、以数据为主。”

---

步骤 2：确定平台和格式

平台尺寸参考

Instagram

格式	尺寸	宽高比	用途
信息流帖子（方形）	1080 x 1080	1:1	标准帖子
信息流帖子（竖版）	1080 x 1350	4:5	最大化信息流展示面积
信息流帖子（3:4）	1080 x 1440	3:4	与 3:4 个人主页网格匹配（自 2025 年起）
信息流帖子（横版）	1080 x 566	1.91:1	全景内容
Story / Reel 封面	1080 x 1920	9:16	全屏竖版
轮播图幻灯片	1080 x 1080 或 1080 x 1350	1:1 / 4:5	所有幻灯片均使用首张幻灯片的比例
头像	320 x 320	1:1	圆形裁剪

Twitter / X

格式	尺寸	宽高比	用途
信息流图片	1200 x 675	16:9	标准帖子图片
页眉 / 横幅	1500 x 500	3:1	个人主页页眉
卡片图片	1200 x 628	1.91:1	链接预览

LinkedIn

格式	尺寸	宽高比	用途
信息流帖子	1200 x 627	1.91:1	标准帖子
信息流帖子（方形）	1200 x 1200	1:1	方形帖子
信息流帖子（竖版）	1080 x 1350	4:5	增加移动端展示面积
个人主页横幅	1584 x 396	4:1	个人主页背景
公司主页封面	1128 x 191	约 5.9:1	公司主页
文章 / Newsletter 封面	1920 x 1080	16:9	文章页眉

Facebook

格式	尺寸	宽高比	用途
信息流帖子	1080 x 1350 或 1200 x 630	4:5 / 1.91:1	移动端上 4:5 效果更好；链接分享使用 1.91:1
封面照片	820 x 312（上传 1640 x 624）	2.63:1	主页封面；移动端显示 640 x 360 的裁剪区域
活动封面	1920 x 1005	1.91:1	活动横幅
快拍	1080 x 1920	9:16	快拍格式

Pinterest

格式	尺寸	宽高比	用途
标准 Pin	1000 x 1500	2:3	获得最佳互动效果
长 Pin	1000 x 2100	1:2.1	信息流会裁剪高度超过 2:3 的 Pin——将吸引点放在顶部 1500px 范围内
方形 Pin	1000 x 1000	1:1	备选格式

TikTok

格式	尺寸	宽高比	用途
视频封面	1080 x 1920	9:16	个人主页网格会显示约 3:4 的居中裁剪区域

---

第 3 步：应用安全区域

每个平台都有 UI 元素会与内容重叠的区域。请将重要文字和视觉内容放在这些安全区域内。

Instagram 信息流帖子（1080 x 1080 / 1080 x 1350）

Safe zone: 60px padding on all sides
Profile grid shows a 3:4 center crop: on 1:1 keep key content in the central 810px width;
on 4:5 the grid trims ~34px from each side

Instagram / Facebook 快拍（1080 x 1920）

Top safe: 250px from top (~14%: progress bar, profile, close)
Bottom safe: 250px from bottom (~14%: reply bar, CTA sticker)
Left/Right safe: 60px from edges
Content zone: 960w x 1420h centered

Reels / TikTok 封面（1080 x 1920）

Top: ~220px clear   Bottom: ~420px clear (caption, audio, CTA)
Right: ~130px clear (like/comment/share rail)
Keep the headline in the center band -- it also survives the 3:4 grid crop

Twitter/X（1200 x 675）

Safe zone: 40px padding all sides
Text should be centered -- edges may crop on mobile
Keep key content in center 1120 x 595

LinkedIn（1200 x 627）

Safe zone: 50px padding all sides
Bottom-left: avoid -- engagement buttons overlap
Center the main message

Facebook 封面（820 x 312）

Desktop shows 820 x 312; mobile shows full height but crops the sides (~555px of 820 visible)
Mobile safe zone: center ~555 x 312
Profile photo can overlap the bottom-left -- keep text centered

Pinterest Pin（1000 x 1500）

Keep ~80px clear top and bottom (Save button and icons overlay the corners)
Logo/branding: small, bottom-center or top-left
Headline readable at ~236px feed width

---

第 4 步：平台专属设计趋势

Instagram

• 简洁、富有编辑感的版式，并留出充足空白
• 低饱和度配色，搭配一种亮色点缀
• 统一的轮播模板（画面框架相同，内容变化）
• 无衬线字体占主导
• 以照片为主，文字叠加在不透明度为 60-80% 的背景上
• 内部元素使用圆角（圆角半径为 12-16px）

Twitter / X

• 大胆、高对比度的设计（深色模式很常见）
• 使用醒目易读的大号文字——用户在信息流中会以较小尺寸浏览
• 数据可视化和图表式图片效果出色
• 采用线程式的连续图片
• 装饰简约，以内容为主

LinkedIn

• 专业、偏企业风格的美学
• 蓝色调与平台自然协调
• 清晰呈现数据、统计信息和见解
• 头像 + 引言格式，展现思想领导力
• 使用微妙的渐变，而非鲜艳夺目的颜色

Facebook

• 温暖、亲切的设计风格
• 以照片为主，并叠加文字
• 聚焦活动和社群的版式
• 封面照片应尽量少用或不用文字（旧版“20% 文字规则”已于 2020 年废除，但文字较少的图片往往仍能获得更好的效果）
• 群组和社群更青睐真实自然的风格，而非过度修饰的效果

Pinterest

• 竖版格式可最大限度利用屏幕空间
• 在生活方式图片上叠加文字
• 分步骤教程格式
• 采用清晰编号分区的列表式 Pin
• 温暖、令人向往的配色
• 使用醒目易读的小号文字

TikTok

• 大胆、活力十足、紧跟趋势
• 高对比度，确保在小屏幕上易于阅读
• 使用表情符号和轻松随意的字体
• 缩略图必须在不到 1 秒内传达内容

---

第 5 步：模板结构

引言帖子（Instagram 1080x1080）

<div class="canvas" style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  display:flex;align-items:center;justify-content:center;padding:80px;">

  <div style="text-align:center;">
    <div style="font-size:72px;line-height:1.1;margin-bottom:8px;opacity:0.3;
      font-family:Georgia,serif;">"</div>
    <p style="font-family:var(--font-heading);font-size:42px;font-weight:700;
      color:#fff;line-height:1.3;text-wrap:balance;">
      The quote text goes here, keep it under 120 characters for readability.
    </p>
    <div style="margin-top:40px;display:flex;align-items:center;justify-content:center;gap:12px;">
      <div style="width:40px;height:2px;background:rgba(255,255,255,0.5);"></div>
      <span style="font-family:var(--font-body);font-size:18px;color:rgba(255,255,255,0.8);
        text-transform:uppercase;letter-spacing:0.1em;">Author Name</span>
      <div style="width:40px;height:2px;background:rgba(255,255,255,0.5);"></div>
    </div>
  </div>
</div>

公告帖子（LinkedIn 1200x627）

Layout structure:
- Left 60%: Headline (bold, 48px) + Body text (20px) + CTA badge
- Right 40%: Visual element (icon, illustration, or abstract shape)
- Top bar: Brand color accent line (4px)
- Bottom: Logo + URL in small text
- Background: White or very light neutral

技巧轮播（Instagram 1080x1080，多页）

Slide 1 (Cover):
- Bold headline: "5 Tips for [Topic]"
- Subtext: "Swipe to learn more →"
- Eye-catching gradient or image background
- Brand logo bottom-center

Slides 2-6 (Content):
- Tip number: large, semi-transparent in background (like "01")
- Tip headline: 32px bold
- Tip description: 20px, 2-3 lines max
- Consistent background across all slides
- Progress indicator dots at bottom

Slide 7 (CTA):
- "Found this helpful?"
- Follow CTA + handle
- Share/save prompt
- Brand logo

前后对比（Instagram 1080x1350）

Layout:
- Top half: "Before" label + image/state
- Divider: thin line or diagonal cut with label
- Bottom half: "After" label + image/state
- Keep dimensions equal for both halves
- Use subtle color shift (gray/muted for before, vibrant for after)

数据/统计帖子（Twitter 1200x675）

Layout:
- Large number: 72-96px, bold, gradient or accent color
- Context line: 24px below the number
- Supporting text: 18px, 2 lines max
- Source attribution: 14px, bottom-right
- Background: clean gradient or subtle pattern
- Brand mark: small, bottom-left

---

第 6 步：轮播设计系统

对于多页轮播，请保持风格一致：

/* Shared carousel variables */
:root {
  --slide-bg: #0F172A;
  --slide-text: #F8FAFC;
  --slide-accent: #6366F1;
  --slide-padding: 80px;
  --slide-radius: 0; /* carousels are edge-to-edge */
}

/* Consistent header bar across slides */
.slide-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--slide-accent);
}

/* Progress indicator */
.progress-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.progress-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.progress-dots .dot.active {
  background: var(--slide-accent);
  width: 24px;
  border-radius: 4px;
}

/* Swipe hint on first slide */
.swipe-hint {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0.6;
}

---

第 7 步：优化互动效果

文字可读性规则

• 社交媒体标题每行最多 6 个词
• 社交媒体图片中的任何文本块最多 3 行
• **最小字号：**Instagram 使用 24px，Twitter/LinkedIn 使用 20px
• **对比度：**在深色背景上使用白色文字，或在浅色背景上使用深色文字；切勿在中间色调背景上使用中间色调文字

吸引注意力的技巧

1. 不对称布局 —— 稍微打破网格，营造视觉张力
2. 在柔和的配色中使用一种醒目的颜色
3. 用超大数字或单个词语作为视觉锚点
4. 运用留白来衬托信息
5. 加入对角线元素，营造动感
6. 在画布边缘添加边框或框架（内缩 8-12px）

针对不同平台的 CTA

• Instagram：“保存以便日后查看”，“分享到你的快拍”，“同意的话请双击”
• Twitter：“同意的话请转发”，“回复分享你的看法”，“收藏此话题串”
• LinkedIn：“同意吗？在下方分享你的看法”，“关注以获取更多见解”
• Pinterest：“保存此图钉”，“点击查看完整指南”

---

第 8 步：代码输出路径

使用代码而非 Gemini 时，请生成一个独立的 HTML 文件。包含：

1. 在画布元素上设置正确的 width 和 height
2. 通过 <link> 标签加载 Google Fonts
3. 使用 design-context 中的所有颜色
4. 设置便于调整的 CSS 自定义属性
5. 添加注释，标出可编辑的部分（文本、颜色、图片）

导出提示

在输出中添加一条注释：

导出后，读取 PNG，并按照检查 Gemini 输出的相同方式进行检查。

---

质量检查清单

• 尺寸与目标平台完全一致
• 文本位于安全区域内
• 字号在平台显示尺寸下清晰易读
• 品牌颜色和字体的应用保持一致
• 视觉层次清晰 —— 有一个焦点
• 没有文字过多的区域（社交图片应以视觉为主）
• 在适当情况下包含 CTA 或行动提示
• 已读取输出的 PNG：每个词都拼写正确，且在手机尺寸下清晰可读
• 使用代码输出时，除字体外，文件均为独立完整文件