L2-02：AI图表一键生成 —— 双模 Skill 设计

🎯 学什么：如何设计一个「同一功能提供两种实现路径」的 Skill——Mermaid（Mermaid：纯文本图表脚本语言） 代码（精确、零成本、可编辑）和 AI 图片生成（好看、自由、有表现力），AI 根据内容类型自动选择最优方案。核心洞察：好的双模设计是「用户不知道有两套系统在跑」，差的设计是「让用户先学两个按钮的区别再选」。 💡 难易度：⭐⭐ | ⏱️ 预计时间：40 分钟

---

1. 课程概览

💡 白话小课堂：这个 Skill 就像一个有两支笔的画家——一支是尺子和圆规（Mermaid 代码，画出来的线条精准不犯错），一支是画笔（AI 图片生成，画出来好看有艺术感）。你不需要纠结「用哪支笔」，只需要说「我要一张公司组织架构图」——Skill 自动判断：架构图需要精确的层级关系 → 用尺子（Mermaid）；你说「我要一张产品概念对比图」——Skill 自动判断：概念图需要视觉冲击力 → 用画笔（AI Image）。

本课的独特定位——双模设计模式：

🔑 核心秘诀：双模设计的精髓不是「提供两种选择让用户挑」，而是「让用户不知道有两套系统在跑」——自动选择、可覆盖、统一输出。用户说需求，Skill 出图，中间过程完全透明。

⚠️ 避坑指南：见过有人让 AI 画一张「公司组织架构图」，AI 画出了 CEO 上面还有一个 SUPREME LEADER——这就是 AI 图片在精确结构上的「幻觉」。Mermaid 代码不会犯这种错，因为它按你写的结构渲染，不会自己加戏。双模 Skill 的核心任务就是判断：什么时候「精确不容有失」（用 Mermaid），什么时候「好看比精确重要」（用 Image）。

---

2. 双模设计详解 —— 两种实现路径的完整对比

2.1 为什么需要两种模式？

Mermaid 模式的场景特征：
  ✓ 需要精确结构——线条不能乱连、箭头方向要对、层级不能错
  ✓ 可以标准化——流程图、时序图、类图都有标准语法
  ✓ 需要频繁修改——改了代码就改了图，不需要重新「画」
  → 流程/结构/关系 → Mermaid

Image 模式的场景特征：
  ✓ 需要视觉表现力——好看的图比精确的图更重要
  ✓ 不能标准化——概念图、思维导图、对比图没有固定语法
  ✓ 创意优先——布局自由、配色丰富、风格多样
  → 概念/创意/营销 → Image

2.2 Mermaid 模式：精确优先

工作原理：

用户需求：「画一个用户登录的流程图」
  ↓
AI 生成 Mermaid 代码：
  graph TD
    A[用户输入邮箱] --> B{邮箱存在?}
    B -->|是| C[发送验证码]
    B -->|否| D[提示注册]
    C --> E[用户输入验证码]
    E --> F{验证码正确?}
    F -->|是| G[登录成功]
    F -->|否| H[重新输入]
  ↓
Mermaid 渲染引擎渲染 → SVG 图表

优势：

• 确定性：代码是什么结构，图就是什么结构——不会多画一个 CEO
• 零成本：Mermaid 是开源渲染引擎，不调用任何 AI API（API：程序间通信接口）
• 可编辑：修改代码即修改图，不需要重新「画」
• 版本管理友好：代码是纯文本，git diff 看得清清楚楚

劣势：

• 视觉表现力有限——所有图表都是「方框 + 箭头 + 文字」
• 布局由引擎决定，不能手动调整位置
• 中文渲染在部分环境中可能有问题

2.3 Image 模式：表现力优先

工作原理：

用户需求：「画一张产品功能对比图，要视觉冲击力」
  ↓
AI 生成详细的图片 Prompt：
  "A visual comparison diagram showing Product A vs Product B.
   Left side: Product A features in blue cards.
   Right side: Product B features in green cards.
   Center: VS badge with competitive differentiators highlighted.
   Dark theme, modern dashboard aesthetic, 16:9 aspect ratio."
  ↓
调用 AI 图片 API（DALL-E / Imagen / Stability）→ 生成图片

优势：

• 视觉丰富——配色、布局、风格自由
• 适合营销和展示场景——好看的图更有说服力
• 可以表达「概念」和「感觉」——不仅是「结构」

劣势：

• 有幻觉风险——AI 可能在组织架构图中多画一层
• 有成本——每次生成调用 API 计费
• 不可编辑——改一个箭头需要重新生成整张图
• 不稳定——同样的 Prompt 两次可能出不一样的结果

🔑 设计要点：双模不是「两个 Skill 拼在一起」——而是「一个 Skill 根据输入自动路由到最优路径」。路由逻辑是双模设计的核心。

---

3. 自动选择决策逻辑 —— 路由规则详解

3.1 九种图表类型的模式分配

Skill 覆盖 9 种图表类型，每种都有预设的默认模式：

3.2 路由决策树

用户需求 → 提取图表类型

├── 类型 = 流程图/时序图/类图/ER图/状态机/组织架构图
│   → 默认 Mermaid（需要精确结构）
│   → 除非用户明确说「用 AI 画」→ 覆盖为 Image + 警告
│
├── 类型 = 架构图/思维导图/概念对比图
│   → 默认 Image（需要视觉表现力）
│   → 除非用户明确说「用 Mermaid」→ 覆盖为 Mermaid + 提示局限性
│
└── 类型不明确 → 默认 Image（更通用） + 问题澄清

3.3 「可覆盖」原则

双模设计的第四条原则——用户可以覆盖自动选择，但 Skill 应该提示覆盖的代价：

场景 A：用户说「用 Mermaid 画一张产品概念对比图」
  → 系统默认：概念图 → Image
  → 用户覆盖 → Mermaid
  → Skill 回应：「好的，用 Mermaid 生成。注意：Mermaid 在视觉表现力上有限，
     概念对比图通常用 Image 模式效果更好。需要我改用 Image 吗？」
  → 执行用户选择（尊重用户），但给了专业建议（履行顾问职责）

场景 B：用户说「用 AI 画一张公司组织架构图」
  → 系统默认：组织架构 → Mermaid
  → 用户覆盖 → Image
  → Skill 回应：「好的，用 AI 生成。⚠️ 提醒：AI 图片在精确结构（汇报关系）
     上可能产生幻觉——比如多画一层管理层。需要我改用 Mermaid 确保准确吗？」
  → 执行用户选择，但明确警告风险

🔑 设计要点：「可覆盖」不等于「无条件服从」。当用户的覆盖选择可能导致质量问题时，Skill 的职责是告知风险——这是 AI 原生顾问型 Skill（L1-10）的核心精神：「先诊断 → 给建议 → 解释为什么」。

---

4. SVG 输出与样式系统

4.1 为什么输出 SVG（SVG：可无损放大的矢量图格式） 而不是 PNG（PNG：位图图片格式）？

PNG 方案：
  优点：所见即所得
  缺点：放大模糊、不能编辑里面的文字、文件大

SVG 方案（本 Skill 的选择）：
  优点：矢量无损放大、文字可选可搜索、文件小、可转 @2x PNG
  缺点：复杂图表可能渲染不一致（不同浏览器）

4.2 语义化色板 —— 让颜色「说话」

Skill 内置了一套「语义化色板」——不是随便配颜色，而是让不同技术栈有各自的视觉语言：

色彩语义映射：
  前端 (Frontend)      → 青色系 (Cyan)   —— React、Vue、浏览器
  后端 (Backend)       → 绿色系 (Green)   —— Node.js、Python、数据库
  数据库 (Database)    → 紫色系 (Purple)  —— PostgreSQL、MongoDB
  中间件 (Middleware)  → 橙色系 (Orange)  —— Redis、Kafka、RabbitMQ
  基础设施 (Infra)     → 灰色系 (Gray)    —— AWS、Docker、K8s
  客户端 (Client)      → 蓝色系 (Blue)    —— iOS、Android、Desktop

🔑 设计要点：语义化色板让读者「不看标签就知道谁是谁」——青色 = 前端，绿色 = 后端。这比随机配色或「都一个颜色」好一个数量级。L1-12 的「七要素公式」中 Color palette 要素在图表场景的落地应用。

---

5. 结构拆解：双模型 Skill 模板

从 L2-02 提取「双模型」Skill 的通用模板：

什么时候用双模型？ → 当同一功能存在两种路径——一种注重精确性和确定性，另一种注重表现力和灵活性——且用户不应该为此做选择时：图表生成（Mermaid vs AI Image）、数据可视化（ECharts vs AI Image）、代码生成（模板代码 vs AI 自由发挥）——任何「精确 vs 好看」的二分场景。

双模型与 L1-10 顾问型的关系：

---

6. 电商案例：竞品价格带分布图表生成

🛒 实战案例：某母婴用品卖家在拼多多上经营纸尿裤品类，准备扩展新品线（婴儿湿巾、隔尿垫），需要判断「什么价格带竞争最弱、利润空间最大」。传统做法：手动打开竞品店铺，逐个记录价格 → 拉 Excel → 看花眼。20 个竞品看了 3 天，分析结论是「好像什么价位都有」，不敢定价。

用双模 Skill 生成竞品价格带分布图：

图表类型	模式	内容	作用
婴儿湿巾价格带散点分布图	Image	横轴=价格区间（¥3.9-¥39.9），纵轴=月销量（气泡大小=店铺数）	一眼看出「¥9.9-¥14.9」区间竞品扎堆 87 家，但「¥19.9-¥24.9」仅 12 家
隔尿垫竞品功能矩阵图	Image	横轴=尺寸（30×40→70×100），纵轴=层数（2层→6层），颜色深浅=均价	发现「60×80cm+4层」这个组合竞品空白，是差异化切口
品类利润空间对比图	Image	三条柱状图：纸尿裤利润率 18% / 湿巾利润率 42% / 隔尿垫利润率 37%	直接决定「优先打湿巾」
竞品价格调整时间线	Mermaid	2025.01-2026.05 三款竞品调价轨迹	精确追踪竞品定价变化规律

效果：

• 定价决策时间：3 天 → 2 小时（数据收集 → AI 自动生成图表 → 运营看图决策）

• 婴儿湿巾定价 ¥19.9/3 包，上线首月销量 1,347 单（比扎堆 ¥9.9 区间的竞品新品快 3.2 倍起量）

• 隔尿垫定在「60×80cm + 4 层」空白带，毛利率 37% vs 纸尿裤 18%

• 图表生成成本：¥0（Mermaid 免费 + Image 模式 $0.16 生成 4 张）

🔑 启示：选品定价最大的坑不是「数据不够」，而是「数据太多看不过来」。一张价格带分布图，比在 Excel 里盯 500 行数字管用 100 倍——运营不是缺数据，是缺「把数据变成一眼能看懂的决策画面」的能力。

---

7. 掌握检验

Q1：双模 Skill 的「自动选择」指的是什么？

• A) 每次都弹窗让用户选择用哪个模式
• B) AI 根据内容类型自动判断用 Mermaid 还是 Image，不麻烦用户
• C) 生成完成后自动删除不需要的版本
• D) 随机选择一种模式以增加多样性

Q2：为什么流程图、ER 图这类图表用 Mermaid 而不是 AI 图片生成？

• A) Mermaid 生成的图更漂亮
• B) AI 图片在精确结构上容易产生幻觉，Mermaid 代码是确定性的
• C) Mermaid 渲染速度更快
• D) AI 图片不支持箭头和连线

Q3：以下哪种需求最适合使用 Image 模式？

• A) 公司组织架构图
• B) 微服务系统的时序调用图
• C) 产品功能的概念对比图（视觉冲击力重要）
• D) 数据库 ER 实体关系图

Q4：如果用户说「用 AI 画一张公司架构图」，Skill 应该怎么做？

• A) 忽略用户指令，强制用 Mermaid
• B) 忽略用户指令，强制用 Image
• C) 按「可覆盖」原则，使用 Image 模式但提示可能产生幻觉
• D) 同时用两种模式生成让用户自己选

Q5：课程中提到 Mermaid 模式的一个关键优势是「零 API 成本」。请解释为什么 Mermaid 不花钱，而 Image 模式要花钱？这在实际项目中意味着什么？

Q6：为以下 3 个需求分别判断应该用哪个模式，并简述理由：

• (a) 一个 SaaS 产品的 5 层系统架构图
• (b) 一张展示「传统开发 vs AI 开发」的营销概念对比图
• (c) 用户注册→认证→授权的泳道时序图

---

8. 答案

点击查看答案

Q1：B — 好的设计是「用户不知道有两套系统在跑」。AI 根据内容类型（需要精确结构 vs 需要视觉表现力）自动判断用哪个模式，不给用户增加选择负担。

Q2：B — 流程图和 ER 图需要精确（线条不能乱连、箭头方向要对），AI 图片在这些场景下容易产生幻觉——比如「CEO 上面多出一个 SUPREME LEADER」。Mermaid 代码是确定性的，按你写的结构渲染，不会自己加戏。

Q3：C — Image 模式擅长视觉丰富、自由布局的概念图/思维导图/概念海报。A（组织架构）、B（时序图）、D（ER 图）都需要精确结构，应该用 Mermaid。

Q4：C — 「可覆盖」原则意味着用户明确说「用 AI 画」时可以强制 Image 模式，但好 Skill 应该提示用户「Image 模式在精确结构上可能产生幻觉，建议用 Mermaid」。

Q5：Mermaid 是一套文本标记语言，Skill 生成 Mermaid 代码后由浏览器/渲染引擎直接渲染成 SVG，整个过程不需要调用任何 AI API，因此零成本。Image 模式需要调用 DALL-E/Stability 等 AI 图片 API，按次计费。实际意义：对于需要频繁生成的图表（如每次代码变更自动更新架构图），用 Mermaid 模式可以无限次免费生成，而 Image 模式有成本压力。

Q6：(a) Image 模式——架构图需要视觉表现力和自由布局来展示层次关系；(b) Image 模式——营销概念图需要视觉冲击力和创意布局；(c) Mermaid 模式——泳道时序图需要精确的时序和方向，确定性比好看更重要。

（5/6 通过）

---

9. 延伸阅读

• [[L2-03-AI智能翻译|下一课：AI智能翻译]] — 格式保留翻译（PRESERVE/TRANSLATABLE/SELECTIVE 三类分类法）
• [[L1-12-AI图片生成|L1-12：AI图片生成]] — 回顾 Prompt 七要素公式（Image 模式的底层技术）
• [[L1-10-弹窗转化率优化|L1-10：弹窗优化]] — 回顾「自动选择」与「用户可覆盖」的顾问型思维