marp-pitch-creator

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.