mashharuki Marp Slides — Excellence Workflow
Step 1 — Gather Requirements
Clarify before generating (infer from context when obvious):
| Field | Default if unspecified |
|---|---|
| Topic / title | Ask |
| Audience | General business |
| Purpose | Inform / present findings |
| Slide count | 12–15 |
| Language | Match user's language |
| Output path | ./slides.md |
Ask concisely. For simple requests ("make slides about X"), infer and proceed.
Step 2 — Plan the Narrative Arc
Before writing, sketch the arc:
Title → Agenda → Problem/Context → Body (3–5 slides) → Evidence → Summary → CTA → Ending
See references/design-principles.md for purpose-specific arc patterns and slide count guidelines.
Step 3 — Generate the Marp File
Required Frontmatter
---
marp: true
theme: excel
paginate: true
size: 16:9
html: true
style: |
/* [PASTE FULL CONTENTS OF assets/excel-theme.css HERE] */
---
Always embed the full CSS from assets/excel-theme.css in the style: block.
This makes the file self-contained and immediately renderable without external setup.
Slide Class Usage
Apply per-slide with <!-- _class: CLASS --> immediately before the slide separator:
| Class | Use for |
|---|---|
title |
Cover slide — dark gradient, large H1 |
section |
Chapter break — blue background |
lead |
Key message — centered, large text |
dark |
Code showcase, dramatic emphasis |
ending |
Final slide — dark gradient, centered |
| (none) | Standard content slides |
Layout Components
Use HTML <div> elements with these classes (requires html: true):
| Component | Class | Use for |
|---|---|---|
| Two columns | .columns |
Side-by-side comparison |
| Three columns | .columns.col-3 |
Three options/features |
| Asymmetric cols | .columns.col-6-4 or .col-4-6 |
Text + image/stat |
| Info card | .card .card.accent/.warn/.success/.danger |
Categorized items |
| Key message box | .highlight |
Single most important takeaway |
| Large metric | .number (or .number.warm) |
KPI display |
| Tag / badge | .tag .tag.warm/.success/.outline |
Tech stack, labels |
| Step list | .steps + .step |
Numbered process |
| Icon row | .icons + .icon-item |
Feature overview |
| Progress bar | .progress + .progress-bar |
Status/roadmap |
See references/layout-patterns.md for copy-paste code examples of each.
Content Quality Rules
- 1 idea per slide — if a slide has two topics, split it
- Max 5–6 bullets per slide, each ≤12 words
**Bold**the key phrase in each bullet (exactly one per bullet)- Vary visual types — never 3+ consecutive all-bullet slides
- Use
.highlightfor the single most important message per section - Write real content, not placeholders like "ここに説明を入れる"
See references/design-principles.md for full design guidance.
Step 4 — Output
- Write the complete
.mdfile to the specified path (default:./slides.md) - Tell the user:
- How to render:
npx @marp-team/marp-cli slides.md --html(PDF/HTML) - VS Code: Install "Marp for VS Code", enable HTML in settings (
markdown.marp.enableHtml: true)
- How to render:
- Offer to adjust: slide count, language, style, or add specific sections
Technical Notes
html: trueis required for layout components (.columns,.card, etc.)- Without it, the HTML divs render as literal text — always include it
- For Tailwind CSS (advanced): add CDN script after frontmatter with
preflight: false - Mermaid diagrams: enable HTML and use
<div class="mermaid">...</div>