wisprflow-figure

Generate editorial "Wispr Flow" aesthetic figures — warm cream paper (#f8f5e4), classical serif display type (Georgia), a muted terracotta/sage/lilac palette on ink, a big-number KPI header with a one

SKILL.md

GitHub

Wispr-Flow Editorial Figures

Every figure a Vizuara report embeds should share one visual signature so the set reads as a family. That signature — lifted from wisprflow.ai and the proven Vizuara L1-eval figure — is:

  • Warm cream paper background #f8f5e4 (never white).
  • Classical serif display type — Georgia — for the big number, labels, and the caption. No sans anywhere in the figure.
  • Muted pastel palette on ink: terracotta #bc6e61 (low / below-target), sage #98b096 (boundary / neutral-good), lilac #d7bedc (strong / high), all on near-black ink #1b1a17. A thin sage rule #a3b097 under the header.
  • A big-number header: a huge serif KPI on the left (e.g. 92.3%) with a small caption under it, and a one/two-line sentence to its right.
  • One hand-drawn touch: a single wavy ink baseline across the bottom. Nothing else is decorated — no gridlines, no axis spines, no chart junk.
  • Generous whitespace. Calm, editorial, print-first. Landscape 1376×768 by default.

How to use it

Everything lives in scripts/wisprflow_figures.py. Import it, or drive it from a JSON spec, or copy a function and tweak.

Render the built-in demos (one of each type into examples/):

python3 scripts/wisprflow_figures.py demo

From Python (the normal path — you pick data + colours):

from wisprflow_figures import stat_bars, comparison_bars, donut

stat_bars(
    counts=[5, 53, 121, 183, 290, 1661],      # raw counts are fine
    labels=[0, 1, 2, 3, 4, 5],
    headline="92.3%\ncore correct or better",  # text after \n is the small caption
    sub="Of 2,313 real questions, 2,134 received the correct core answer – "
        "above the 90% target, with 3 hallucinations (0.13%).",  # auto-wraps
    out="fig_accuracy.png",
)

comparison_bars(
    items=[("Manual (today)", 42, "terra"),    # (label, value, colour-name)
           ("Assisted", 71, "sage"),
           ("Chia engine", 93, "lilac")],
    headline="2.2×\nthroughput at the same headcount",
    sub="Journeys completed per analyst-day across the three operating modes.",
    out="fig_throughput.png", unit="/day",
)

donut(78, headline="78%\nof journeys fully automated",
      sub="Share of PO-create journeys the engine runs end-to-end.",
      out="fig_automation.png", color="lilac")

From a JSON spec (for non-coders):

python3 scripts/wisprflow_figures.py spec fig.json out.png
# fig.json: {"type":"stat_bars","counts":[...],"labels":[...],
#            "headline":"92.3%\ncore correct or better","sub":"..."}

The three figure types

Function Shape Use for
stat_bars KPI + vertical distribution bars a headline % with the rating/score spread behind it (the canonical figure)
comparison_bars KPI + horizontal labelled bars before/after, mode/model comparison, ranked values
donut KPI + single ring one share/percentage on its own

Colour semantics (pass names, not hex): "terra" = low/below-target/cost, "sage" = boundary/neutral-good, "lilac" = strong/high/result, "ink" = emphasis. For distributions, stat_bars auto-colours lows terracotta → boundary sage → highs lilac; override with the colors=[...] argument.

Headline convention: "BIGNUMBER\ncaption" — the first line is the huge serif figure, the text after \n becomes the small caption beneath it. Keep the sub sentence short (it auto-wraps at ~52 chars/line to stay inside the right margin).

Extending it

To add a new chart type, compose the shared primitives already in the module so it inherits the family look automatically: _canvas() (cream page, pixel coords), _header() (big KPI + sentence + sage rule), _wavy_baseline() (the hand-drawn bottom line), _caption(), _save(). Keep the palette constants and Georgia; add nothing that isn't cream/serif/pastel/ink.

Getting figures into the report

Save the PNG, then reference it from the PDF skill's HTML:

<figure class="fig">
  <img src="fig_accuracy.png" alt="accuracy">
  <figcaption>Figure 1 — core-correct accuracy across 2,313 questions.</figcaption>
</figure>

The vizuara-ramco-pdf skill's figure.fig styling frames it correctly.

Requirements

pip install matplotlib numpy. Georgia ships with macOS/Windows; on Linux install a Georgia-compatible serif (e.g. fonts-liberation → Liberation Serif) or change the SERIF constant at the top of the module.