1プロンプトで登壇資料を作る

#aimeetup 自作のスライド作成ツールやスキルを見せ合おう会

Transcript

1. 1プロンプトで登壇資料を作る 2026/3/13 びーぐる #aimeetup 自作のスライド作成ツールやスキルを見せ合おう会
2. 自己紹介 びーぐる　フリーランスソフトウェアエンジニア 技術系ライター・個人開発者・AI愛好家 Software Design 2026年2月号 第1特集 Vibe Coding完全攻略に寄稿 オフラインイベント「VibeCoding特集 from SoftwareDesign 2月号」に登壇 #aimeetupを中心に時間が許す限りイベントに出席 beagleworks beagle_dog_inu zenn.dev/beagle
3. 今日のはなし 1 スライド作成の「手間」をどう減らすか 毎回やっていることを洗い出す 2 プロンプトからスライドが出来るまでの全プロセス 設定読み込み → 構成設計 → 生成 → 品質チェック 3 品質を保つ仕組み 失敗を発見→ルール化するイテレーション
4. スライド作り、こんな経験ありませんか？ 配色選びで1時間 いい感じの色が決まらない… 自己紹介を毎回作り直し コピペ → 微修正 → 崩れる… 文字が溢れて切れる スライドに収まらない→font縮小の悪循環 聴衆レベルの調整が大変 同じ内容でも初心者向け/上級者向けで2倍の手 間
5. 全体像 1 設定読み込み & ヒアリング 2 構成設計（枚数・ストーリー） 3 スライド生成 & テーマ適用 4 品質チェック & 修正 SKILL.md（約560行）にこの全プロセスとルールを定義。Claude Code が起動時に読み込んで実行する 実際のプロンプト: スライド作って スライド作成スキルの解説 #aimeetup 10分 初心者向け 青緑 12枚のスライドが自動生成 テーマカラー自動適用 プロフィール自動挿入 Claude Code の Agent Skill で自動化。 SKILL.md に プロセスとルールを書いておくと、 プロンプト1行で スライドが完成する。
6. Step 1: 設定読み込み & ヒアリング config/ を自動読み込み profile.yaml — 名前・SNS・実績・アバター → 自己紹介スライドとThank youスライドに反映 defaults.yaml — テーマ・フォント・バリエーション → プロンプトで指定しなければこの値を使用 knowledge/ — 過去の記事・文体サンプル → 内容・トーンに自動反映 不足情報をヒアリング 登壇テーマ イベント名・開催日 対象聴衆 登壇時間 or 枚数 テーマカラー（defaults で省略可） バリエーション（defaults で省略可） config にあるものは聞かない = 最短1行で開始できる knowledge/ に記事や文体サンプルを置けば、固定のナレッジを毎回自動で注入できる
7. Step 2: 構成設計 枚数の決定 5分 LT → 8〜12枚 15分トーク → 15〜20枚 30分セッション → 25〜35枚 ストーリーラインを決定 タイトル → 自己紹介 → アジェンダ → 課題提起 → 本編 → まとめ → Thank you バリエーション分岐 ウケ狙い — ネタ・ミーム・カジュアル文体 ノーマル A/B — 異なるストーリーライン 初学者向け — 用語解説・図解多め 上級者向け — コード・トレードオフ中心 同じ技術内容を、サブエージェントで並列生成。トーンと構成だけが変わる
8. Step 3: スライド生成 テーマカラー適用— 「青緑」→ teal パレットを設定 レイアウト選択— cover / center / two-cols を混在 密度ルール遵守— コード12行、テーブル5行、カード3つ以下 プロフィール自動挿入— profile.yaml → 自己紹介 & Thank you 生成されるファイル構成: slides.md の中身（イメージ）: Slidev（Markdown → スライド変換ツール）で マー クダウンを書き出す。 variant-beginner/ ├── slides.md ← 本体 ├── uno.config.ts ← テーマカラー ├── public/images/ ← アバター等 └── package.json ← Slidev 依存 --- theme: default class: text-white --- <div class="bg-gradient-to-br from-teal-900 to-cyan-950" /> # タイトル
9. Step 4: 品質チェック & 修正 最初のレンダリングには必ず問題がある前提で臨む。スクリーンショットを撮って目視確認→修正のサイクルを回す スクショ取得 全スライドを自動撮影 問題の検出 はみ出し・色・崩れ 修正 & 再検証 最低1サイクル回す よくある問題: コンテンツが下端で切れる、ダーク背景で文字が見えな い、同じレイアウトが3枚連続 発見した問題はルール化: 「コード12行以内」 「text-white 必須」等 → SKILL.md に追記して次回以降も防止
10. ここで種明かし いま説明したプロセスで生成されています 入力: 「スライド作って スライド作成スキルの解説 #aimeetup 10分 初心者向け 青緑」 設定読み込み → ヒアリング → 構成設計 → 生成 → QA を経て、手動編集ゼロで完成 このスライド自体が
11. 今後の課題 デザインの微調整に指示が必要 生成後の「ここの余白を直して」 「この色を変えて」はまだ手動で伝える必要がある Web から生成できる仕組み 現在作成中。毎回プロンプトを打つ面倒くささを解消したい 生成に時間がかかりすぎる QAサイクル込みで数分〜十数分。高速化とキャッシュの仕組みが今後の課題
12. Key Takeaways 設定で省力化 プロフィール・テーマを config に分離し、毎回の入力を最短1行 に プロセスを明文化 構成設計→生成→QAの流れを SKILL.md に書き、再現性を確保 失敗をルール化 「はみ出した」→密度制約を追 加。使うほどスキルが育っていく
13. Thank you! @beagle_dog_inu beagleworks フォローしていただけると幸いです