Blueprint Figure
Draws static SVG figures for lessons and manuals in one consistent blueprint style.
Install
npx skills add rohitg00/ai-engineering-from-scratch --skill blueprint-figure -g -a claude-code -y- Repository
- rohitg00/ai-engineering-from-scratch76.2k
- Category
- Design
- Updated
- 5d ago
- License
- MIT
- Context cost
- Mediumabout 2,410 tokens
- Runs scripts
- Yes, review before use
What it does
Draws static SVG figures for lessons, READMEs and manuals in the AI Engineering from Scratch look: paper panel, blueprint accent, nine figure kinds, fixed hue meanings, eight arrow styles, and checks for legibility and markup. Trigger phrases: "draw a figure", "blueprint figure", "sequence figure", "state machine figure", "figure for this lesson", "add a diagram to the manual".
Blueprint Figure
This skill draws one static SVG figure that explains one mechanism of a real system. The figure uses the real names from the system: ids, field names, method names, status codes and sequence numbers. It sits on a light paper panel and uses a small set of hues with fixed meanings. It stays readable at 640 units wide on screen and in print. Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md can use it. The sibling skill course-style holds the full course tokens. This skill copies the tokens it needs, so it works alone.
When to use
- A lesson, README or manual needs a picture of how parts of a system talk, store data, or change state.
- You have a capture, a log, a spec or source code that gives the real names.
- The claim fits one of the nine kinds below.
When not to use
- The figure must move or respond to a slider. Use the sibling skill
motion-figure. - The subject is a physical machine explainer with depth and controls. Use the sibling skill
isometric-explainer. - The data is a chart of numbers over many points. Use a chart tool.
- You do not have real names for the parts. Get a capture or a source first.
Method
- Write the claim first. One sentence, at most 28 words, that the figure proves.
- Pick one kind from the table below. If two kinds fit, draw two figures.
- Collect the real names from the source: parties, fields, methods, codes, sequence numbers.
- Write the hue table for the figure set before you draw (see "Colour").
- Sketch the layout on the 640-unit grid. Keep content between x 20 and x 620.
- Draw the figure with a script. Start from
templates/figure.mjs. Do not edit the SVG by hand. - Run the script. It stops on a label that is too small, too wide, or outside the figure.
- Run the checks in
references/checks.md. Fix every finding. - Render the SVG to PNG and look at it at 100% and at 50% width.
- Write the caption: the bold claim, how to read the figure, then the source.
