thumbnail-design

缩略图设计

创作高影响力的缩略图，针对点击率进行优化，并确保在小尺寸下清晰易读。适用于 YouTube 缩略图、文章标题图、OG 图片和视频封面。

---

第 1 步：加载设计上下文

1. 首先阅读 .agents/design-context.md——了解品牌颜色（十六进制）、字体和风格原型
2. 如果文件缺失，请使用 design-context 的默认回退设置，并告知用户已使用默认设置
3. 缩略图优先考虑可读性和视觉冲击力，而非严格遵循品牌指南——但品牌颜色有助于建立频道辨识度

---

Gemini 图像生成路径

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

1. 按照第 2 步表格中的 Gemini 比例生成；使用 --resize WxH 裁剪（例如 --aspect-ratio 16:9 --resize 1280x720）
2. 真实人物：通过 --image 传入其照片，并注明“保持此人的面部和身份特征不变”。不要虚构真实人物的肖像
3. 读取输出 PNG，然后检查缩小后的效果：python -c "from PIL import Image; Image.open('thumb.png').resize((168,94), Image.LANCZOS).save('thumb_small.png')"，并读取 thumb_small.png。文字必须仍然清晰可读，面部表情也必须清晰可见。后续每轮只修复一个问题

提示词示例

• YouTube 缩略图：“创建一张 YouTube 缩略图（16:9）。[主体] 位于左侧，呈现 [表情/姿势]。右侧用 [颜色] 的醒目文字写上‘[标题]’，并添加深色描边。[背景风格]。高对比度，在小尺寸下也清晰易读。”
• 文章标题图：“创建一张横向文章标题图。使用抽象的 [配色方案] 渐变背景。标题‘[标题]’以醒目的白色无衬线字体居中显示。加入细腻的几何图形。整体简洁，具有编辑设计感。”
• OG 图片：“为 [品牌/网站] 创建一张横向 Open Graph 图片。所有文字都放在中央 80% 区域内。Logo 位于左上角，标题‘[文本]’以大字居中显示，下方用较细的字重显示标语。使用 [品牌颜色] 渐变背景。专业且适合分享。”

---

第 2 步：确定格式和尺寸

格式	尺寸	宽高比	Gemini 比例	备注
YouTube 缩略图	1280 x 720	16:9	16:9	最小宽度 640px；JPG/PNG 小于 2 MB；在 168x94 下必须清晰可读
YouTube Shorts 封面	1080 x 1920	9:16	9:16	内容展示页会显示居中裁剪区域——文字应放在画面中部
文章标题图 / 主视觉图	1200 x 630	1.91:1	16:9 + crop	博客文章标题图
OG 图片（Open Graph）	1200 x 630	1.91:1	16:9 + crop	FB、LinkedIn、Slack、X 上的链接预览
X 大图卡片	1200 x 628	~1.91:1	16:9 + crop	X 可能会裁剪为接近 2:1 的比例——请留出边距
播客封面	3000 x 3000	1:1	1:1 (4K)	Apple：1400-3000px 正方形，JPG/PNG，RGB
课程缩略图	1280 x 720（Udemy 最小 750 x 422）	16:9	16:9	Udemy、Skillshare
Vimeo 缩略图	1280 x 720	16:9	16:9	与 YouTube 相同

---

第 3 步：缩略图构图原则

3 秒法则

缩略图必须在 3 秒内传达信息。如果有人无法一眼看懂主题，这张缩略图就不合格。

小尺寸下的可读性

YouTube 缩略图在侧边栏中的显示尺寸可能小至 168x94 像素。请在脑海中按该尺寸检查每个设计。

规则：

• 文字最多 5-7 个词
• 最小字号：在 1280x720 画布上为 60px（相当于侧边栏尺寸下约 8px）
• 不要使用细字体——仅使用粗体或极粗字重
• 文字与背景之间始终保持高对比度
• 不要添加缩小后会消失的小细节

最多三个元素

最佳缩略图最多包含 3 个视觉元素：

1. 一张面孔或一个焦点图像
2. 醒目的文字（2-5 个词）
3. 一个辅助视觉元素（图标、箭头、表情符号、产品）

超过 3 个元素会显得杂乱。

---

第 4 步：吸引点击的构图框架

好奇心缺口

展示足以引发兴趣的内容，但不要揭示全部。观众必须点击才能了解更多。

Layout:
- Left side: Expressive face (surprise, shock, excitement)
- Right side: Bold text with ONE missing piece
- Example: "I tried [PRODUCT] for 30 days..." with shocked face
- Use "?" or "..." to create open loops

前后对比

展示变化过程。对比能促使用户点击。

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.before {
  background: #E5E7EB; /* muted, desaturated */
  filter: grayscale(30%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.after {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
}
.divider-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  z-index: 10;
  /* Large arrow pointing right: → */
}

数字／列表

数字很吸引眼球。“7 个技巧”“1 万美元”“100 天”。

Layout:
- Giant number: 120-200px, bold, gradient or accent color
- Supporting text: 36-48px next to or below number
- Background: clean gradient, not busy
- Optional icon related to the topic

表情／情绪

展现情绪的人脸是效果最好的缩略图元素。

Layout:
- Face/headshot: 60% of frame, positioned left or right
- Expressive emotion: surprise, excitement, disbelief, joy
- 2-3 words of text on the opposite side
- Colored border or glow behind the face to separate from background

对比／比较

将两样东西并排放置，中间加上“VS”。

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}
.vs-badge {
  font-size: 72px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5);
  z-index: 2;
}
.side-a { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.side-b { background: linear-gradient(135deg, #2d1b00, #462300); }

---

第 5 步：缩略图文字处理

最大化文字冲击力

/* Primary thumbnail text */
.thumb-text {
  font-family: 'Inter', 'Arial Black', sans-serif;
  font-size: 80px;
  font-weight: 900;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;

  /* Always add stroke + shadow for readability over any background */
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.8);
  paint-order: stroke fill;
  text-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.9),
    0 0 20px rgba(0, 0, 0, 0.5);
}

/* Accent word highlight */
.thumb-text .highlight {
  color: var(--accent);
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.9);
}

文字背景技巧

/* Solid pill behind text */
.text-pill {
  display: inline-block;
  background: var(--primary);
  padding: 8px 24px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 48px;
}

/* Angled highlight bar */
.text-bar {
  display: inline-block;
  background: var(--accent);
  padding: 8px 20px;
  transform: skewX(-5deg);
}
.text-bar span {
  display: inline-block;
  transform: skewX(5deg); /* counter-skew for straight text */
}

/* Blurred backdrop */
.text-backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 12px 24px;
  border-radius: 8px;
}

---

第 6 步：人脸与情绪技巧

带光晕的人像抠图

.face-container {
  position: relative;
  z-index: 2;
}
.face-container img {
  /* Remove background in advance or use object-fit */
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 0 30px rgba(var(--primary-rgb), 0.6));
}
/* Glow ring behind face */
.face-container::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.4), transparent 70%);
  z-index: -1;
}

表情符号点缀（没有人脸时）

没有可用照片时，使用超大表情符号作为视觉锚点：

.emoji-accent {
  font-size: 120px;
  position: absolute;
  /* Slight rotation adds energy */
  transform: rotate(-10deg);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.3));
}

---

第 7 步：缩略图的色彩心理学

颜色	联想	最适合的内容
红色 (#EF4444)	紧迫、兴奋、危险	突发新闻、警告、犀利观点
黄色 (#EAB308)	引人注意、乐观、活力	技巧、积极内容、重点内容
蓝色 (#3B82F6)	信任、冷静、专业	教程、教育内容、科技
绿色 (#22C55E)	成长、成功、金钱	金融、成果、积极结果
橙色 (#F97316)	活力、创造力、温暖	创意内容、DIY、美食
紫色 (#8B5CF6)	高端、神秘、智慧	奢侈品、深度解析、高阶主题
黑色 (#000000)	力量、优雅、精致	戏剧性揭晓、高端内容
白色 (#FFFFFF)	干净、简约、现代	极简风格频道、Apple 风格

醒目的对比配色

• 深蓝色背景上的黄色文字
• 深红色或紫色背景上的白色文字
• 亮黄色背景上的黑色文字
• 深色背景上的青色点缀
• 深灰色／炭灰色背景上的红色点缀

---

第 8 步：针对 YouTube 的优化

侧边栏可读性测试

缩略图在侧边栏中的显示尺寸约为 168x94px。在这个尺寸下：

• 只有粗体、高对比度的文字才清晰可读
• 人脸必须足够大，才能展现表情
• 细节会消失——保持简洁
• 整体配色必须与周围的缩略图明显不同

覆盖区域

YouTube 会在右下角叠加视频时长（深色胶囊形区域，配白色文字），在已观看视频的底边显示红色观看进度条，并在右上角显示悬停图标（稍后观看、加入队列）。避免在这三个区域放置关键内容。

/* Duration overlay safe zone */
.youtube-safe {
  /* Avoid content in this area */
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 40px;
  /* This zone is covered by YouTube's duration badge */
}

频道一致性

创建一套包含重复元素的缩略图系统：

• 每个系列使用一致的背景色或渐变色
• 所有缩略图采用相同的字体处理方式
• 使用重复的布局结构（人脸在左＋文字在右，或反之）
• 将品牌色作为标志性元素（彩色边框、文字高亮）

---

第 9 步：文章标题／OG 图片设计

OG 图片要求

• 尺寸：1200 x 630（大多数平台推荐）；通过 og:image:width / og:image:height 元标签声明
• 文件大小：小于 1MB，以便快速加载（平台限制通常更高，例如 5-8MB）
• 在 og:image 中使用绝对 HTTPS URL；为 X 添加 twitter:card = summary_large_image
• 文字：缩小至约 600x315 时仍清晰可读（某些信息流中会缩小一半）
• 避免在边缘 10% 的区域放置文字（可能会被裁切）

文章标题布局

.article-header {
  width: 1200px;
  height: 630px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 60px 80px;
  background: linear-gradient(135deg, #0F172A, #1E293B);
  overflow: hidden;
}

.article-header .title {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 800;
  color: #F8FAFC;
  line-height: 1.15;
  max-width: 700px;
  text-wrap: balance;
}

.article-header .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 18px;
  color: rgba(248, 250, 252, 0.7);
}

.article-header .brand {
  position: absolute;
  bottom: 40px;
  right: 60px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

/* Decorative accent */
.article-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

---

第 10 步：输出与导出

生成尺寸固定的独立 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap" rel="stylesheet">
  <style>
    body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;
           min-height: 100vh; background: #1a1a1a; }
    .thumbnail {
      width: 1280px;
      height: 720px;
      position: relative;
      overflow: hidden;
      /* ... design styles ... */
    }
  </style>
</head>
<body>
  <div class="thumbnail">
    
  </div>
</body>
</html>

然后读取 PNG，并像测试 Gemini 输出那样进行相同的 168x94 缩小测试。

---

质量检查清单

• 已以原尺寸读取输出的 PNG，并缩小至 168x94px——文字拼写正确且清晰可读
• 文字最多 5-7 个词
• 视觉元素不超过 3 个
• 文字对比度高（添加描边＋阴影以确保清晰）
• 焦点明确，能够传达主题
• 右下角、底边和右上角留空（时长标记、进度条、悬停图标）
• 颜色与平台界面明显不同（避免使用纯白色或 YouTube 红色）
• 与系列中的其他缩略图保持品牌一致性
• 具有情绪吸引点——人脸、数字或引发好奇心的元素
• 在适当情况下应用设计上下文中的颜色和字体