presentation-factory-napkin

name	presentation-factory-napkin
description	Napkin.ai routing for data visualizations, conceptual diagrams, frameworks, process flows, value chains, 2x2 matrices, and other structured visuals. Used when the visual is a diagram rather than a photograph and when the visual doesn't need photographic realism. Pairs with presentation-factory-higgsfield (for image-based visuals) and inline SVG (for live data charts).
type	skill
plugin	presentation-factory
tags	["type/skill","plugin/presentation-factory","scope/specialty","topic/visualization"]
status	active

Goal

Produce structured conceptual visuals (frameworks, diagrams, process flows) via Napkin.ai. Match brand color palette. Save outputs to the deck's assets/infographics/ folder.

When to invoke

• Compose stage, when 10_Content.md specifies a > **Infographic** (Napkin, ...) block
• Architecture diagrams, framework slides, value-chain visuals, comparison matrices
• Any slide where the visual is conceptual structure, not photographic mood

When NOT to invoke (use a different tool)

Visual need	Use instead
Live data chart (numbers from a CSV)	Inline SVG generated by vanilla JS, or Chart.js/Recharts compiled to SVG
Photographic image (scene, mood, lifestyle)	presentation-factory-higgsfield (nano banana 2)
Diagram with critical labels and rendered text	presentation-factory-higgsfield (chatgpt image 2) for higher text fidelity
Icon (single concept, glyph-level)	Flaticon / Lucide / Phosphor

The split: Napkin for concept diagrams. Higgsfield-text-in-image for diagrams where text accuracy is critical. Inline SVG for data.

Required context

references/presentation-factory-foundations.md (Data viz and infographics section) and the deck's brand/tokens.css for color palette.

Description language

The content file specifies Napkin diagrams in this shape:

> **Infographic** (Napkin, square): 4-quadrant matrix showing "Effort vs Impact"
> with axes labeled (Low Effort/High Effort on X, Low Impact/High Impact on Y).
> 4 items placed: "Audit content supply chain" (Low Effort, High Impact),
> "Pilot one agent" (Low Effort, High Impact), "Replatform CMS" (High Effort,
> High Impact), "Rebrand" (High Effort, Low Impact). Brand-aligned: Slalom Blue
> for high-impact quadrants, neutral grey for others.

Every Napkin prompt should specify:

• Format: square (1080x1080), wide (1920x1080), portrait (1080x1350), or vertical strip
• Diagram type: matrix, flow, hierarchy, value chain, hub-and-spoke, timeline, venn
• Elements: every node and label, named
• Relationships: arrows, connections, hierarchy direction
• Color guidance: which brand colors land where; what greys serve as default

Brand-aligned color palette (for Slalom default)

Pass these hex values when prompting Napkin:

• Primary: #0C62FB (Slalom Blue) — main nodes, primary emphasis
• Secondary: #1BE1F2 (Slalom Cyan) — secondary emphasis, highlighted nodes
• Ink: #000A25 (Slalom Ink) — text, strong borders
• Navy: #0F1C41 (Slalom Navy) — dark surface backgrounds
• Neutral mid: #7A8499 — supporting text, dotted connectors
• Neutral light: #E5E8EE — backgrounds, light separators
• White: #FFFFFF

For Composable DXP brand, use Lavender #8A7CE0 and Cobalt #0A25FF as primaries.

Generation workflow

1. Read 10_Content.md, extract every > **Infographic** (Napkin, ...) block.
2. For each block:
   • Render the prompt to a Napkin-readable format
   • Generate via Napkin.ai (browser MCP if automated, manual paste-back if not yet wired)
   • Wait for the diagram, export as SVG (preferred) or PNG (fallback)
3. Save outputs to WIP/[deck]/assets/infographics/
4. Name files: slide-NN-purpose.{svg,png} (e.g., slide-05-architecture-diagram.svg)
5. Update 10_Content.md to reference the generated file path next to its block

Manual paste-back mode

If the browser MCP isn't connected and Napkin can't be auto-invoked:

1. Surface the prompt to the user with a clear instruction: "Open napkin.ai, paste this prompt, export the result as SVG, save to [path]. Then tell me you've done it."
2. Wait. Don't proceed to slide composition until the asset file exists at the expected path.
3. Log the manual step in WIP/[deck]/compose.log.

Anti-patterns

• Don't generate the same diagram repeatedly in slight variations. Pick one and refine via prompt edits.
• Don't use Napkin for data visualizations where the numbers will change. Use inline SVG so the chart can re-render.
• Don't use Napkin for diagrams where text labels are long or specific (e.g., legal disclaimers, regulatory categories). Use Higgsfield chatgpt image 2 or hand-build the SVG.
• Don't accept default Napkin color palettes. Always specify brand colors in the prompt.

Output

• All Napkin-generated assets saved to WIP/[deck]/assets/infographics/
• 10_Content.md updated with asset_path: next to each > **Infographic** block
• WIP/[deck]/compose.log entry recording each Napkin generation