How do I install the Marp Image Generator skill?

Run npx skillmds add majiayu000/marp-image-generator in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Marp Image Generator skill do?

Generate optimized images for Marp slides using Playwright MCP with theme-matching color palettes and guideline-compliant sizes It is listed under AI & ML on SkillMD.

Is Marp Image Generator safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Marp Image Generator?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Marp Image Generator free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Marp Image Generator?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Marp Image Generator by majiayu000 — Agent Skill

Name: Marp Image Generator
Rating: 4.2 (5 reviews)
Author: majiayu000

Marp Image Generator Skill

Overview

This skill generates images optimized for Marp presentations (16:9 format) using Playwright MCP. It creates HTML-based diagrams with theme-matching color palettes (canyon-custom or github-dark) and converts them to PNG screenshots at guideline-compliant sizes.

When to Use

User needs to create diagrams, charts, or visual content for Marp slides
User wants images that match the presentation theme (canyon-custom or github-dark)
User requires specific sizes following the Marp image size guideline
User needs comparison charts, info panels, or process diagrams

Workflow

Step 1: Determine Image Specifications

Image Size Reference (from docs/spec/marp/image-size-guideline.md):

Use Case	Recommended Size	Aspect Ratio
Full-size image	1216px × 582px	2.09:1
Safe area (recommended)	1100px × 550px	2:1
16:9 image	1034px × 582px	16:9
Two-column (per image)	550px × 400px	1.375:1
imageCenter	900px × 600px	3:2
imageFull	1280px × 720px	16:9
Retina (2x)	2200px × 1100px	2:1

Most Common Use Cases:

General diagrams: 1100px × 550px (safe area)
Comparison layouts: 550px × 400px (two-column)
Full-screen impact: 1280px × 720px (imageFull)

Step 2: Select Color Theme

Canyon-Custom Theme Colors:

Primary: #d4ed00 (yellow-green)
Secondary: #333333 (dark gray)
Accent: #00bcd4 (cyan)
Background: #ffffff (white)
Box colors:
- Blue box: #d4ed00 border on #f0f7d8 background
- Green box: #01ad09 border on #dbecdc background
- Yellow box: #b47800 border on #f5f0c6 background
- Red box: #ad0140 border on #f0dce3 background

GitHub-Dark Theme Colors:

Primary BG: #0d1117
Secondary BG: #161b22
Tertiary BG: #21262d
Text Primary: #f0f6fc
Text Secondary: #7d8590
Border: #30363d
Accent: #1f6feb (blue)
Success: #238636 (green)
Danger: #da3633 (red)
Warning: #9e6a03 (yellow)

Design Principle: NO GRADIENTS - Use solid colors and subtle color variations only

Step 3: Create HTML Diagram

HTML files should be saved to application/marp/src/html/ with this template:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diagram Title</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['"Hiragino Sans"', '"ヒラギノ角ゴシック"', '"Yu Gothic"', '"游ゴシック"', '"Noto Sans JP"', 'sans-serif']
                    },
                    colors: {
                        // Canyon-Custom theme colors
                        'canyon-primary': '#d4ed00',
                        'canyon-secondary': '#333333',
                        'canyon-accent': '#00bcd4',
                        'canyon-bg': '#ffffff',
                        'canyon-box-blue': '#f0f7d8',
                        'canyon-box-green': '#dbecdc',
                        'canyon-box-yellow': '#f5f0c6',
                        'canyon-box-red': '#f0dce3',

                        // GitHub-Dark theme colors
                        'gh-bg-primary': '#0d1117',
                        'gh-bg-secondary': '#161b22',
                        'gh-bg-tertiary': '#21262d',
                        'gh-text-primary': '#f0f6fc',
                        'gh-text-secondary': '#7d8590',
                        'gh-border': '#30363d',
                        'gh-accent': '#1f6feb',
                        'gh-success': '#238636',
                        'gh-danger': '#da3633',
                        'gh-warning': '#9e6a03',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            width: 1100px;  /* Adjust based on target size */
            height: 550px;
        }
    </style>
</head>
<body class="bg-white font-sans flex items-center justify-center p-10">
    <!-- Canyon-Custom example -->
    <!-- For GitHub-Dark: change class to "bg-gh-bg-primary text-gh-text-primary" -->

    <div class="w-full h-full">
        <!-- Diagram content here -->
    </div>
</body>
</html>

Naming Convention: Use snake_case (e.g., comparison_chart.html, workflow_diagram.html)

Step 4: Open in Browser and Resize

Use Playwright MCP:

Navigate to: file:///home/node/workspace/application/marp/src/html/[filename].html

Browser Resize (set body width/height to match target dimensions):

For 1100×550: body width=1100px, height=550px
For 1280×720: body width=1280px, height=720px
Browser viewport can be larger (e.g., 1920×1080)

Step 5: Take Screenshot

Use mcp__playwright__browser_take_screenshot:

filename: application/marp/src/assets/[diagram-name].png
type: png
fullPage: false (capture viewport only for exact size)

IMPORTANT - Move to Correct Location: After taking screenshot, ALWAYS move from Playwright MCP directory to assets directory:

mv /home/node/workspace/.playwright-mcp/application/marp/src/assets/[diagram-name].png /home/node/workspace/application/marp/src/assets/[diagram-name].png

Step 6: Use in Marp Slides

![Diagram Title](src/assets/diagram-name.png)

Design Templates

Template 1: Two-Column Comparison (Canyon-Custom)

Target Size: 1100px × 550px Use Case: Before/After, Pros/Cons

<body class="bg-white text-canyon-secondary font-sans flex items-center justify-center p-10">
    <div class="w-full h-full flex gap-10">
        <div class="flex-1 border-3 border-canyon-primary bg-canyon-box-blue p-8 flex flex-col rounded-lg">
            <h2 class="text-canyon-primary text-3xl font-bold mb-5 border-b-2 border-canyon-primary pb-2">
                Before
            </h2>
            <ul class="list-none text-xl leading-relaxed space-y-2">
                <li class="flex items-start">
                    <span class="text-canyon-primary mr-3">●</span>
                    <span>Item 1</span>
                </li>
                <li class="flex items-start">
                    <span class="text-canyon-primary mr-3">●</span>
                    <span>Item 2</span>
                </li>
                <li class="flex items-start">
                    <span class="text-canyon-primary mr-3">●</span>
                    <span>Item 3</span>
                </li>
            </ul>
        </div>
        <div class="flex-1 border-3 border-canyon-primary bg-canyon-box-blue p-8 flex flex-col rounded-lg">
            <h2 class="text-canyon-primary text-3xl font-bold mb-5 border-b-2 border-canyon-primary pb-2">
                After
            </h2>
            <ul class="list-none text-xl leading-relaxed space-y-2">
                <li class="flex items-start">
                    <span class="text-canyon-primary mr-3">●</span>
                    <span>Item 1</span>
                </li>
                <li class="flex items-start">
                    <span class="text-canyon-primary mr-3">●</span>
                    <span>Item 2</span>
                </li>
                <li class="flex items-start">
                    <span class="text-canyon-primary mr-3">●</span>
                    <span>Item 3</span>
                </li>
            </ul>
        </div>
    </div>
</body>

Template 2: Info Panel (GitHub-Dark)

Target Size: 1100px × 550px Use Case: Feature highlights, key points

<body class="bg-gh-bg-primary text-gh-text-primary font-sans flex items-center justify-center p-10">
    <div class="w-full h-full flex items-center justify-center">
        <div class="bg-gh-bg-secondary border-2 border-gh-accent border-l-8 p-10 rounded-lg max-w-4xl">
            <h1 class="text-gh-accent text-5xl font-bold mb-8">
                Key Features
            </h1>
            <ul class="list-none text-3xl leading-loose space-y-4">
                <li class="flex items-start">
                    <span class="text-gh-success text-4xl mr-4">✓</span>
                    <span>Feature 1</span>
                </li>
                <li class="flex items-start">
                    <span class="text-gh-success text-4xl mr-4">✓</span>
                    <span>Feature 2</span>
                </li>
                <li class="flex items-start">
                    <span class="text-gh-success text-4xl mr-4">✓</span>
                    <span>Feature 3</span>
                </li>
            </ul>
        </div>
    </div>
</body>

Template 3: Process Steps (Canyon-Custom)

Target Size: 1100px × 550px Use Case: Workflow, step-by-step guide

<body class="bg-white text-canyon-secondary font-sans flex items-center justify-center p-10">
    <div class="w-full h-full flex items-center justify-between px-5">
        <div class="flex-1 text-center p-5">
            <div class="w-20 h-20 bg-canyon-primary text-canyon-secondary rounded-full flex items-center justify-center text-4xl font-bold mx-auto mb-5">
                1
            </div>
            <div class="text-2xl font-bold mb-2">Plan</div>
            <div class="text-lg text-gray-600">Define requirements</div>
        </div>

        <div class="text-6xl text-canyon-accent">→</div>

        <div class="flex-1 text-center p-5">
            <div class="w-20 h-20 bg-canyon-primary text-canyon-secondary rounded-full flex items-center justify-center text-4xl font-bold mx-auto mb-5">
                2
            </div>
            <div class="text-2xl font-bold mb-2">Build</div>
            <div class="text-lg text-gray-600">Implement features</div>
        </div>

        <div class="text-6xl text-canyon-accent">→</div>

        <div class="flex-1 text-center p-5">
            <div class="w-20 h-20 bg-canyon-primary text-canyon-secondary rounded-full flex items-center justify-center text-4xl font-bold mx-auto mb-5">
                3
            </div>
            <div class="text-2xl font-bold mb-2">Test</div>
            <div class="text-lg text-gray-600">Verify quality</div>
        </div>
    </div>
</body>

Template 4: Centered Message (GitHub-Dark)

Target Size: 1280px × 720px (imageFull) Use Case: Section divider, key message

<style>
    body {
        width: 1280px;
        height: 720px;
    }
</style>
</head>
<body class="bg-gh-bg-primary text-gh-text-primary font-sans flex items-center justify-center">
    <div class="h-full flex flex-col items-center justify-center text-center">
        <h1 class="text-7xl font-bold mb-8 text-gh-text-primary">
            Main Message
        </h1>
        <div class="w-52 h-1.5 bg-gh-accent my-8"></div>
        <p class="text-4xl text-gh-text-secondary max-w-4xl">
            Supporting description goes here
        </p>
    </div>
</body>

Design Guidelines

Color Usage Rules

Canyon-Custom Theme:

Primary accent: #d4ed00 (use for borders, headings, icons)
Secondary accent: #00bcd4 (use for highlights, links)
Background: #ffffff or light tints (#f0f7d8, #dbecdc)
Text: #333333 (dark gray, never pure black)

GitHub-Dark Theme:

Primary accent: #1f6feb (use for borders, headings, links)
Success/positive: #238636 (use for checkmarks, success states)
Warning: #9e6a03 (use for caution, alerts)
Danger: #da3633 (use for errors, critical info)
Background: Layer with #0d1117, #161b22, #21262d
Text: #f0f6fc (primary), #7d8590 (secondary)

Typography

Heading sizes: 32px - 72px
Body text: 18px - 28px
Small text: 14px - 16px
Font weight: Normal (400) or Bold (600-700)

Spacing

Padding: 20px - 40px
Gaps: 20px - 40px
Margins: 10px - 30px
Border width: 2px - 8px

No Gradient Policy

Avoid:

❌ linear-gradient()
❌ radial-gradient()
❌ Multiple color stops

Use Instead:

✅ Solid colors
✅ Layered backgrounds with different opacity
✅ Adjacent color blocks

User Request Templates

Template: Create Diagram

Create a Marp image diagram using the marp-image-generator skill.

**Content**:
- Type: [comparison / info-panel / process / message]
- Title: [Title]
- Elements:
  - [Element 1]
  - [Element 2]
  - [Element 3]

**Theme**: [canyon-custom / github-dark]

**Size**: [1100x550 / 1280x720 / 550x400]

**Reference**: @docs/spec/marp/image-size-guideline.md

**Output**:
- HTML: application/marp/src/html/[filename].html
- PNG: application/marp/src/assets/[filename].png

Troubleshooting

Issue 1: Colors Don't Match Theme

Cause: Using incorrect color codes

Solution:

Refer to theme CSS files:
- Canyon-Custom: application/marp/theme/canyon-custom.css
- GitHub-Dark: application/marp/theme/github-dark.css
Use exact hex codes from color palette

Issue 2: Image Size Incorrect

Cause: Body dimensions not matching target size

Solution:

Set body { width: XXXpx; height: YYYpx; } to exact target dimensions
Use fullPage: false when taking screenshot

Issue 3: Text Too Small/Large

Cause: Font sizes not optimized for target dimensions

Solution:

For 1100×550: Use 24-36px for headings, 18-24px for body
For 1280×720: Use 48-72px for headings, 28-36px for body
Test and adjust based on visual balance

Issue 4: Gradients Detected

Cause: Using linear-gradient() or radial-gradient()

Solution:

Replace with solid colors
Use layered <div> elements with different background colors
Use border colors for visual separation

Best Practices

Use Tailwind CSS: Leverage Tailwind utility classes for faster development
Custom Theme Colors: Use the extended color palette (canyon-, gh-) for theme consistency
Keep It Simple: One diagram = one concept
Color Consistency: Stick to theme palette
Size Accuracy: Match exact dimensions from guideline (1100×550 default)
No Gradients: Use solid colors and borders only
Move to Correct Location: Always move (not copy) from .playwright-mcp/ to application/marp/src/assets/ to keep directories clean
Test on Slide: Verify the image looks good in actual Marp presentation

Related Resources

Image Size Guideline: docs/spec/marp/image-size-guideline.md
Marp Implementation Guide: application/marp/CLAUDE.md
Theme Files: application/marp/theme/
Existing HTML Examples: application/marp/src/html/
Playwright MCP Setup: docs/features/tool-playwright-mcp-setup/

Permissions Required

This skill requires Playwright MCP configured in .mcp.json:

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless", "--isolated"]
    }
  }
}

Marp Image Generator

File contents

Marp Image Generator Skill

Overview

When to Use

Workflow

Step 1: Determine Image Specifications

Step 2: Select Color Theme

Step 3: Create HTML Diagram

Step 4: Open in Browser and Resize

Step 5: Take Screenshot

Step 6: Use in Marp Slides

Design Templates

Template 1: Two-Column Comparison (Canyon-Custom)

Template 2: Info Panel (GitHub-Dark)

Template 3: Process Steps (Canyon-Custom)

Template 4: Centered Message (GitHub-Dark)

Design Guidelines

Color Usage Rules

Typography

Spacing

No Gradient Policy

User Request Templates

Template: Create Diagram

Troubleshooting

Issue 1: Colors Don't Match Theme

Issue 2: Image Size Incorrect

Issue 3: Text Too Small/Large

Issue 4: Gradients Detected

Best Practices

Related Resources

Permissions Required

Frequently asked questions

Marp Image Generator

File contents

Marp Image Generator Skill

Overview

When to Use

Workflow

Step 1: Determine Image Specifications

Step 2: Select Color Theme

Step 3: Create HTML Diagram

Step 4: Open in Browser and Resize

Step 5: Take Screenshot

Step 6: Use in Marp Slides

Design Templates

Template 1: Two-Column Comparison (Canyon-Custom)

Template 2: Info Panel (GitHub-Dark)

Template 3: Process Steps (Canyon-Custom)

Template 4: Centered Message (GitHub-Dark)

Design Guidelines

Color Usage Rules

Typography

Spacing

No Gradient Policy

User Request Templates

Template: Create Diagram

Troubleshooting

Issue 1: Colors Don't Match Theme

Issue 2: Image Size Incorrect

Issue 3: Text Too Small/Large

Issue 4: Gradients Detected

Best Practices

Related Resources

Permissions Required

Related skills

Frequently asked questions

How do I install the Marp Image Generator skill?

What does the Marp Image Generator skill do?

Is Marp Image Generator safe to use?

Which AI agents work with Marp Image Generator?

Is Marp Image Generator free to use?

Who published Marp Image Generator?