More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsnote-fig — article figures, checked for phone readability
Generates article figures from a JSON spec and fails the ones that would be too small to read on a phone.
Free
note-fig — article figures, checked for phone readability
Example session with this skill installed
I just finished a draft about why our onboarding emails get ignored. It is about
1,800 words, all prose, no images. Add figures where they would actually help,
and make sure they are readable on a phone.
[draft pasted below]
- Read your context and instructions
- Compiled the note-fig
Summary
Read the draft and found four places where a figure replaces a paragraph the
reader would otherwise have to hold in their head. Below is the plan, then the
first figure built and verified.
Where the figures go
| # | After the line… | Shape | Why this shape |
|---|---|---|---|
| 1 | "…so the email arrives at the worst possible moment." | timeline | The argument is about ordering, not quantity |
| 2 | "…three things we changed." | steps | Sequence the reader is meant to follow |
| 3 | "Open rate went from 11% to 34%." | bar | Two numbers, one comparison |
| 4 | "The point is not the subject line." | points | Takeaways at the close |
Say the word and I will build 2–4. Here is #3, done.
The spec
{"type":"bar","title":"Open rate, before and after",
"items":[
{"label":"Before","value":11,"unit":"%"},
{"label":"After","value":34,"unit":"%"}
],
"key":1,
"note":"Measured over 6 sends, Aug–Sep"}
The check
✓ figs/03_open_rate.png
2480×1432px ／ PC 620×358pt ／ phone 343×198pt
1 figure ／ error 0 ／ warn 0
Both labels sit above the minimum type size at phone width, the title fits on
one line, and the accent colour lands on one bar only — the "After" one, which
is the number the sentence is about.
Next steps
- Figures 1, 2 and 4 are specced but not built. Say which you want.
- The 34% is taken from your draft. If the real figure moved since you wrote it,
change the one number in the JSON and re-run; nothing else needs touching. _preview.htmlshows both figures at true phone and desktop size. Open it
before you publish — it is faster than guessing.
Connects securely to your tools. The creator never sees your data.
About this skill
The problem
You write an article, then spend an hour in a design tool making one diagram. Or you ask an image model for a figure and get text that is subtly wrong and never reproducible.
And then there is the part nobody checks: most readers are on a phone. A figure composed on a 1240px canvas is displayed at 343pt on a phone. Type that looked comfortable while you were making it arrives at around 8px. It is there, but nobody reads it.
What this does
note-fig turns a small JSON file into a finished PNG, and refuses to pass a figure whose text would be unreadable at phone size.
No image generation. No design tool. The figure is composed in HTML with your own tokens and screenshotted by headless Chrome, so the same input always produces the same output, and the characters are never garbled.
The 13 shapes
Pick by what the sentence is doing, not by what looks nice.
| You are saying | Type |
|---|---|
| These options differ on these points | table |
| A versus B, before and after | compare |
| This, then this, then this | flow |
| Do these in order | steps |
| This happened over time | timeline |
| These sit on top of each other | layers |
| This is bigger than that | bar |
| This changed over time | line |
| This is the breakdown | share |
| This number matters | stat |
| These are the takeaways | points |
| Here is the actual screen | window |
| Here is how the conversation went | chat |
What it checks, every time
- Minimum type size. Anything that would fall below ~12px on a phone is an error, not a warning.
- 28 characters per line. Past that, the line is too dense at phone width.
- Wrapped labels and orphans. A heading that breaks onto a second line, or a last line holding one character, is flagged.
- Overflow and clipping. Text pushed outside its box fails the run.
- Three columns maximum in a table, because a fourth cannot hold a word at 343pt.
A run that produces an error still writes the PNG, but exits non-zero — so you cannot ship a broken figure without noticing.
Bring your own look
Colours, type scale and spacing live in one tokens.css. Point the renderer at
your own brand folder and every shape follows it. The included set is the one
this tool was built for; replacing it does not require touching the engine.
What you need
Python 3.9+ and Google Chrome (Chromium or Edge also work). Nothing from pip.
Honest limits
- The measurements behind the thresholds were taken on note.com (343pt on a phone, 620pt on desktop). Other platforms are close but not identical.
- The documentation (
PLAYBOOK.md, the catalog) is written in Japanese. The skill itself works in any language, and an agent reads the Japanese fine, but a human skimming the docs will want a translator. - It cannot enlarge text inside a screenshot you supply. Crop first.
MIT licensed. Source: https://github.com/bigtree1984/note_fig
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 11 days ago
- Free to download with an account