napkin-sketchdocs 1.0.0 GitHub

The AI helpers: quickstart#

On this page

API hub · Reference · Quickstart · Cheatsheet

Experimental. The AI helpers run an agentic AI command-line tool that napkin-sketch does not ship, on your account and at its cost. They are new, and their commands, forms and files may change in a minor release.

The graphic-designer helper reads a graphic you already have into a design language and hands you a skill that draws new work in it; this is the shortest path from a clone to a branded graphic, using the asset and the brand files this repository ships.

The whole thing in four steps#

  1. Build the clone:
npm install
npm run build
  1. Run the tour. It leaves the tool installed and wired up rather than merely passing:
npm run test:graphic-design-api

It reads test/graphic-design-api/reference-graphics/created-svg_graphic-api.svg, writes a design language and a skill from it into your AI tool's skills folder, points that skill at the assets in test/graphic-design-api/test-assets/ through a resources.md, records what a bare request means, and draws card and cheatsheet into test/graphic-design-api/generated-graphics/, carrying the linked logo and footer. Open the PNGs.

  1. Ask your AI tool for a graphic. There is nothing to configure first, and both lines draw the same thing:
/graphic-design-api make a html cheatsheet. ensure to include linked assets
/graphic-design-api generate

The first matches cheatsheet to a drawing mode; the second matches nothing and falls through to the request the tour recorded. The second half of the first line is never needed: linked assets are included whenever resources.md names files that exist.

  1. Make it your brand with one edit to references/resources.md:
- GLOBAL_ASSETS: path/to/your/assets/
- brand name: Acme Corp

A worked example#

Every step the tour runs is a command you can run yourself, from the clone:

# 1. Capture the language, generate a skill, and register it. One command.
node ai-helper/graphic-designer/skills/design-language/scripts/generate-skill.mjs test/graphic-design-api/reference-graphics/created-svg_graphic-api.svg --to .claude/skills

# 2. See what the brand resolved to, after editing references/resources.md
node ai-helper/graphic-designer/skills/design-language/scripts/brand-resources.mjs --print

# 3. See what is wired up, and the exact command a request turns into
node ai-helper/graphic-designer/skills/design-language/scripts/brand-resources.mjs --registration

# 4. Draw
node .claude/skills/created-svg_graphic-api/scripts/make-created-svg_graphic-api.mjs --cheatsheet --out ./out

Step 1 writes references/graphic-design-api.json as its last act. That file is what makes step 4 unnecessary in practice: it records which script draws, which resources.md it draws with, where output goes, and what to draw when a request does not say. Asking for a graphic is then the whole of using it.

Check the result against the source the way the language was measured:

node ai-helper/graphic-designer/skills/design-language/scripts/analyze-media.mjs out/cheatsheet.png --colors 6

A right palette at a wrong ratio is the usual way a generated graphic drifts, and the shares show it where the eye does not.

A script from a sentence#

The scripting helper, plugged in the same way (/plugin install scripting@napkin-sketch, or npm run ai-helper -- --helper scripting), turns a request into a napkin script, which napkin-sketch checks, keeps and draws:

napkin-sketch draw --prompt "a three-box flowchart - Plan, Build, Ship - with arrows" --to svg,png

The script comes back as a .napkin file beside the drawings, so drawing it again needs no AI.

Where to go next#