ai-engineering-from-scratch-zh is a Chinese-language adaptation of a course that teaches AI engineering by implementing algorithms, tools, and agents from the ground up. It is for learners following a 20-stage path across mathematics, machine learning, agent systems, and production topics, with lessons using Python, TypeScript, Rust, and Julia. The catalogue entries provide agent skills and instructions associated with the course.
Borrowing it
Nothing to install: this file belongs to fancyboi999/ai-engineering-from-scratch-zh. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/fancyboi999/ai-engineering-from-scratch-zh/main/.claude/skills/blueprint-figure/SKILL.mdgit clone --depth 1 https://github.com/fancyboi999/ai-engineering-from-scratch-zhWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/fancyboi999/ai-engineering-from-scratch-zh/blueprint-figure)<a href="https://agentmods.dev/skills/fancyboi999/ai-engineering-from-scratch-zh/blueprint-figure"><img src="https://agentmods.dev/badge/skills/fancyboi999/ai-engineering-from-scratch-zh/blueprint-figure/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/fancyboi999/ai-engineering-from-scratch-zh/blueprint-figure"><img src="https://agentmods.dev/badge/skills/fancyboi999/ai-engineering-from-scratch-zh/blueprint-figure.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00097 | $0.02675 |
| Opus 5.5 | $0.00039 | $0.01070 |
| Sonnet 5.5 | $0.00019 | $0.00535 |
| Haiku 4.5 | $0.00010 | $0.00267 |
Grade A, and why
blueprint-figure scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 189 lines — stays where its author put it; the contents beside it link to each section on GitHub.
蓝图风格图表
每张静态 SVG 解释真实系统的一个机制，使用系统中的真实 ID、字段、方法、状态码与序号。图表使用浅色纸张面板和少量含义固定的色相，在屏幕和打印的 640 单位宽度下保持清晰。Claude、Cursor、Codex、OpenClaw、Hermes 及所有读取 SKILL.md 的 agent 都可使用。course-style 保存完整课程 token，本技能复制所需值，可独立使用。
适用情况
- 课程、README 或手册需要解释系统部件如何通信、存储数据或改变状态。
- 已有运行记录、日志、规范或源代码，可取得真实名称。
- 断言适合下方九种图形之一。
使用其他方式的情况
- 图表要动或响应滑块：使用
motion-figure。 - 有深度和控件的实体机器讲解：使用
isometric-explainer。 - 多个数据点的数值图：使用绘图工具。
- 没有部件的真实名称：先取得运行记录或源代码。
方法
- 先写图表要证明的一句断言，英文最多 28 词。
- 选一种图形；两种图形都适合时，拆为两张图。
- 从来源收集真实参与方、字段、方法、状态码和序号。
- 绘图前为整组图写好语义色表，见下方颜色规则。
- 在 640 单位网格上安排布局，内容位于 x 20 至 x 620。
- 从
templates/figure.mjs开始，用脚本绘制，不手改 SVG。 - 运行脚本，标签过小、过宽或越界时必须停止。
- 运行
references/checks.md的检查，修复所有发现。 - 渲染为 PNG，分别按原尺寸和 50% 宽度查看。
- 写图注：粗体断言、读图顺序、来源。
九种图形
| 类型 | 用途 |
|---|---|
sequence |
参与方生命线，时间向下，交互编号 |
structure |
一个记录、对象或 schema 的结构 |
flow |
数据流经的阶段，以及谁写谁读 |
comparison |
并排展示同一问题的两种答案 |
timeline |
沿提交序号或时间等数轴的多条轨道 |
tree |
所有权、包含关系、委托 |
state |
状态机与转换 |
decision |
失败位置与各结果含义 |
layers |
分层结构与各层负责的部件 |
各类型的布局尺寸见 references/kinds.md。
图表表达什么
- 使用真实系统和真实名称，不用“组件 A”等泛化方框。
- 不画统计卡、进度条或装饰图标。
- 每图一个断言。
- 对比主题的两种行为，不对比自己项目的旧版本。
- 时序图按运行记录中的发生顺序给交互编号。
颜色
十种色相为 grey、blue、teal、violet、green、amber、plum、olive、indigo、rose。每种都有 ink 和 fill token，同一组图含义一致。
固定四种语义：
| 色相 | 含义 |
|---|---|
rose |
失败：错误、崩溃、中止、工作丢失 |
grey |
主题外：宿主、操作者、范围外 |
amber |
生命周期：任务、阶段、状态机 |
teal |
持久状态：存储、已提交记录 |
其他六种每组只定义一次，记录在页面或手册前言中。
每种颜色写作 var(--m-<token>, <light hex>)，例如 var(--m-rose-ink, #b0344d)。宿主提供深色值，README 使用浅色默认值。完整值见 references/grammar.md。
箭头
| 样式 | 含义 |
|---|---|
| 墨色实线 | 调用或请求 |
| 墨色虚线 | 响应 |
| 青色实线 | 持久写入 |
| 琥珀色虚线 | 状态变化 |
| 梅色实线 | 模型调用或计算 |
| 橄榄色虚线 | 系统外部影响 |
| 靛色点线 | 流或事件 |
| 玫红虚线 | 失败 |
- 线宽 1.2。虚线
5 4，点线1.5 3.5，点线使用圆端点。 - 每种色相一个箭头标记，ID 为
<figure-id>-head-<hue>。 - 箭头在目标边框前 1 单位结束。
- 每组第一张图 0.1 展示该组使用的每种箭头样式。
边框
- 色相 ink 实线：普通部件或状态。
- 虚线：中断、可选或不存在。
- 双边框：第二个矩形内缩 3 单位，表示终止状态。
- 斜线填充：时间线上的等待时间，不能覆盖文字。
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 189 lines · 97 tokens per session scan A 6ef3599787b2
blueprint-figure is a skill published in the GitHub repository fancyboi999/ai-engineering-from-scratch-zh (1,276 stars, last pushed 4d ago), licensed MIT. It adds 97 tokens to every session and 2,675 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-20.
Other skills, from other repositories
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize…
fireworks-tech-graph
Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or workflow diagrams; not photos, raster art or statistical charts.
architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
Folio Boards
Generate Excalidraw boards with createboard's sketch DSL and tidy EXISTING boards with boardops (align/distribute/autolayout) — layout method, palette, worked examples.
academic-plotting
Generates publication-quality figures for ML papers from research context. Given a paper section or description, extracts system components and relationships to generate architecture diagrams via Gemini. Given experiment results or data, auto-selects chart type and generates data-driven figures via matplotlib/seaborn.…
globestudio
Creates, edits and embeds dotted world maps and animated 3D globes with Globestudio (globestudio.app), a free open source studio with 21 looks. Use when the user wants a dotted map, a dotted or 3D globe, a spinning earth or a stylized world map for a website hero, background, slide, social post or video; when they…