[teamai] Push 87 resource(s) from XingfenD

.teamai/skills/common/gpt-image-2/references/technical-diagrams/er-diagram.md

@@ -0,0 +1,279 @@
+# ER 图 / 数据模型图模板
+
+> ⚠️ **本模板生成的是位图（PNG）**，不是 dbdiagram.io / draw.io 可编辑 ER 图。
+> 需要可编辑请用 dbdiagram.io / draw.io / DBeaver。
+
+本文件用于生成"工程感 ER 图 / 数据模型图"：
+
+- 数据库表结构图（PG / MySQL / SQLite）
+- 领域模型图（DDD 实体 + 关系）
+- 文档型数据库 schema（MongoDB / DynamoDB）
+- API 数据契约 schema 图
+- 微服务边界 + 数据所有权图
+
+特征：
+
+- 实体框 = 圆角矩形，分上下两区：上区表名 / 下区字段列表
+- 字段行 = 字段名 + 类型 + 主键 PK / 外键 FK 标记
+- 关系连线 = 1:1 / 1:N / N:M（用 crow's foot 或 UML 多重性）
+- 暗色 grid + 等宽字体（沿用视觉系统）
+
+## 适用范围
+
+- 数据库表结构
+- 领域模型 / DDD 实体
+- API schema 文档
+- 数据库设计 review
+- 微服务数据所有权图
+
+## 何时使用
+
+- 用户提到 "ER 图 / Entity-Relationship / 数据模型 / 数据库设计 / schema 图 / 表结构"
+- 用户希望「实体 + 字段 + 关系」标准 ER 图样式
+- 用户接受位图
+
+不要使用：
+
+- 用户要的是「系统架构」 → 用 `technical-diagrams/system-architecture.md`
+- 用户要的是「类图 / UML 类图」（含方法）→ 暂未做专门模板，可借用本模板加方法行
+- 用户要的是「思维导图」 → 用 `technical-diagrams/mind-map-tech.md`
+
+## 缺失信息优先提问顺序
+
+1. 数据库 / 领域名称（"e-commerce 数据模型 / SaaS 用户管理 schema"）
+2. 实体列表（建议 4-12 个，超过考虑分子图）
+3. 每个实体的字段（字段名 + 类型 + PK/FK + 是否 nullable）
+4. 实体间关系（1:1 / 1:N / N:M，是否级联）
+5. 是否包含枚举 / 索引 / 约束
+6. 比例（默认 4:3 或 16:9）
+
+## 主模板：标准 ER 图（暗色工程风）
+
+📖 描述
+
+整张图由若干实体框组成，每个实体框上半显示表名 + 表标签 (📦 entity)，下半列字段（含类型 + PK/FK 标记），实体之间用关系线连接，端点用 crow's foot 表达 1 / N。
+
+📝 提示词
+
+```json
+{
+  "type": "工程感 ER 图 / 数据模型图",
+  "goal": "生成一张工程感 ER 图作为数据库设计文档 / API schema / 领域模型 review 配图",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"4:3\"}",
+    "background": "deep slate #0F172A with subtle 1px grid #1E293B at 32px spacing",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"E-commerce Data Model\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"core entities · v1.0\"}",
+    "position": "top-left, JetBrains Mono / SF Mono, light gray"
+  },
+  "entities": {
+    "count": "{argument name=\"entity_count\" default=\"6\"}",
+    "items": [
+      {
+        "id": "E1",
+        "name": "users",
+        "category": "user",
+        "fields": [
+          { "name": "id", "type": "uuid", "marker": "PK" },
+          { "name": "email", "type": "varchar(255)", "marker": "UQ" },
+          { "name": "password_hash", "type": "varchar(255)", "marker": "" },
+          { "name": "created_at", "type": "timestamp", "marker": "" },
+          { "name": "updated_at", "type": "timestamp", "marker": "" }
+        ]
+      },
+      {
+        "id": "E2",
+        "name": "orders",
+        "category": "transaction",
+        "fields": [
+          { "name": "id", "type": "uuid", "marker": "PK" },
+          { "name": "user_id", "type": "uuid", "marker": "FK→users.id" },
+          { "name": "status", "type": "enum", "marker": "" },
+          { "name": "total_cents", "type": "bigint", "marker": "" },
+          { "name": "created_at", "type": "timestamp", "marker": "" }
+        ]
+      },
+      {
+        "id": "E3",
+        "name": "order_items",
+        "category": "transaction",
+        "fields": [
+          { "name": "id", "type": "uuid", "marker": "PK" },
+          { "name": "order_id", "type": "uuid", "marker": "FK→orders.id" },
+          { "name": "product_id", "type": "uuid", "marker": "FK→products.id" },
+          { "name": "quantity", "type": "int", "marker": "" },
+          { "name": "unit_price_cents", "type": "bigint", "marker": "" }
+        ]
+      },
+      {
+        "id": "E4",
+        "name": "products",
+        "category": "catalog",
+        "fields": [
+          { "name": "id", "type": "uuid", "marker": "PK" },
+          { "name": "sku", "type": "varchar(64)", "marker": "UQ" },
+          { "name": "name", "type": "varchar(255)", "marker": "" },
+          { "name": "price_cents", "type": "bigint", "marker": "" },
+          { "name": "stock", "type": "int", "marker": "" }
+        ]
+      },
+      {
+        "id": "E5",
+        "name": "categories",
+        "category": "catalog",
+        "fields": [
+          { "name": "id", "type": "uuid", "marker": "PK" },
+          { "name": "name", "type": "varchar(128)", "marker": "" },
+          { "name": "parent_id", "type": "uuid", "marker": "FK→categories.id (self)" }
+        ]
+      },
+      {
+        "id": "E6",
+        "name": "product_categories",
+        "category": "join",
+        "fields": [
+          { "name": "product_id", "type": "uuid", "marker": "PK,FK→products.id" },
+          { "name": "category_id", "type": "uuid", "marker": "PK,FK→categories.id" }
+        ]
+      }
+    ]
+  },
+  "entity_style": {
+    "shape": "rounded rectangle, corner radius 6px",
+    "fill": "category color × 10% opacity",
+    "border": "1.5px solid in category color",
+    "header_strip": "topmost ~28px height: filled with category color × 25% opacity, contains table name in bold mono 12pt + small icon glyph",
+    "field_row_style": "below header: each field row = 'field_name : type [marker]' in mono 10pt, alternating row tint for readability",
+    "marker_color": "PK = amber bold, FK = blue, UQ = violet, NN = subtle gray"
+  },
+  "category_color_map": {
+    "user": "cyan #22D3EE",
+    "transaction": "emerald #34D399",
+    "catalog": "violet #A78BFA",
+    "join": "slate #94A3B8",
+    "system": "amber #FBBF24",
+    "external": "rose #FB7185"
+  },
+  "relationships": {
+    "items": [
+      { "from": "E1", "to": "E2", "cardinality": "1:N", "label": "places" },
+      { "from": "E2", "to": "E3", "cardinality": "1:N", "label": "contains" },
+      { "from": "E4", "to": "E3", "cardinality": "1:N", "label": "appears_in" },
+      { "from": "E4", "to": "E6", "cardinality": "1:N", "label": "" },
+      { "from": "E5", "to": "E6", "cardinality": "1:N", "label": "" },
+      { "from": "E5", "to": "E5", "cardinality": "0..1:N", "label": "parent_of (self)" }
+    ],
+    "line_style": {
+      "default": "solid line 1.5px slate #94A3B8",
+      "endpoint_notation": "use crow's foot notation: '1' = single perpendicular tick, 'N' = three-pronged 'crow's foot', '0..1' = open circle + tick, '0..N' = open circle + crow's foot",
+      "label_format": "relationship verb in mono 9pt placed near the middle of the line, e.g. 'places' / 'contains'"
+    },
+    "rule_routing": "lines avoid crossing entities; orthogonal routing preferred; self-relations curve to the side"
+  },
+  "extras": {
+    "indices_section": {
+      "enabled": "{argument name=\"indices_enabled\" default=\"false\"}",
+      "rule": "if true, below each entity add a small 'Indices' section listing index names (e.g. 'idx_users_email')"
+    },
+    "color_legend": {
+      "enabled": true,
+      "position": "bottom-right",
+      "content": "category color → role mapping + marker meaning (PK / FK / UQ / NN) + cardinality notation"
+    }
+  },
+  "constraints": {
+    "must_keep": [
+      "实体框形状统一（圆角矩形 + header strip）",
+      "字段行用等宽字体，类型靠右或冒号分隔",
+      "PK / FK / UQ 标记清晰（颜色 + 文字）",
+      "关系线用 crow's foot 或 UML 多重性表达 1:1 / 1:N / N:M",
+      "FK 字段在表内必须标 FK→target_table.field",
+      "暗色 grid 背景 + 等宽字体",
+      "legend 必画"
+    ],
+    "avoid": [
+      "用菱形当实体（语义错误）",
+      "字段行使用比例字体（破坏对齐）",
+      "FK 没标 target → 关系丢失上下文",
+      "关系线没有 cardinality endpoint",
+      "实体 > 12 个（拥挤；按子领域拆分）",
+      "join 表与普通表用同色（应该用 'join' 灰色区分）",
+      "用 emoji 当字段标记",
+      "声称这是可编辑 SVG"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、实体列表（含字段 + PK/FK 标记）、关系列表（含 cardinality）
+- **可默认**：`background`（暗色 grid）、`category_color_map`、`indices_enabled`（false）
+- **可随机**：实体摆放位置（自动布局减少边交叉）
+
+### 自动补全策略
+
+- 用户给"e-commerce schema" → 用 default 6 实体
+- 用户没指定 cardinality → 反问（关系语义不能瞎猜）
+- 用户没分类 category → 自动按表名归类（users → user, orders → transaction, products → catalog, *_join → join）
+- 用户说要 light 模式 → 用变体 1
+- 用户说"含索引" → 启用 `indices_enabled`
+
+## 变体 1：浅色 Light ER 图
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC + faint grid #E2E8F0",
+    "entity_fill": "category color × 8% opacity",
+    "entity_border": "1.5px solid (deeper shade for white bg)",
+    "label_color": "deep slate #0F172A",
+    "vibe": "白底文档站友好"
+  }
+}
+```
+
+## 变体 2：DDD 领域模型图（含方法 / 行为）
+
+```json
+{
+  "modify": {
+    "entity_label_format": "<<entity / value object / aggregate root>> 在表名上方加 stereotype 标签",
+    "field_section_split": "实体内部分两部分：上面字段，下面方法（用 '——' 分隔线分开），方法格式 'methodName(args): returnType'",
+    "category_color_map_extra": "aggregate root = amber, entity = emerald, value object = violet, domain service = cyan",
+    "use_case": "DDD 战术设计 review、领域建模 workshop"
+  }
+}
+```
+
+适用：DDD 项目领域建模、UML 类图、业务建模。
+
+## 变体 3：微服务数据所有权图（bounded context）
+
+```json
+{
+  "modify": {
+    "extras": "用大虚线框（bounded context）包围属于同一服务的实体，框上标 'User Service' / 'Order Service' 等",
+    "cross_service_relations": "跨服务的关系用红色虚线（暗示 anti-pattern 或显式服务边界跨越）",
+    "use_case": "微服务拆分、bounded context 设计、康威定律对齐"
+  }
+}
+```
+
+适用：微服务设计、bounded context 划分、数据所有权 review。
+
+## 避免事项
+
+- 字段行用比例字体 → 类型 / 标记不对齐
+- FK 不标 target → 关系上下文丢失
+- 关系线没 cardinality → 完全失去 ER 语义
+- 实体 > 12 → 视觉爆炸，必须拆分
+- 用菱形当 entity → 语义错误
+- 用 emoji 当字段标记
+- join 表与普通表混色
+- 声称这是可编辑 SVG
+- 把"系统架构"塞进 ER 图（应该用对应模板）
+- 把字段类型省略 → 失去工程价值

.teamai/skills/common/gpt-image-2/references/technical-diagrams/flowchart-decision.md

@@ -0,0 +1,253 @@
+# 流程图 / 决策图模板
+
+> ⚠️ **本模板生成的是位图（PNG）**，不是 mermaid / draw.io 可编辑流程图。
+> 需要可编辑请用 mermaid / draw.io / excalidraw / Figma。
+
+本文件用于生成"工程感的业务流程图 / 决策图"：
+
+- 业务流程图（用户注册流程、支付流程、订单生命周期）
+- 决策树式流程（含 Yes / No 分支）
+- 算法 / 数据处理流程
+- 内部审批 / 工单 / 申报流程
+- 异常处理 / 错误恢复流程
+
+特征：
+
+- 标准 BPMN-like 形状语义：
+  - 圆 / 圆角矩形 = 开始 / 结束
+  - 矩形 = 过程步骤
+  - 菱形 = 决策点（含 Yes / No 分支）
+  - 平行四边形 = 输入 / 输出
+- 自上而下 OR 从左到右
+- 暗色 grid 背景 + 等宽字体（沿用 technical-diagrams 视觉系统）
+- 决策分支颜色编码（Yes 绿、No 红 / 灰）
+
+## 适用范围
+
+- 业务流程图
+- 决策树流程
+- 算法 / 数据流程
+- 错误处理 / 异常流程
+- 文档 / blog 配图
+
+## 何时使用
+
+- 用户提到 "流程图 / flowchart / 决策图 / decision tree / 业务流程 / 算法流程"
+- 用户希望「BPMN 标准形状语义、含 Yes/No 决策分支」
+- 用户接受位图
+
+不要使用：
+
+- 用户要的是「步骤教程插画」（暖色、卡通感） → 用 `infographics/step-by-step-infographic.md`
+- 用户要的是「时序图」（actor + 消息）→ 用 `technical-diagrams/sequence-diagram.md`
+- 用户要的是「状态机」（state + transition）→ 用 `technical-diagrams/state-machine.md`
+- 用户要的是「系统架构」（多组件部署）→ 用 `technical-diagrams/system-architecture.md`
+- 用户要的是「漫画分镜流程」 → 用 `storyboards-and-sequences/recipe-process-flowchart.md`
+
+## 缺失信息优先提问顺序
+
+1. 流程名称（"用户注册流程 / 退款流程 / XX 算法流程"）
+2. 起点 / 终点（什么触发？什么结束？）
+3. 主要步骤（建议 5-12 个步骤，超过考虑分子流程）
+4. 决策点（哪些地方需要分支？分支条件？）
+5. 是否有异常分支 / 失败回路
+6. 流向（top-down 自上而下 / left-right 从左到右）
+7. 比例（top-down 用 3:4 或 9:16；left-right 用 16:9）
+
+## 主模板：标准 BPMN 风流程图
+
+📖 描述
+
+整张图按"开始 → 过程 → 决策 → 结束"的 BPMN 形状语义流动，自上而下排布，决策点用菱形 + 双向分支，箭头标 Yes/No。整体在暗色 grid 背景上呈现工程感。
+
+📝 提示词
+
+```json
+{
+  "type": "工程感流程图 / 决策图",
+  "goal": "生成一张用 BPMN 标准形状语义画的业务流程图，可作 README / blog / 文档配图",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"3:4 portrait\"}",
+    "background": "deep slate #0F172A with subtle 1px grid #1E293B at 32px spacing",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"User Registration Flow\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"with email verification\"}",
+    "position": "top-left, JetBrains Mono / SF Mono, light gray"
+  },
+  "flow_direction": "{argument name=\"flow_direction\" default=\"top-to-bottom\"}",
+  "shape_legend": {
+    "start_end": {
+      "shape": "filled solid circle (start) and target / bullseye circle (end), or fully rounded pill rectangle with label 'Start' / 'End'",
+      "color": "cyan #22D3EE for start, rose #FB7185 for end"
+    },
+    "process": {
+      "shape": "rectangle with corner radius 8px",
+      "color": "emerald #34D399 border + 12% fill"
+    },
+    "decision": {
+      "shape": "diamond (rotated square)",
+      "color": "amber #FBBF24 border + 12% fill",
+      "labels": "Yes / No on outgoing arrows; arrow color: emerald for Yes, slate for No"
+    },
+    "io": {
+      "shape": "parallelogram (skewed rectangle)",
+      "color": "violet #A78BFA border + 12% fill",
+      "use_for": "用户输入、数据写入、外部 API 输入输出"
+    },
+    "subprocess": {
+      "shape": "rectangle with corner radius 8px and a smaller secondary rectangle inside (BPMN sub-process notation)",
+      "color": "blue #60A5FA border + 12% fill",
+      "use_for": "封装子流程，避免主图过大"
+    }
+  },
+  "nodes": {
+    "count": "{argument name=\"node_count\" default=\"9\"}",
+    "items": [
+      { "id": "S", "type": "start_end", "label": "Start" },
+      { "id": "N1", "type": "io", "label": "User submits email + password" },
+      { "id": "N2", "type": "process", "label": "Validate input format" },
+      { "id": "N3", "type": "decision", "label": "Email already exists?" },
+      { "id": "N4a", "type": "process", "label": "Show error: account exists" },
+      { "id": "N4b", "type": "process", "label": "Create user record" },
+      { "id": "N5", "type": "process", "label": "Send verification email" },
+      { "id": "N6", "type": "decision", "label": "User clicks link within 24h?" },
+      { "id": "N7a", "type": "process", "label": "Mark account verified" },
+      { "id": "N7b", "type": "process", "label": "Soft-delete record" },
+      { "id": "E", "type": "start_end", "label": "End" }
+    ]
+  },
+  "edges": {
+    "rule": "edges 沿主轴正交走线（自上而下时主轴 vertical），决策分支水平展开",
+    "items": [
+      { "from": "S", "to": "N1" },
+      { "from": "N1", "to": "N2" },
+      { "from": "N2", "to": "N3" },
+      { "from": "N3", "to": "N4a", "label": "Yes" },
+      { "from": "N3", "to": "N4b", "label": "No" },
+      { "from": "N4a", "to": "E" },
+      { "from": "N4b", "to": "N5" },
+      { "from": "N5", "to": "N6" },
+      { "from": "N6", "to": "N7a", "label": "Yes" },
+      { "from": "N6", "to": "N7b", "label": "No" },
+      { "from": "N7a", "to": "E" },
+      { "from": "N7b", "to": "E" }
+    ],
+    "edge_style": {
+      "default": "solid line 1.5px slate #64748B with filled triangle arrowhead",
+      "yes_branch": "thin solid line in emerald #34D399 + label 'Yes' near origin in mono 9pt",
+      "no_branch": "thin solid line in slate #64748B + label 'No'",
+      "exception_branch": {
+        "enabled": "{argument name=\"exception_branch_enabled\" default=\"false\"}",
+        "style": "dashed rose #FB7185 line, label 'Exception' / 'Error'"
+      }
+    }
+  },
+  "swim_lanes": {
+    "enabled": "{argument name=\"swim_lanes_enabled\" default=\"false\"}",
+    "rule": "if true, divide canvas into vertical / horizontal lanes labeled by actor (e.g. 'User', 'Frontend', 'Backend', 'Email Service'); place each node in its actor's lane"
+  },
+  "legend": {
+    "enabled": true,
+    "position": "bottom-right",
+    "content": "shape → role mapping (start/end, process, decision, io, subprocess) and edge → meaning",
+    "style": "small panel, semi-transparent bg, mono 10pt"
+  },
+  "constraints": {
+    "must_keep": [
+      "BPMN 形状语义严格对应",
+      "决策节点必有 ≥ 2 条分支",
+      "每条决策分支必标 'Yes' / 'No' 或具体条件",
+      "edges 正交走线，标签不与边重叠",
+      "暗色背景 + 等宽字体",
+      "至少有 1 个 start 和 1 个 end",
+      "legend 必画"
+    ],
+    "avoid": [
+      "用 emoji 节点",
+      "把决策点画成圆 / 方（必须菱形）",
+      "把过程画成菱形（混淆语义）",
+      "斜线乱飞 / 边穿过节点",
+      "节点 > 15 个（拆分子流程）",
+      "决策分支没有标签",
+      "用花哨字体 / 渐变填充",
+      "把流程图画成插画感（步骤教程请用 step-by-step-infographic）",
+      "声称这是可编辑 SVG（它是位图）"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、起点 + 终点、节点列表（含 type）、决策点的分支条件
+- **可默认**：`flow_direction`（top-to-bottom）、`background`（暗色 grid）、`shape_legend`、`legend_enabled`（true）
+- **可随机**：节点位置（基于 flow_direction 自动布局）
+
+### 自动补全策略
+
+- 用户给 5-7 个步骤但没说决策 → 默认无决策（纯线性流程）
+- 用户说"含异常处理" → 启用 `exception_branch_enabled` + 加 dashed rose 线
+- 用户说"多角色 / 跨部门 / 跨服务" → 启用 `swim_lanes_enabled`
+- 用户说"流程很长，超过 12 步" → 反问是否拆分为多个子流程
+- 用户说要 light 模式 → 用变体 1
+
+## 变体 1：浅色 Light 流程图
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC + faint grid #E2E8F0",
+    "node_fill": "shape role color × 8% opacity",
+    "node_border": "1.5px solid full opacity (use deeper shade for white bg)",
+    "label_color": "deep slate #0F172A",
+    "edge_color": "slate #475569",
+    "vibe": "适合白底文档站 / 印刷版"
+  }
+}
+```
+
+## 变体 2：Swim Lanes 跨角色泳道流程图
+
+```json
+{
+  "modify": {
+    "swim_lanes_enabled": true,
+    "lane_layout": "vertical lanes (each actor a vertical column)",
+    "lane_labels": ["User", "Frontend", "Backend API", "Database", "Email Service"],
+    "rule": "每个 node 放进对应 actor 的 lane；edges 跨 lane 时用粗箭头",
+    "use_case": "跨部门审批、跨服务交互、用户与系统多次互动"
+  }
+}
+```
+
+适用：跨部门审批流程、跨服务交互流程、需要明确"谁干什么"的流程。
+
+## 变体 3：算法伪代码可视化流程
+
+```json
+{
+  "modify": {
+    "title": "Algorithm: <name>",
+    "node_label_format": "节点 label 用伪代码片段而非自然语言",
+    "rule_extra": "保留循环节点（向回的弧形箭头表示 loop），变量赋值用 ← 符号",
+    "vibe": "适合论文 algorithm box 的可视化版本"
+  }
+}
+```
+
+适用：算法可视化、论文 algorithm 章节的视觉版、教学讲义。
+
+## 避免事项
+
+- 决策菱形画成方块或圆（语义混淆）
+- 决策分支没有 Yes / No 标签
+- 节点 > 15 个（视觉爆炸，建议拆分）
+- 用 emoji 节点图标
+- 边斜飞 / 穿过节点 / 标签碰撞
+- 用插画感卡通图（请用 `step-by-step-infographic.md`）
+- 用 3D / 渐变 / 玻璃质感
+- 多个起点或多个终点未标记清楚
+- swim lane 时把跨 lane 的箭头画得不显眼
+- 把"系统架构"塞进流程图（节点是组件而非动作）

.teamai/skills/common/gpt-image-2/references/technical-diagrams/mind-map-tech.md

@@ -0,0 +1,235 @@
+# 技术主题思维导图模板
+
+> ⚠️ **本模板生成的是位图（PNG）**，不是 XMind / MindNode / mermaid mindmap 可编辑思维导图。
+> 需要可编辑请用 XMind / MindNode / Excalidraw / mermaid mindmap。
+
+本文件用于生成"工程感技术主题思维导图"：
+
+- 技术栈梳理（前端 / 后端 / 数据 / DevOps 全景）
+- 面试知识点脑图（八股文 / 系统设计 / 算法）
+- 调研脑图（某领域调研后的总结）
+- 学习路线图
+- 主题词典 / 概念关系图
+
+特征：
+
+- 中央节点 = 主题（圆角矩形 / 椭圆，带强调色）
+- 一级分支 = 主类别（4-8 个，放射状分布）
+- 二级 / 三级分支 = 子主题（缩进式或嵌套）
+- 不同分支用不同颜色（角色编码）
+- 暗色 grid + 等宽字体（沿用视觉系统）
+
+## 适用范围
+
+- 技术栈全景图
+- 面试准备脑图
+- 调研 / 学习总结脑图
+- 知识体系梳理
+- 概念关系网
+
+## 何时使用
+
+- 用户提到 "思维导图 / mind map / 脑图 / 知识体系 / 学习路线 / 技术栈梳理"
+- 用户希望「中央 + 放射」标准 mind map 结构
+- 用户接受位图
+
+不要使用：
+
+- 用户要的是「工程系统架构」 → 用 `technical-diagrams/system-architecture.md`
+- 用户要的是「ER 数据模型」 → 用 `technical-diagrams/er-diagram.md`
+- 用户要的是「层级流程图 / step-by-step」 → 用 `infographics/step-by-step-infographic.md`
+- 用户要的是「大纲 / 列表式 slide」 → 用 `slides-and-visual-docs/`
+
+## 缺失信息优先提问顺序
+
+1. 主题（中心节点的内容，"前端工程师技术栈 2026 / 系统设计面试要点"）
+2. 一级分支数（建议 4-8 个）
+3. 每个一级分支下的子节点（每个一级 3-7 个二级）
+4. 是否需要三级 / 四级嵌套
+5. 比例（默认 16:9 横版；分支多时可 3:4 竖版）
+6. 是否高亮某些"重点 / 必会"节点
+
+## 主模板：标准放射式技术思维导图
+
+📖 描述
+
+整张图中央是主题节点，四周放射出 4-8 条主分支，每条主分支再展开 3-7 个子节点，必要时再展开三级节点。每条主分支用一种颜色家族贯穿其所有子节点。
+
+📝 提示词
+
+```json
+{
+  "type": "工程感技术思维导图（放射式 mind map）",
+  "goal": "生成一张放射式思维导图，作为知识梳理 / 面试准备 / 学习路线 / 技术栈全景的可视化",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"16:9\"}",
+    "background": "deep slate #0F172A with subtle 1px grid #1E293B at 32px spacing",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"Frontend Engineer Tech Stack\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"2026 edition\"}",
+    "position": "top-left, JetBrains Mono / SF Mono, light gray"
+  },
+  "central_node": {
+    "label": "{argument name=\"central_label\" default=\"Frontend\\nEngineer\"}",
+    "shape": "rounded rectangle (corner radius 16px) or ellipse",
+    "size": "260×120px",
+    "fill": "amber #FBBF24 × 18% opacity",
+    "border": "2px solid amber #FBBF24",
+    "label_style": "mono bold 16pt, centered, light text",
+    "position": "image center"
+  },
+  "primary_branches": {
+    "count": "{argument name=\"primary_count\" default=\"6\"}",
+    "items": [
+      { "id": "B1", "label": "Languages", "color": "cyan #22D3EE", "angle_position": "top-left" },
+      { "id": "B2", "label": "Frameworks", "color": "blue #60A5FA", "angle_position": "top-right" },
+      { "id": "B3", "label": "State & Data", "color": "emerald #34D399", "angle_position": "right" },
+      { "id": "B4", "label": "Build & Tooling", "color": "violet #A78BFA", "angle_position": "bottom-right" },
+      { "id": "B5", "label": "Testing", "color": "rose #FB7185", "angle_position": "bottom-left" },
+      { "id": "B6", "label": "Performance", "color": "orange #FB923C", "angle_position": "left" }
+    ],
+    "branch_node_style": {
+      "shape": "rounded rectangle (corner radius 10px)",
+      "size": "180×56px",
+      "fill": "branch color × 14% opacity",
+      "border": "1.5px solid branch color",
+      "label": "mono bold 13pt, centered, light text",
+      "position": "evenly distributed around central node, ~ radius 380-440px"
+    },
+    "connector_style": "thick branch-colored line 2px from central node to primary node, slight curve"
+  },
+  "secondary_nodes": {
+    "rule": "每个 primary 下挂 3-7 个 secondary，沿主分支方向呈树枝状展开",
+    "items_per_primary_example": {
+      "B1_Languages": ["TypeScript", "JavaScript (ES2024+)", "WebAssembly", "CSS / Sass"],
+      "B2_Frameworks": ["React 19", "Next.js 15", "Vue 3", "Svelte 5", "Solid"],
+      "B3_State_Data": ["TanStack Query", "Zustand", "Jotai", "URQL / Apollo", "tRPC"],
+      "B4_Build_Tooling": ["Vite", "Turbopack", "Bun", "pnpm + Turborepo", "Biome"],
+      "B5_Testing": ["Vitest", "Playwright", "Storybook", "MSW"],
+      "B6_Performance": ["Core Web Vitals", "RUM", "Bundle analysis", "Image / Font opt"]
+    },
+    "secondary_node_style": {
+      "shape": "rounded rectangle (corner radius 8px)",
+      "size": "auto-fit text + 12px padding, ~ 140×40px typical",
+      "fill": "branch color × 8% opacity",
+      "border": "1.2px solid branch color (slightly desaturated)",
+      "label": "mono regular 11pt"
+    },
+    "connector_style": "thin branch-colored line 1.2px from primary to secondary, curved"
+  },
+  "tertiary_nodes": {
+    "enabled": "{argument name=\"tertiary_enabled\" default=\"false\"}",
+    "rule": "if true, secondary 可继续展开 2-3 个 tertiary（更小的圆角矩形 + 更细的连线），但要避免视觉爆炸；建议只在 1-2 个 secondary 下展开"
+  },
+  "highlights": {
+    "must_know": {
+      "enabled": "{argument name=\"must_know_enabled\" default=\"false\"}",
+      "rule": "if true, 给重点 / 必会节点加'★'前缀 + 描边加粗到 2.5px",
+      "examples": ["★ React 19", "★ TypeScript", "★ Vite"]
+    }
+  },
+  "legend": {
+    "enabled": true,
+    "position": "bottom-right",
+    "content": "branch color → category mapping，star → must-know",
+    "style": "small panel, semi-transparent bg, mono 10pt"
+  },
+  "constraints": {
+    "must_keep": [
+      "central node 唯一且居中",
+      "primary branches 围绕中央均匀分布（避免一边密一边空）",
+      "每条分支颜色家族贯穿其所有子节点",
+      "secondary 节点严格挂在对应 primary 的延伸方向",
+      "暗色 grid 背景 + 等宽字体",
+      "节点大小有 hierarchy（central > primary > secondary > tertiary）",
+      "连线不交叉（除非不可避免）"
+    ],
+    "avoid": [
+      "所有节点同尺寸 → 失去层级",
+      "primary 集中在一侧 → 视觉失衡",
+      "secondary 颜色与所属 primary 不一致",
+      "连线大量交叉 → 可读性崩溃",
+      "用 emoji 当节点图标（除非主题需要）",
+      "primary > 8 个（拥挤；考虑分子图）",
+      "三级以下嵌套全开 → 视觉爆炸",
+      "用 3D / 渐变 / 玻璃质感",
+      "声称这是可编辑 SVG"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、`central_label`、primary 分支列表（含名称）、每条 primary 下的 secondary 列表
+- **可默认**：`background`（暗色 grid）、`primary_branches.color`（默认 6 色组合）、`tertiary_enabled`（false）、`must_know_enabled`（false）
+- **可随机**：每条 primary 的 angle_position（基于数量自动等距分布）、节点轻微微调避免重叠
+
+### 自动补全策略
+
+- 用户给"主题 + 4-6 个分支" → 自动用 default secondary 数量（每分支 4 个）
+- 用户给"我要前端技术栈脑图" → 用 default 6 分支（Languages / Frameworks / State&Data / Build / Testing / Performance）
+- 用户没指定颜色 → 自动按角色顺序分配 6 色组合
+- 用户说"加重点标记" → 启用 `must_know_enabled`
+- 用户说要 light 模式 → 用变体 1
+
+## 变体 1：浅色 Light 思维导图
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC + faint grid #E2E8F0",
+    "node_fill": "branch color × 6% opacity",
+    "node_border": "1.5px solid (deeper shade for white bg)",
+    "label_color": "deep slate #0F172A",
+    "connector_color": "branch color (deeper shade)",
+    "vibe": "白底文档站 / 印刷友好"
+  }
+}
+```
+
+## 变体 2：层级树形图（左到右）
+
+```json
+{
+  "modify": {
+    "layout": "替换放射式为'左到右树形'：central node 在最左，primary 垂直排列在右侧第二列，secondary 在第三列，以此类推",
+    "use_case": "更适合'学习路线 / 知识层级' (而不是'全景概览')",
+    "vibe": "更像 XMind 的 logical chart 视图"
+  }
+}
+```
+
+适用：学习路线、知识层级、决策树形知识。
+
+## 变体 3：组织 / 团队结构脑图
+
+```json
+{
+  "modify": {
+    "central_label": "team / company / org name",
+    "primary_branches": "部门 / 职能 (Engineering / Design / Product / Ops / Marketing)",
+    "secondary_nodes": "具体角色 / 团队成员 (用 'Name · Title' 格式)",
+    "highlights_extra": "team lead 用 ★ 标记 + 边框加粗",
+    "use_case": "团队介绍 deck、组织架构图"
+  }
+}
+```
+
+适用：团队 / 组织架构展示、新人 onboarding 文档。
+
+## 避免事项
+
+- primary 分支集中在画布一侧 → 视觉失衡
+- 节点全部同尺寸 → 失去层级
+- 连线大量交叉 → 不可读
+- secondary 颜色与所属 primary 不一致 → 视觉混乱
+- 三级以下全展开 → 视觉爆炸
+- 用 emoji 当节点 icon（除非主题相关，如"美食脑图"）
+- primary > 8 个 → 拥挤，考虑拆分主题
+- 用 3D / 渐变 / 玻璃质感
+- 中央节点不在中心 / 不唯一
+- 把"系统架构 / ER 图"做成 mind map（语义错位）
+- 字号过小 / mono 字体丢失（破坏工程感）

.teamai/skills/common/gpt-image-2/references/technical-diagrams/network-topology.md

@@ -0,0 +1,245 @@
+# 网络拓扑图模板
+
+> ⚠️ **本模板生成的是位图（PNG）**，不是 NetBox / Cisco Packet Tracer / draw.io 可编辑网络拓扑。
+> 需要可编辑请用 NetBox / Lucidchart / draw.io / Cisco Packet Tracer。
+
+本文件用于生成"工程感网络拓扑图"：
+
+- 公司 / 数据中心 网络拓扑
+- 多区域 / 多 zone 部署拓扑
+- 微服务 / 服务网格 拓扑
+- VPC / 子网 / 路由表拓扑
+- 边缘 / CDN / 多云互联拓扑
+
+特征：
+
+- 设备节点用类型化 glyph：路由器（菱形交叉）/ 交换机（矩形多端口）/ 服务器（带散热条小机箱）/ 防火墙（砖墙）/ 云（云朵）/ DB（圆柱）
+- 物理连线用粗线，逻辑连线用虚线
+- 大虚线框包围 zone / VLAN / VPC
+- 带宽 / 协议标在线上（如 "10 Gbps" / "BGP" / "TLS 1.3"）
+- 暗色 grid + 等宽字体（沿用视觉系统）
+
+## 适用范围
+
+- 数据中心 / 机房网络拓扑
+- 云架构网络拓扑（VPC / subnet / NAT / IGW）
+- 多区域 / 多云互联
+- 服务网格拓扑（service mesh）
+- 边缘 / CDN / 公网入口拓扑
+
+## 何时使用
+
+- 用户提到 "网络拓扑 / network topology / 部署拓扑 / VPC / 子网 / 数据中心 / 机房 / 服务网格"
+- 用户希望「带网络设备 glyph + 区域分组 + 连线带宽标注」标准网络图
+- 用户接受位图
+
+不要使用：
+
+- 用户要的是「应用层系统架构」 → 用 `technical-diagrams/system-architecture.md`
+- 用户要的是「业务流程」 → 用 `technical-diagrams/flowchart-decision.md`
+- 用户要的是「时序图」 → 用 `technical-diagrams/sequence-diagram.md`
+
+## 缺失信息优先提问顺序
+
+1. 拓扑名称（"AWS VPC 拓扑 / 公司机房拓扑 / 多区域部署"）
+2. 主要 zones / subnets / VPCs（建议 2-5 个区域）
+3. 每个区域内的设备 / 实例（路由器 / 交换机 / 服务器 / DB / 负载均衡）
+4. 区域间的连接（VPN / Peering / IGW / Direct Connect）
+5. 连线的协议 / 带宽（可选）
+6. 是否标 IP 段 / CIDR
+7. 比例（默认 16:9 横版）
+
+## 主模板：标准云 / 数据中心 网络拓扑图
+
+📖 描述
+
+整张图按 zone / VPC 划分大虚线框区域，每个区域内放设备节点（带类型化 glyph），节点间用粗线连接（标带宽 / 协议），跨区域连接用专门的网关 / VPN 节点。整体在暗色 grid 背景上呈现工程感。
+
+📝 提示词
+
+```json
+{
+  "type": "工程感网络拓扑图",
+  "goal": "生成一张工程感网络拓扑图作为部署文档 / 网络架构 review / 培训材料",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"16:9\"}",
+    "background": "deep slate #0F172A with subtle 1px grid #1E293B at 32px spacing",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"AWS Multi-AZ VPC Topology\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"production · ap-northeast-1\"}",
+    "position": "top-left, JetBrains Mono / SF Mono, light gray"
+  },
+  "device_glyphs": {
+    "rule": "每种设备使用统一的极简几何 glyph，避免使用真实厂商图标",
+    "types": [
+      { "type": "router", "glyph": "diamond shape with X cross inside", "color": "amber #FBBF24" },
+      { "type": "switch", "glyph": "rectangle with multiple port dots along the bottom edge", "color": "amber #FBBF24" },
+      { "type": "firewall", "glyph": "stylized brick wall pattern (small rectangles in 2-3 rows)", "color": "rose #FB7185" },
+      { "type": "load_balancer", "glyph": "trapezoid funnel with 3 lines coming in, 1 going out", "color": "blue #60A5FA" },
+      { "type": "server", "glyph": "small rack rectangle with 3-4 horizontal slots", "color": "emerald #34D399" },
+      { "type": "container", "glyph": "rounded square with sail / shipping container symbol", "color": "emerald #34D399" },
+      { "type": "database", "glyph": "cylinder (3D-suggested)", "color": "violet #A78BFA" },
+      { "type": "cloud_service", "glyph": "cloud outline with abbreviation inside (e.g. 'S3', 'CDN')", "color": "cyan #22D3EE" },
+      { "type": "user", "glyph": "stick figure", "color": "cyan #22D3EE" },
+      { "type": "internet", "glyph": "globe with latitude / longitude lines", "color": "slate #94A3B8" },
+      { "type": "nat_gateway", "glyph": "small rectangle labeled 'NAT'", "color": "amber #FBBF24" },
+      { "type": "vpn_gateway", "glyph": "small rectangle with key icon, labeled 'VPN'", "color": "rose #FB7185" }
+    ]
+  },
+  "zones": {
+    "count": "{argument name=\"zone_count\" default=\"4\"}",
+    "items": [
+      { "id": "Z1", "label": "Public Internet", "color_border": "slate #94A3B8 dashed", "cidr": "0.0.0.0/0" },
+      { "id": "Z2", "label": "VPC · ap-northeast-1\\n10.0.0.0/16", "color_border": "amber #FBBF24 dashed", "cidr": "10.0.0.0/16" },
+      { "id": "Z3", "label": "Public Subnet · 10.0.1.0/24 (AZ-a)", "color_border": "blue #60A5FA dashed", "parent": "Z2" },
+      { "id": "Z4", "label": "Private Subnet · 10.0.2.0/24 (AZ-a)", "color_border": "emerald #34D399 dashed", "parent": "Z2" }
+    ],
+    "zone_label_position": "top-left of each zone box, mono 11pt with CIDR on second line"
+  },
+  "nodes": {
+    "items": [
+      { "id": "N1", "type": "user", "label": "End Users", "zone": "Z1" },
+      { "id": "N2", "type": "internet", "label": "Internet", "zone": "Z1" },
+      { "id": "N3", "type": "cloud_service", "label": "CloudFront\\n(CDN)", "zone": "Z1" },
+      { "id": "N4", "type": "load_balancer", "label": "ALB", "zone": "Z3" },
+      { "id": "N5", "type": "nat_gateway", "label": "NAT GW", "zone": "Z3" },
+      { "id": "N6", "type": "container", "label": "ECS Tasks\\n(2 instances)", "zone": "Z4" },
+      { "id": "N7", "type": "database", "label": "RDS PostgreSQL\\n(Multi-AZ)", "zone": "Z4" },
+      { "id": "N8", "type": "cloud_service", "label": "S3\\n(static assets)", "zone": "Z1" }
+    ],
+    "node_label_format": "device name + optional second line with detail (count / class / role)，mono 10pt 标在 glyph 下方"
+  },
+  "connections": {
+    "items": [
+      { "from": "N1", "to": "N2", "type": "physical", "label": "" },
+      { "from": "N2", "to": "N3", "type": "physical", "label": "HTTPS / TLS 1.3" },
+      { "from": "N3", "to": "N4", "type": "physical", "label": "Origin pull" },
+      { "from": "N4", "to": "N6", "type": "physical", "label": "HTTP" },
+      { "from": "N6", "to": "N7", "type": "physical", "label": "TCP 5432" },
+      { "from": "N6", "to": "N5", "type": "physical", "label": "egress" },
+      { "from": "N5", "to": "N2", "type": "physical", "label": "" },
+      { "from": "N3", "to": "N8", "type": "physical", "label": "Origin pull" }
+    ],
+    "line_style": {
+      "physical": "solid line 2px slate #94A3B8 (carries actual traffic)",
+      "logical": "dashed line 1.5px slate #64748B (logical relation, e.g. 'IAM allows access')",
+      "redundant": "double-line in violet #A78BFA (HA pair, redundant link)",
+      "encrypted": "solid line 2px emerald #34D399 with small lock glyph in middle"
+    },
+    "label_format": "protocol + optional bandwidth, e.g. 'HTTPS / 443' / '10 Gbps' / 'BGP' / 'TLS 1.3'，mono 9pt 标在线中央",
+    "rule_routing": "正交走线为主；跨 zone 时穿过 zone 边界画"
+  },
+  "annotations": {
+    "ip_cidr_labels": {
+      "enabled": "{argument name=\"ip_labels_enabled\" default=\"true\"}",
+      "rule": "每个 zone 标 CIDR；关键节点标 IP 或 hostname"
+    },
+    "az_labels": {
+      "enabled": "{argument name=\"az_labels_enabled\" default=\"true\"}",
+      "rule": "云环境下标可用区 (AZ-a / AZ-b)"
+    }
+  },
+  "legend": {
+    "enabled": true,
+    "position": "bottom-right",
+    "content": "device glyph → device type，line style → connection type (physical / logical / redundant / encrypted)，zone color → zone type",
+    "style": "small panel, semi-transparent bg, mono 10pt"
+  },
+  "constraints": {
+    "must_keep": [
+      "每种设备 glyph 一致，不混用",
+      "zone 用大虚线框清晰包围",
+      "zone 标签含 CIDR / AZ（云环境）或 VLAN ID（数据中心）",
+      "连线粗细 / 颜色编码反映连接类型",
+      "暗色 grid 背景 + 等宽字体",
+      "legend 必画"
+    ],
+    "avoid": [
+      "用真实厂商 logo (Cisco / AWS / Azure 真实图标) → 容易侵权 + 破坏统一视觉",
+      "设备 glyph 不一致 (一个用方框一个用真实图标)",
+      "用 emoji 当设备图标",
+      "zone 不用虚线框 → 失去区域感",
+      "连线无 protocol 标 → 失去工程价值",
+      "节点 > 15 个 → 拥挤，考虑分子图",
+      "用 3D / 渐变 / 玻璃质感",
+      "声称这是可编辑 SVG"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、zones 列表（含 CIDR / 名称）、nodes 列表（含 type + zone）、connections（含 from/to）
+- **可默认**：`background`（暗色 grid）、`device_glyphs`（默认全套）、`ip_labels_enabled`（true）、`az_labels_enabled`（true）
+- **可随机**：节点摆放位置（在 zone 内自动布局）
+
+### 自动补全策略
+
+- 用户给"AWS 单 AZ VPC + ALB + ECS + RDS" → 用 default 拓扑
+- 用户没给 CIDR → 反问（不能瞎编 IP 段）
+- 用户说"加多 AZ HA" → 复制 private subnet 到 AZ-b，标 redundant 连线
+- 用户说"加 WAF / Shield" → 在 ALB 前加 firewall glyph
+- 用户说要 light 模式 → 用变体 1
+
+## 变体 1：浅色 Light 网络拓扑
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC + faint grid #E2E8F0",
+    "node_glyph_fill": "device color × 8% opacity",
+    "node_glyph_border": "1.5px solid (deeper shade for white bg)",
+    "label_color": "deep slate #0F172A",
+    "zone_border_color": "deeper shade",
+    "vibe": "白底文档 / 印刷版"
+  }
+}
+```
+
+## 变体 2：服务网格 (Service Mesh) 拓扑
+
+```json
+{
+  "modify": {
+    "title_format": "Service Mesh Topology",
+    "node_emphasis": "每个 service node 旁边贴一个小 sidecar (proxy) glyph，表达 sidecar 模式",
+    "connections_emphasis": "service-to-service 连线全部经过 sidecar；标 mTLS 加密",
+    "extras": "可加 control plane node (Istio / Linkerd) 在右上角，连线用虚线表示控制流",
+    "use_case": "Istio / Linkerd / Consul / Cilium service mesh 文档"
+  }
+}
+```
+
+适用：服务网格架构、零信任网络、SRE 培训材料。
+
+## 变体 3：多云互联拓扑（hybrid cloud）
+
+```json
+{
+  "modify": {
+    "zones": "横向并排画多个云的大框：'AWS Region' + 'GCP Region' + 'On-Prem DC'",
+    "interconnect": "云间用 'Direct Connect' / 'Cloud Interconnect' / 'VPN' 粗连线连接，标带宽 / SLA",
+    "extras": "可加 transit gateway / 中央 routing hub 在画布中央",
+    "use_case": "混合云 / 多云架构、灾备拓扑、迁移规划"
+  }
+}
+```
+
+适用：混合云架构、多云部署、灾备 / DR 拓扑。
+
+## 避免事项
+
+- 用真实厂商图标（容易侵权）
+- 设备 glyph 不一致（同一种设备用不同形状）
+- 用 emoji 当设备图标
+- zone 没有虚线框 → 失去区域感
+- 连线无 protocol / 带宽标 → 失去工程价值
+- 节点 > 15 → 视觉爆炸
+- 用 3D / 渐变 / 玻璃质感（破坏工程感）
+- 中央 hub-and-spoke 但中心节点没标"作什么"
+- 把"应用层"组件塞进网络拓扑（应该用 system-architecture）
+- 假装这是可导出可编辑的 SVG
+- IP / CIDR 信息缺失（云环境网络图核心信息）

.teamai/skills/common/gpt-image-2/references/technical-diagrams/sequence-diagram.md

@@ -0,0 +1,262 @@
+# 时序图模板
+
+> ⚠️ **本模板生成的是位图（PNG）**，不是 PlantUML / mermaid 可编辑时序图。
+> 需要可编辑请用 mermaid / PlantUML / draw.io。
+
+本文件用于生成"工程感时序图"：
+
+- API 调用时序（前端 → 后端 → DB）
+- 鉴权 / OAuth / 多步握手时序
+- 微服务间消息传递时序
+- 分布式事务 / Saga / 2PC 时序
+- 客户端 - 服务器 - 第三方 三方协议时序
+
+特征：
+
+- 顶部一排 actor 框（带名字 + 类型 icon）
+- 每个 actor 下方一条垂直虚线（lifeline）
+- 水平消息箭头连接 actors（实箭头同步、虚线箭头异步 / return）
+- lifeline 上有"激活条"（细长矩形）表示该 actor 正在处理
+- 消息可编号（1, 2, 3...）
+- 暗色 grid 背景 + 等宽字体
+
+## 适用范围
+
+- API 调用时序
+- 鉴权 / OAuth 流程
+- 微服务消息时序
+- 分布式事务 / Saga / 2PC
+- 第三方协议 / SDK 调用流
+
+## 何时使用
+
+- 用户提到 "时序图 / sequence diagram / 调用时序 / API 流 / OAuth 流 / 分布式事务"
+- 用户希望「actor + lifeline + 消息箭头」标准 UML 时序图样式
+- 用户接受位图
+
+不要使用：
+
+- 用户要的是「业务流程 / 决策」 → 用 `technical-diagrams/flowchart-decision.md`
+- 用户要的是「状态机」 → 用 `technical-diagrams/state-machine.md`
+- 用户要的是「系统架构」 → 用 `technical-diagrams/system-architecture.md`
+
+## 缺失信息优先提问顺序
+
+1. 时序名称（"OAuth 2.0 授权码流程 / 下单时序 / Saga 事务"）
+2. 参与的 actors（按从左到右顺序）
+3. 消息序列（按时间顺序，标明 sender → receiver、消息内容、同步 / 异步）
+4. 是否有失败 / 重试分支
+5. 是否有 self-call（actor 调用自己内部方法）
+6. 是否需要消息编号（论文 / 协议描述常需要）
+7. 比例（默认 16:9 横版；actor 多时可用 4:3）
+
+## 主模板：标准 UML 时序图
+
+📖 描述
+
+整张图顶部一排 actor 框，下方每个 actor 一条垂直虚线 lifeline，水平消息箭头连接 actors，激活条标在 lifeline 上，消息编号 + 标签清晰。
+
+📝 提示词
+
+```json
+{
+  "type": "工程感时序图（UML sequence diagram）",
+  "goal": "生成一张工程感时序图作为 README / blog / 协议文档配图",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"16:9\"}",
+    "background": "deep slate #0F172A with subtle 1px grid #1E293B at 32px spacing",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"OAuth 2.0 Authorization Code Flow\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"with PKCE\"}",
+    "position": "top-left, JetBrains Mono / SF Mono, light gray"
+  },
+  "actors": {
+    "count": "{argument name=\"actor_count\" default=\"4\"}",
+    "items": [
+      {
+        "id": "A1",
+        "name": "{argument name=\"actor1_name\" default=\"User\"}",
+        "type": "{argument name=\"actor1_type\" default=\"user\"}",
+        "icon_glyph": "stick figure outline"
+      },
+      {
+        "id": "A2",
+        "name": "{argument name=\"actor2_name\" default=\"Web App\"}",
+        "type": "{argument name=\"actor2_type\" default=\"client\"}",
+        "icon_glyph": "browser window outline"
+      },
+      {
+        "id": "A3",
+        "name": "{argument name=\"actor3_name\" default=\"Auth Server\"}",
+        "type": "{argument name=\"actor3_type\" default=\"service\"}",
+        "icon_glyph": "shield outline"
+      },
+      {
+        "id": "A4",
+        "name": "{argument name=\"actor4_name\" default=\"Resource Server\"}",
+        "type": "{argument name=\"actor4_type\" default=\"service\"}",
+        "icon_glyph": "database / server outline"
+      }
+    ],
+    "header_box_style": {
+      "shape": "rounded rectangle, corner radius 6px",
+      "fill": "type-coded color × 12% opacity",
+      "border": "1.5px solid type-coded color",
+      "size": "160px wide × 64px tall, all headers identical size, evenly spaced",
+      "label": "actor name in mono 11pt + small icon glyph above name"
+    },
+    "type_color_map": {
+      "user": "cyan #22D3EE",
+      "client": "blue #60A5FA",
+      "service": "emerald #34D399",
+      "database": "violet #A78BFA",
+      "external": "slate #94A3B8"
+    }
+  },
+  "lifelines": {
+    "rule": "每个 actor header 下方画一条垂直虚线 (1px dashed slate #475569)，从 header 底部一直延伸到画布底部",
+    "spacing": "lifelines 之间等距，间距 ≥ 200px"
+  },
+  "messages": {
+    "count": "{argument name=\"message_count\" default=\"10\"}",
+    "items": [
+      { "id": "M1", "from": "A1", "to": "A2", "label": "1. Click 'Sign in'", "type": "sync" },
+      { "id": "M2", "from": "A2", "to": "A3", "label": "2. GET /authorize?code_challenge=...", "type": "sync" },
+      { "id": "M3", "from": "A3", "to": "A1", "label": "3. Show login page", "type": "return" },
+      { "id": "M4", "from": "A1", "to": "A3", "label": "4. Submit credentials", "type": "sync" },
+      { "id": "M5", "from": "A3", "to": "A2", "label": "5. Redirect with auth_code", "type": "return" },
+      { "id": "M6", "from": "A2", "to": "A3", "label": "6. POST /token { code, code_verifier }", "type": "sync" },
+      { "id": "M7", "from": "A3", "to": "A2", "label": "7. { access_token, refresh_token }", "type": "return" },
+      { "id": "M8", "from": "A2", "to": "A4", "label": "8. GET /api/data (Bearer token)", "type": "sync" },
+      { "id": "M9", "from": "A4", "to": "A4", "label": "9. validate token", "type": "self" },
+      { "id": "M10", "from": "A4", "to": "A2", "label": "10. { data: ... }", "type": "return" }
+    ],
+    "message_style": {
+      "sync": "solid line 1.5px slate #94A3B8, filled triangle arrowhead at target",
+      "async": "solid line 1.5px slate #94A3B8, hollow triangle arrowhead",
+      "return": "dashed line 1.5px slate #64748B, hollow triangle arrowhead",
+      "self": "horizontal arrow that loops out to the right and back to the same lifeline (bracket shape)"
+    },
+    "label_format": "<编号>. <消息内容>，例如 '5. Redirect with auth_code'，mono 10pt，标在 arrow 上方居中"
+  },
+  "activation_bars": {
+    "enabled": "{argument name=\"activation_bars_enabled\" default=\"true\"}",
+    "rule": "在 actor lifeline 上画细长矩形（4-6px 宽）覆盖该 actor 处理消息的时间段；颜色用 actor 的 type color，半透明",
+    "vertical_extent": "从该 actor 收到一个 message 开始，到它发出 return 结束"
+  },
+  "annotations": {
+    "notes": {
+      "enabled": "{argument name=\"notes_enabled\" default=\"false\"}",
+      "rule": "可在某段时序旁画黄色便签（amber 半透明圆角矩形），加注释；如 'PKCE prevents code interception'"
+    },
+    "loops_alts": {
+      "enabled": "{argument name=\"loops_alts_enabled\" default=\"false\"}",
+      "rule": "可用 UML alt / loop 框：圆角矩形包围多条消息，左上角标 'alt' / 'loop' + 条件文本"
+    }
+  },
+  "legend": {
+    "enabled": true,
+    "position": "bottom-right",
+    "content": "actor type → color, message style → meaning (sync solid arrow / async hollow / return dashed / self bracket)",
+    "style": "small panel, semi-transparent bg, mono 10pt"
+  },
+  "constraints": {
+    "must_keep": [
+      "actor headers 等大小、等间距、水平对齐",
+      "lifelines 垂直、等间距",
+      "messages 严格按时间从上到下排列",
+      "每条 message 有编号 + 简洁标签",
+      "sync / return / async 用不同箭头风格区分",
+      "暗色 grid 背景 + 等宽字体",
+      "legend 必画"
+    ],
+    "avoid": [
+      "actor header 大小不一",
+      "messages 不按时间顺序",
+      "self-call 画成水平直线（必须 bracket / loop 形）",
+      "return 用实线箭头（破坏语义）",
+      "label 与 lifeline 重叠",
+      "用 emoji 当 actor 图标",
+      "actor > 6 个（拥挤；考虑拆分）",
+      "messages > 15 条（视觉爆炸；考虑分子时序）",
+      "声称这是可编辑 SVG"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、actors 列表、messages 序列（含 from/to/label/type）
+- **可默认**：`activation_bars_enabled`（true）、`type_color_map`、`notes_enabled`（false）、`loops_alts_enabled`（false）
+- **可随机**：actor icon glyph 具体造型、消息标签字号微调
+
+### 自动补全策略
+
+- 用户给"我要画 OAuth 流程" → 默认 4 actor + 10 消息（用户 → web → auth → resource）
+- 用户没说 sync / async → 默认 sync；明显的回调 / 通知场景默认 async
+- 用户说"含失败重试" → 启用 `loops_alts_enabled` + alt block 包围
+- 用户说"加注释解释" → 启用 `notes_enabled`
+- 用户说要 light 模式 → 用变体 1
+
+## 变体 1：浅色 Light 时序图
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC + faint grid #E2E8F0",
+    "actor_header_fill": "type color × 8% opacity",
+    "actor_header_border": "1.5px solid (deeper shade for white bg)",
+    "label_color": "deep slate #0F172A",
+    "lifeline_color": "slate #94A3B8 dashed",
+    "vibe": "白底文档 / 印刷版友好"
+  }
+}
+```
+
+## 变体 2：协议握手 / OAuth / 鉴权专用风
+
+```json
+{
+  "modify": {
+    "messages_emphasis": "为安全 / token 类消息加 🔒 等价 glyph 或 'TLS' / 'signed' 小标签",
+    "extras": "在 message 上额外标 HTTP method（GET/POST/PUT），加微小 mono 标签",
+    "annotation": "加 PKCE / nonce / state 解释 note，notes_enabled = true",
+    "use_case": "OAuth 2.0 / OIDC / SAML / mTLS 等协议"
+  }
+}
+```
+
+适用：协议教学、鉴权流程文档。
+
+## 变体 3：分布式事务 / Saga / 2PC 风
+
+```json
+{
+  "modify": {
+    "actor_types": "通常 4-5 个 service actor + 1 个 coordinator + 1 个 message broker",
+    "messages_emphasis": "明确标 prepare / commit / rollback / compensate 阶段，用不同颜色 (commit 绿、rollback 红、prepare 蓝)",
+    "loops_alts_enabled": true,
+    "alt_blocks": "alt 'commit phase' / 'rollback phase' 包围相应消息",
+    "use_case": "Saga / 2PC / TCC / outbox pattern 教学和文档"
+  }
+}
+```
+
+适用：分布式事务模式教学、架构 review、failure mode 分析。
+
+## 避免事项
+
+- 时序图但 messages 不按时间从上到下 → 失去时序性
+- 用菱形 / 圆形当 actor（必须矩形 header）
+- self-call 画成直线（必须 bracket）
+- return 用实线（与 sync 混淆）
+- actor > 6 → 视觉拥挤，考虑拆分
+- messages > 15 → 视觉爆炸
+- 用 emoji 当 actor 图标
+- 把 actor 头像做成卡通人物 → 失去工程感
+- 没有 activation 条 → 看不出谁在处理
+- 没有 message 编号（教学场景必须有）
+- 把"流程图"画成时序图（节点应该是动作而非 actor）

.teamai/skills/common/gpt-image-2/references/technical-diagrams/state-machine.md

@@ -0,0 +1,239 @@
+# 状态机 / 生命周期图模板
+
+> ⚠️ **本模板生成的是位图（PNG）**，不是 mermaid / xstate 可编辑状态机。
+> 需要可编辑请用 mermaid stateDiagram / xstate visualizer。
+
+本文件用于生成"工程感状态机 / 生命周期图"：
+
+- 订单状态机（待支付 / 已支付 / 已发货 / 已完成 / 已取消 / 已退款）
+- 连接 / 会话状态（idle / connecting / connected / closing / closed）
+- 工作流状态（draft / submitted / approved / rejected）
+- UI 组件状态（hover / active / disabled / loading）
+- 协议状态机（TCP 状态、WebSocket 状态、HTTP 缓存状态）
+
+特征：
+
+- 圆角矩形 = 状态节点
+- 实心圆 = 起始伪状态；靶心 / 双圆 = 终止状态
+- 有向边 = 转换 transition，标"事件 / 条件"
+- 自循环 = 状态自身保持
+- 暗色 grid + 等宽字体（沿用视觉系统）
+
+## 适用范围
+
+- 业务对象生命周期（订单 / 文档 / 工单）
+- 协议 / 连接状态
+- 工作流 / 审批状态
+- UI 组件 / 交互状态
+- 设备 / 会话 / 任务状态
+
+## 何时使用
+
+- 用户提到 "状态机 / state machine / 生命周期 / lifecycle / state diagram / 状态转移"
+- 用户希望「state + transition」UML 状态图样式
+- 用户接受位图
+
+不要使用：
+
+- 用户要的是「业务流程图（含决策、动作）」 → 用 `technical-diagrams/flowchart-decision.md`
+- 用户要的是「时序图」 → 用 `technical-diagrams/sequence-diagram.md`
+
+## 缺失信息优先提问顺序
+
+1. 状态机名称（"订单状态机 / TCP 状态机"）
+2. 起始状态（一般唯一）+ 终止状态（可多个）
+3. 中间状态列表（建议 4-12 个，超过考虑分子状态机）
+4. 转换：每条转换的"源状态 → 目标状态 + 触发事件 + 守卫条件 + action"
+5. 是否有自循环
+6. 是否需要 composite state（嵌套状态）
+7. 比例（默认 4:3 或 16:9 横版）
+
+## 主模板：标准 UML 状态机图
+
+📖 描述
+
+整张图以起始伪状态（实心圆）开始，经过若干状态节点（圆角矩形）和转换箭头（标事件）流转，最终到终止状态（靶心）。状态节点可有自循环（如 "retry" 自循环）。
+
+📝 提示词
+
+```json
+{
+  "type": "工程感状态机 / 生命周期图（UML state diagram）",
+  "goal": "生成一张状态机图作为业务文档 / 协议规范 / 教学配图",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"16:9\"}",
+    "background": "deep slate #0F172A with subtle 1px grid #1E293B at 32px spacing",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"Order Lifecycle State Machine\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"e-commerce order from creation to completion\"}",
+    "position": "top-left, JetBrains Mono / SF Mono, light gray"
+  },
+  "states": {
+    "count": "{argument name=\"state_count\" default=\"7\"}",
+    "items": [
+      { "id": "S0", "type": "initial", "label": "" },
+      { "id": "S1", "type": "state", "label": "Pending\\nPayment", "category": "active" },
+      { "id": "S2", "type": "state", "label": "Paid", "category": "active" },
+      { "id": "S3", "type": "state", "label": "Shipped", "category": "active" },
+      { "id": "S4", "type": "state", "label": "Completed", "category": "success_terminal" },
+      { "id": "S5", "type": "state", "label": "Cancelled", "category": "fail_terminal" },
+      { "id": "S6", "type": "state", "label": "Refunded", "category": "fail_terminal" },
+      { "id": "ST", "type": "final", "label": "" }
+    ]
+  },
+  "state_style": {
+    "initial": {
+      "shape": "filled solid circle, ~16px diameter",
+      "color": "cyan #22D3EE solid"
+    },
+    "final": {
+      "shape": "concentric double circle (bullseye), outer ~18px, inner solid 10px",
+      "color": "rose #FB7185"
+    },
+    "state": {
+      "shape": "rounded rectangle, corner radius 12px (more rounded than process), 160×72px typical",
+      "fill": "category color × 12% opacity",
+      "border": "1.5px solid in category color",
+      "label": "state name in mono 12pt, centered, light text on dark fill",
+      "optional_internal_label": "可在 state 内部底部加小字 'entry / action' / 'do / activity' / 'exit / cleanup'（UML extension）"
+    }
+  },
+  "category_color_map": {
+    "active": "emerald #34D399",
+    "waiting": "amber #FBBF24",
+    "success_terminal": "blue #60A5FA",
+    "fail_terminal": "rose #FB7185",
+    "error": "rose #FB7185",
+    "neutral": "slate #94A3B8"
+  },
+  "transitions": {
+    "items": [
+      { "from": "S0", "to": "S1", "label": "create()" },
+      { "from": "S1", "to": "S2", "label": "pay() [valid card]" },
+      { "from": "S1", "to": "S5", "label": "timeout / cancel()" },
+      { "from": "S2", "to": "S3", "label": "ship()" },
+      { "from": "S2", "to": "S6", "label": "refund() [user request]" },
+      { "from": "S3", "to": "S4", "label": "deliver() [confirmed]" },
+      { "from": "S3", "to": "S6", "label": "return() [defect]" },
+      { "from": "S4", "to": "ST", "label": "" },
+      { "from": "S5", "to": "ST", "label": "" },
+      { "from": "S6", "to": "ST", "label": "" },
+      { "from": "S1", "to": "S1", "label": "retry_payment", "self_loop": true }
+    ],
+    "transition_style": {
+      "default": "thin solid arrow 1.5px slate #94A3B8 with filled triangle arrowhead",
+      "self_loop": "small loop curving above the state, returning to itself",
+      "label_format": "<event> [guard] / <action>，例如 'pay() [valid card] / lock_inventory()'，mono 9-10pt 标在边的中间，背景与 canvas 融合避免重叠"
+    },
+    "rule_routing": "尽量正交或 ≤ 30° 斜线，避免边穿过节点"
+  },
+  "composite_states": {
+    "enabled": "{argument name=\"composite_enabled\" default=\"false\"}",
+    "rule": "if true, can group sub-states inside a larger rounded rectangle labeled 'Active' / 'Suspended' etc.; sub-states are 'state' type nested within the composite border"
+  },
+  "legend": {
+    "enabled": true,
+    "position": "bottom-right",
+    "content": "category color → meaning (active / terminal-success / terminal-fail / error)，shape → role (initial filled circle / final bullseye / state rectangle)，self-loop notation",
+    "style": "small panel, semi-transparent bg, mono 10pt"
+  },
+  "constraints": {
+    "must_keep": [
+      "initial 是实心圆 / final 是靶心，不混用",
+      "状态节点统一形状（圆角矩形）和尺寸基线",
+      "transitions 必有 label（除非进 final）",
+      "guard 条件用 [...] 括起来",
+      "action 用 / 分隔",
+      "自循环用 loop 形而非直线",
+      "category 颜色一致（不要把 success 用红、fail 用绿）",
+      "暗色 grid + 等宽字体",
+      "legend 必画"
+    ],
+    "avoid": [
+      "用菱形 / 平行四边形当 state（混淆为流程图）",
+      "transitions 没有 label",
+      "把 final 状态画成普通圆角矩形",
+      "guard / action 语法不规范（漏 [] 或 /）",
+      "状态 > 12 个（拥挤；考虑 composite state 或拆分）",
+      "用 emoji 当 state 图标",
+      "用 3D / 渐变 / 玻璃质感",
+      "声称这是可编辑 SVG"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、起始状态、终止状态、中间状态列表、所有 transitions（含 from/to/label）
+- **可默认**：`background`（暗色 grid）、`category_color_map`、`legend_enabled`（true）
+- **可随机**：状态节点摆放位置（基于状态间转换关系自动布局，使边交叉最少）
+
+### 自动补全策略
+
+- 用户给"订单状态机"但没给细节 → 用 default 7 状态版（待支付 / 已支付 / 已发货 / 已完成 / 已取消 / 已退款）
+- 用户没说 guard / action → label 仅写 event 名
+- 用户给状态但没给 transitions → 反问关键转换（不能瞎编业务规则）
+- 用户说"状态太多" → 启用 `composite_enabled` + 用 composite 包围相关状态
+- 用户说要 light 模式 → 用变体 1
+
+## 变体 1：浅色 Light 状态机
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC + faint grid #E2E8F0",
+    "state_fill": "category color × 8% opacity",
+    "state_border": "1.5px solid (deeper shade for white bg)",
+    "label_color": "deep slate #0F172A",
+    "transition_color": "slate #475569",
+    "vibe": "白底文档 / 印刷版"
+  }
+}
+```
+
+## 变体 2：协议状态机（TCP / WebSocket / HTTP cache）
+
+```json
+{
+  "modify": {
+    "title_format": "<protocol> State Machine（如 TCP State Machine）",
+    "state_label_emphasis": "用大写 / 协议规范术语（如 LISTEN / SYN_SENT / ESTABLISHED / TIME_WAIT）",
+    "transition_label_emphasis": "用'触发包 / 发送包'格式：例如 'recv: SYN / send: SYN+ACK'",
+    "use_case": "网络协议教学、规范文档、面试准备资料"
+  }
+}
+```
+
+适用：TCP / UDP / WebSocket / HTTP / OAuth 状态描述。
+
+## 变体 3：UI 组件状态（按钮 / 输入 / 弹窗）
+
+```json
+{
+  "modify": {
+    "title_format": "<Component> Interaction States",
+    "state_label_emphasis": "用 UI 状态术语：default / hover / active / focus / disabled / loading / error / success",
+    "transition_label_emphasis": "用 UI 事件：mouseenter / click / focus / blur / API resolve / API reject",
+    "category_color_map_extra": "default = slate, hover = cyan, active = emerald, disabled = slate desaturated, loading = amber, error = rose, success = blue",
+    "use_case": "设计系统文档、组件库 README、设计师 / 开发对齐"
+  }
+}
+```
+
+适用：设计系统、组件库文档、UI / UX 状态规范。
+
+## 避免事项
+
+- 状态节点用菱形 / 平行四边形 → 与流程图混淆
+- transition 没有 event label → 完全失去状态机语义
+- final 状态用普通矩形 → 不符合 UML
+- guard 条件没用 [] → 不规范
+- 用 emoji 当状态图标
+- 状态 > 12 个 → 拥挤，必须拆分或用 composite
+- 自循环画成直线 → 视觉错误
+- success / fail 颜色搞反
+- 把"状态机"做成"流程图"（节点应该是状态，不是动作）
+- 节点 / 边过多导致互相穿透

.teamai/skills/common/gpt-image-2/references/technical-diagrams/system-architecture.md

@@ -0,0 +1,240 @@
+# 系统架构图模板
+
+> ⚠️ **本模板生成的是位图（PNG），不是可编辑的 SVG / draw.io / mermaid 图**。
+> 如果你需要可编辑、可对齐、可版本化的工程图，请用 mermaid / draw.io / excalidraw / Figma。
+> 如果你需要的是「README 头图 / blog 配图 / 文档插图 / PPT 封面」级别的视觉呈现，本模板适合。
+
+本文件用于生成"工程感系统架构图"：
+
+- 整体系统架构（前端 + 后端 + DB + 缓存 + 队列 + 外部服务）
+- 微服务架构概览
+- 多区域 / 多 zone 部署架构
+- AI 系统 / 数据管道架构
+- 云原生架构图
+
+特征：
+
+- 暗色背景 (#0F172A slate-900) + 细 grid
+- 节点 = 圆角矩形 + 半透明深色填充 + 1.5px 边框 + 等宽字体标签
+- 配色按"角色"分类（用户层 / 业务层 / 数据层 / 基础设施 / 安全 / 中间件 / 外部）
+- 有向数据流箭头：实箭头 = 同步，虚线 = 异步 / 回调
+- 区域用虚线大框包围（VPC / 云区 / Trust boundary）
+- 字体：JetBrains Mono / SF Mono 等宽
+
+## 适用范围
+
+- 系统总览架构图
+- 微服务 / 分布式系统架构
+- 多区域 / 多云部署架构
+- 数据管道 / AI 系统架构
+- 文档 / blog 配图 / README 头图
+
+## 何时使用
+
+- 用户提到 "系统架构 / 微服务 / 分布式 / 部署架构 / 数据管道 / AI 系统架构 / 云架构"
+- 用户希望视觉「工程感、暗色、grid 网格、像 baoyu-diagram 那种」
+- 用户接受这是位图（不要求可编辑）
+
+不要使用：
+
+- 用户要的是「业务流程图 / 决策图」 → 用 `technical-diagrams/flowchart-decision.md`
+- 用户要的是「时序图 / API 调用流」 → 用 `technical-diagrams/sequence-diagram.md`
+- 用户要的是「网络拓扑」（机房 / 路由器 / 设备）→ 用 `technical-diagrams/network-topology.md`
+- 用户要的是「ER 图 / 数据模型」 → 用 `technical-diagrams/er-diagram.md`
+- 用户要的是「论文方法 pipeline」 → 用 `academic-figures/method-pipeline-overview.md`
+- 用户要的是「神经网络架构」 → 用 `academic-figures/neural-network-architecture.md`
+
+## 缺失信息优先提问顺序
+
+1. 系统名称 + 一句话定位（"我们要画 XX 平台的整体架构"）
+2. 主要分层 / 区域（如"前端 / 网关 / 业务服务 / 数据层 / 基础设施"）
+3. 每层有哪些节点（最多 8-15 个总节点，超过会拥挤）
+4. 主要数据流方向（用户请求 → ... → 响应）
+5. 是否有外部服务（第三方 API / SaaS）
+6. 是否有"安全 / 鉴权 / 监控"相关组件需要单独标
+7. 主题色偏好（默认 dark；是否要 light variant）
+8. 比例（默认 16:9 横版；架构图很少竖版）
+
+## 主模板：分层暗色系统架构图
+
+📖 描述
+
+整张图按层 / 按区域划分，每层是一组带相同色系的节点，节点之间用箭头连接表达数据流，整体在深色 grid 背景上呈现工程感。
+
+📝 提示词
+
+```json
+{
+  "type": "技术系统架构图（暗色工程感）",
+  "goal": "生成一张用于 README / blog / 设计文档的工程感系统架构图",
+  "canvas": {
+    "aspect_ratio": "{argument name=\"aspect_ratio\" default=\"16:9\"}",
+    "background": "{argument name=\"background\" default=\"deep slate #0F172A with subtle 1px grid lines #1E293B at 32px spacing\"}",
+    "outer_padding": "60px"
+  },
+  "title_strip": {
+    "title": "{argument name=\"title\" default=\"System Architecture Overview\"}",
+    "subtitle": "{argument name=\"subtitle\" default=\"v1.0 · 2026\"}",
+    "position": "top-left, large mono font (JetBrains Mono / SF Mono), light gray text"
+  },
+  "color_semantics": {
+    "rule": "颜色按'角色'编码，不按'技术'编码",
+    "palette": [
+      { "role": "User / Client / Edge", "color": "cyan #22D3EE", "use_for": "终端用户、Web、Mobile、CLI" },
+      { "role": "Gateway / API / BFF", "color": "blue #60A5FA", "use_for": "API 网关、负载均衡、CDN、BFF" },
+      { "role": "Business Services", "color": "emerald #34D399", "use_for": "微服务、应用层、业务逻辑" },
+      { "role": "Data / Persistence", "color": "violet #A78BFA", "use_for": "数据库、缓存、对象存储、搜索" },
+      { "role": "Middleware / Queue", "color": "orange #FB923C", "use_for": "MQ、Kafka、Redis Stream、Pub/Sub" },
+      { "role": "Infra / Platform", "color": "amber #FBBF24", "use_for": "K8s、容器运行时、云平台" },
+      { "role": "Security / Auth", "color": "rose #FB7185", "use_for": "鉴权、密钥、审计、防火墙" },
+      { "role": "External / 3rd Party", "color": "slate #94A3B8", "use_for": "外部 SaaS、第三方 API" }
+    ]
+  },
+  "regions": {
+    "rule": "用大虚线框包围属于同一'部署单元'的节点，框上方有 region label",
+    "items": [
+      { "id": "R1", "label": "{argument name=\"region1_label\" default=\"Public Edge\"}", "color_border": "cyan dashed" },
+      { "id": "R2", "label": "{argument name=\"region2_label\" default=\"VPC · ap-northeast-1\"}", "color_border": "amber dashed" },
+      { "id": "R3", "label": "{argument name=\"region3_label\" default=\"Data Plane\"}", "color_border": "violet dashed" }
+    ]
+  },
+  "nodes": {
+    "count_total": "{argument name=\"node_count\" default=\"10\"}",
+    "items": [
+      { "id": "N1", "label": "Web App", "role": "User / Client", "region": "R1" },
+      { "id": "N2", "label": "Mobile App", "role": "User / Client", "region": "R1" },
+      { "id": "N3", "label": "CDN", "role": "Gateway / API", "region": "R1" },
+      { "id": "N4", "label": "API Gateway", "role": "Gateway / API", "region": "R2" },
+      { "id": "N5", "label": "Auth Service", "role": "Security / Auth", "region": "R2" },
+      { "id": "N6", "label": "Order Service", "role": "Business Services", "region": "R2" },
+      { "id": "N7", "label": "User Service", "role": "Business Services", "region": "R2" },
+      { "id": "N8", "label": "Kafka", "role": "Middleware / Queue", "region": "R2" },
+      { "id": "N9", "label": "PostgreSQL", "role": "Data / Persistence", "region": "R3" },
+      { "id": "N10", "label": "Redis", "role": "Data / Persistence", "region": "R3" }
+    ]
+  },
+  "node_style": {
+    "shape": "rounded rectangle, corner radius 8px",
+    "size": "auto-fit text + 24px horizontal padding, ~ 140px wide × 56px tall typical",
+    "fill": "background color of role × 12% opacity (semi-transparent)",
+    "border": "1.5px solid in role color (full opacity)",
+    "label": "label text in JetBrains Mono / SF Mono 12pt, color = role color (lighter shade) for readability on dark bg",
+    "icon": "small icon in top-left corner of node (optional, generic geometric glyph for the role — circle for service, cylinder for DB, hex for queue)"
+  },
+  "edges": {
+    "sync_call": {
+      "style": "solid line 1.5px in slate #64748B, with small filled triangle arrowhead at the target end",
+      "use_for": "同步请求 / 调用"
+    },
+    "async_event": {
+      "style": "dashed line 1.5px in slate #64748B, with hollow triangle arrowhead",
+      "use_for": "异步事件 / 消息发布订阅 / 回调"
+    },
+    "data_flow_label": {
+      "rule": "edges 上可选标小标签（如 'POST /orders' / 'order.created event'），用 mono 字体 9pt，背景与画布融合"
+    },
+    "rule_routing": "尽量正交（水平 / 垂直）走线；如果必须斜线，控制在 ≤ 30°；边不要穿过节点"
+  },
+  "legend": {
+    "enabled": "{argument name=\"legend_enabled\" default=\"true\"}",
+    "position": "bottom-right",
+    "content": "color → role mapping (8 swatches), and edge style → meaning (sync solid vs async dashed)",
+    "style": "small panel with semi-transparent background, mono font 10pt"
+  },
+  "constraints": {
+    "must_keep": [
+      "暗色背景 + 细 grid",
+      "颜色按 role 编码，不要按技术品牌（如 PostgreSQL 用 violet 因它是 data，不是因为 PG 官方蓝）",
+      "节点统一圆角和尺寸基线",
+      "等宽字体（mono）贯穿全图",
+      "edges 不穿过节点，标签不与边重叠",
+      "区域虚线框颜色与区域含义匹配",
+      "legend 必须画出（即使简化）"
+    ],
+    "avoid": [
+      "彩虹色 / 高饱和霓虹色（除 cyan 之外其它色都要 muted）",
+      "用 emoji 当节点图标（用极简几何 glyph）",
+      "技术 logo 直接贴上去（除非是商标对照说明）",
+      "3D 立方体 / 透视效果 / 玻璃质感",
+      "同一种颜色既表'安全'又表'业务'",
+      "节点超过 15 个（请拆分到多张子图）",
+      "声称这张图可编辑 / 可导出 SVG（它是位图）",
+      "用花哨字体 / 手写体（破坏工程感）"
+    ]
+  }
+}
+```
+
+### 参数策略
+
+- **必问**：`title`、节点列表（含每个节点的 role 归属）、主要 edges
+- **可默认**：`background`（暗色 grid）、`color_semantics`（8 角色调色板）、`node_style`、`legend_enabled`（true）
+- **可随机**：节点摆放位置（基于区域 / role 自动布局）、icon glyph 具体造型
+
+### 自动补全策略
+
+- 用户给 "Web + API + DB" 三层简化 → 自动用 3 个 region (Edge / Service / Data) + 5-7 个节点
+- 用户没说 region → 默认按 role 自动聚类 + 加 region 框
+- 用户没说要不要 light 变体 → 默认 dark；用户说要 light 时切换到变体 1
+- 用户给具体技术（"用 PostgreSQL"）→ 节点 label 直接写技术名，但配色仍按 role 选
+
+## 变体 1：浅色 / Light 模式系统架构图
+
+```json
+{
+  "modify": {
+    "background": "warm off-white #F8FAFC with very faint grid #E2E8F0",
+    "node_fill": "role color × 8% opacity",
+    "node_border": "1.5px solid role color (full opacity)",
+    "label_color": "role color (full opacity, dark enough for white bg) — e.g. cyan label uses cyan-700 not cyan-300",
+    "title_color": "deep slate #0F172A",
+    "edges_color": "slate #475569",
+    "vibe": "看起来像 light theme 文档配图（适合 Notion / GitHub / 白底文档）"
+  }
+}
+```
+
+适用：白底文档站、印刷版文档、对比 dark 版本提供的 light alternative。
+
+## 变体 2：极简 monochrome 系统架构图
+
+```json
+{
+  "modify": {
+    "color_semantics": "all roles use slate #94A3B8 except 'highlight current focus' uses single accent (e.g. cyan #22D3EE)",
+    "use_case": "强调结构本身，不强调角色分类（如教学讲解、概念示意）",
+    "vibe": "克制、非分散注意力、像 The Verge / Stripe blog 的极简插图"
+  }
+}
+```
+
+适用：概念性示意（不需要强调角色）、blog hero 图、教学。
+
+## 变体 3：Hero / Marketing 风系统架构图
+
+```json
+{
+  "modify": {
+    "background": "渐变深蓝紫 + 远景星点 + 主体节点带柔和发光",
+    "node_style": "节点保留圆角和等宽字体，但加微妙发光（drop shadow + glow）",
+    "title": "更大、加副标语",
+    "use_case": "产品官网 hero / 投资人 deck / 发布会主图",
+    "vibe": "Stripe / Linear / Vercel 官网风的视觉冲击力"
+  }
+}
+```
+
+适用：产品官网、技术品牌官网 hero、产品发布会主图。
+
+## 避免事项
+
+- 节点 > 15 个 → 视觉拥堵，建议拆分到多张图（"高层架构" + "细分模块图"）
+- 用 PostgreSQL / Redis / Kafka 真实 logo → 容易侵权 + 破坏统一视觉
+- 颜色按"技术"分（如 PG 用蓝、Redis 用红）→ 失去 role 语义
+- 用 emoji 节点图标
+- 3D 透视 / 玻璃质感 / 渐变填充节点
+- 边穿过节点 / 标签碰撞 / 斜线乱飞
+- 没有 legend → 读者不知道颜色含义
+- 没有 region 框（即使逻辑上有分层）→ 失去"部署单元"信息
+- 假装这是可导出可编辑的 SVG → 别误导用户
+- 把神经网络结构 / 业务流程 / 时序 也塞到这张图（应该用对应模板）