Créateur de Pitch Deck avec Marp

VérifiéSûr

Crée des pitch decks professionnels en Markdown avec Marp et Tailwind CSS. Utilise du HTML avec des classes utilitaires Tailwind pour des mises en page avancées (grilles, colonnes). Idéal pour générer rapidement des présentations visuellement soignées en partant de contenu structuré.

Spar Skills Guide Bot
ContenuIntermédiaire
5002/06/2026
Claude Code
#marp#tailwind-css#pitch-deck#presentation#markdown

Recommandé pour

Notre avis

Crée des pitch decks professionnels en utilisant Marp et Tailwind CSS.

Points forts

  • Workflow structuré avec sections de pitch standard
  • Intégration directe de Tailwind CSS via CDN
  • Modèles et exemples concrets pour un rendu soigné
  • Utilisation de grilles et flexbox pour des mises en page avancées

Limites

  • Nécessite une connaissance de base de Tailwind CSS
  • Les diapositives ne sont pas interactives (statiques)
  • Dépendance à un CDN (Internet requis pour l'affichage)
Quand l'utiliser

Idéal pour créer rapidement un pitch deck professionnel au format Markdown.

Quand l'éviter

Éviter si vous avez besoin de diapositives interactives ou de collaboration en temps réel.

Analyse de sécurité

Sûr
Score qualité88/100

The skill only instructs writing a Markdown file with Tailwind CSS CDN and no dangerous commands. It does not execute destructive or exfiltrating actions.

Aucun point d'attention détecté

Exemples

Title Slide
Create a Marp pitch deck with a title slide that has a large heading 'EcoCharge' and subtitle 'Revolutionizing Portable Energy' using Tailwind for styling.
Problem Slide
Add a problem slide to my Marp deck with two columns: left shows current solution (slow charging), right lists pain points (high cost, low efficiency). Use Tailwind cards and red accent.
Full Pitch Deck
Generate a complete 8-slide pitch deck for a startup named 'HealthSync' using Marp and Tailwind. Include slides: Title, Problem, Solution, Market, Product, Business Model, Team, Ask.

name: marp-pitch-creator description: Create high-quality pitch decks using Marp and Tailwind CSS license: Apache-2.0 compatibility: "Designed for Antigravity Agent" metadata: author: AI-Assistant version: "1.0.0" allowed-tools:

  • run_command
  • write_to_file
  • view_file

Instruction

You are an expert Presentation Designer and Marp Specialist. Your goal is to help the user create high-quality, professional pitch decks using Marp (Markdown Presentation Ecosystem) and Tailwind CSS.

Workflow

  1. Analyze Request: Understand the user's presentation topic, audience, and key message.
  2. Select & Create Template:
    • Create a new .md file for the slides (e.g., pitch.md).
    • Inject the standard Marp + Tailwind Header into the file.
  3. Draft Content:
    • Structure the deck using standard pitch deck sections (Problem, Solution, Market, Product, Business Model, Team, Ask).
    • Use Markdown for content.
    • Use HTML + Tailwind utility classes for advanced styling and layout (e.g., grids, columns, custom typography).
  4. Refine Design:
    • Apply visual hierarchy.
    • Ensure slides are not overcrowded.
    • Use high-quality images (placeholders or user-provided).

File Template (Standard Header)

EVERY Marp file you create MUST start with this header to enable Tailwind CSS via CDN:

---
marp: true
theme: gaia
backgroundColor: #fff
paginate: true
_paginate: false
style: |
  /* Custom Global Styles */
  :root {
    --color-foreground: #333;
    --color-background: #fff;
    --color-highlight: #2563eb; /* Tailwind blue-600 */
  }
  section {
    font-family: 'Inter', sans-serif;
  }
  /* Fix for Marp + Tailwind CDN */
  img[src*="center"] {
    display: block;
    margin: 0 auto;
  }
---

<!-- 1. Inject Tailwind via CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- 2. Configure Tailwind (Optional Customization) -->
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#2563eb',
          secondary: '#64748b',
        }
      }
    }
  }
</script>

<!-- START OF SLIDES -->

<!-- Slide 1: Title -->
<div class="h-full flex flex-col justify-center items-center text-center">
  <h1 class="text-6xl font-bold text-gray-900 mb-4">Your Pitch Title</h1>
  <p class="text-2xl text-gray-600">Subtitle or Tagline</p>
</div>

---

<!-- Slide 2: Problem -->
<div class="h-full p-12">
  <h2 class="text-4xl font-bold text-primary mb-8">The Problem</h2>
  <div class="grid grid-cols-2 gap-8">
    <div class="bg-red-50 p-6 rounded-lg border-l-4 border-red-500">
      <h3 class="text-xl font-bold text-red-700 mb-2">Current Solution</h3>
      <p class="text-gray-700">Slow, expensive, and error-prone processes that frustrate users.</p>
    </div>
    <div class="bg-gray-50 p-6 rounded-lg">
      <h3 class="text-xl font-bold text-gray-800 mb-2">Pain Points</h3>
      <ul class="list-disc list-inside text-gray-600 space-y-2">
        <li>High cost ($10k/month)</li>
        <li>Low retention (15%)</li>
        <li>Poor UX</li>
      </ul>
    </div>
  </div>
</div>

Best Practices

1. Layouts with Tailwind

Marp's default Markdown is great for simple lists, but for a "Pitch Deck" look, use HTML <div> wrappers with Tailwind grid/flex classes.

  • Two Columns:
    <div class="grid grid-cols-2 gap-8 items-center h-full">
      <div>Left Content</div>
      <div>Right Content</div>
    </div>
    
  • Centering:
    <div class="flex flex-col justify-center items-center h-full text-center">
      ...
    </div>
    

2. Typography

  • Use text-4xl, text-5xl for headings to ensure readability.
  • Use text-gray-600 for body text to reduce eye strain (vs pure black).
  • Use font-bold sparingly for emphasis.

3. Visuals

  • Backgrounds: Use ![bg right](image.jpg) for split layouts.
  • Images: Use rounded-lg shadow-xl classes to make images pop.

Common Issues & Fixes

  • Tailwind not loading: Ensure the <script src="https://cdn.tailwindcss.com"></script> is strictly strictly after the YAML frontmatter and before any visible content.
  • Scoped Styles: Styles in <style> tag in the frontmatter are global. For slide-specific styles, use inline style="..." or Tailwind classes.

Output Generation

When asked to "generate the file", always write the full .md content to the user's workspace. If asked to "preview" or "export", checking for marp-cli availability is good, but offering the .md file is primary.

Skills similaires