AIエージェントと協働してmarpでスライドを作る2026

<script src="theme/js/tailwindcss-3.0.16.js"></script>
<script src="theme/js/tailwind.config.js"></script>

Claude Codeへのプロンプト例：

過去のスライドファイルを読んで、共通するデザインパターンを
分析してください。以下の観点でまとめてほしい：
- 使われている色（背景色、テキスト色、アクセント色）
- フォントサイズの使い分け
- レイアウトパターン（何カラム構成が多いか）
- パネルデザイン（角丸、影、ボーダーの使い方）

# レクタースライドスタイルガイド

## デザイン哲学
- 美麗でシンプル：情報過多を避け、視覚的にクリーン
- 色数制限：グレースケール基調に限定的なアクセントカラー
- 可読性重視：フォントサイズと余白を適切に
- 一貫性：パターンの繰り返しで理解しやすく

/* プライマリグラデーション */
background: linear-gradient(to right, #1B4565, #3E9BA4);

/* グレースケール */
gray-50:  パネル背景（淡い）
gray-100: パネル背景（やや濃い）
gray-600: サブテキスト
gray-700: 見出しテキスト
gray-800: メインテキスト

プロンプト例：

過去のスライドを分析して、よく使われるレイアウトパターンを
カテゴリ別に整理してください。各パターンには以下を含めてほしい：
- パターン名と用途の説明
- 実際に動作するコード例
- デザインのポイント

A. タイトル・セクション系（5種）
   1. タイトルスライド
   2. セクション開始
   3. セクション終了・まとめ
   4. 目次スライド
   5. クロージングスライド

B. カラムレイアウト系（8種）
   6. 2カラム比較（Before/After）
   7. 2カラム対比
   8. 3カラムレイアウト（等幅）
   9. 3カラム（アクセントカラー）
   10. 4カラムレイアウト
   11. 5カラム（成熟度レベル）
   12. 2x2グリッド
   13. 2x3グリッド

C. 縦並びリスト系（4種）
   14-17. ステップ、タイムライン、アイコン付きリスト

D. パネルデザイン系（5種）
   18-22. 基本、強調、ガラス風、グラデーション

E. 背景・画像系（4種）
   23-26. 全画面、右側配置、引用

F. 強調・特殊系（3種）
   27-29. 統計、中央配置、Q&A

G. 応用パターン（10種）
   30-39. QRコード、問いかけ、まとめ、企業事例

<div class="grid grid-cols-2 gap-6 mt-6 text-base">
  <div class="bg-gray-50 rounded-xl shadow-lg p-6 border-l-4 border-gray-400">
    <h1 class="text-em-2xl font-bold mb-4 text-gray-800">期待</h1>
    <ul class="text-em-lg space-y-3 text-gray-700">
      <li>AIエージェントで10倍以上の生産性</li>
      <li>開発チームは少人数で十分</li>
      <li>すべてが自動化される</li>
    </ul>
  </div>

  <div class="bg-gray-100 rounded-xl shadow-lg p-6 border-l-4 border-gray-500">
    <h1 class="text-em-2xl font-bold mb-4 text-gray-800">現実</h1>
    <ul class="text-em-lg space-y-3 text-gray-700">
      <li>多くの企業では2-3倍程度</li>
      <li>人間の判断は依然として重要</li>
      <li>本質的複雑性は残る</li>
    </ul>
  </div>
</div>

<!--
_backgroundImage: "linear-gradient(to right, #1B4565, #3E9BA4)"
_color: #fff
-->

# どうすれば
ソフトウェア開発の生産性は上がるのか

<div class="grid grid-cols-3 gap-4 mt-4 text-base">
  <div class="bg-gray-100 rounded-lg shadow p-4 text-center">
    <p class="text-em-3xl font-bold text-gray-600">35万文字</p>
    <p class="text-em-lg mt-2">総文字数</p>
    <p class="text-em-base text-gray-500 mt-1">4部16章60節</p>
  </div>

  <div class="rounded-lg shadow p-4 text-center"
       style="background: linear-gradient(135deg, #1B4565 0%, #3E9BA4 100%);">
    <p class="text-em-3xl font-bold text-white">774件</p>
    <p class="text-em-lg mt-2 text-white">GitHub Issue</p>
  </div>

  <div class="bg-gray-100 rounded-lg shadow p-4 text-center">
    <p class="text-em-3xl font-bold text-gray-600">1ヶ月</p>
    <p class="text-em-lg mt-2">執筆期間</p>
  </div>
</div>

---
name: slide-style-rector
description: レクタースライドスタイルガイドに基づいてMarpスライドの
  レイアウトを美しく整形する。
---

# slide-style-rector

**まず `slides/example.md` を読み、40種類のレイアウトパターンから
最適なものを選んで適用する。**

独自レイアウトを作成せず、example.mdのパターンを使うことで
デザインの一貫性を維持する。

## 参照ファイル

| ファイル | 内容 |
|---------|------|
| `slides/example.md` | 40種類のレイアウトパターン |
| `docs/style-guide.md` | カラー、タイポグラフィの詳細 |

/slide-style-rector をつかってスライド15-20のスタイルを整えて

---
name: layout-fix
description: Marpスライドのレイアウト崩れを検出し自動修正する。
---

# layout-fix

レイアウト修正は以下のステップで行う：

1. サーバー起動（scripts/start-server.sh）
2. スクリーンショット撮影（scripts/take-screenshots.sh）
3. 画像を確認してレイアウト崩れを検出
4. 修正を適用
5. クリーンアップ（scripts/cleanup.sh）

前提: `agent-browser` と `npx` が利用可能であること。

<!-- 修正前 -->
<div class="grid grid-cols-1 gap-4 mt-6">
  <div class="p-5">...</div>
</div>

<!-- 修正後 -->
<div class="grid grid-cols-1 gap-2 mt-2">
  <div class="p-3">...</div>
</div>

<!-- 修正前: 縦1列で5項目 -->
<div class="grid grid-cols-1 gap-3">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
  <div>項目4</div>
  <div>項目5</div>
</div>

<!-- 修正後: 2列グリッドに変更 -->
<div class="grid grid-cols-2 gap-3">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
  <div>項目4</div>
  <div class="col-span-2">項目5（全幅）</div>
</div>

/layout-fix をつかってslides/my-presentation.mdのスライド15-25を
確認して、レイアウト崩れがあれば修正して

# スライド挿絵（16:9）
ergon image gen "professional business team collaborating in modern office, \
  flat design style, color palette: navy blue #1B4565 and teal #3E9BA4, \
  clean white background, minimal shadows" \
  -t corporate -a 16:9 -o images/presentation/team.png

# アイコン（1:1）
ergon image gen "abstract icon representing data analytics, \
  flat minimal style, navy blue #1B4565 and teal #3E9BA4 accent colors, \
  white background" \
  -t flat -a 1:1 -o images/presentation/analytics.png

# コンセプト図（16:9）
ergon image gen "workflow diagram showing agile process, \
  flat corporate style, muted gray tones with teal #3E9BA4 highlights, \
  clean professional look" \
  -t flat -a 16:9 -o images/presentation/workflow.png

## 画像生成（ergon連携）

スライドに画像が必要な場合は、`/ergon` スキルを使用して
レクタースタイルに合った画像を生成する。

### 画像が必要なケース

- カラムレイアウトでイラストが必要
- パネルデザインでヘッダー画像が必要
- 背景画像が必要
- コンセプトを視覚化するアイコンが必要

/ergon をつかって、AIエージェントと人間が協働している様子を
表すイラストを作成して、スライド12に挿入して

# 1. ergonで動画を生成
ergon video gen "abstract flowing particles, navy blue and teal gradient, \
  smooth motion, corporate style background" \
  -a 16:9 -o images/background-video.mp4

# 2. ffmpegでアニメーションGIFに変換
ffmpeg -i images/background-video.mp4 \
  -vf "fps=10,scale=1280:-1:flags=lanczos" \
  -loop 0 images/background.gif

---
<!-- アニメーションGIFを背景に設定 -->
![bg](images/background.gif)

# タイトル
動きのある背景で印象的なスライドに
---

# svg-creator

## 基本仕様
- サイズ比率: 縦2:横5（例: 400px × 1000px）
- 保存先: ./svg/
- ファイル名: 3-4の英単語

## カラーパレット
- グレートーン基調
- ダークブルー #1a2b50（タイトル、重要ラベル）
- ティール #008080（アクセント）
- ルビーピンク #c70067（対比、強調）

/svg-creator で「スタイルガイドあり/なしの比較図」を作成して

# キーワードで関連スライドを検索
marp-lens search "生産性向上"

# 結果例
# - presentation-a.md #23: 生産性向上の3つの壁
# - presentation-b.md #15: 開発生産性を測定する方法
# - presentation-c.md #8: エンジニアリング組織の生産性

# 特定スライドの内容を取得
marp-lens get "presentation-a.md #23"

# インデックスを更新（スライド変更後）
marp-lens index

プロンプト例：

新しいプレゼンで「チーム構成」について話したい。過去のスライドで
関連するものがあれば探して、再利用できそうな部分を教えて。

このスライドを「パターン6: 2カラム比較」のレイアウトに変更して

1. feedbackシステムでスライドをプレビュー
2. スライド18が窮屈に見える → コメント追加
3. 「レイアウト修正」ボタンをクリック
4. Claude Codeでコメントを確認
5. /layout-fix でスクリーンショット撮影→修正
6. feedbackシステムで修正結果を確認

import { Sequence, useCurrentFrame } from 'remotion';

export const SlideVideo: React.FC = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={150}>
        <TitleSlide title="AIエージェント時代の開発" />
      </Sequence>
      <Sequence from={150} durationInFrames={300}>
        <ComparisonSlide
          left={{ title: "期待", items: ["10倍の生産性", "..."] }}
          right={{ title: "現実", items: ["2-3倍程度", "..."] }}
        />
      </Sequence>
    </>
  );
};

### スライドタイトルと文体

- **コロン（：）を使用しない**
  - ❌ 悪い例: `原則❶：自律性の最大化`
  - ✅ 良い例: `原則❶ 自律性の最大化`

### 理知的な文体の維持

- **感嘆符（！）や疑問符（？）を避ける**
  - ❌ 悪い例: `AIで開発が10倍速に！`
  - ✅ 良い例: `AIで開発が10倍速に`

- **装飾的な絵文字を避ける**
  - ❌ 悪い例: `🧩 問題領域の複雑さ`
  - ✅ 良い例: `問題領域の複雑さ`

- **色による強調は控えめに**
  - red-600、green-600などは避け、gray-600/gray-700を使用

1. 概要を伝える
   「30分の講演スライドを作りたい。テーマはAIエージェント時代の
   ソフトウェア開発について」

2. Claude Codeがスライド構成を提案
   - marp-lensで過去の関連スライドを検索
   - 構成案を提示

3. スライド作成
   - slides/example.mdの40パターンから選択
   - スタイルガイドに沿ったデザイン

4. 画像生成
   - /ergon でレクタースタイル準拠の画像を生成
   - スライドに挿入

5. レイアウト検証
   - /layout-fix でスクリーンショット撮影
   - オーバーフロー/位置ずれを自動修正

6. レビュー
   - feedbackシステムでプレビュー
   - コメントを追加→修正のサイクル

7. 完成

30分のカンファレンス講演用スライドを作りたい。
テーマは「AIエージェント時代のソフトウェア開発」。

過去のスライドで関連するものがあれば探して、
構成案を提案してほしい。

/slide-style-rector をつかってslides/my-presentation.mdのスライド10-20の
スタイルを整えて。特にカラムレイアウトが統一されていないので、
example.mdのパターンに合わせてほしい。

/layout-fix をつかってslides/my-presentation.mdのスライド15-25を
確認して。下部が切れているスライドがあれば修正して。

/ergon をつかって、スライド12用のイラストを作成して。
「AIエージェントと人間エンジニアが協働している様子」を
フラットなコーポレートスタイルで、レクターカラー
（#1B4565, #3E9BA4）を使って。