napkin.ai as a pipeline visual generator — investigate (parked 2026-05-23)
DARE.CO.UK · PARKED SKETCH · 2026-05-23
Mirrored from ~/.claude/.../memory/parked_sketch_napkin_ai_visual_pipeline_2026-05-23.md. This is a design sketch parked for future build — read for context, not as a current deliverable.
napkin.ai generates diagrams/visuals from text prompts. Worth investigating as a pipeline step: feed our parameters (brand palette, CSS variables, content frames) + see what it returns, evaluate fit for portfolio surfaces. Possible consumers: report covers, sketch illustrations, dashboard diagrams, instructional content for io.gf.cx.
Dan 2026-05-23: “napkin.ai is building visuals, from text prompts, thats a pipeline activity — where we investigate our parameters, and play with what it gives us back, using our CSS values. Park it for investigation.”
What napkin.ai does
Text-to-diagram / text-to-illustration tool. You write a description of what you want; it emits SVG/PNG visuals in a chosen style. Active since late 2024; targets product/strategy/sales content workflows. Free tier + paid tiers.
Why it’s pipeline-worthy
Dan’s framing: not a one-off design tool — a pipeline step. Same shape as the Haiku-vision-for-SEO-filenames or Layer-2 LLM tagging:
- Substrate has rich structured content (claim summary, contractor record, era timeline, sketch frontmatter).
- Programmatic prompt assembly → napkin.ai API → returned SVG/PNG.
- Re-fed through our CSS variables (
--bg,--accent,--serif) so output matches portfolio palette. - Lands as a static asset next to the substrate (
payload.gf.cx/visuals/...or inline).
Likely first consumers
| Surface | What it’d visualize |
|---|---|
reports.dare.co.uk parked sketches |
Header illustration per sketch — turns 5KB text into a glanceable cover |
pa.gf.cx/home-insurance/claims/.../ cockpit |
Variance-framework diagram, replacement-vs-repair decision tree |
pa.gf.cx/amazon/ analytics |
Year-over-year spend arcs as illustrative line drawings (alongside the existing SVG bars) |
dare.co.uk industrial-design pages |
Concept diagrams to pair with text descriptions |
io.gf.cx/abbeyroad (parked) |
The playbook/teachings surface would benefit from cover visuals per page |
| Voice-chat campaigns | Hero illustration per ad-landing path |
Investigation steps (when this resumes)
- Manual hand-test — visit napkin.ai, paste 3-4 representative prompts from existing portfolio content, capture outputs. Get a feel for stylistic range + fidelity.
- API check — does napkin.ai expose an API? Pricing? Rate limits? Or is it browser-only today?
- CSS-variable handshake — can output be styled (color via SVG inheritance) post-generation? Or does the input need to encode the palette?
- Pipeline sketch — what’s the minimal
pa_napkin_visual.pylook like: ---prompt "..."or--from-file <markdown>---style line-drawing | diagram | illustration---palette portfolio(injects our CSS vars) - Output: SVG + PNG topayload.gf.cx/visuals/<hash>.svg
Decision factors
- Fidelity vs voice match: does the output feel native to the portfolio brand (warm cream + green accent + serif/sans mix), or does it impose a generic SaaS-illustration look that fights our voice?
- Cost per visual: if it’s $0.10-$0.50/visual, 50 visuals/month = $5-$25 — fine. If it’s per-pixel pricing, model carefully.
- Determinism: same prompt → same output? Or is it generative-stochastic (each run different)? For pipeline integration we want stability; for creative ideation we want variance.
Cross-references
feedback_capture_at_source_durable_substrate.md— same philosophy applied to visualsfeedback_static_site_plus_living_brains_stack.md— napkin.ai at build time = baked-in visual; at runtime = on-demand. Decide which per surface.feedback_xlab_co_toolkit_web_assets_home.md— if a palette-aware napkin wrapper emerges, it lives therefeedback_brand_voice_seven_dimensions.md— visual generation must respect the brand voice axes
Resume conditions
- A specific surface needs a visual + hand-crafting it is the slow step
- Dan plays with napkin.ai directly and gets a feel for whether it adds or subtracts to voice
- Someone in the industry ships a sibling tool that’s more open-source / API-friendly (worth comparing before committing)