L1-06：图片卡片生成 —— 把文字和图片合成一张精美卡片

🎯 学什么：如何设计可扩展的多模板 Skill——从「单一输出」到「参数化模板系统」。核心模式：内容层/模板层/渲染层三层分离 + 风格×布局×配色三维矩阵 + 三种内容大纲策略。渲染层使用 CDP（CDP/Chrome DevTools Protocol：Chrome 开发者工具协议，让外部程序能操控浏览器）浏览器完成图片导出。 💡 难易度：⭐⭐ | ⏱️ 预计时间：40 分钟

---

1. 课程概览

💡 白话小课堂：你看到朋友圈里那些漂亮的「名言卡片」——白底黑字一句话，有好看的排版和配色——就是这个 Skill 干的。它把一个话题拆成 1-10 张连续的图片卡片，每张卡片一个小主题，滑着看就像翻一本迷你杂志。小红书、微信图文、朋友圈——一个话题，多种风格，一键生成。

本课的独特定位——前面五课教你封装「单一功能」的 Skill。L1-06 教你封装「选择系统」：

🔑 核心秘诀：三层架构 = 关注点分离——用户只管内容（写什么），设计师/模板管排版（怎么好看），脚本管渲染（怎么生成）。互不干扰，各自精进。品牌换了 VI 配色？只改模板层——内容脚本和渲染脚本完全不动。

⚠️ 避坑指南：不要做一个「通用尺寸」的卡片适配所有平台。结果就是——小红书裁掉了标题，朋友圈看不清文字。每个平台的浏览方式不同（方形网格 vs 竖屏滑动 vs 横屏嵌入），必须分尺寸输出。

---

2. 三层架构 + 模板系统详解

2.1 三层架构：关注点分离

baoyu-image-cards 的设计精髓在于把三个关注点彻底分离：

┌─────────────────────────────────────────────┐
│              内容层（用户提供）                  │
│  用户：要做什么话题？目标受众是谁？要传达什么信息？   │
│  → 用户只管内容，不需要懂设计                     │
└────────────────────┬────────────────────────┘
                     │
┌────────────────────▼────────────────────────┐
│              模板层（Skill 管理）               │
│  12 种视觉风格 × 8 种信息布局 × 3 种配色方案      │
│  → 设计师/模板作者管排版，不需要改脚本             │
└────────────────────┬────────────────────────┘
                     │
┌────────────────────▼────────────────────────┐
│              渲染层（脚本执行）                  │
│  调用图片生成后端 → 渲染卡片 → 输出 PNG          │
│  → 脚本只管渲染，不关心内容和排版                 │
└─────────────────────────────────────────────┘

💡 白话小课堂：想象你在做一张生日贺卡。内容层 = 写什么祝福语（文字、名字），模板层 = 贺卡的排版布局（标题在哪、图片多大、配色是什么），渲染层 = 用什么纸印刷（铜版纸还是哑粉纸）。换祝福语不改排版，换配色不重写祝福语——这就是关注点分离。

为什么三层分离比「一个脚本全包」更好？ 看一个真实场景：

场景：品牌换了 VI 配色，从暖色调换成冷色调。

一个脚本全包的做法：
  找到生成脚本 → 找到所有硬编码的颜色值 → 逐一替换 → 测试 → 可能漏改
  
三层分离的做法：
  修改模板层的 palette 参数：warm → cool
  内容层：不动（商品信息没变）
  渲染层：不动（渲染引擎没变）
  完成。一行改动，零风险。

2.2 模板系统：12 风格 × 8 布局 × 3 配色

Skill 内置了三根独立的「旋钮」，任意组合：

🎨 风格（12 种）——控制视觉美感：

📐 布局（8 种）——控制信息密度和排列方式：

🎯 配色（3 种）——覆盖风格默认色，只改颜色不改渲染规则：

🔑 设计要点：三维旋钮各自独立——你可以 --style notion --layout dense --palette macaron 生成知性知识卡片，也可以 --style bold --layout comparison 生成高对比 PK 图。旋钮数量（12+8+3=23 种组合的表面复杂度）被 Preset 预设简化——用户只需说 --preset knowledge-card，Skill 自动映射到 notion + dense。

2.3 自动选择：用户不用懂设计

Skill 内置了内容信号 → 风格/布局的映射表。用户只需要提供文章内容，Skill 自动分析推荐：

检测到文章关键词 "beauty, fashion, pink"
→ 自动推荐：cute 风格 + sparse/balanced 布局 + cute-share 预设

检测到文章关键词 "knowledge, concept, SaaS"
→ 自动推荐：notion 风格 + dense/list 布局 + knowledge-card 预设

检测到文章关键词 "warning, important, critical"
→ 自动推荐：bold 风格 + list/comparison 布局 + warning 预设

🔑 设计要点：自动选择不是为了「替代用户判断」，而是为了「降低交互成本」。如果用户每次都从 12 种风格中选，决策疲劳会让 Skill 看起来很重。自动推荐 → 用户确认（或一键接受），只需一次交互。

2.4 内容大纲的三种策略

这是 L1-06 另一个重要设计——同样的素材，三种不同的讲故事方式：

策略 A：故事驱动（Story-Driven）
  结构：Hook → Problem → Discovery → Experience → Conclusion
  适合：个人分享、产品测评、转型故事
  卡片数：4-6 张

策略 B：信息密集（Information-Dense）
  结构：Core Conclusion → Info Cards → Pros/Cons → Recommendation
  适合：教程、对比、清单、知识科普
  卡片数：3-5 张

策略 C：视觉优先（Visual-First）
  结构：Hero Image → Detail Shots → Lifestyle Scene → CTA
  适合：高颜值产品、生活方式、氛围内容
  卡片数：3-4 张

🔑 设计要点：三种策略不是「随便写的三个变体」——它们对应信息传播的三种核心模式：情感共鸣（故事）、理性决策（信息）、视觉吸引（美学）。这是 决策树模式 的雏形——Level 3 将大量出现这种「分析情况 → 选分支 → 执行对应策略」的结构。

2.5 视觉一致性：Image-1 锚定链

多张卡片系列的最大挑战：同一系列的卡片风格不一致。封面是手绘风，第二张变成了写实风，第三张又变了色调——用户会觉得是三个不同人做的。

baoyu-image-cards 的解法：

生成第 1 张（封面）：
  → 正常生成，不传 --ref
  
生成第 2 张及以后：
  → 传 --ref <第1张的路径>
  → AI 看到第 1 张的样子 → 自动延续风格、色调、角色造型
  
效果：整体系列保持视觉一致性，像同一个设计师做的。

🔑 这个技巧可以推广：任何需要「系列一致性」的生成任务（连环画、产品系列图、品牌宣传物料），都可以用「第一张作为锚定参照图」的策略。

---

3. 结构拆解：参数化模板型 Skill 模板

从 L1-06 中提取「参数化模板型」Skill 的通用模板——这是前面五种架构之外的新模式。

参数化模板型的核心特征：

什么时候用参数化模板型？ → 当 Skill 需要支持「不同用户想要不同风格/格式的输出，但核心处理逻辑相同」时。典型场景：报告生成（正式/简洁/可视化三种模板）、卡片生成（多种风格）、PPT 生成（多种主题）。

这个模板的三个关键设计决策：

1. Preset > 裸参数：用户说 knowledge-card 比说 --style notion --layout dense 更自然
2. 自动推荐 > 强制选择：分析内容 → 推荐最佳 → 用户确认（而非让用户自己从 23 种组合中挑）
3. 锚定参照 > 独立生成：多输出时保持一致性比单独每张好看更重要

---

4. 电商案例：618大促限时秒杀——300张促销卡片4分钟生成

🛒 实战案例：某食品天猫店备战618，策划了"整点秒杀"活动——每天6个时段（10:00/12:00/14:00/16:00/20:00/22:00），每个时段上5个单品，持续10天，共需300张秒杀促销卡片（朋友圈+私域社群分发）。设计师手工做一张卡片平均12分钟，300张就是60小时——一个人不吃不喝要做两天半。

用 baoyu-image-cards 批量生成秒杀卡片：

1. 内容层：从运营Excel导出——品名（"手撕牛肉干500g"）、原价¥89、秒杀价¥39.9、时段标签"20:00场 限100份"、倒计时时长
2. 模板层：选用 bold 模板——大号红色秒杀价、黄色"限时"角标、倒计时进度条、"已抢XX%"占位区
3. 渲染层：双尺寸输出——朋友圈(1080×1080) + 社群竖版(1080×1440)，品牌Logo+VI色固定在模板中
4. 设置 --batch 模式，300张全自动生成——时段标签和倒计时自动计算填充

效果：

• 300张卡片生成：60小时（人工）→ 4分钟（自动）——快900倍

• 私域社群卡片打开率从12% → 23%（统一专业设计 vs 运营随手截图）

• 秒杀活动期间店铺总销售额同比去年618增长34%

• 模板跨活动复用：618 → 双11 → 年货节，只换Excel数据源，模板层/渲染层原封不动

🔑 启示：促销的本质是"多触点、高频次、强视觉"——你的活动再划算，没人看到就没用。300张卡片4分钟，意味着你可以为每个时段每个单品做专属物料，而不是一个"全场8折"的通用海报发10天。三层分离让"换活动不换设计"成为日常操作。

---

5. 变体练习

为 baoyu-image-cards 增加一个「数据卡片」模板

设计一个专门展示数字的卡片：

• 大号数字（如 "350%↑"）+ 小号说明（如 "本月环比增长"）
• 支持单数字 / 双数字对比 / 四数字仪表盘三种布局

思考题：

1. 这个新模板需要修改三层架构的哪一层？
2. 自动选择表里应该加什么关键词来触发数据卡片？
3. 数据卡片适合用哪种布局？（sparse? balanced? dense?）

点击查看思路

1. 只改模板层：新增一种布局模式（数据可视化），定义大号数字字体、说明文字位置、正负颜色编码（绿涨红跌）。内容层和渲染层完全不改。
2. 自动选择关键词：growth, increase, metrics, KPI, 增长, 数据, 同比, 环比 → 自动触发数据卡片模板
3. 布局选择：单数字用 sparse（大号居中），双数字对比用 comparison，四数字用 quadrant（2×2 仪表盘）——复用现有布局，只需在 prompt 里指定数据的呈现方式

---

6. 掌握检验

Q1：baoyu-image-cards 的参数化模板系统的三层架构从下到上依次是什么？

• A) 模板层 → 内容层 → 渲染层
• B) 渲染层 → 内容层 → 模板层
• C) 内容层（用户提供）→ 模板层（Skill 管理）→ 渲染层（脚本执行）
• D) 模板层（Skill 管理）→ 内容层（用户提供）→ 渲染层（脚本执行）

Q2：为什么不做一个"通用尺寸"的卡片适配所有平台？

• A) 因为技术上无法实现通用尺寸
• B) 因为每个平台的内容消费方式不同——Instagram 方形全屏、小红书竖屏滑动、公众号横屏嵌入，一刀切会导致裁切、比例失调、推荐权重降低
• C) 因为不同平台的图片大小限制不同，ISO标准要求不同尺寸
• D) 因为各大平台之间有商业竞争协议，禁止通用尺寸

Q3：三层架构（内容层/模板层/渲染层）体现了什么设计原则？如果某个电商品牌换了 VI 配色，应该修改哪一层？为什么换配色不需要同时改动内容脚本和渲染脚本？

Q4：Preset 预设（如 knowledge-card → notion + dense）解决了什么用户体验问题？如果没有 Preset 系统，用户生成一张知识卡片需要做哪些选择？这会带来什么问题？

Q5：以下是某两个平台的标准卡片尺寸，请将平台和尺寸配对并解释为什么这两个平台的尺寸差异如此之大：

• 1080 × 1080（方形）
• 1080 × 1440（竖长形）

Q6：某食品电商"618大促"需要为 300 个单品生成促销卡片。以下哪个环节是他们实现"75小时→4分钟"效率提升的关键？

• A) 手动为每个商品单独设计布局
• B) 结合商品数据库导出 + 固定模板（bold布局） + --batch 批量模式 + 双尺寸输出
• C) 雇佣更多美工人员加班制作
• D) 只给前 10 个热销商品做卡片

Q7：如果你要为 baoyu-image-cards 增加一个"数据卡片"模板（用于展示 KPI 数字如"350%↑ 本月环比增长"），从三层架构的角度，你需要修改哪一层？需要定义哪些具体参数？自动选择系统应匹配什么关键词？

Q8：Image-1 锚定链解决了多卡片系列的什么问题？为什么第 2 张及以后的卡片要传 --ref <第1张路径> 而不是独立生成？这个技巧能推广到什么场景？

---

7. 答案

点击查看答案

Q1：C — 从上层到下层依次为：内容层（用户提供标题、正文、CTA、数据）、模板层（Skill 管理布局、字体、颜色、间距）、渲染层（脚本执行 CDP 浏览器渲染和图片导出）。A/B 的顺序都反了，D 把用户关心的一层放在了中间（用户不需要管模板层）。

Q2：B — 核心原因是平台内容消费方式根本不同：Instagram 方形全屏（适合正方形构图）、小红书竖屏滑动（适合纵向视觉流）、公众号横屏嵌入式（适合横向构图）。一刀切的尺寸会导致关键信息被裁切、图片比例失调、甚至平台推荐权重降低。A、C、D 均非真正原因。

Q3：三层架构体现了「关注点分离」原则——用户只管内容（写什么），设计师/模板管排版（怎么好看），脚本管渲染（怎么生成），三者互不干扰。如果电商品牌换了 VI 配色，只需要修改模板层中的配色方案参数（如品牌色和色板），内容层仍然可以原样输出商品信息（品名、价格），渲染层仍然用同样的 CDP 浏览器渲染流程。这就是关注点分离的价值——改配色不需要重新写商品文案，也不需要修改渲染脚本。

Q4：Preset 预设解决的核心问题是「决策疲劳」。如果没有 Preset，用户生成一张知识卡片需要做：(1) 从 12 种风格中选 → (2) 从 8 种布局中选 → (3) 从 3 种配色中选 → (4) 确认组合是否合适。每一步都让用户头疼（什么叫 notion 风格？dense 布局是什么？）。而 Preset 把「风格+布局+配色」打包成一个语义化标签——用户只需说「知识卡片」→ Skill 自动映射到 notion + dense + macaron。「降低认知门槛」是 Skill 设计最被低估的原则之一——好的 Skill 让用户用日常语言表达需求，而非学习一套参数体系。

Q5：1080×1080（方形）→ 朋友圈/Instagram，因为浏览方式是方形网格、全屏展示，正方形是标准格式；1080×1440（竖长形）→ 小红书，因为小红书是竖屏滑动浏览，竖长形更适合在手机上一屏展示完整内容，用户不需要点开就能看到大部分信息。两个平台尺寸差异的本质是内容消费方式不同：朋友圈/Instagram 偏「浏览布局」，小红书偏「阅读流」。

Q6：B — 从商品数据库导出结构化数据 → 固定 bold 模板（高对比大号价格）→ --batch 批量模式 → 双尺寸输出（小红书 + 朋友圈），这四个环节串联起来实现了从 75 小时到 4 分钟的跨越。A 与批量自动化的目标相悖，C 是传统的"堆人力"方案而没有从根本解决问题，D 是缩小范围而非扩大效率。

Q7：只修改模板层。需要定义的具体参数：(1) 布局——新增单数字/双数字对比/四数字仪表盘三种模式，可复用现有 sparse（单数字）、comparison（双数字）、quadrant（四数字）布局母版；(2) 字体——大号数字专用字体（DIN 或粗体）+ 中小号说明文字；(3) 颜色编码——增长用绿色、下降用红色、中性用灰色。自动选择应匹配关键词：growth, increase, metrics, KPI, 增长, 数据, 同比, 环比, 转化率。内容层和渲染层完全不动——只改模板层的 prompt 模板。

Q8：Image-1 锚定链解决的是「多卡片系列视觉风格不一致」的问题——如果每张卡片独立生成，封面可能是手绘风、第二张变成写实风、第三张色调又变了，整个系列看着像三个不同人做的。第 2 张起传 --ref <第1张路径> 让 AI 以第 1 张为参照物，自动延续其风格、色调、角色造型，确保整体系列一致。可推广的场景：任何需要「系列一致性」的生成任务——连环画/漫画、产品系列图、品牌宣传物料、视频分镜——都可以用「第一张作为锚定参照图」这个技巧。

（7/8 通过）

---

8. 延伸阅读

• [[L1-07-Gemini网页抓取|下一课：Gemini网页版接口]] — CDP 浏览器 + 逆向 API
• [[L1-05-封面图智能生成|上一课：文章封面图]] — 回顾生成型 Skill 的三条铁律（L1-06 也遵循它们）
• [[L3-课程总览|Level 3：熟练工]] — L1-06 的「三种策略选择」是 Level 3 决策树模式的前奏