AIコーディングエージェントの進化が、「コードを書く」だけでなく「デザインを操作する」「プレゼンを作る」領域にまで広がっている。Claude CodeやOpenAI Codexから、PowerPointのスライド生成やFigma/FigJamの直接操作が可能になった2026年現在、開発者のワークフローは大きく変わりつつある。
本記事では、パワーポイント生成とFigma/FigJam操作の2軸で、公式ツールからOSSまで網羅的に整理する。
パワーポイント生成編
1. Anthropic公式「PPTX Skill」
Anthropicが2025年10月にリリースしたAgent Skillsの一つ。Claude.ai / Claude Code / APIのすべてで利用可能で、最も安定した選択肢。
仕組み:
skill_id: "pptx"を指定するだけで、Claude が内部でpython-pptxとPptxGenJSを使い分けてスライドを生成- Code Execution（サンドボックス内Python実行）と組み合わせて動作
- チャート、表、画像挿入もサポート
APIからの利用例:
response = client.beta.messages.create(
model="claude-opus-4-6",
container={"skills": [{"type": "anthropic", "skill_id": "pptx", "version": "latest"}]},
tools=[{"type": "code_execution_20250825", "name": "code_execution"}],
messages=[{"role": "user", "content": "Create a Q3 presentation with 5 slides"}]
)
参考: Anthropic Agent Skills ドキュメント
2. Claude for PowerPoint（Microsoftアドイン）
Microsoft Office Marketplaceで配布中のPowerPointアドイン。サイドバーからClaudeを直接使える。
特徴:
- テンプレートベースの編集が強力 ― 既存のコーポレートテンプレートを読み込ませ、そのレイアウトに沿ったスライドを生成できる
- Skills機能で繰り返しワークフローを保存
- 2026年3月にExcel/PowerPoint間のコンテキスト共有もリリース（VentureBeat報道）
3. Claude Code向けOSSスキル集
tfriedel/claude-office-skills ⭐おすすめ
Claude Desktopの内部スキルをClaude Codeでも使えるようにパッケージ化したOSS。
- PPTX / DOCX / XLSX / PDFの全ワークフロー対応
- サムネイルグリッド生成、スライド並べ替え、テキスト置換などのユーティリティスクリプト付き
- GitHub: tfriedel/claude-office-skills
zarazhangrui/frontend-slides
HTML/CSSでスライドをデザインし、ブラウザレンダリング後にPPTXにエクスポートするワークフロー。Claude が得意なHTML/CSSを活かしつつ、ネイティブPPTXに変換できる。アニメーション対応。
Cam10001110101/claude-skills-base
PptxGenJSベースのスキル実装。OOXMLフォーマットリファレンス付き。
4. OpenAI Assistants API + DALL·E 3 パイプライン
OpenAI公式Cookbookに掲載されたレシピ。Assistants APIでプレゼン内容を構造化し、DALL·E 3でタイトル画像を生成、python-pptxのテンプレートを渡してスタイルを統一する。
5. Markdown-firstアプローチ（Slidev / Marp）
Redditで「最高品質」と評判のワークフロー。LLMはマークダウン生成が得意なので相性が良い。
- Claude Code / Codex に Slidev（Vue.jsベース） のマークダウンスライドを生成させる
- Slidevのテーマ・アニメーション機能で仕上げ
- 必要ならPDF / PPTXにエクスポート
Marp も同様に使える（VS Code拡張あり）。
6. コーポレートテンプレート活用パターン
Stephen Smith氏のワークフローが実務で評判：
- 会社のテンプレート
.pptxをClaudeにアップロード - 「レイアウトインベントリを作って」と指示 → サムネイルグリッド＋レイアウト一覧を生成
- そのインベントリを参照しながら新しいスライドを作成依頼
- テンプレートのスタイルガイドを忠実に再現
参考: How to get Claude to create PowerPoint presentations
PPT生成の品質を上げるポイント
| ポイント | 詳細 |
|---|---|
| テンプレート活用 | 白紙から作らず、テンプレート .pptx を渡してレイアウト解析させる |
| HTML→PPTXパイプライン | Claudeの HTML/CSS力を活かし、ブラウザレンダリング後に変換 |
| サムネイルレビュー | スクリプトでサムネイルグリッドを生成し、全体のリズムを確認 |
| 画像は別途生成 | DALL·E / Flux等で高品質な画像を作り、スライドに挿入 |
| 1スライド6箇条以内 | LLMは詰め込みがちなので明示的に制約する |
Figma / FigJam操作編
1. Figma公式MCPサーバー ⭐最有力
2026年2月にFigmaが双方向統合を正式発表。Claude Code / Codex / Cursor / Windsurf / VS Codeに対応する公式MCPサーバー。
3つの主要ワークフロー:
Design → Code
Figmaフレームのリンクを渡すと、レイアウト・変数・コンポーネントを解析してコードを生成。React + Tailwindがデフォルトだが、Vue / HTML+CSS / iOS (SwiftUI) にも対応。
Code → Canvas（generate_figma_design）
Claude Codeで作ったWeb UIのスクリーンショットを、編集可能なデザインレイヤーとして Figma Design ファイルに書き戻せる。コードの実装結果をデザイナーがFigma上でレビュー・修正できる、真の双方向ワークフローを実現。
FigJamダイアグラム生成（generate_diagram）
Mermaid構文からFigJamにダイアグラムを直接生成。フローチャート、アーキテクチャ図、ER図などを自動作成。
セットアップ（Claude Code）:
# リモートサーバー（ブラウザ版Figma用）
claude mcp add --transport http figma https://mcp.figma.com/mcp
# Figma Plugin一括インストール（推奨）
claude plugin add figma
提供ツール一覧:
| ツール | 用途 |
|---|---|
get_design_context |
選択レイヤーのデザイン情報 → コード生成 |
generate_figma_design |
Code → Canvas（Web UIをFigmaに書き戻し） |
generate_diagram |
Mermaid → FigJamダイアグラム生成 |
get_figjam |
FigJamダイアグラムをXMLで取得 |
get_variable_defs |
デザイントークン（色・余白・タイポ）取得 |
get_screenshot |
選択範囲のスクリーンショット |
get_code_connect_map |
Figma ↔ コードのコンポーネントマッピング |
create_design_system_rules |
デザインシステムルールファイル生成 |
制約:
generate_figma_designはRemote MCP + Claude Codeのみ対応- Web アプリのDOMキャプチャ方式のため、ネイティブアプリUIは不可
- Dev Mode（有料）が必要
参考: Figma公式ブログ — From Claude Code to Figma
2. FigJam × Claude（Figma Connector）
2026年1月にリリース。Claude.aiから直接FigJamダイアグラムを生成・操作できる。
特徴:
- プロンプト・PDF・画像・スクリーンショットから編集可能なFigJamダイアグラムを生成
- フローチャート、アーキテクチャ図、ER図、ユーザーフローなど
- Claude Code からもMCP経由で
generate_diagram（Mermaid → FigJam）が使える
実例: FigJamフローチャートからTetrisゲームをワンショットで生成（ADPList記事で話題）
参考: Figma公式ブログ — Think Outside of the Box with Claude and FigJam
3. Talk to Figma MCP（コミュニティ版・双方向書き込み）
Grab社がOSSで公開。Figma無料プランでも使えるのが最大の特徴。
仕組み:
- Figma プラグイン（WebSocket）+ MCPサーバーの組み合わせ
- 公式MCPより書き込み操作が豊富 ― テキスト挿入、コンポーネントインスタンス差し替え、スタイル一括適用など
- Claude Code / Cursor / Windsurf いずれからも利用可能
参考: GitHub: grab/cursor-talk-to-figma-mcp
4. OpenPencil（OSS Figma代替 × AI ネイティブ）⭐注目
OpenPencilはオープンソースのAIネイティブデザインエディタ。Figmaの .fig ファイルを直接読み書きでき、Claude Code / Codex / Gemini CLIと完全に統合されている。
核心的な特徴:
.figファイル完全互換 ― Figmaとのコピペも可能（Kiwiバイナリフォーマット対応）- 90以上のAIデザインツール ― シェイプ作成、スタイル設定、レイアウト管理、トークン解析をチャットやMCPで操作
- MCPサーバー内蔵 ― Claude Code / Codexから
.figファイルをヘッドレスで読み書き - ヘッドレスCLI ― CI/CDパイプラインで
.figファイルのインスペクト・エクスポート・解析 - マルチフレームワークコード生成 ― React / HTML / Vue / Svelte / Flutter / SwiftUI / Compose / React Native
- P2Pリアルタイムコラボ ― WebRTCベース、サーバー不要
- ネイティブファイル形式がJSON ― Claude Code / Codexが直接編集可能（GUI不要）
Claude Code / Codexとの連携:
OpenPencilのデスクトップアプリのチャットパネルで Claude Code / Codex / Gemini CLIを直接使える。エージェントがエディタのMCPサーバーに接続し、90以上のデザインツールを自由に操作する。
また、MCP クライアントとしてヘッドレス接続することで、GUIなしで .fig ファイルを読み書きすることも可能。
Figma公式MCPとの比較:
| 観点 | Figma公式MCP | OpenPencil |
|---|---|---|
| 読み取り | ✅ 強力 | ✅ 完全 |
| 書き込み | △ Code to Canvasのみ | ✅ 90以上のツールで完全操作 |
.fig 互換 |
― | ✅ ネイティブ対応 |
| 料金 | Dev Mode必要（有料） | 完全無料・OSS |
| ヘッドレス | × | ✅ CLI + MCP |
| コード生成 | React + Tailwind中心 | 8フレームワーク対応 |
| オフライン | × | ✅ |
| FigJam対応 | ✅ generate_diagram | × |
参考:
5. その他のアプローチ
A Better Figma MCP
Figma公式MCPの制約を回避して「Claudeにデザインさせる」ワークフロー。Figmaプラグイン経由でより自由な操作が可能。
Plus AI MCP Server
カスタムテンプレート対応、チャート・画像の高度なスライド要素生成。プレゼンとFigma双方に対応。
2slides/mcp-2slides
Claude / 任意のLLMからプレゼン生成用のMCPサーバー。
用途別おすすめ
パワーポイント生成
| ユースケース | おすすめ |
|---|---|
| すぐ使いたい | Anthropic公式 PPTX Skill（API or Claude.ai） |
| Claude Codeベース | tfriedel/claude-office-skills を導入 |
| 最高品質を追求 | HTML→PPTXパイプライン（frontend-slides）かSlidev + Claude Code |
| 会社テンプレート活用 | テンプレート .pptx をアップロード → レイアウトインベントリ → 生成 |
Figma / FigJam操作
| ユースケース | おすすめ |
|---|---|
| Design → Code | Figma公式MCP（claude plugin add figma） |
| Code → Design（AIにデザインを作らせたい） | OpenPencil |
| FigJamでダイアグラム自動生成 | Figma MCP の generate_diagram |
| Figma無料プランで書き込みたい | Talk to Figma MCP（Grab社） |
| CI/CDでデザインファイルを操作 | OpenPencilヘッドレスCLI |
まとめ
2026年現在、AIコーディングエージェントの守備範囲は「コード」から「デザインとプレゼンテーション」にまで拡大している。
パワーポイント生成は、Anthropic公式のPPTX Skillが最も安定。テンプレートを渡してレイアウトインベントリを作る手法が実務で最も評判が良い。最高品質を追求するなら、HTML→PPTXパイプラインかSlidevとの組み合わせが強力。
Figma操作は、公式MCPサーバーの双方向統合（Design → Code / Code → Canvas）が2026年2月に本格始動。一方で、OpenPencilのようなAIネイティブで完全にプログラマブルなOSSデザインエディタが台頭しており、ヘッドレスCLIやMCPサーバーでの .fig ファイル直接操作が可能になっている。
いずれの領域でも、MCP（Model Context Protocol） がAIエージェントと外部ツールを繋ぐ標準プロトコルとして定着しつつある点は見逃せない。今後のAI開発ワークフローを設計する上で、MCPへの対応は重要な判断基準になるだろう。
参考リンク
- Anthropic Agent Skills ドキュメント
- Figma公式ブログ — From Claude Code to Figma
- Figma MCP サーバーガイド
- Figma MCP Tools and Prompts
- OpenPencil 公式サイト
- GitHub: open-pencil/open-pencil
- GitHub: tfriedel/claude-office-skills
- GitHub: grab/cursor-talk-to-figma-mcp
- OpenAI Cookbook: Creating slides with Assistants API
💡 エキスパートコメント
AI Solo Craft 編集部のエキスパートが、今日のニュースを専門視点で読み解きます。
Code to Canvasは画期的だけど、デザイナーとしてはFigmaに「戻ってくる」UIがどこまで編集しやすい構造かが気になるところ。自動生成されたレイヤーが雑だと、結局手作業で再構成することになる。OpenPencilは構造化されたJSONベースだからその点有利。一方、FigJamでのダイアグラム自動生成は、ブレスト初期のアイデア可視化に本当に効果的で、チーム全員がすぐに触れる形で出てくるのが良い。
Figma公式MCPがDev Mode（有料）を前提にしている点は見逃せない。個人開発者にはOpenPencilやTalk to Figma MCPのような無料代替が重要。プレゼン生成も含めて「AIエージェント × MCP」が標準化されると、ツール選定の判断基準が「MCP対応しているか」に集約されていく可能性がある。個人開発者の生産性ツールチェーン全体が、MCP中心に再編される流れは注視すべき。
📋 デスクコメント
本記事のポイントは3つ。(1) PPT生成はAnthropic公式Skillが安定、テンプレート活用で品質UP。(2) Figma操作は公式MCPの双方向統合が本格始動したが、書き込み側はまだ発展途上。(3) OpenPencilのようなOSS・AIネイティブなデザインツールが急速に台頭しており、「Figma一択」だった前提が変わりつつある。読者の次のアクションとしては、まず claude plugin add figma でFigma MCPを試し、並行してOpenPencilのヘッドレスCLIでの .fig 操作を検証してみることを勧めたい。
Figma公式MCPの
generate_figma_designは「DOMキャプチャ→Figmaレイヤー変換」という仕組み上、CSSの細かいニュアンスが落ちるケースがある。実務ではOpenPencilのJSON直接編集と公式MCPを併用するのが現実解。PPTXはAnthropic公式Skillの安定感が抜群だが、社内テンプレートとの整合はまだ手動調整が必要な場面が多い。MCPの標準化が進めば、ツール間の切り替えコストは劇的に下がるはず。