Pro Deck Builder

Presentation Designer

VC-backed SaaS design quality for PowerPoint. Think Linear, Attio, Vercel, Raycast — not corporate clip art.

Install

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/pro-deck-builder ~/.claude/skills/

Quick Reference

Before You Start (Required Steps)

Step 1: Ask the User

Before writing any code, ask:

1. Light or dark mode? Dark = premium/keynote feel. Light = reports/data-heavy decks.
2. Palette preference? Show the palette table below, or ask if they have brand colors.
3. Logo? Ask if they have a logo file to include (PNG/SVG path).

Step 2: Discover Fonts

Check what's installed — premium fonts make a massive difference:

# macOS — list all installed font families
fc-list : family | sort -u

# Search for premium fonts first
fc-list : family | grep -iE "inter|dm.sans|poppins|avenir|futura|geist|sf.pro|sf.mono|jetbrains|fira.code|montserrat|playfair|source.sans"

# Check macOS Font Book directories directly
ls ~/Library/Fonts/ /Library/Fonts/ /System/Library/Fonts/Supplemental/ 2>/dev/null

Priority order for font selection:

1. Inter — the gold standard for SaaS UI (if installed, use it for everything)
2. DM Sans — geometric, startup-friendly
3. Poppins — rounded, approachable
4. Avenir / Avenir Next — ships with macOS, Apple-adjacent elegance
5. Calibri — safe fallback, always available

For data/mono: JetBrains Mono > Fira Code > SF Mono > Consolas

Design Language: VC-Backed SaaS

Aesthetic Principles

1. Depth through layering — Surfaces float above backgrounds. Cards and panels have subtle elevation via shadows and fine borders, not flat colored boxes.
2. Bold typography, minimal decoration — Let type hierarchy do the work. No accent lines, no decorative shapes, no clip art.
3. Restrained color — One accent color used sparingly (10%). Mostly neutrals. Color = signal, not decoration.
4. Generous whitespace — Empty space signals confidence. If a slide feels sparse, make the content bigger, don't add more.
5. Every element earns its place — Before adding anything: what does it communicate? If removing it changes nothing, remove it.

Light vs Dark Mode

The user picks one mode for the entire deck. Never mix modes within a deck.

Color System

Dark Mode (Default — Premium/Keynote)

Light Mode (Reports/Data-Heavy)

Palette System

Each palette defines one accent color (used at 10%) plus semantic status colors. The accent is the personality — everything else is neutral.

Built-In Palettes

Custom Palette (User Brand Colors)

If the user provides brand colors, build a custom palette:

const palette = {
  accent: "0055FF",      // primary brand color
  accentMuted: "0055FF" + " at 15% opacity", // for tinted backgrounds
  positive: "10B981",    // good, up, success
  warning: "F59E0B",     // attention, caution
  critical: "EF4444",    // bad, down, error
};

Color Application: 85/10/5 Rule

• 85% — Backgrounds + neutral text (bg + text tokens from mode)
• 10% — Accent (key numbers, chart primary, CTAs, active states)
• 5% — Semantic status (positive/warning/critical in KPIs and data)

Typography

Font Priority

Run font discovery (Step 2 above), then pick:

For editorial/financial decks:

Size Scale

Typography Rules

• Left-align body text and lists — center ONLY titles and KPI values
• Max 2 font families per deck (+1 mono for data)
• ALL CAPS + charSpacing only for small labels (KPI labels, category tags)
• Line height: 1.3x for body, 1.1x for titles
• Never underline for emphasis — use bold or accent color

Text Fitting (Prevents Overflow)

Big numbers and titles WILL overflow if you use a fixed font size without checking content length. Use these rules:

Big KPI Numbers — scale font to character count:

Rule: prefer abbreviated numbers. $5.3M > $5,307,540. Only use full numbers in tables or footnotes where precision matters.

Slide Titles — max characters before wrapping:

Rule: count characters before setting fontSize. Never let content slide titles wrap to 2 lines. Section dividers can wrap.

Body Text in Narrow Containers (Insight Panels, Sidebars):

Text overflow in narrow panels (< 4" wide) is a common problem. PptxGenJS does not auto-shrink text. Apply these rules:

Rule: estimate line count before adding text. Count characters in your text, divide by max chars per line to get line count, then verify it fits in the container height. If it doesn't fit: (1) reduce fontSize, (2) shorten the text, or (3) increase the container. Never let text silently overflow — it gets clipped or overlaps adjacent elements.

// ✅ CORRECT: 2.8" panel → max 10pt, ~35 chars/line
// "Welcome series dominates at 62%..." = 90 chars ≈ 3 lines
// Container h: 1.6" → fits ~10 lines at 10pt. Safe.
s.addText("Short, edited copy.", {
  x: 6.55, y: 1.45, w: 2.7, h: 1.6,
  fontSize: 10, fontFace: theme.font.body,
});

// ❌ WRONG: 2.8" panel with 14pt font and 200+ char paragraph
s.addText("Very long paragraph that will overflow...", {
  x: 6.55, y: 1.45, w: 2.8, h: 1.6,
  fontSize: 14, fontFace: theme.font.body,  // too large for narrow panel
});

Chart Number Formatting

Always format chart numbers for readability — raw numbers like "1000000" are never acceptable on axes OR data labels.

CRITICAL: valAxisLabelFormatCode only formats the AXIS. Data labels from showValue: true are formatted separately via dataLabelFormatCode. If you set valAxisLabelFormatCode but not dataLabelFormatCode, data labels will show raw unformatted numbers like "2888000". numFmt is NOT a valid PptxGenJS property — always use dataLabelFormatCode.

Preferred approach — OOXML conditional format with raw values: Use raw (unscaled) values and let OOXML conditional number formatting handle the display. This is the most reliable approach and handles mixed-magnitude data (e.g., a chart with both $2.9M and $3.6K values).

// ✅ BEST: Raw values + OOXML conditional format
// Under 1K: whole number ($500)
// 1K-999K: X.XXK ($540.18K, $57.72K)
// 1M+: X.XM ($2.9M)
const currFmt = '[>=1000000]"$"#,##0.0,,"M";[>=1000]"$"#,##0.00,"K";"$"#,##0';

values: [2888000, 717734, 425467, 3655],  // raw dollar values
dataLabelFormatCode: currFmt,              // conditional brackets OK here
valAxisLabelFormatCode: '"$"#,##0.0,,"M"', // simple format only (no brackets)

// ✅ ALSO OK: Pre-scale when all values are same magnitude
values: [2888, 718, 425],  // raw values divided by 1000
dataLabelFormatCode: '"$"#,##0"K"',
valAxisLabelFormatCode: '"$"#,##0"K"',

// ❌ WRONG: Raw values with axis-only format
values: [2888000, 718000, 425000],
valAxisLabelFormatCode: "$#,##0,K",  // axis may format but data labels show 2888000
// ❌ WRONG: numFmt (not a valid PptxGenJS property)

OOXML conditional format reference (use with RAW values):

Format code syntax: OOXML supports up to 2 conditions in brackets + a default: [condition1]format1;[condition2]format2;defaultFormat. Each trailing , divides by 1,000 (so ,, divides by 1M).

IMPORTANT: valAxisLabelFormatCode does NOT support OOXML conditional brackets [>=1000]. Use a simple format for the axis based on the data range:

Use the conditional currFmt for dataLabelFormatCode (which supports brackets), but a simple format for valAxisLabelFormatCode. Always set showValue: true with dataLabelPosition: "outEnd" on bar charts so readers can see exact values without tracing to the axis.

Spacing

Layout Grid (10" × 5.625")

Margins:       0.5" from all edges
Content area:  9.0" wide × ~4.5" tall
Title zone:    y = 0.3"
Content zone:  y = 1.0" to y = 5.0"
Footer zone:   y = 5.2"
Card gap:      0.25" - 0.3"

Logo Placement

Finding Logos

find ~/Desktop ~/Downloads ~/Documents -maxdepth 3 -iname "*logo*" \( -name "*.png" -o -name "*.svg" -o -name "*.jpg" \) 2>/dev/null

Placement Patterns

Logo Rules

• Always use sizing: { type: "contain", w, h } to preserve aspect ratio
• Content slides: max 1" wide, don't compete with content
• Title/closing: up to 3" wide for brand moment
• Dark mode: use white/light logo variant if available (ask user)
• Slide master: if logo goes on every slide, add it to a master definition

Icons