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)
Idéal pour créer rapidement un pitch deck professionnel au format Markdown.
Éviter si vous avez besoin de diapositives interactives ou de collaboration en temps réel.
Analyse de sécurité
SûrThe 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
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.
Atomiseur de Contenu
Contenu
Transforme un contenu unique en publications adaptées à chaque plateforme.
Rédacteur de Blog SEO
Contenu
Rédige des articles de blog optimisés SEO avec structure et mots-clés.
Scénariste YouTube
Contenu
Écrit des scripts YouTube engageants avec hooks, structure et rétention.