パワポの作図を自動化するMCP作ってみた！Claude CodeでSVG→PPT変換

きっかけ：パワポのスライド作図めんどくさい問題 😫

みなさん、パワポのスライド作るときの図形配置って大変じゃないですか？

🐰「この四角をもうちょっと右に...」
🐤「矢印の角度がちょっと...」
🐰「テキストボックスの位置調整が...」
😭「もういやだ！！」

そんなとき、ふと思ったんです。

「最近のClaude、SVG画像作るの上手くなってきたよな...🤔」

「Claude CodeにSVG作らせて、それを自動でパワポに突っ込めばよくね？💡」

というわけで、初めてMCPツール作ってみました！

何を作ったか

簡単に言うと：

1. Claude CodeにSVG画像を生成してもらう
2. そのSVGをパワポに自動挿入
3. パワポ上で編集可能な形式に変換

これで位置関係とか気にせずに図が作れる！
その名も「SVG-PPTX 」MCPツール。

使い方

WindowsPCかつPowerPointが入ってる環境が前提です。

リポジトリ👇

git clone https://github.com/sinjorjob/svg-pptx.git
cd svg-pptx

2. インストール&ビルド

npm install
npm run build

3. Claude Codeに設定

# 例: C:\your\path\svg-pptx にクローンした場合
claude mcp add-json svg-pptx "{\"name\":\"svg-pptx\",\"command\":\"node\",\"args\":[\"C:/your/path/svg-pptx/dist/index.js\"]}"

パスは実際にクローンした場所に合わせて変更してね！

4. 確認

claude mcp list

svg-pptx: node C:/your/path/svg-pptx/dist/index.js - ✓ Connected って出ればOK！

5. 使う！

Claude Codeを再起動してからこんな感じの指示出しでOK!

@スライド構成.txtに記載している情報を１枚スライドのSVG画像にした後、PPTファイルに変換して

「diagram.svgをパワポに変換して」

@slide_sample.svgをPPTファイルにして

6. さらに便利に使う！

CLAUDE.mdを定義して、「～をスライドにして！」といった指示出しだけで指定したデザインでSVG画像を生成し、PPT変換まで自動で処理してくれるようにしちゃいます。

# Claude Code - SVG-PPTX Tool Rules

## Professional Slide Creation Rules

### 🎯 Slide Creation Trigger
When receiving instructions like:
- "～をわかりやすく１枚スライドにまとめて"
- "～の説明をスライドにして"
- "〜をプレゼン用スライドにして"

**MUST automatically execute the following workflow:**

### 📋 Mandatory Workflow
1. **Content Analysis**: Extract key information from the specified document/content
2. **SVG Creation**: Generate professional SVG slide with Accenture-style design
3. **PPT Conversion**: Convert SVG to PowerPoint using `mcp__svg-pptx__create_pptx_slide`

### 🎨 Design Standards (REQUIRED)

#### Color Palette (Accenture Style)
- **Primary**: `#A100FF` (Accenture Purple)
- **Secondary**: `#00D4AA` (Accenture Teal) 
- **Accent**: `#FF6900` (Orange)
- **Text Primary**: `#2C2C2C` (Dark Gray)
- **Text Secondary**: `#666666` (Medium Gray)
- **Background**: `#FFFFFF` (White)
- **Light Background**: `#F8F9FA` (Light Gray)

#### Layout Requirements
- **Slide Size**: 1920x1080px (16:9)
- **Title Area**: Top 200px with gradient background
- **Content Area**: Clean white background with structured sections
- **Margins**: 80px minimum from edges
- **Typography**: 
  - Title: 48px bold, sans-serif
  - Headers: 32px bold
  - Body: 24px regular
  - Captions: 18px regular

#### Visual Elements
- **Icons**: Use simple, modern line icons
- **Shapes**: Rounded rectangles (border-radius: 12px)
- **Shadows**: Subtle drop shadows for depth
- **Gradients**: Use linear gradients for backgrounds
- **Grid System**: 3-column or 2-column layouts for content organization

### 📐 Required SVG Structure

<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
  <!-- Gradient Definitions -->
  <defs>
    <linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#A100FF"/>
      <stop offset="100%" style="stop-color:#00D4AA"/>
    </linearGradient>
  </defs>
  
  <!-- Header Section with Gradient -->
  <!-- Content Sections with Clean Layout -->
  <!-- Visual Elements (Icons, Charts, etc.) -->
</svg>

### 📝 Content Structure Rules
1. **Title**: Clear, concise main message
2. **Key Points**: Maximum 5 bullet points
3. **Visual Hierarchy**: Use size, color, and spacing to guide attention
4. **White Space**: Generous spacing between elements
5. **Consistency**: Align elements to invisible grid

### 🔄 Auto-Conversion Rule
After creating SVG, ALWAYS automatically:
1. Save SVG file with descriptive name
2. Use `mcp__svg-pptx__create_pptx_slide` to convert to PowerPoint
3. Provide both file paths to user

### 💡 Quality Standards
- **Readability**: All text must be readable from 6 feet away
- **Professional**: Corporate presentation quality
- **Modern**: Contemporary design trends
- **Accessible**: High contrast ratios for text
- **Scalable**: Vector graphics only, no raster images

### 🚀 Examples of Triggers
- "〜の機能をスライドで説明して"
- "技術仕様を1枚にまとめて"
- "アーキテクチャを図解して"
- "READMEをプレゼン用に"

**Note**: This workflow is MANDATORY and should be executed automatically without asking for confirmation when triggered.

実行例：

Lensflare.jsについて調べて資料にまとめて。

動き出す・・・

この１文だけで出来上がったPPTスライド例はこんな感じ！

すさまじく楽ですね。
もう一度このうまみを知ったらやめられません。

おまけ

必殺プロンプトを使ってPPTスライドを作らせてみた結果。

かつて見たことがない超クールで超おしゃれで超かっこいい芸術的な１枚スライドを作って！

出来たPPTスライドはこちら

リンク

• GitHub ← コード見たい人はこちら
• MCP公式 ← MCP始めたい人向け

---

P.S. パワポの図形配置で苦しんでる人、ぜひ使ってみてください！