Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

How-it-works diagrams: explainer, made in this run
Run 1How-it-works diagrams“Make a how-it-works picture for our refill service”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's modelFLUX.2 [dev]falFLUX.2 klein 9BCloudflare Workers AI
Tested with
Claude Code 2.1.322Claude Opus 5.51 real run, 9 Nov
Needs
Node 20+ChromeA fal or Cloudflare Workers AI key
Licence
Recaply licence

How-It-Works Diagrams

A step-by-step "how it works" picture in ink and watercolour on notebook paper, with every label in real type.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Makes how-it-works diagrams as one finished PNG for a post, lesson, slide or poster: ink and watercolour drawings on lined notebook paper with neat handwritten-style labels. The drawings come from a picture model and every word is set in real type on top, so labels are always spelled right. Best as a flow of 3 to 6 steps; other layouts work too. Needs a FAL_KEY or a Cloudflare Workers AI key; about $0.01 to $0.02 a drawing. Use when someone wants a "how it works" diagram, a process diagram, a step-by-step explainer picture or an illustrated guide to how something works.

By RecaplyUpdated 11 Nov

Install How-It-Works Diagrams

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/how-it-works-diagram/install.md and follow it to install the how-it-works-diagram skill from how-it-works-diagram.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who How-It-Works Diagrams is for

What you get

  • One explainer picture, with every label set in real type
  • Drawn as ink and watercolour drawings on lined notebook paper with neat handwritten-style labels
  • Labels spelled exactly; the model never draws words

Good fit

  • Product pages
  • Help articles
  • Onboarding

Not for

  • Charts that must show exact data
  • Pictures of real people

About this skill

You say

Make a how-it-works picture for our refill service

It said back

I made the picture: refill/explainer.png (3200×1400). It's ink and watercolour drawings on lined notebook paper, with the labels set in real type so they're spelled exactly right.

Layout: four steps in a row, left to right with arrows, in the same order as service.md:

1. Order online: order a refill pouch online.

2. It arrives: your pouch arrives in a paper envelope.

3. Pour it in: pour the refill into your glass bottle.

4. Send it back: return the empty pouch free and we reuse it.

Show more

What it did in run 1

  1. how-it-works-diagram
  2. ls -la && node .claude/skills/how-it-works-diagram/scripts/check.mjs
  3. ./service.md
  4. mkdir -p refill && cat > refill/plan.json <<'EOF' { "look": "field-notes", "layout": "flow", "size": [1600, "auto"], "title": "How refills work", "subtitle": "Keep your glass bottle and refill it from a pouch we reuse.", "items": [ { "label": "Order online", "note": "Order a refill pouch online.", "art": "a hand holding a soft plain flexible refill pouch with a screw cap, no markings" }, { "label": "It arrives", "note": "Your pouch arrives in a paper envelope.", "art": "a plain brown paper envelope on a doormat, slightly open with a soft pouch peeking out" }, { "label": "Pour it in", "note": "Pour the refill into your glass bottle.", "art": "a soft refill pouch pouring liquid into a clear glass bottle" }, { "label": "Send it back", "note": "Return the empty pouch free and we reuse it.", "art": "an empty flattened refill pouch being slipped into a plain paper envelope" } ] } EOF node .claude/skills/how-it-works-diagram/scripts/draw.mjs refill/plan.json
  5. ./refill/plan.json
  6. cd ./refill && node ../.claude/skills/how-it-works-diagram/scripts/draw.mjs plan.json && ls art
  7. ./refill/art/item-1.png
  8. ./refill/art/item-2.png
  9. ./refill/art/item-3.png
  10. ./refill/art/item-4.png
  11. ./refill/plan.json
  12. node ../.claude/skills/how-it-works-diagram/scripts/draw.mjs plan.json --only item-2
  13. ./refill/art/item-2.png
  14. node ../.claude/skills/how-it-works-diagram/scripts/compose.mjs plan.json
  15. ./refill/explainer.png
  16. Done

9 Nov 2026 · Claude Code 2.1.322 with Claude Opus 5.5 · 1 min 2 s · $0.29 of API use

Questions

Is How-It-Works Diagrams free?

No. How-It-Works Diagrams costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use How-It-Works Diagrams?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy How-It-Works Diagrams?

A ZIP of the whole skill folder (25 KB): the SKILL.md your agent follows and its 5 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install How-It-Works Diagrams?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./how-it-works-diagram with your agent's flag.

What do I get from How-It-Works Diagrams?

One explainer picture, with every label set in real type. Drawn as ink and watercolour drawings on lined notebook paper with neat handwritten-style labels. Labels spelled exactly; the model never draws words.

What does How-It-Works Diagrams need?

Node 20+, Chrome and a fal or Cloudflare Workers AI key (it reads FAL_KEY). Each use costs about $0.01 to $0.02 a drawing.

How big is How-It-Works Diagrams?

6 files, about 15,127 tokens in all. The SKILL.md is about 2,140 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 2 s to 1 min 2 s and $0.29 to $0.29 of API use each, in Claude Code with claude-opus-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name How-It-Works Diagrams to use it?

Type /how-it-works-diagram first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.