Our review
Creates high-quality pitch decks using Marp and Tailwind CSS.
Strengths
- Structured workflow with standard pitch sections
- Direct Tailwind CSS integration via CDN
- Concrete templates for polished look
- Grid and flexbox for advanced layouts
Limitations
- Requires basic Tailwind CSS knowledge
- Non-interactive slides (static)
- Relies on CDN (internet needed for rendering)
Best for quickly generating a professional pitch deck in Markdown.
Avoid when real-time collaboration or interactive presentations are needed.
Security analysis
SafeThe skill only instructs writing a Markdown file with Tailwind CSS CDN and no dangerous commands. It does not execute destructive or exfiltrating actions.
No concerns found
Examples
Create a Marp pitch deck with a title slide that has a large heading 'EcoCharge' and subtitle 'Revolutionizing Portable Energy' using Tailwind for styling.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.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
- Analyze Request: Understand the user's presentation topic, audience, and key message.
- Select & Create Template:
- Create a new
.mdfile for the slides (e.g.,pitch.md). - Inject the standard Marp + Tailwind Header into the file.
- Create a new
- 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).
- 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-5xlfor headings to ensure readability. - Use
text-gray-600for body text to reduce eye strain (vs pure black). - Use
font-boldsparingly for emphasis.
3. Visuals
- Backgrounds: Use
for split layouts. - Images: Use
rounded-lg shadow-xlclasses 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 inlinestyle="..."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.
Content Repurposer
Content
Transforms a single piece of content into platform-adapted publications.
SEO Blog Post Writer
Content
Writes SEO-optimized blog posts with proper structure and keywords.
YouTube Script Writer
Content
Writes engaging YouTube scripts with hooks, structure, and retention.