make-deck

スライドデッキを作成する

AI が生成したような見た目ではなく、デザインされた印象の HTML スライドデッキを構築します。キーボード操作、拡大縮小、発表者ノート、PDF 出力には starters/deck_stage.js を使用します。

フェーズ 0 — コンテキストの事前確認（自動検出、質問は最大 1 つ）

デザインについて質問する前に、自動チェックでコンテキストを何も言わずに検出します。何も見つからない場合にのみ、ユーザーに質問します。

自動検出（ユーザー入力不要）

1. Read .claude/design-tokens.json — プロジェクトのトークンが存在する場合は読み込みます
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — 組織レベルのレジストリです。依頼文にフォルダー名と一致するブランド名が含まれている場合は、自動で適用します（例：依頼文に「Acme deck」とあり、~/.claude/design-systems/acme/ がある場合は Acme を使用します）
3. プロジェクトのルートで Glob **/tailwind.config.* **/theme.{ts,js,json} **/tokens.{css,scss} **/_variables.* を実行します — 見つかった場合は「コードベースを検出しました」と記録し、ファイルを Read します
4. ユーザーメッセージ／添付ファイルをスキャンして、以下を確認します。
   • GitHub URL → 先に Skill: ingest-github を呼び出します
   • Figma URL → 先に Skill: ingest-figma を呼び出します
   • 画像の添付 → 先に Skill: ingest-screenshot を呼び出します
   • 添付された .md／.txt／.pdf ファイル → Read します（ブランドに関する参照やコンテンツが含まれている場合があります）

質問は 1 つだけの代替手段（何も検出されなかった場合のみ）

自動検出後にコンテキストが何も見つからない場合は、AskUserQuestion を使い、質問を 1 つだけ行います。選択肢はテキスト形式です。

• 既存のデザインシステムを使う — ~/.claude/design-systems/ にある名前を列挙します（存在する場合）
• コードベースから使う — 「ローカルパスまたは github URL を貼り付けてください」
• スクリーンショットから使う — 「画像を添付してください」
• Figma から使う — 「figma URL を貼り付けてください（FIGMA_TOKEN が必要です）」
• コンテキストなし — 一からデザインするため Skill: frontend-design を呼び出します
• こちらで決める — Claude が frontend-design を選びます

見つかった内容、または選ばれた内容を 1 行で報告します。「 を使用します。続行します……」

フェーズ 1 — 曖昧さの判定

ユーザーの依頼（$ARGUMENTS）に、以下の手がかりが含まれているか確認します。

• 対象者 — 「X 向け」「投資家向け」「チーム」「関係者」など
• スタイル — 名前のある美的スタイル（「New Yorker」「WSJ」「ミニマル」「大胆」「Apple 風」など）またはブランドへの言及
• 長さ — 「N 枚のスライド」「短く」「手短に」など

3 項目中 2 項目以上が含まれている場合 → 長い質問票は省略し、確認質問は最大 1～2 個にして進めます。

2 項目未満の場合 → AskUserQuestion を呼び出し、以下を尋ねます。

• 対象者（誰が見るか、感情の状態、技術レベル）
• トーン（フォーマル／カジュアル、面白く／真面目に）
• 長さ（スライド枚数）
• ビジュアル（最小限／豊富、写真／イラスト／グラフ）
• バリエーション（デッキの案を 2～3 個にするか、1 個のみにするか）

判定条件を満たしている場合でも、不明点が残っていれば関連する質問を最低 4 つ行います。ブランドのコンテキストについては質問しないでください。フェーズ 0 で確認済みです。

フェーズ 1.5 — 発表者ノートのヒューリスティック（エージェントが判断。切り替えなし）

ユーザーに「発表者ノートを使いますか？」と尋ねるのではなく、次の手がかりから判断します。

依頼文の手がかり	→ 発表者ノート
「手短に」「スタンドアップ」「ライトニングトーク」「振り返り」、100 文字未満	オフ — スライドだけで内容が伝わるようにし、ノートは付けません
「投資家向け」「役員会議」「基調講演」「全員参加のミーティング」	オン — スライドの情報量を抑え、ノートでストーリーを伝えます
PRD／長文ドキュメントの添付（500 語超）	オン — スライドでは要点をまとめ、ノートには台本を記載します
依頼されたスライドが 1～3 枚のみ	オフ
依頼されたスライドが 10 枚以上	オン（おそらくストーリー展開が必要です）
曖昧、または上記のいずれにも該当しない	はい／いいえで答えられる質問を 1 つだけします

オンの場合：<script type="application/json" id="speaker-notes">[...]</script> を <body> の末尾に出力し、スライドごとに 1 つの文字列を入れます。箇条書きの要約ではなく、会話調の詳しい説明にしてください。スライドはビジュアルを多くします。

オフの場合：ノートは付けません。スライドだけで内容が伝わるようにします。

フェーズ 2 — ビジュアルシステム

フェーズ 0 で得たコンテキストをもとに、あらかじめビジュアルシステムを決めます。

• セクション見出し、タイトル、画像のレイアウト
• デッキ全体で使う背景色は最大 1～2 色
• フォントの階層（ディスプレイ／H1／本文／キャプション）
• パレット（読み込んだトークンから取得するか、Skill: frontend-design で生成します）

スライドを作成する前に、システムの内容を 1 段落で説明します。

フェーズ 3 — 構築

1. シェルを使って artifacts/<slug>.html を作成します：

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <title>{{deck title}}</title>
     <script src="./deck_stage.js"></script>
     <style>/* your tokens + slide styles */</style>
   </head>
   <body>
     <deck-stage width="1920" height="1080">
       <section></section>
       ...
     </deck-stage>
   </body>
   </html>
   

2. Bash(cp starters/deck_stage.js "$(dirname <html>)/") — スターターを HTML と同じディレクトリにコピーします（artifacts/foo/deck.html のようなネストされたパスでは重要です）。
3. すべてのスライドを一度に作成します。ルール：
   • スライド 1 をタイトルだけのスライドにしないでください（すぐにコンテンツに入ります）。
   • 1920×1080 ではテキストを 24px 以上にします。
   • text-wrap: pretty
   • レイアウトには CSS Grid を使用します。
   • グラデーション、絵文字、Inter／Roboto／Arial は使用せず、文字に合ったフォントを選びます。
   • SVG で画像を描画せず、ラベル付きのプレースホルダー div を使います。
   • スライドごとにレイアウトのリズムを変えます（すべて同じテンプレートにしないでください）。
4. 発表者ノート：フェーズ 1.5 の判断に従います。再度確認しないでください。

3.1 縦方向の予算 — 作成前に計算します（！）

<deck-stage> のセクションには overflow: hidden が設定されています。オーバーフローは視覚的に気づきにくく、コンテンツがそのまま消えます。事前に縦方向の予算を立ててください。

各スライドの一般的なクロームレイアウトでは、1080px のキャンバスの約 430px を使います。

項目	予約領域
セクションの上部パディング	96px
クローム行（絶対配置ですが、視覚的な重みがあります）	24px
キッカーの上部マージン＋キッカー	44 + 22 = 66px
h2.section-title（フォントサイズ 80–96px × 2 行）	約 200px
h2 の下部マージン	36px
コンテンツグリッドの上部マージン	16px
セクションの下部パディング	96px
予約領域の合計	約 430px

コンテンツの予算：1080 − 430 = 約 650px。 コンテンツ領域内の主要なカード、行、メディアコンテナーは、すべてこの範囲に収める必要があります。

適切な範囲に収めるための上限：

• 主要カードの min-height：500px 以下
• モック後／深いコンテンツの列の min-height：620px 以下
• アナトミー行は、約 110px なら最大 5 行、約 130px なら最大 4 行
• 短い h2（1 行、60 文字以下）では予算が 140px 空きます。長い h2（2 行）では 200px を使用します。
• より高いコンテンツが必要な場合は、キッカーを省くか、キッカーと h2 を 1 行にまとめます。カードを大きくしないでください。

スライドが詰め込みすぎに感じられる場合は、分割するか内容を削ってください。オーバーフローはデザイン上の問題であり、タイポグラフィの問題ではありません。

3.2 ロシア語／長い単語のハイフネーション

<section> に hyphens: manual; -webkit-hyphens: manual; を設定し、ブラウザーが単語の途中にソフトハイフンを挿入するのを防ぎます（狭い列で長いロシア語の単語が途中で分割されます）。

フェーズ 4 — 検証

1. /done artifacts/<slug>.html — ブラウザーで開き、コンソールを確認してスクリーンショットを保存します。

2. エラーがあれば修正し、問題がなくなるまで再実行します。

3. プログラムによるオーバーフロー監査は必須です（スライドにオーバーフローがある場合、または余裕が少なすぎる場合はターン終了できません）。

   // Paste into mcp__chrome-devtools__evaluate_script
   async () => {
     const stage = document.querySelector('deck-stage');
     if (!stage) return { skipped: 'no deck-stage' };
     // Decoratives we deliberately ignore (bleed past section bounds by design):
     // glow halos, hero backdrops, chrome overlays, anything flagged data-decorative.
     const DECORATIVE = '.glow, .glow-2, .hero-glow, .chrome, [data-decorative], [aria-hidden="true"].backdrop';
     const isDecorative = (el) => {
       if (el.matches(DECORATIVE) || el.closest(DECORATIVE)) return true;
       const cs = getComputedStyle(el);
       // pointer-events:none + no text + low opacity → visual decoration, skip
       if (cs.pointerEvents === 'none' && !el.textContent?.trim() && parseFloat(cs.opacity) < 1) return true;
       return false;
     };
     const out = [];
     for (let i = 0; i < stage.totalSlides; i++) {
       stage.goToSlide(i);
       await new Promise(r => setTimeout(r, 80));
       const s = stage.querySelectorAll('section')[i];
       const sRect = s.getBoundingClientRect();
       const scale = 1080 / sRect.height;
       // Measure ALL elements (including position:absolute like .arrow-between, .save-cta,
       // .footer-row that ARE meaningful content) — only decoratives are skipped.
       let maxBottom = 0, culprit = null;
       for (const el of s.querySelectorAll('*')) {
         if (isDecorative(el)) continue;
         const cs = getComputedStyle(el);
         if (cs.display === 'none' || cs.visibility === 'hidden') continue;
         const r = el.getBoundingClientRect();
         if (r.height === 0 && r.width === 0) continue;
         const b = (r.bottom - sRect.top) * scale;
         if (b > maxBottom) { maxBottom = b; culprit = el.className?.toString?.().slice(0, 40) || el.tagName; }
       }
       const contentBottom = Math.round(maxBottom);
       const overflow = contentBottom - 1080;
       const headroom = 1080 - contentBottom;
       const status = overflow > 0 ? 'FAIL' : headroom < 40 ? 'WARN' : 'OK';
       out.push({ slide: i + 1, contentBottom, overflow, headroom, status, culprit });
     }
     stage.goToSlide(0);
     return out;
   }
   

   • FAIL（overflow > 0）— コンテンツが切れています。完了したと報告しないでください。 カード／フォント／パディングを小さくしてから、再実行します。
   • WARN（headroom < 40px）— 端に近すぎます（フォントメトリクスのわずかな違いでも切れてしまいます）。headroom は 60px 以上を目指します。
   • OK — 提出できます。

   よくある修正方法：カードの min-height を小さくする、見出しのフォントを小さくする、行を 1 行削る、キッカーとタイトルをまとめる、縦方向の間隔を詰める。

   ブラウザーでオーバーフローが表示されるのに、このスクリプトでは検出されない場合は、キャッシュを無視して再読み込みします：mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true })。このような食い違いの多くは、最新の Edit より前の CSS 状態がキャッシュされていることが原因です。

4. バックグラウンドで Skill: verify-artifact を通知なしに実行します（レイアウトを視覚的に確認します。<deck-stage> を検出すると、スライドごとのスクリーンショットを自動で処理します）。

5. ターン終了時の要約で .claude/last-preview.png に言及します。

フェーズ 5 — 次のステップを提示する

• /export-pptx artifacts/<slug>.html — スクリーンショットからネイティブ PPTX を作成
• /export-pdf artifacts/<slug>.html — PDF
• /export-standalone artifacts/<slug>.html <dist>.html — オフラインで使える単一ファイルの HTML
• /register-asset artifacts/<slug>.html — assets.html の概要に追加
• 発表者ノートモード → <script type="application/json" id="speaker-notes">[...]</script> を追加
• 調整可能モード → /make-tweakable artifacts/<slug>.html

アンチパターン — 厳禁

• 最初にタイトルスライドを置く
• 内容のない埋め草
• AI っぽいカードのパターン（角丸＋左側のアクセント境界線）
• 汎用的なグラデーション背景
• 数値や統計をでっち上げる
• 色を勝手に追加する（既存のパレットになじませるには oklch() を使用する）