Marp Slides

MARP Slides

Build production-quality MARP presentation decks. Uses the full HTML/SVG feature set for charts, dashboards, and animations. Optionally generates hero images and backgrounds via Marcus when the deck needs cinematic visuals.

Prerequisites

# VS Code extension: "Marp for VS Code"
# settings.json:
"markdown.marp.enableHtml": true
"markdown.marp.allowLocalFiles": true

# Export:
npx @marp-team/marp-cli slides.md --pdf --allow-local-files
npx @marp-team/marp-cli slides.md --html --allow-local-files
npx @marp-team/marp-cli slides.md --pptx --allow-local-files

Workflow

Step 1 — Understand the deck

Before writing a single slide:

• Purpose: What decision or action should this deck drive?
• Audience: Technical, executive, consumer, internal?
• Format: Pitch deck, report, tutorial, showcase, data story?
• Assets: Does the user have a logo or images? Are AI-generated visuals needed?

Step 2 — Select theme and design direction

Step 3 — Decide Marcus usage

Use Marcus (KIE API) for AI-generated images only when:

• The deck needs a cinematic hero slide background
• The deck is a product showcase needing brand visuals
• The user explicitly asks for AI-generated imagery
• The deck covers lifestyle, travel, or editorial content needing atmosphere

Do NOT use Marcus for:

• Data/dashboard slides (use SVG charts instead)
• Every slide (max 2–3 Marcus images per deck)
• Slides where SVG icons or CSS components do the job

Step 4 — Generate Marcus images (if needed)

See the Marcus Image Generation section below.

Step 5 — Write the deck

Follow the structure and component rules below. Save the file as ./slides.md or ./slides/deck-name.md in the project directory.

Dark Theme (Default)

The dark theme uses Outfit 800 for headings and Raleway 100–200 for body text.

---
marp: true
theme: default
paginate: true
header: '![w:80](./logo.png)'
style: |
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');
  :root {
    --accent: #ff6b1a; --accent-hover: #ff8c4a;
    --dark: #000; --card: #080808; --border: #111;
    --body: #999; --label: #666; --muted: #555; --light: #fff;
    --green: #22c55e; --red: #ef4444; --yellow: #f5a623;
  }
  section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
  h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); margin: 0; }
  h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
  h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
  strong { color: var(--accent); font-weight: 300; }
  section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
  .tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
  details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
  details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
  details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
  .row { transition: background 0.2s; border-radius: 6px; }
  .row:hover { background: #0c0c0c; }
  abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }
---

Light Theme (Business / Editorial)

Swap these variables. Use Space Grotesk + IBM Plex Mono or Plus Jakarta Sans.

:root {
  --accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee;
  --body: #666; --label: #bbb; --light: #1a1a1a;
}

Heading Hierarchy

• h1 — Title slides only (white, extra large)
• h2 — Section title (grey, thin) — max 6–8 words
• h3 — Section label (muted, uppercase, small caps)

Font Pairings (Tested)

Banned fonts: Inter, Roboto, Arial, Open Sans, Helvetica — these look generic and break the premium feel.

Slide Structures

Title Slide

<!-- _class: lead -->
<!-- _header: '' -->

# Product Name

## The one-line pitch that makes them lean in

---

Content Slide (text + image split)

## Section Title

![bg right:40% brightness:0.2 blur:2px](./hero.jpg)

- Key point one — keep it to one line
- Key point two — no sub-bullets
- Key point three — max 5 items
- Key point four
- Key point five

Marcus Hero Slide

<!-- _header: '' -->
<!-- _paginate: false -->

![bg brightness:0.12](./marcus-hero.jpg)

# **Product Launch**

## Q2 2026 — Confidential

---

Data Dashboard Slide (cards)

See Dashboard Components below.

Images

# Logo header (hide per slide)
header: '![w:80](./logo.png)'
<!-- _header: '' -->   ← hides on specific slide

# Photo backgrounds
![bg brightness:0.15](./photo.jpg)
![bg right:35% brightness:0.2 blur:3px](./photo.jpg)
![bg left:30%](./photo.jpg)

# Inline centered image
<div style="display:flex; justify-content:center;">
  <img src="./diagram.png" style="width:600px; border-radius:12px;" />
</div>

# CDN logos (no relative path issues)
<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/vercel.png" style="width:120px;" />

CRITICAL: Always use relative paths (./image.png). Absolute paths break in preview.

Marcus Image Generation

When the deck needs AI-generated visuals, use Marcus (KIE API).

Credentials

/Users/elihuvillaraus/Docs/SaaS/ai-content-machine/marcus/frontend/.env.local
Variables: KIE_API_KEY, KIE_API_BASE_URL (https://api.kie.ai)

Model: nano-banana-2

Always use nano-banana-2. It is faster, cheaper, and produces the same quality as nano-banana-pro for backgrounds and editorial images.

API call (Node.js / fetch)

const response = await fetch(`${process.env.KIE_API_BASE_URL}/api/generate/image`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.KIE_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'nano-banana-2',
    prompt: prompt,
    aspect_ratio: '16:9',   // for slide backgrounds
    num_images: 1
  })
});
const { images } = await response.json();
// Download and save as ./marcus-hero.jpg

Prompt formula for slide backgrounds

[Subject/scene], cinematic, shallow depth of field, soft bokeh, 
moody [warm/cool] lighting, editorial photography style, 
high-end commercial look, [dominant color palette],
16:9 composition, no text, no UI elements

Example prompts by deck type

• SaaS/tech hero: "Abstract digital infrastructure, fiber optic cables, deep navy and cyan, cinematic DOF, editorial, no text"
• Lifestyle/consumer: "Morning light pouring through floor-to-ceiling windows, warm amber tones, editorial lifestyle photography, no people, no text"
• Finance/executive: "Aerial view of a city at dusk, warm streetlights, mist, deep tones, luxury travel editorial, no text"
• Health/wellness: "Minimalist clean space, natural textures, morning light, soft shadows, lifestyle editorial, neutral palette, no text"

Save and reference

# Save the generated image
curl -o ./marcus-hero.jpg "<image_url_from_api>"

# Then use in Marp:
![bg brightness:0.12](./marcus-hero.jpg)

Dashboard Components

Metric Card (gradient top border)

<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; position:relative; overflow:hidden; flex:1;">
  <div style="position:absolute; top:0; left:0; right:0; background:linear-gradient(90deg, var(--accent), transparent); height:2px;"></div>
  <div style="font-family:'Outfit'; font-weight:600; font-size:0.55em; color:var(--muted); text-transform:uppercase; letter-spacing:0.15em;">Revenue</div>
  <div style="font-family:'Outfit'; font-weight:800; font-size:2.2em; color:var(--light); margin:8px 0;">$48.2K</div>
  <div style="font-size:0.7em; color:var(--green);">↑ 12.4% vs last month</div>
</div>

Card Row (3 metrics)

<div style="display:flex; gap:14px; margin-top:20px;">
  <!-- paste 3 metric cards here -->
</div>

Status Dots

<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg> Active
<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#f5a623"/></svg> Paused
<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#ef4444"/></svg> Inactive

Verdict Tags

<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span>
<span class="tag" style="background:#ef444412; color:var(--red); border:1px solid #ef444422;">Kill</span>
<span class="tag" style="background:#f5a62312; color:var(--yellow); border:1px solid #f5a62322;">Review</span>

Hover Rows (tables / lists)

<div class="row" style="display:flex; justify-content:space-between; padding:10px 12px; font-size:0.8em;">
  <span style="color:var(--body);">Item name</span>
  <span style="color:var(--accent); font-family:'Outfit'; font-weight:600;">$1,200</span>
</div>

SVG Charts

Donut Ring (single metric)

<!-- r=74, circ=465, 89% → offset=51 -->
<svg width="160" height="160" viewBox="0 0 160 160">
  <circle cx="80" cy="80" r="74" fill="none" stroke="#111" stroke-width="16"/>
  <circle cx="80" cy="80" r="74" fill="none" stroke="var(--accent)" stroke-width="16"
    stroke-dasharray="465" stroke-dashoffset="51" stroke-linecap="round"
    transform="rotate(-90 80 80)"/>
  <text x="80" y="86" text-anchor="middle" font-family="Outfit" font-weight="800" font-size="28" fill="white">89%</text>
</svg>

Sparkline (inline)

<svg width="50" height="16"><polyline points="0,14 8,12 16,10 24,8 50,2" fill="none" stroke="#22c55e" stroke-width="1.2"/></svg>

Stacked Bar

<div style="display:flex; height:14px; border-radius:7px; overflow:hidden; width:200px;">
  <div style="width:45%; background:var(--accent);"></div>
  <div style="width:30%; background:#444;"></div>
  <div style="width:25%; background:#222;"></div>
</div>

Vertical Bar Chart

<div style="display:flex; align-items:flex-end; gap:8px; height:120px;">
  <div style="width:32px; height:40%; background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;"></div>
  <div style="width:32px; height:65%; background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;"></div>
  <div style="width:32px; height:90%; background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;"></div>
</div>

Interactive Elements

<!-- Collapsible -->
<details><summary>See details</summary><p>Hidden content here</p></details>

<!-- Tooltip -->
<abbr title="Return on Ad Spend">ROAS</abbr>

<!-- Progress bar -->
<progress value="76" max="100" style="accent-color:var(--accent); width:100%;"></progress>

<!-- Checkbox -->
<input type="checkbox" checked style="accent-color:var(--accent);" /> Completed

Layout Components

Terminal Mockup

<div style="background:#0d0d0d; border-radius:10px; border:1px solid #222; padding:16px;">
  <div style="display:flex; gap:6px; margin-bottom:12px;">
    <div style="width:12px;height:12px;border-radius:50%;background:#ef4444;"></div>
    <div style="width:12px;height:12px;border-radius:50%;background:#f5a623;"></div>
    <div style="width:12px;height:12px;border-radius:50%;background:#22c55e;"></div>
  </div>
  <pre style="font-family:'JetBrains Mono',monospace; font-size:0.7em; color:#22c55e; margin:0;">$ npm run deploy</pre>
</div>

Timeline

<div style="border-left:2px solid var(--border); padding-left:20px; margin-top:16px;">
  <div style="position:relative; margin-bottom:16px;">
    <div style="width:10px;height:10px;border-radius:50%;background:var(--accent);position:absolute;left:-25px;top:3px;"></div>
    <div style="font-family:'Outfit';font-weight:600;font-size:0.75em;color:var(--light);">Q1 2026</div>
    <div style="font-size:0.7em;color:var(--body);">Launch description</div>
  </div>
</div>

Before/After Split

<div style="display:flex; gap:16px; margin-top:16px;">
  <div style="flex:1; background:var(--card); border-top:3px solid var(--red); border-radius:8px; padding:14px;">
    <div style="font-family:'Outfit';font-weight:700;font-size:0.65em;color:var(--red);margin-bottom:8px;">BEFORE</div>
    <!-- content -->
  </div>
  <div style="flex:1; background:var(--card); border-top:3px solid var(--green); border-radius:8px; padding:14px;">
    <div style="font-family:'Outfit';font-weight:700;font-size:0.65em;color:var(--green);margin-bottom:8px;">AFTER</div>
    <!-- content -->
  </div>
</div>

Animations (HTML export only)

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glow { 0%,100%{box-shadow:0 0 12px var(--accent)66} 50%{box-shadow:0 0 24px var(--accent)} }

.float { animation: float 4s ease-in-out infinite; }
.glow { animation: glow 2s ease-in-out infinite; }
/* Stagger: animation-delay: 0.3s, 0.6s, 0.9s */

Pipeline Integration

From autoresearch

When autoresearch produces a report, this skill can convert it to a MARP deck:

The AutoResearch report is at /tmp/autoresearch-<skill>-report.md.
Create a MARP deck summarizing: hypothesis, methodology, results, and next experiments.
Use the dark dashboard theme with SVG charts showing before/after metrics.

From architect / orchestrator

PRDs and sprint plans can be converted to MARP decks for stakeholder reviews:

Convert this PRD to a MARP pitch deck. Hero slide + 1 slide per Priority Group.
Show user stories as timeline, acceptance criteria as checklist cards.

From exec-summary

Executive summaries naturally map to slide decks:

Take this exec summary and produce a MARP deck following McKinsey SCQ structure:
Situation → Complication → Question → Answer → Recommendation → Next Steps.
One slide per section. Use business light theme.

Design Rules (Non-Negotiable)

1. One idea per slide. Overflow clips silently in MARP — never cram.
2. h1 = white. Accent color (--accent) for data highlights only.
3. Body text #999, labels #666. Never darker than #555 on dark backgrounds.
4. Max 6 rows per list slide. Beyond 6, split into two slides.
5. Charts over numbers. If you have data, visualize it. Mix chart types across slides.
6. Relative paths only. ./image.png works. Absolute paths break in preview.
7. Always preview before delivering. No overflow warnings in source — overflow clips silently.
8. No Inter, Roboto, or Arial. These look generic. Use the font pairings table above.
9. Marcus images: max 2–3 per deck. Hero slides and backgrounds only. SVG for data.
10. No emojis. Use SVG icons (see icons section below).

SVG Icons Reference

All icons: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5">

Pre-Output Checklist

Before delivering any deck:

• Theme matches content type and audience
• CSS is fully embedded in frontmatter — no external files
• Title slide uses <!-- _class: lead -->
• Section titles are concise (6–8 words max)
• No more than 6 bullet points per slide
• All images use relative paths (./image.png)
• Data is visualized with SVG charts, not raw numbers
• No banned fonts (Inter, Roboto, Arial, Open Sans, Helvetica)
• Marcus images downloaded and saved locally (not remote URLs in bg)
• Export command documented at top of file or in README
• No emojis — SVG icons used instead
• No truncated slides — every slide is complete

Copilot CLI Operations

Signal

• On deck complete: MARP_DONE: [filename] — [slide count] slides
• On blocked (missing assets, credentials): MARP_BLOCKED: [reason]

Invocation examples

/marp-slides Create a 10-slide pitch deck for [product]. Dark theme. No images needed.
/marp-slides Make an autoresearch report deck for the orchestrator skill. Include before/after metrics.
/marp-slides Build an executive Q1 review deck. Business light theme. Generate a hero with Marcus.