slide-maker

スライドメーカー

本当に印象的でブランドイメージに沿ったプレゼンテーションスライドを、1枚から完全なデッキまで作成できます。レビューを繰り返しながら、HTML／PDF／PPTX にエクスポートできます。このスキルには、トークン駆動型のデザインキット、制作ガイド、品質低下を検証するツール、すぐに使える React デッキ、編集モードでの共同作業機能、エクスポーターがすべて含まれています。デッキに必要なあらゆるデザインシステムに対応します。独自のもの、提案されたもの、中立的なデフォルトから選べます。

**用途ごとのワークフローとして機能します。**ユーザーがどの作業を求めているか（以下を参照）を判断し、そのワークフローファイルを開いて従ってください。通常はブレインストーミング → 生成 → エクスポートの順に進みますが、ユーザーは任意のステップから始められます（例：既存のデッキに対して「このデッキを PDF にエクスポートして」）。

ワークフローを選ぶ

ユーザーの要望	ワークフロー
デッキに何を盛り込むか、どのような構成にするかを考える（漠然としたアイデア、「X のためのデッキが必要」）	slide-brainstorm
実際のスライドを作成し、調整を重ねる（生成、レビュー、修正）	slide-generate
編集可能な PowerPoint を作る（受け取った人がテキストや図形を編集できる）	export-editable-pptx
ピクセル単位で正確な、閲覧専用の PowerPoint を作る	export-image-pptx
単独で動作する HTML ファイルを作る（オフラインで開ける）	export-standalone-html
PDF を作る（印刷／配布資料用）	export-pdf

brainstorm ──▶ generate ──▶ ┬─▶ editable PPTX
(idea→skeleton) (HTML deck,  ├─▶ image PPTX
                review loop) ├─▶ standalone HTML
                             └─▶ PDF

各ワークフローの最後に、次のステップが示されています。どの作業を求めているのか曖昧な場合は、推測せず簡潔に質問してください。デッキのブレインストーミングとエクスポートは、まったく異なる作業です。ユーザーのアイデアがまだ漠然としていて「スライドを作って」と依頼された場合は、ブレインストーミングから始めてください（検討されていないアイデアから生成しないでください）。

デザインシステムを決める（ブレインストーミング／生成の開始時に実施）

レイアウトはトークン駆動型です。色、書体、間隔はテーマファイルから取得し、スライドにハードコードすることはありません。何かを作り始める前に、どのデザインシステムからトークンを取得するかを決めてください。次の手順を順番に実行し、該当する最初の分岐で終了してください。

1. **独自のデザインシステム／ブランドトークンがあるか、ユーザーに尋ねます。**ある場合 → 色、書体、間隔をトークンの仕様に対応付けて、design-system/themes/clean-light.css（またはエントリーポイントでインポートする新しいテーマファイル）に記述します。レイアウトは変更せず、テーマファイル内のトークンの値だけを変更します。
2. **ない場合、nextlevelbuilder/ui-ux-pro-max-skill がインストールされているか確認します。**インストールされている場合 → それを呼び出して、デッキの内容／アイデアに最適なデザインシステムを提案させ、その提案をテーマファイルに反映します。
3. **それ以外の場合は、インストールを推奨し、永続的なインストール方法を案内します。**インストール先は https://github.com/nextlevelbuilder/ui-ux-pro-max-skill です。これが推奨される方法です。
4. それ以外（ユーザーが永続的なインストールを望まない場合）：まず確認してから、git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill を /tmp に実行して浅いクローンを作成し、今回のターンに限って使用します。スキルやユーザーのプロジェクトには保存しないでください。明示的な同意なしにネットワーク経由で取得してはいけません。クローンする前に必ず確認してください。
5. **それ以外（ユーザーが取得にも同意しない場合）：**同梱の clean-light テーマを使用します。

clean-light は保証された最低限の選択肢です。この手順では常に動作するテーマが用意されるため、スキルが作業を妨げることはありません。どの方法を選んでも、色と書体の唯一の信頼できる情報源はアクティブなテーマファイルです。ファイルを読み込み、レイアウトに値をハードコードせず、トークンの値をテーマファイルに記述してください。

デッキの保存先を選択する（生成の開始時）

ひな形を作成する前に、デッキの保存先をユーザーに確認してください。デフォルトを提案し、変更できるようにします。

• デフォルトの出力ディレクトリ： ユーザーの現在のプロジェクト内の ./slides/<deck-name>/。
• エクスポート先： ./slides/<deck-name>/export/。
• deck-template/ のひな形をその保存先にコピーしてください。スキルのディレクトリにはコピーしないでください。 これにより、スキルのインストール環境をクリーンに保ち、複数のデッキを並行して配置できます。スキル内の deck-template/ は未加工のひな形で、作業用コピーはユーザーのプロジェクト内に置きます。

もうひとつの使い方：デザインレイヤーのみを提供する

このスキルは、デザインレイヤー（トークン、コンポーネント、パターン）のみを別のスライド生成ツール（例：slides-generator）に提供することもできます。その生成ツールは独自のワークフローを実行しますが、汎用的なスタイルを選ぶ代わりに、ここからテーマを読み込みます。

• React + Tailwind → tailwind-theme.md のテーマブロックを tailwind.config.js に追加し、アクティブなフォントをインポートします。これにより、Tailwind ユーティリティでアクティブなデザインシステムのトークンが解決されます。
• プレーンな HTML/CSS → <skill>/design-system/styles.css をリンクし、公開されている CSS カスタムプロパティ（例：var(--fs-h1)、var(--space-8)、テーマのカラー トークン）を使ってスタイルを設定します。リテラルな 16 進値は決して使わないでください。

デザインキット（信頼できる情報源 — 推測せず、これらを読むこと）

このスキル内に同梱されているため、単独で使用できます。

<skill>/design-system/
├── styles.css                ← token entry point (imports tokens + the active theme; link for HTML slides)
├── tokens/                   ← colors, typography, spacing, fonts — THE source of truth
├── themes/clean-light.css    ← the active theme (bundled neutral default; the guaranteed floor)
├── slides/*.html             ← 34 premade slide layouts (the catalog)
└── assets/logos/             ← mark.svg, logo-full.svg (neutral placeholders; swap for the deck's real logos)

色とタイポグラフィは、アクティブなテーマファイルを優先してください。レイアウトがトークンと食い違っているように見える場合は、トークン／テーマを優先し、ファイルを開いて確認してください。レイアウトに 16 進値やフォントをハードコードしないでください。代わりにテーマファイルを変更します。

制作ルール（作業を主導するのが誰であっても、すべてのワークフローに適用）

• 色とタイポグラフィの信頼できる情報源は、アクティブなデザインシステムです。 レイアウトはトークン駆動にし、16 進値やフォントをハードコードしないでください。 レイアウトではなく、テーマファイルのトークン値を変更します。値がわからない場合は、<skill>/design-system/tokens/ とアクティブなテーマを確認してください。
• デフォルトのフォントはシステムフォントスタックです。 PPTX エクスポーターは Inter（SIL OFL）を埋め込むため、デッキのフォントがない環境でも編集可能な出力が一貫して表示されます。
• 焦点はひとつ、余白はしっかりと。 すべてのスライドで、主役となる要素をひとつ際立たせ、明確な「アイブロウ→タイトル→罫線→本文」のリズム、35％以上の余白、落ち着いた動きを実現します。装飾よりも奥行きと節度を重視します。どのスライドにも画面全体を覆う強い表現が必要なわけではありません。区切り、セクションの見出し、締めくくりに限定し、コントラストによって重みを持たせます。
• ただ準拠するだけでなく、感動を生むものにします。 ブランドに沿っていることと、印象的であることは同じではありません。感動を生むのは、節度＋ひとつの焦点＋奥行きです。制作の上限となるガイドは wow-guide.md です。check-slop.mjs バリデーターは下限です。
• 「完了」とは、ユーザーの依頼を合格テストとして言い換え、数値で示すことです。 「たぶん大丈夫」「今度はよさそう」ではいけません。修正する前に、ユーザーの言葉で合格条件を書きます（「arena を最後のステップに揃える」→ arena.bottom == step.bottom ±2px AND footer.bottom ≤ 648）。証明可能な形で合格した場合にのみ、完了を宣言します。2つの要件が矛盾する場合（A を B に揃え、かつフッターをフレーム内に収める必要があり、コンテンツが高すぎる場合）は、その旨を伝えてトレードオフを提案してください。重なりを残したまま納品し、完了と呼んではいけません。

検証 — それぞれ異なる問題を検出する3つのチェック

3つすべてを実行してください。同じチェックを何度繰り返しても、ほかのチェックの代わりにはなりません。

トリガー	実行すること	ほかのチェックでは検出できない問題
スライドをレンダリングした	LOOK — PNG を複数のサブエージェントに割り当て、各エージェントが数枚ずつ確認します	ヒーロー要素が極端に小さくなった、チップが切れている、角丸が失われた、といった問題です。チェッカーは指示された内容だけを確認します。ゲートを通過したときこそ、ずれが隠れています。
リクエストに align / same height / equal / overlap / fit / edge / below / above / touching / clipped / margin が含まれる	MEASURE — inspect.mjs → geometry.json を実行し、不等式（y+h ≤ 648、abs(A.bottom − B.bottom) ≤ 2）をアサートします	全体のスライド PNG では見えない、10～30px のずれです。目視より数値を優先し、感覚ではなく数値を報告してください。
エクスポートファイルを作成した	DIFF — node scripts/verify-export.mjs を実行し、平均値と最悪値を報告します	一様なずれ（すべてのブロックが数 px 下にある、1 列だけ幅が狭いなど）です。どのスライドでもそれらしく見えますが、順位付きの表では一目瞭然です。

XML の検査、レンダリングして目視すること、変更したスライドを再確認することは、いずれも 意図した変更が行われたことを確認するものです。意図していなかった変更を見つけるのが diff です。手法、標準の境界、レイアウトのレシピ（高さにマジックピクセルを使わない、 列の高さをそろえるには items-stretch を使う、フッターは mt-auto でフロー内に配置する）については、 visual-review.md を参照してください。ジオメトリゲートと エクスポートのレビューもご覧ください。

リファレンスライブラリ（ワークフローから必要なファイルを参照します）

ファイル	内容
house-style.md	34種類の既成レイアウト、それぞれを使う場面、トークン駆動のスタイル設定、パターン、ロゴの使い方
wow-guide.md	プレゼンテーション制作の技法：階層、データビジュアライゼーション、奥行き、動き、密度、タイポグラフィ＋スニペット
tailwind-theme.md	すぐに使える tailwind.config.js のテーマブロック＋チャート系列のパレット
validation.md	check-slop.mjs：各チェックの意味＋自分で検出できる AI スロップの兆候
diagrams.md	SVG 図を手作業で作る場合と生成する場合の使い分け、図を読みやすくする規則、具体例
visual-review.md	LOOK、MEASURE、DIFF — レンダリングしたスライドの自己レビュー、ジオメトリゲート、HTML と照らし合わせたエクスポートのレビュー
deck-template.md	すぐに使える React デッキのシェル：構成、開発、編集モード、HTML/PDF/画像のエクスポート
edit-mode.md	ポイントしてコメントするフィードバックオーバーレイ＋プログラムによる inspect API
pptx-editable.md	編集可能な PPTX の詳細：measure→OOXML、検証ゲート＋確認システム、フォント、注意点

レビュー用に34種類のレイアウトプレビューをレンダリングするには、deck-template/scripts/shoot-layouts.mjs を使用してください。

research/ には、評価されたものの実装されなかった日付付きの提案が格納されています。変更を採用するかどうか判断する場合にのみ、該当する提案をお読みください。