Blueprint Figure 是一个绘制静态 SVG 图解的技能，用于解释真实系统的一个机制。图解使用系统中的真实名称：id、字段名、方法名、状态码和序号。它位于浅色纸面板上，使用一小组具有固定含义的色相，在 640 单位宽度下于屏幕和印刷品中均保持可读。Claude、Cursor、Codex、OpenClaw、Hermes 或任何能读取 SKILL.md 的智能体都可以使用它。同级技能 course-style 保存完整的课程令牌；本技能复制其所需的令牌，因此可以独立工作。
用途
当课程、README 或手册需要展示系统各部分如何通信、存储数据或改变状态时使用。需要有捕获、日志、规格或源代码来提供真实名称，且论点符合下列九种类型之一。
不适用的情况：图解必须运动或响应滑块（使用同级技能 motion-figure）；主题是带深度和控件的物理机器讲解（使用同级技能 isometric-explainer）；数据是许多点上的数字图表（使用图表工具）；没有各部分的真实名称（先获取捕获或源代码）。
方法
先写论点：一句话，最多 28 个词，即图解要证明的内容。从下表选择一种类型；若两种都合适，就画两张图。从来源收集真实名称：参与方、字段、方法、代码、序号。绘制前先为图集编写色相表。在 640 单位网格上勾勒布局，内容保持在 x 20 到 x 620 之间。用脚本绘制，从 templates/figure.mjs 开始，不要手工编辑 SVG。运行脚本，它会在标签过小、过宽或超出图形时停止。运行 references/checks.md 中的检查，修复每个发现。将 SVG 渲染为 PNG，在 100% 和 50% 宽度下查看。编写图注：加粗论点、如何阅读图解，然后是来源。
九种类型
sequence：生命线上的参与方，时间向下，编号交换。structure：一条记录、对象或模式的解剖。flow：数据经过的阶段，谁写谁读。comparison：同一问题的两个答案并排。timeline：在编号轴（如提交序列或时间）上的轨道。tree：所有权、包含或委托。state：带转换的状态机。decision：某处失败及每种结果的含义。layers：层堆栈及每层拥有的部分。每种类型的布局数字见 references/kinds.md。
图解展示什么
用真实名称展示真实系统，绝不画“Component A”之类的通用框。绝不画统计卡、进度条或装饰图标。每张图一个论点。比较主题的两种行为，绝不与你自己项目的早期构建比较。按捕获中发生的顺序为序列中的交换编号。
颜色
十种色相：grey、blue、teal、violet、green、amber、plum、olive、indigo、rose。每种色相有 ink 和 fill 令牌。一个色相在一个图集中含义相同。四种含义固定：rose 表示失败（错误、崩溃、中止、丢失工作）；grey 表示主题之外（宿主、操作者、范围外）；amber 表示生命周期（任务、阶段、状态机）；teal 表示持久状态（存储和已提交记录）。其余六种色相每个图集分配一次，并将表写在页面或手册前言中。每种颜色写作 var(--m-<token>, <light hex>)，例如 var(--m-rose-ink, #b0344d)。宿主页面提供深色值，README 显示浅色十六进制。所有浅色和深色值见 references/grammar.md。
箭头
实线 ink：调用或请求。虚线 ink：回复。实线 teal：持久写入。虚线 amber：状态变化。实线 plum：模型调用或计算。虚线 olive：系统外的影响。点线 indigo：流或事件。虚线 rose：失败。线宽 1.2。虚线为 5 4。点线为 1.5 3.5，圆头。每种色相使用一个箭头标记，id 为 <figure-id>-head-<hue>。每个箭头在目标边框前 1 单位结束。图集的第一个图 Figure 0.1 展示该图集使用的每种箭头样式。
边框
实线边框（色相 ink）：正常部分或状态。虚线边框：中断、可选或不存在。双边框（内缩 3 单位的第二个 rect）：终止状态。阴影填充：时间线条上的等待时间，绝不在其上放文字。
可读性规则
在 640 单位宽度下文字至少 11 单位，即屏幕上 11 像素、印刷约 8 点。框标题为 12.5 粗体等宽。子行为 11 衬线。箭头标签为 11.5。注释为 11 衬线。每个衬线行自带字体：class="m-serif" 和 font-family="Source Serif 4, Georgia, serif"，这样图形在任何页面上内联、README 图像和手册中看起来都一样。Kicker 为 11，大写，字母间距 1.2，ink-mute 色。标签中无省略号。文字不重叠。阴影填充上无文字。文字不被线穿过。放不下的标签用引线放到外面或放入编号键，绝不减小字号。每个箭头标签放在面板颜色的 knock patch 上，class="m-knock"。先画线，再画 knock patch，最后画标签。knock patch 隐藏线，但绝不算作标签必须适应的框。放置前测量文字：等宽宽度为字符数 × 字号 × 0.6，衬线宽度为字符数 × 字号 × 0.54。
技术规则
根元素：viewBox="0 0 640 H"，H 最多 760，role="img"，aria-labelledby="<id>-title <id>-desc"。根字体和 ink：font-family="JetBrains Mono, ui-monospace, monospace" 和 fill="var(--m-ink, #1a1a1a)"。衬线行按上述设置自己的 font-family。根的直接子元素包含 <title> 和至少 40 字符的 <desc>。desc 按阅读顺序命名每个部分和每次交换。每个 id 以图形 id 开头，如 fig-4-1-head-amber。图形 id 为小写单词和数字用连字符连接，如 fig-4-1。只使用 references/checks.md 中列出的元素和属性。无 style、无脚本、无事件处理器、无链接、无图像。transform 仅作为 <g> 上的 translate()。每行文字一个 <text> 元素。文件最多 40 KB，最多 450 个绘制元素。
图注
将图注放在 SVG 周围的页面中，不要放在 SVG 内。以加粗论点开头：一句话，最多 28 词，以句号结尾。说明如何阅读图解，如“从上到下阅读”。命名来源，如捕获文件。在手册中，用围栏块声明图形：
id: fig-4-1
kind: state
title: the task lifecycle
claim: A task ends in one of four terminal states and never leaves one.
caption: Read left to right. Dashed borders are interrupted states. From capture/out/task-states.txt.
在课程或 README 中，将 SVG 放入图像标签或内联，然后图注作为其下的段落。
保持来源和输出在一起
将图形脚本保存在 SVG 旁边，如 figures/src/fig-4-1.js 和 figures/fig-4-1.svg。每次从脚本构建 SVG。构建后绝不手工编辑 SVG。提交前再次构建并确认提交的 SVG 等于脚本输出。
完成前检查
论点是至多 28 词的一句话。每个标签都是来源中的真实名称，没有“Component A”。图形使用九种类型之一。Rose 表示失败，grey 表示外部，amber 表示生命周期，teal 表示持久状态。每个箭头使用八种样式之一且含义符合表格。viewBox 宽度为 640，高度最多 760。存在 role="img"、aria-labelledby、<title> 和 40 字符以上的 <desc>。每个 id 以图形 id 开头。每种颜色为 var(--m-<token>, <light hex>) 且十六进制正确。没有文字低于 11 单位、超出 viewBox、覆盖其他文字或被线穿过。任何标签中无省略号。每个衬线行有 font-family 属性，根有 ink 填充，因此图形不需要宿主样式表。无 style、script、link、image，或 <g> 上 translate() 以外的 transform。文件最多 40 KB。PNG 渲染在 50% 宽度下可读。图注有加粗论点、阅读顺序和来源。提交的 SVG 等于脚本输出。
文件
references/kinds.md：九种类型各自的布局数字，以及 figure 0.1。references/grammar.md：浅色和深色令牌、色相含义、箭头描边、标记、文字大小和度量、形状、可选节拍。references/checks.md：每项检查及其测试、允许的元素和属性、图注规则。templates/figure.mjs：自包含的 Node 脚本，带小型图形工具包和一个序列图。运行 node templates/figure.mjs out.svg 写出 SVG，或省略路径以打印。在 AI Engineering from Scratch 仓库内，另见 manuals/_shared/figkit.js（完整工具包）、manuals/_shared/templates/（每种类型一个脚本）和 scripts/audit_manuals.js（图形 lint）。