Glyph kitTo draw a figure
4.0 μsMedian, in Node, with no browser and no pixels.
Free · MIT · 51 kinds · v0.1.0
Glyph
kit.
Get the point across clearly, cheaply, in an aesthetic that doesn't date.
A skill for Claude Code and Codex. Research, flows, wireframes, plans and motion, drawn in four shades and a few lines. Code draws them from the numbers, so they're exact, and the same file becomes a deck, a report or a prototype when the work needs one.
Any agent: Claude Code, Codex, Cursor and others
npx skills add alextraykov/glyph-kitClaude Code, as a plugin that updates
/plugin marketplace add alextraykov/glyph-kit/plugin install glyph-kit@traykovOr by hand: unzip it into ~/.claude/skills/ (Claude Code) or ~/.agents/skills/ (Codex)
Download the kit v0.1.0 · zip · about 0.5 MB
8 came back 29 shipped
▓────────┐ ┌─────·░▒▓ ┌────────┐ ░░░░░░░░░░
▒ DESIGN │░▒▓─────►│ BUILD │░▒▓─░▒▓─►│ QA │░▒▓─────►░ SHIP ░
░·───────┘ └────────┘ └─▓▒░·───┘ ░░░░░░░░░░
▲ │
│ │
│ │
└─────▓▒░──────────┘
about 1 in 3 comes back from QA
01 / Cheap
Less to make,
less to send.
Every figure and slide burns tokens and time. Measured on 48 examples from the kit:
Size as text
354 bytes65× smaller than the same figure as an image (22.8 KB).
Image tokens for that picture
297Median, from 76 to 918, for a model to look at it.
Tokens for the text
Not yetBlock characters are rare and three bytes each, so a dense figure can cost more as text. It gets measured before it gets claimed.
02 / Moving
Diagrams
that move.
Work flowing, people leaving, a queue backing up. A few lines of data become one page that plays, and a still for the doc.
┌────────────────────────────────┐ TIME │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ ╷ ╷ ╷ ╷ │ ░░▒▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░ │ ═════════════════════════════════▓ │ ▒▒▓▓▓▓▓▓▓▒▒▒▒░░░░░░░░░░░░░▒▒▒▒ │ 0 500 1000 1500 │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░░░░▒▒▒▓▓▓▓ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓ │ │ │ ▓ 0ms tap │ Weekly report │ │ │ ▓ 100ms skeleton │ Signups up 12% on last week, │ │ most of it from the new invite │ ▓ 700ms text │ flow. Activation is flat. │ │ │ ▓ 1100ms image └────────────────────────────────┘ showing: image
READY 7 DESIGN 4/4 REVIEW 2/2 BUILD 0/4 DONE 12 ──────────── ──────────── ──────────── ──────────── ──────────── ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▲ Review holds everything up
Editing
┌───────────── no network ────────────┐
│ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ EDITING │── save ─►│ SAVING │─── ok ──►│ SAVED │ │ FAILED │
└─·▓▒░·───┘ └─────────┘ └─────────┘ └─────────┘
▲ ▲ │ │
│ └─────────────── retry ───────────────┘
│ │
└──────────────── type ───────────────┘
Visited ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒ 12,400 · ▒░ ▓ Signed up ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒ 6,100 49% ░ ▓ ▓ Activated ▒▒▒▒▒▒▒▒ 2,300 38% ▒ Paid ▒▒ 610 27%
1% 5% 25% 50% 100% ROLLOUT ▓━━━━━━━━━━━▓────────────┼───────────┼───────────┼ PEOPLE ··············▓······················▓············ 5% on ·········▓··········▓····························· ·················································· ········▓·················▓···▓▓········▓·▓······· ERROR RATE limit 2% ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒▒▒▒▒▒ ▒▒ ▒▒▒▒▒ ▒▒▒▒▒▒▒ ▒▒▒▒▒▒ holding at 5%, watching
Your own
Ask for one.
"A moving diagram of our review queue, with a limit of two." The agent writes a few lines of data, the kit draws it, and it checks the data first: a funnel can't grow, a state machine can't skip a transition.
The six moving kinds →03 / Areas
Eight parts
of the job.
45 kinds of figure. Each area has its own guide, so the agent reads only the one the task needs.
See every kind →Research data
disagree│agree Easy to find export ████▒▒▒▒▒▒░░│░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██ 65% agree Trust the numbers ██████▒▒▒▒▒▒▒▒▒▒░░░░│░░░░▒▒▒▒▒▒████ 25% agree Would use it weekly ██▒▒▒▒░░░░░│░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒█ 60% agree █ strongly ▒ somewhat ░ neutral SAMPLE DATA
Likert answers · Themes by participant · Affinity counts · Quote card · Task results · Journey feeling
Experiments and metrics
visited ██████████████████████████████ 12,400 100% signed up ██████████████▊ 6,100 49% ▼ 49% kept activated █████▋ 2,300 19% ▼ 38% kept paid █▌ 610 5% ▼ 27% kept SAMPLE DATA
Bar chart · Comparison · Forecast · Meter · Sparkline · Heatmap · Calendar strip · Funnel · Retention cohorts · Test result · Metric panel
UX flows
┌─────────────────┐ │ open export │ └────────┬────────┘ │ ▼ ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐ ┌─────────────────┐ ┆ has data? ├─── no ───►│ empty state │ └┄┄┄┄┄┄┄┄┬┄┄┄┄┄┄┄┄┘ │ → import data │ │ yes └─────────────────┘ ▼ ┌─────────────────┐ │ choose format │ └────────┬────────┘ │ ▼ ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐ ┌───────────────────┐ ┆ file ready? ├─── no ───►│ show error │ └┄┄┄┄┄┄┄┄┬┄┄┄┄┄┄┄┄┘ │ → choose format │ │ yes └───────────────────┘ ▼ ╔═════════════════╗ ║ download ║ ╚═════════════════╝ SAMPLE DATA
Linear flow · Flow with decisions · State machine · Journey map · Tree or sitemap
Planning
┌─ NOW ──────────────┬─ NEXT ─────────────┬─ LATER ────────────┐ │ · Export to CSV │ · Saved views │ · Scheduled │ │ · Fix date parsing │ · Keyboard │ reports │ │ on import │ shortcuts for │ │ │ │ tables │ │ └────────────────────┴────────────────────┴────────────────────┘ SAMPLE DATA
Now, next, later · Impact and effort · Swimlane · Timeline · Status key · Decision log
Wireframes
╔═ Settings ═════════════════════════════════╗ ║ Profile │ Notifications │ Billing ║ ║ ━━━━━━━━━━━━━━━ ║ ║ ║ ║ Email me when a report is ready [ ■] on ║ [1] ║ Weekly summary [■ ] off ║ ║ Digest day [ Monday ▼] ║ ║ Send to [team@example.com_______________] ║ ╠════════════════════════════════════════════╣ ║ [ Cancel ] [[ Save ]] ║ [2] ╚════════════════════════════════════════════╝ [1] Off by default for new teams. [2] Save is disabled until something changes. SAMPLE DATA
Screen wireframe · Responsive pair
Design system
space-1 █ 4px space-2 ██ 8px space-3 ████ 16px space-4 ██████ 24px space-5 ██████████ 40px One █ is 4px. SAMPLE DATA
Spacing scale · Type scale · Contrast check · Component states · Layer stack · Token table · Table
Handoff and QA
│◄ 16 ►│◄────────────── content 320 ───────────────►│◄ 16 ►│ SAMPLE DATA
Spacing redline · QA checklist · Before and after
Motion
┌─ Toast enters ───────────────────────────────────────┐ │ why Confirm the save without taking focus │ │ when Save succeeds │ │ change below the edge, transparent → in place, │ │ opaque │ │ timing ▕████████············▏ 200ms │ │ easing █▆▅▄▃▂▁▁ reveal │ │ reduced Appears in place, no movement; stays for │ │ the same time │ └──────────────────────────────────────────────────────┘ SAMPLE DATA
Motion timing · Motion intent · Transition spec · Stagger · Frame strip · Easing tokens
04 / Guardrails
Made-up numbers
can't pass as real.
A kit that draws exactly will draw an invention exactly. So it checks.
- No source, no numbers. A figure with numbers is refused until it says where they came from.
- Sample data is stamped. An illustrative source puts SAMPLE DATA on the figure in every format.
- Data from your files. Point a spec at a CSV or JSON file and the numbers come from it, not from a model's memory.
- Data that can't be true is refused. A funnel that grows, a value outside its range, dates out of order, each with a sentence saying what's wrong.
- Ask, don't invent. The skill tells the agent to ask for missing data.
- Specs between agents, drawings for people. A compact plain-ASCII form for the times a drawing has to go into a model's context.
05 / Formats
One file,
every fidelity.
Markdown and MDX for docs, an SVG or PNG for a slide, a deck you present, a report someone prints, a prototype someone clicks, or a screen built with your design system's real components. Here, a real motion audit of Pave's front end.
