What you get

task 1  ████████████████████████  92%
task 2  ██████████████████▌       71%
task 3  █████████▉                38%

                          SAMPLE DATA

Ask

“Chart these usability results for the PR. The data is in results.csv.”

The agent runs

Before you send it

• The lint passes: frames close, every glyph is one cell, no text touches its box.
• Every figure with numbers names its source.
• The sentence next to the figure states the point; the figure supports it.
• About 80 columns at most, so it doesn't wrap.
• --compact (plain ASCII, same layout) only when the figure goes into a model's context.

What you get

┌─────────────┐     ┌─────────────────────────┐     ┌───────────────────┐
│ funnel.json │ ──► │ <Glyph spec={funnel} /> │ ──► │ SVG at build time │
└─────────────┘     └─────────────────────────┘     └───────────────────┘

Ask

“Add the signup funnel to our docs page as MDX.”

The agent runs

Before you send it

• Static MDX works in any setup: each figure is a text block with its description.
• Component mode writes <Glyph spec={…} />: copy templates/mdx/Glyph.astro or Glyph.jsx next to your MDX and point it at scripts/render/svg.mjs.
• Components render to SVG at build time, so readers need no special font.

What you get

╔═ 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

Ask

“Turn the settings wireframe into a clickable prototype with our design system.”

The agent runs

Before you send it

• The map names only components and tokens you really have; start from templates/design-system.map.example.json.
• Notes on the wireframe become behaviour in the prototype.
• Where the map has no entry, the agent asks instead of inventing one.
• For production code, the agent reads reference/fidelity.md first.

What you get

                                       8 came back       29 shipped

▓────────┐         ┌─────·░▒▓         ┌────────┐         ░░░░░░░░░░
▒ DESIGN │░▒▓─────►│ BUILD  │░▒▓─░▒▓─►│   QA   │░▒▓─────►░  SHIP  ░
░·───────┘         └────────┘         └─▓▒░·───┘         ░░░░░░░░░░
                        ▲                  │
                        │                  │
                        │                  │
                        └─────▓▒░──────────┘
                   about 1 in 3 comes back from QA

                                       8 came back       29 shipped

▓────────┐         ┌─────·░▒▓         ┌────────┐         ░░░░░░░░░░
▒ DESIGN │░▒▓─────►│ BUILD  │░▒▓─░▒▓─►│   QA   │░▒▓─────►░  SHIP  ░
░·───────┘         └────────┘         └─▓▒░·───┘         ░░░░░░░░░░
                        ▲                  │
                        │                  │
                        │                  │
                        └─────▓▒░──────────┘
                   about 1 in 3 comes back from QA

Ask

“Show how work comes back from QA as a moving diagram.”

The agent runs

Before you send it

• Every type moves on a page or in a deck. Six keep moving: loop, funnel, states, queue, rollout, loading.
• Every other type arrives once, in the order that carries its point, then stays still. The ↺ in its corner plays it again.
• The still frame makes the same point; it's what reduced motion, print and docs show.
• One sentence next to it says what the motion shows.
• Motion specs say what reduced motion shows.

What you get

┌───────┐     ┌─────────┐     ┌──────────────────┐     ┌───────────┐
│ title │ ──► │ section │ ──► │ figure, in steps │ ──► │ statement │
└───────┘     └─────────┘     └──────────────────┘     └───────────┘
│
▼
┌───────────┐
│ PDF, 16:9 │
└───────────┘

Ask

“Make a ten-slide deck from the research readout, one point per slide, and a PDF to send.”

The agent runs

Before you send it

• One point per slide, with the conclusion in the title.
• Steps zoom to lines of a figure and show the line you'll say; find line numbers with --to text, counting from 0.
• Flag problem rows so they flash; keep presenter notes in notes (press N).
• For a pitch, every number has a real source: made-up numbers are stamped SAMPLE DATA on the slide.
• Themes: paper, ink, phosphor, gilt, halloween. The PDF is one 16:9 page per slide.

What you get

┌───────┐     ┌─────────┐     ┌──────────┐     ┌─────────┐
│ cover │ ──► │ summary │ ──► │ sections │ ──► │ figures │
└───────┘     └─────────┘     └──────────┘     └─────────┘
│
▼
┌────────┐
│ A4 PDF │
└────────┘

Ask

“Write the motion audit up as a report and export a PDF.”

The agent runs

Before you send it

• A cover, a summary, numbered sections, numbered figures.
• Each takeaway is the conclusion, not the topic.
• PDF uses Chrome, Chromium or Edge already on the machine (or CHROME_PATH). With none, export HTML and print it.

What you get

┌──────────────┐     ┌───────┐     ┌──────────┐     ┌───────────┐
│ readout.json │ ──► │ slots │ ──► │ one page │ ──► │ HTML, PDF │
└──────────────┘     └───────┘     └──────────┘     └───────────┘

Ask

“Put this week's research findings on one page with the funnel and the top quotes.”

The agent runs

Before you send it

• Each layout has fixed slots: one sentence, short lists and ordinary figure specs.
• Code places everything within 80 cells; figures share a row only when they fit.
• Figures without a source use the layout's.
• A list of layouts exports as one document, a layout to a page.

What you get

┌────────────┐     ┌──────────────────────────┐     ┌────────────┐
│ ████ 12.4k │ ──► │ rectangles, lines, dith… │ ──► │ funnel.svg │
└────────────┘     └──────────────────────────┘     └────────────┘

Ask

“Export the funnel as an SVG for the board deck.”

The agent runs

Before you send it

• SVG needs no font: blocks become rectangles, shades become dither patterns, lines become vectors.
• PNG is the same SVG at 2×, through a browser already on the machine.
• Pick the theme that matches the slide: paper, ink, phosphor, gilt or halloween.