# Make Textbook Figure

> 构建教材级别的黑白矢量插图（几何图、受力分析图、光路图、电路图、函数图像、坐标系、物理/数学示意图等），以自包含 HTML 文件呈现——所有线条用 SVG 绘制，所有公式、符号、运算符、物理/数学符号用 LaTeX 经 MathJax 渲染为矢量，支持一键导出高清 PNG。当用户说"画个教材图/教材插图/教学示意图""画受力分析图/光路图/电路图/函数图/几何图""做一张黑白矢量图/示意图""把这道题/这个原理配张图""画个坐标系/数轴"，或任何为教材、讲义、试卷、课件绘制精确黑白教学插图的需求时，必须使用本技能，即使用户没明说"教材"二字。注意：本技能与 make-infographic 不同——make-infographic 做彩色信息图/海报（给家长客户看，版式驱动），本技能做黑白精确教学插图（给师生用，准确性驱动），不要混用。

- Skill: `lingxiaobc/make-textbook-figure` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add lingxiaobc/make-textbook-figure`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lingxiaobc/make-textbook-figure/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lingxiaobc (https://skillmd.com/u/lingxiaobc)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lingxiaobc/make-textbook-figure

---


# 构建教材黑白矢量插图（SVG + LaTeX + 高清 PNG 导出）

## 这个技能产出什么

一张**教材级别的黑白矢量插图**，交付为自包含 HTML 文件（双击可在浏览器打开预览），可一键导出高清 PNG。适用于教材、讲义、试卷、课件中需要精确线条 + 数学/物理符号的示意图：几何证明图、受力分析图、光路图、电路图、函数图像、坐标系等。

## 硬性约束（违反即不合格）

这些约束来自教材插图的本质要求——精确、规范、可印刷。理解了"为什么"，执行时才不会走偏：

1. **黑白矢量风格**：仅用 `#000`（黑）/`#fff`（白）+ 1–2 级灰度（`#555` / `#e5e5e5`）。不用彩色、渐变、阴影、彩色填充。原因：教材多为黑白印刷，彩色会印成不可控灰阶；矢量才能任意缩放不糊。**用线型区分语义**：实线=实体边界/已知线，虚线=辅助线/隐藏边，点划线=对称轴，箭头=力/方向。

2. **所有公式、符号、运算符、物理/数学符号必须用 LaTeX 渲染**：经 MathJax `tex-svg.js` 渲染为矢量。禁止用 Unicode 字符凑（`½` `²` `√` `θ` `→` `≈` 等）——它们字体不统一、排版不专业、上下标错位。正确写法：`$\frac{1}{2}$` `$x^2$` `$\sqrt{x}$` `$\theta$` `$\to$` `$\approx$`。

3. **图形必须用 SVG 绘制**：线条、形状、箭头都是 SVG 元素。禁止用 Canvas（位图，缩放必糊）、禁止用位图截图充当矢量。

4. **教学准确性**：标注、比例、符号、方向必须符合学科规范（力的箭头从作用点沿方向画出、光路图光线带方向、电路符号标准化）。这是教材插图的命脉——一张画错的受力图会直接误导学生。

## 工作流程

### 1. 明确图的内容（信息不全就问）
用 AskUserQuestion 问清：学科与图类型（几何/力学/电学/光学/函数…）、要表达什么（哪个原理/哪道题）、关键要素（哪些力、哪些点、哪些量）。宁可多问一句，不要画错重画。

### 2. 设计 SVG 结构与 LaTeX 标注
规划：画布尺寸（默认 720×420）、坐标系/基准线、主要几何元素（用哪类线型）、需要的数学标注（变量、符号、公式）及其大致坐标。

### 3. 基于 template.html 生成自包含 HTML
复制 `${CLAUDE_SKILL_DIR}/assets/template.html` 为起点，替换三部分：`<svg>` 里的几何元素、`.anno` 标注的坐标（`left`/`top` = SVG 坐标）与 LaTeX 公式、`.figure-title` 标题与 `.figure-caption` 图注。

**关键技术点（务必遵守）**：SVG 只画线条/形状，数学标注用 `<span class="anno">` 绝对定位叠加——因为 SVG `<text>` 不能承载 MathJax 渲染的公式。由于模板里 `viewBox` 与 `width/height` 一致，叠加标注的 `left`/`top` 直接填 SVG 坐标即可。各类图的画法见 `${CLAUDE_SKILL_DIR}/references/svg-drawing-guide.md`。

### 4. 视觉质检（用视觉模型看截图）
生成 HTML 后，用 Playwright/webapp-testing 打开截图，用视觉模型检查：
- 公式是否全部 LaTeX 渲染（无裸 Unicode、无未渲染的 `$`）
- 是否黑白矢量风格（无彩色/渐变）
- 线条是否精确、线型语义是否正确
- 标注位置是否对齐、有无重叠遮挡
- 学科内容是否准确

发现问题就回到第 3 步修正。

### 5. 导出高清 PNG
在浏览器中打开 HTML，点右上角"导出高清 PNG"按钮，下载后存到 `AI_output/`（文件名与内容相符）。导出依赖网络（MathJax/html-to-image 走 CDN）。导出细节与排坑见 `${CLAUDE_SKILL_DIR}/references/export-guide.md`。

## 参考资料

- `${CLAUDE_SKILL_DIR}/references/svg-drawing-guide.md` —— 坐标系、箭头、线型语义，以及受力图/光路图/电路图/函数图/几何图的 SVG 画法（画图前读对应章节）
- `${CLAUDE_SKILL_DIR}/references/latex-cheatsheet.md` —— 教材常用 LaTeX（希腊字母、上下标、向量、求和积分、物理符号、矩阵）+ 禁止 Unicode 对照表
- `${CLAUDE_SKILL_DIR}/references/export-guide.md` —— 高清 PNG 导出三要素与排错表
- `${CLAUDE_SKILL_DIR}/assets/template.html` —— 复制即用的黑白矢量模板

## 交付前自检清单

- [ ] 所有公式/符号都是 LaTeX（页面无残留未渲染的 `$`、无裸 Unicode 数学符号）
- [ ] 纯黑白矢量（截图里无彩色/渐变/阴影）
- [ ] 线型语义正确（实线/虚线/点划线/箭头各司其职）
- [ ] 标注位置准确、无重叠遮挡
- [ ] 学科内容正确（力的方向、光路、电路符号、几何关系）
- [ ] 导出的 PNG 高清、无左侧空白、公式字体不丢