To draw a figure
4.0 μsMedian, no browser.
All labsFree · Skill for Claude Code and Codex
Glyph kit.
A skill for Claude Code and Codex. Lightweight docs and diagrams that people and AI can both read.
8 came back 29 shipped ▓────────┐ ┌─────·░▒▓ ┌────────┐ ░░░░░░░░░░ ▒ DESIGN │░▒▓─────►│ BUILD │░▒▓─░▒▓─►│ QA │░▒▓─────►░ SHIP ░ ░·───────┘ └────────┘ └─▓▒░·───┘ ░░░░░░░░░░ ▲ │ │ │ │ │ └─────▓▒░──────────┘ about 1 in 3 comes back from QA
01 Builder
Ask in words, get a figure.
Numbers you don't give are stamped as sample data.
What the agent wrote
02 Cost
Less to make. Less to send.
As text
354 bytes65× smaller than an image.
As an image, for a model
297 tokensMedian.
03 Motion
Six kinds that move.
The ask
Show signup to paid for the last 30 days as people, not percentages, moving: 12,400 visited, 6,100 signed up, 2,300 activated, 610 paid. These are sample numbers.
What the agent wrote
{
"kind": "funnel",
"title": "Signup to paid, last 30 days",
"intent": "Show where people leave, as people, not percentages.",
"source": "Illustrative: sample numbers.",
"data": {
"steps": [
{
"label": "Visited",
"value": 12400
},
{
"label": "Signed up",
"value": 6100
},
{
"label": "Activated",
"value": 2300
},
{
"label": "Paid",
"value": 610
}
]
}
}Visited ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒ 12,400 · ▒░ ▓ Signed up ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒ 6,100 49% ░ ▓ ▓ Activated ▒▒▒▒▒▒▒▒ 2,300 38% ▒ Paid ▒▒ 610 27%
The ask
Draw the states of saving a draft and play one path through it. States: editing, saving, saved, failed. Save goes from editing to saving, ok from saving to saved, no network from saving to failed, retry from failed to saving, and type from saved back to editing. Play it failing once, then saving, then back to editing.
What the agent wrote
{
"kind": "states",
"title": "Saving a draft",
"intent": "Agree every state of save, including the failure and the retry, before anything is drawn.",
"source": "Illustrative.",
"data": {
"states": [
"Editing",
"Saving",
"Saved",
"Failed"
],
"transitions": [
{
"from": "Editing",
"to": "Saving",
"label": "save"
},
{
"from": "Saving",
"to": "Saved",
"label": "ok"
},
{
"from": "Saving",
"to": "Failed",
"label": "no network"
},
{
"from": "Failed",
"to": "Saving",
"label": "retry"
},
{
"from": "Saved",
"to": "Editing",
"label": "type"
}
],
"path": [
"Editing",
"Saving",
"Failed",
"Saving",
"Saved",
"Editing"
]
}
}Editing
┌───────────── no network ────────────┐
│ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ EDITING │── save ─►│ SAVING │─── ok ──►│ SAVED │ │ FAILED │
└─·▓▒░·───┘ └─────────┘ └─────────┘ └─────────┘
▲ ▲ │ │
│ └─────────────── retry ───────────────┘
│ │
└──────────────── type ───────────────┘
The ask
Show why work waits, moving: Ready, Design (limit 4, a card stays 14), Review (limit 2, a card stays 30), Build (limit 4, a card stays 16), Done. Review is the bottleneck. Sample numbers.
What the agent wrote
{
"kind": "queue",
"title": "Review is the bottleneck",
"intent": "Show why work waits: one column with a low limit and slow reviews.",
"source": "Illustrative.",
"data": {
"columns": [
{
"label": "Ready",
"pace": 0
},
{
"label": "Design",
"limit": 4,
"pace": 14
},
{
"label": "Review",
"limit": 2,
"pace": 30
},
{
"label": "Build",
"limit": 4,
"pace": 16
},
{
"label": "Done"
}
]
}
}READY 7 DESIGN 4/4 REVIEW 2/2 BUILD 0/4 DONE 12 ──────────── ──────────── ──────────── ──────────── ──────────── ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▒▒▒▒▒ ▲ Review holds everything up
The ask
Draw the rollout of the new editor as a moving diagram: 1, 5, 25, 50 then 100 percent, guarded by error rate at 2 percent, and show it tripping at 25.
What the agent wrote
{
"kind": "rollout",
"title": "Rolling out the new editor",
"intent": "Agree the stages, the guard and what happens when it trips.",
"source": "Illustrative.",
"data": {
"stages": [
1,
5,
25,
50,
100
],
"metric": "Error rate",
"limit": 2,
"breachAt": 25
}
}1% 5% 25% 50% 100% ROLLOUT ▓━━━━━━━━━━━▓────────────┼───────────┼───────────┼ PEOPLE ··············▓······················▓············ 5% on ·········▓··········▓····························· ·················································· ········▓·················▓···▓▓········▓·▓······· ERROR RATE limit 2% ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒▒▒▒▒▒ ▒▒ ▒▒▒▒▒ ▒▒▒▒▒▒▒ ▒▒▒▒▒▒ holding at 5%, watching
The ask
Show what someone sees in the first two seconds of opening a report, moving: the tap, a skeleton at 100 ms, the text at 700 ms, the image at 1,100 ms, done by 1.8 seconds. Illustrative timings.
What the agent wrote
{
"kind": "loading",
"title": "Opening a report",
"intent": "Agree what someone sees in the first two seconds.",
"source": "Illustrative timings.",
"data": {
"duration": 1800,
"phases": [
{
"at": 0,
"show": "tap"
},
{
"at": 100,
"show": "skeleton"
},
{
"at": 700,
"show": "text"
},
{
"at": 1100,
"show": "image"
}
]
}
}┌────────────────────────────────┐ 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
Arguments too
Not only numbers.
The same grid carries an argument. Below are two of five versions of one idea, drawn for a note on what pace costs: gates against trust, and perfectionism against pace.
Read The price of paceENTERPRISE nine gates, then maybe ship TRUST ▓░·········· low EXPERTISE ▓▓▓▓▓▓▓▓▓▓▓▓ blocked TRIO ALIGN AUDIT LEADERSHIP TRIO REVIEW LEADERSHIP ┌─────────┐ ┃ ┃ ┃ ┃ ┃ ┃ ▓ ┃ ┃ ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐ │ EXPERT │ ▓▓▒▓▒▓▒▓▒▓┃──────┃──────┃──────┃──────┃──────┃───░▒▓▒──────┃──────┃────────►┆ SHIP? ┆ └─────────┘ ┃ ┃ ┃ ┃ ┃ ┃ ▓ ┃ ┃ └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘ REVIEW WIDE REVIEW ITERATE WHOLE TEAM LEAN TEAM experts trusted to ship TRUST ▓▓▓▓▓▓▓▓▓▓▓░ high EXPERTISE ▓▓▓▓▓▓▓▓▓▓▓▓ flowing QUICK CHECK ┌─────────┐ ╎ ┌──────────────┐ │ EXPERT │ ────────░▒▓───────░▒▓───────░▒▓───────░▒▓───────░▒▓───────░▒▓───────░▒▓────►│ SHIPPED 16 │ └─────────┘ ╎ └──────────────┘ ▲ │ └────▓▒░───────▓▒░───────▓▒░───────▓▒░───────▓▒░───────▓▒░───────▓▒░───────▓▒░───────▓▒░─┘ learn, then go again
PERFECTIONISM fear of shipping ┌───────┐ ┌──────────┐ ┌──────────┐ ┌───────·░▒▒ ┌──────────────┐ │ IDEA │ ──────────│ POLISH │──────│ RE-CHECK │──────│ SIGN-OFF │───────────►│ SHIPPED 0 │ └───────┘ └──────────┘ └──────────┘ └──────────┘ └──────────────┘ ▓▓▓▓▓▓░····· PACE ship, learn, ship again ┌───────┐ ┌──────────────┐ │ IDEAS │ ──░▒▓────░▒▓────░▒▓────░▒▓────░▒▓───▒───────░▒▓────░▒▓────░▒▓────░▒▓─►│ SHIPPED 14 │ └───────┘ └──────────────┘ BROKE 6 ╷ · · · ╷ · · · ╷ · · · ╷ · · · ╷ · · · ╷ ▓ · · ╷ · · · ╷ · · · ╷ · · TIME ┼═══════┼═══════┼═══════┼═══════┼═══════┼═▓─────┼───────┼───────┼──── 14:15
04 Coverage
45 kinds. Eight areas.
Research data
The ask Chart how 20 people rated the export flow, strongly disagree to strongly agree. Easy to find export: 2, 3, 2, 8, 5. Trust the numbers: 6, 5, 4, 3, 2. Would use it weekly: 1, 2, 5, 7, 5. It's sample data. I want to see where opinion splits before we pick what to fix.
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
The ask Draw our signup funnel for the last 30 days: 12,400 visited, 6,100 signed up, 2,300 activated, 610 paid. Sample data. A still figure for a doc.
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
The ask Map the export flow with its failure paths: open export, check there's data (if not, an empty state that sends you to import data), choose a format, check the file is ready (if not, show an error and go back to choosing a format), then download.
┌─────────────────┐ │ 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
The ask Make a now, next, later roadmap. Now: export to CSV, fix date parsing on import. Next: saved views, keyboard shortcuts for tables. Later: scheduled reports.
┌─ 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
The ask Wireframe the notification settings screen: tabs for profile, notifications and billing with notifications selected; a toggle "Email me when a report is ready" that's on, noted as off by default for new teams; a weekly summary toggle that's off; a digest day select set to Monday; a send-to field with team@example.com; then cancel and save, right aligned, noted that save is disabled until something changes.
╔═ 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
The ask Show our spacing tokens as a scale: space-1 is 4, space-2 is 8, space-3 is 16, space-4 is 24, space-5 is 40.
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
The ask Redline the content width on mobile: 16 padding, 320 content, 16 padding.
│◄ 16 ►│◄────────────── content 320 ───────────────►│◄ 16 ►│ SAMPLE DATA
Spacing redline · QA checklist · Before and after
Motion
The ask Write the motion for a toast that confirms a save without taking focus: it comes up from below the edge and fades in, 200 ms, with a reveal ease (0.33, 1, 0.68, 1). With reduced motion it appears in place and stays for the same time.
┌─ 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
05 Decks
A review you can present.
Pave motion audit: real work, with the figures already published.
Open as a presentationPave motion audit
Every place in the front end where something moves, read and scored against one motion language.
Real work · figures from the published write-up
About 750 transitions and animations across about 350 stylesheets, which became 47 proposed fixes.The finding that started it
The same spinner ran at four different speeds.
Its keyframes had been copied from file to file. A slow spinner makes the app feel slow at the same load time.01
How it was read
How it was read
Every stylesheet read, not sampled
┌─────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────┐│ 350 stylesheets │ ──► │ 8 auditor shards │ ──► │ 750 motion sites │ ──► │ 47 fixes │└─────────────────┘ └──────────────────┘ └──────────────────┘ └──────────┘Each site was scored on duration, easing, the property animated and reduced motion. Pave motion audit, Quickbase, 2026. Figures as published in the write-up; internal names removed.
How it was read
One spinner, four speeds
One rotation, measured in each copy of the keyframes.
copy 1 ██████████████████████████████ 1.2 scopy 2 █████████████████████████ 1.0 scopy 3 ████████████████████ 0.8 scopy 4 ███████████████ 0.6 sWhatever your spinner is made of, define its speed once. Pave motion audit, Quickbase, 2026. Figures as published in the write-up; internal names removed.
02
What a finding looks like
What a finding looks like
Toast enter: today and proposed
today ▕████████············▏ 200ms ease ▅█▇▅▄▃▂▁proposed ▕██████··············▏ 150ms reveal-ease █▆▅▄▃▂▁▁ 0·········250········500msDuration ruler: 20 cells of 25 ms on a fixed 500 ms scale. Speed glyph: progress in each eighth of the time. Pave motion audit, Quickbase, 2026. Figures as published in the write-up; internal names removed.
What a finding looks like
Eight characters per curve
Speed over time for each easing in the audit.
linear ████████ linear progress onlyease ▅█▇▅▄▃▂▁ ease the browser defaultease-out █▇▇▆▅▄▃▂ ease-outdecelerate █▅▄▃▂▂▂▁ cubic-bezier(0, 0, 0.2, 1) most UIreveal █▆▅▄▃▂▁▁ cubic-bezier(0.33, 1, 0.68, 1) entrancesspring ██▅▁▁▁▁▁↺ cubic-bezier(0.44, 1.3, 0.15, 1) overshoots, then settlesPave motion audit, Quickbase, 2026. Figures as published in the write-up; internal names removed.
What a finding looks like
Overlaps nobody saw in review
.toast slide-in ██████████······························ 0ms–240ms.dot pulse ████████████████████████████████████████→ 0ms, repeats.icon pop ·····██████████························· 120ms–370ms.toast fade ········██████·························· 200ms–360ms 0ms 500ms 1sPave motion audit, Quickbase, 2026. Figures as published in the write-up; internal names removed.
03
Handing off the hero
Handing off the hero
The hero cut against the product
The marketing hero drifted all the time; the product grid mostly holds still.
MEASURE HERO CUT PRODUCTvertical lines moving ██████████ 100% ██░░░░░░░░ 23%, in 17 pushesrow lines moving ░░░░░░░░░░ 0% █░░░░░░░░░ 11%a drawing's build ███░░░░░░░ 2.7 s ████████░░ 7.7 sa drawing's exit █░░░░░░░░░ 0.8 s █████░░░░░ 4.6 sA measurement, not an opinion. Ten cells is enough for the comparison. Hero animation handoff, 60-second recordings of both versions, every line position logged per frame.
What changed
One duration scale, one easing set, one spinner speed.
And the glyph code got tests: it had shown the wrong easing name on 25 of the 47 findings.06 Handoff
Text first. Then the prototype.
What you review
╔═ 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 DATAWhat people click
A report Cover, summary, numbered findings, figures. Six pages as a PDF. 
The same findings, inside Each section leads with its takeaway. Every format Markdown and MDX for docs, HTML for prototypes and decks, SVG and PNG for slides and tickets, PDF for print. Your components With a short map of your design system, the agent builds the screen with your real components and tokens, not lookalikes.
07 Install