| name | slide-md-creator |
| description | 既存のスライド・画像・WebサイトからデザインシステムSLIDE.mdと6ページのHTMLサンプルスライドを生成する。「このスライドのデザインシステムを作って」「SLIDE.mdを生成して」「SLIDE.mdを作りたい」「このサイトのデザインでSLIDE.mdを生成して」「slide-md-creator」と言われたときに使用する。 |
slide-md-creator
既存のスライド・画像・Webサイト・テキストからデザイン情報を解析し、AIツール（Claude Design、NotebookLM、Google Slides等）向けのスライドデザインシステム定義ファイル（SLIDE.md）と6ページのHTMLサンプルスライドを生成する。
STEP 1：入力の受け取り
スキル起動時、ユーザーが以下のいずれかを提供しているか確認する：
- 画像ファイル（スライドのスクリーンショット、ロゴ、ブランドガイド等）
- WebサイトのURL
- 既存スライドのファイル（PowerPoint / Google Slides）
- テキストによるデザインの説明
何も提供されていない場合、以下のように尋ねる：
「参考にしたいスライド・画像・WebサイトのURLはありますか？テキストでデザインのイメージを説明していただくことも可能です。」
複数の入力が提供された場合はすべてを受け取り、STEP 2の分析に使用する。
STEP 2：デザイン要素の分析
受け取った入力を解析し、以下の要素を読み取る。読み取れた内容をユーザーに箇条書きで提示する。
複数ソース・複数ページの並列処理
ソース（URL・画像・ファイル）が2つ以上ある、またはWebサイトから複数ページを取得する必要がある場合は、Agentツールを使って並列で分析する。
ケース1：ユーザーが複数のソースを提供した場合
各ソースに対して独立したサブエージェントを同時に起動する：
# 例：URL 2つ + 画像 1枚が提供された場合
Agent(subagent_type="general-purpose", prompt="以下のURLを取得し、Colors・Typography・Layout・Component Styleの情報をMarkdownで返せ: https://example.com/")
Agent(subagent_type="general-purpose", prompt="以下のURLを取得し、Colors・Typography・Layout・Component Styleの情報をMarkdownで返せ: https://example.com/about")
Agent(subagent_type="general-purpose", prompt="添付画像 logo.png からColors・Typography・Component Styleの情報をMarkdownで返せ")
- 全サブエージェントの結果が揃ってから情報を統合して1つの分析結果を作成する
- 矛盾する値がある場合はより多くのソースで確認できた値を優先し、確認が取れない項目はSTEP 3でユーザーに確認する
ケース2：単一URLだがブランドを理解するために複数ページを読む必要がある場合
トップページだけでは情報が不足している場合（例：カラーが読み取れない、CSSが取得できない）、関連ページを並列取得する：
# 例：トップ・プロダクト・Aboutページを同時取得
Agent(subagent_type="general-purpose", prompt="https://example.com/ を取得してデザイン情報（Colors・Typography・Layout）をMarkdownで返せ")
Agent(subagent_type="general-purpose", prompt="https://example.com/product を取得してデザイン情報（Colors・Typography・Layout）をMarkdownで返せ")
Agent(subagent_type="general-purpose", prompt="https://example.com/about を取得してデザイン情報（Colors・Typography・Layout）をMarkdownで返せ")
- 並列取得するページ数は最大3〜4ページを目安にする
- すべての結果を受け取ってから統合分析に進む
ケース3：ソースが1つだけの場合
並列化は不要。通常のWebFetch・Readで分析して進める。
分析する要素
Colors（カラー）
- Primary（メインカラー）：最も多く使われている色。HEXコードで記録する。
- Secondary（サブカラー）：2番目に使われている色。HEXコードで記録する。
- Background（背景色）：スライドの背景色。HEXコードで記録する。
- Accent（強調色）：ボタン・下線・強調に使われている色。HEXコードで記録する。
- Text（テキスト色）：本文テキストの色（最も濃い色）。HEXコードで記録する。
- Text Sub（見出し・ラベル色）：本文より少し薄い色（例：#444746）。読み取れない場合はTextより15〜20%明るい値を推定する。
- Text Muted（補足・キャプション色）：さらに薄い色（例：#5E5E5E）。読み取れない場合はTextより30〜40%明るい値を推定する。
- Gradient（グラデーション）：グラデーションの有無と使用カラーストップ・方向。例：「Primary → Secondary → Accent・90deg（横）」または「なし」。グラデーションが使われている場合は方向（横・縦・斜め）も必ず記録する。
Typography（タイポグラフィ）
- 見出しフォント（Display）：フォント名・サイズ（px）・ウェイト（bold / regular等）
- 本文フォント（Body）：フォント名・サイズ（px）・ウェイト
- キャプションフォント：フォント名・サイズ（px）・ウェイト
- モノスペースフォント（Mono）：数値・コード・ページ番号などに使われているフォント名。読み取れない場合は「なし」と記録する。
- フォント名が不明な場合は「不明」と記録し、STEP 3で確認する
Layout（レイアウト）
- スライドサイズ：16:9 / 4:3 / その他
- 余白：上下左右のおおよその余白サイズ（px）
- 整列の基準：左寄せ / 中央寄せ / 右寄せ
Slide Frame（枠要素）
- タイトルエリア：上部左寄せ / 上部中央揃え、装飾の有無（アクセントバー・下線 等）
- ページ番号：右下 / 左下 / なし、表示フォーマット（01 / 1 / 1/5 等）
- 装飾：アクセントバー・装飾図形・ロゴ等の有無と配置
Background Accent（背景装飾）
- 半透明の装飾（グラデーション丸・装飾図形等）の有無
- ある場合：配置（右上・左下 等）・使用カラー（Primaryカラーの薄め / Secondaryカラーの薄め 等）・おおよそのサイズ感
- ない場合：「なし」と記録する
Component Style（コンポーネントスタイル）
- カードの角丸：スライドのコンテンツカードに使われている角丸サイズ（例：12px / 22px / なし）
- カードの影：影の有無と強さ（例：あり（薄め）/ あり（標準）/ なし）
- 縦バー：見出し左側に縦バーが使われているか（あり / なし）。ある場合は色（単色 / グラデーション）と幅
- 箇条書きマーカー：ドットの色（単色 / Primary・Secondary・Accentの複数色 / グラデーション）と形状（丸 / 四角 / 線等）
- 番号スタイル：番号付きリストのスタイル（グラデーション円に白数字 / 単色円 / テキストのみ 等）
Tone（雰囲気）
- フォーマル / カジュアル / ミニマル / ボールド / 等
- どんなシーンに合うか（ビジネス発表・社内共有・カンファレンス 等）
分析結果の提示例
「以下のデザイン要素を読み取りました：
カラー
- Primary：#4285F4（ブルー）
- Secondary：#9168C0（パープル）
- Background：#F8FAFD（ほぼ白）
- Accent：#D96570（ピンク）
- Text：#1F1F1F（ほぼ黒）
- Text Sub：#444746（濃いグレー）
- Text Muted：#5E5E5E（グレー）
- Gradient：Primary → Secondary → Accent・90deg（横）および180deg（縦）
タイポグラフィ
- 見出し（Display）：Manrope / 54〜96px / 800
- 本文（Body）：Manrope / 18〜22px / 400〜500
- キャプション：Manrope / 12px / 500
- モノスペース（Mono）：Roboto Mono / ページ番号・数値・コードに使用
レイアウト
- スライドサイズ：16:9（1920 × 1080px）
- 余白：上下90〜96px・左右140px
- 整列：左寄せ
背景装飾：右上と左下に半透明グラデーション丸あり（Secondary / Primary カラー・透明度8〜16%）
コンポーネントスタイル
- カード：border-radius 22px・薄い影あり・border 1px solid rgba(0,0,0,0.04)
- 縦バー：グラデーション縦バー（幅8px、Primary→Secondary→Accent）あり
- 箇条書きマーカー：Primary / Secondary / Accentの3色丸ドット
- 番号スタイル：グラデーション円に白数字
雰囲気：ボールド・モダン、テクノロジー系カンファレンス・プロダクト紹介向け」
STEP 3：確認の対話
STEP 2の分析結果を提示した後、不明・不確かな点についてユーザーに確認する。
確認のルール
- 質問は合計3〜5問以内に抑える
- 1つのメッセージにつき1問だけ聞く
- 読み取れた情報については聞かない（不明な情報だけを確認する）
- ユーザーが「わからない」と答えた場合は、一般的な値（Webセーフフォント、標準余白等）を使用して進める
確認すべき優先順位
- フォント名が「不明」の場合 → 「見出しや本文に使われているフォントをご存知ですか？（例：Noto Sans JP、Hiragino Kaku Gothic等）」
- カラーが読み取れなかった場合 → 「〇〇の色をご存知でしたら教えてください」
- スライドサイズが不明の場合 → 「スライドのサイズは16:9（横長）と4:3（やや正方形）のどちらですか？」
- 雰囲気の確認 → 「このデザインはどんな場面での使用を想定していますか？（例：社内会議・顧客向けプレゼン・カンファレンス等）」
確認完了の判断
以下のいずれかになったら確認終了とする：
- 5問の確認が終わった
- 未確認の情報がなくなった
- ユーザーが「進めてください」等の意思を示した
確認完了後、「では内容をもとにSLIDE.mdとsample.htmlを生成します」と伝えてSTEP 4に進む。
STEP 4：SLIDE.mdの生成
STEP 2〜3で確定したデザイン情報を使い、以下のテンプレートに値を埋めて SLIDE.md を生成する。
出力フォルダの決定
ファイルはカレントディレクトリ内の SLIDE-md/ フォルダの中に SLIDE-md-{source} というフォルダを作成して保存する。{source} はソースの種類に応じて以下のルールで決める：
- URLの場合： ドメイン名から主要な単語を抽出する（例：
https://www.apple.com → apple、https://www.google.co.jp → google）
- ファイルの場合： ファイル名（拡張子なし）を使う（例：
company-deck.pptx → company-deck）
- テキスト説明の場合： 説明文からブランド名や代表的なキーワードを1つ抽出する
フォルダ名はすべて小文字・半角英数字・ハイフンのみを使用する。作成するフォルダの例：SLIDE-md/SLIDE-md-apple、SLIDE-md/SLIDE-md-google、SLIDE-md/SLIDE-md-toyota
SLIDE.mdの出力形式
以下の形式で出力すること。各項目の [ ] の中に分析・確認で得た実際の値を入れる。Markdownの各セクションの後にYAML形式でも同じ値を記載し、AIツールが値を正確に読み取れるようにする。
出力ファイル名：SLIDE-md/SLIDE-md-{source}/SLIDE.md
SLIDE.md
このファイルはスライドデザインシステムの定義書です。AIツール（Claude Design、NotebookLM、Google Slides等）にこのファイルを渡すことで、一貫したデザインのスライドを生成できます。
Overview
参照ソース： [参考にしたスライド・サイト・ブランドの名称や説明]
マッチするシーン： [このデザインが合う場面・用途・雰囲気]
Colors
| 役割 | カラー名 | HEXコード |
|---|
| Primary | [色名] | [#XXXXXX] |
| Secondary | [色名] | [#XXXXXX] |
| Background | [色名] | [#XXXXXX] |
| Accent | [色名] | [#XXXXXX] |
| Text | [色名] | [#XXXXXX] |
| Text Sub | [色名] | [#XXXXXX] |
| Text Muted | [色名] | [#XXXXXX] |
グラデーション： [「Primary → Secondary → Accent・90deg（横）」など / なし]
colors:
primary: "[#XXXXXX]"
secondary: "[#XXXXXX]"
background: "[#XXXXXX]"
accent: "[#XXXXXX]"
text: "[#XXXXXX]"
text_sub: "[#XXXXXX]"
text_muted: "[#XXXXXX]"
gradient_main: "[linear-gradient(90deg, Primary, Secondary, Accent) / なし]"
gradient_vert: "[linear-gradient(180deg, Primary, Secondary, Accent) / なし]"
Typography
| 役割 | フォント | サイズ | ウェイト |
|---|
| 見出し（H1） | [フォント名] | [Xpx] | [Bold/Regular] |
| 見出し（H2） | [フォント名] | [Xpx] | [Bold/Regular] |
| 本文 | [フォント名] | [Xpx] | [Regular] |
| キャプション | [フォント名] | [Xpx] | [Regular] |
| モノスペース | [フォント名 / なし] | [-] | [-] |
typography:
heading_h1:
font: "[フォント名]"
size: "[Xpx]"
weight: "[700/400]"
heading_h2:
font: "[フォント名]"
size: "[Xpx]"
weight: "[700/400]"
body:
font: "[フォント名]"
size: "[Xpx]"
weight: "[400]"
caption:
font: "[フォント名]"
size: "[Xpx]"
weight: "[400]"
mono:
font: "[フォント名 / なし]"
usage: "[数値・コード・ページ番号 等 / なし]"
Layout
Slide Frame
スライドの全ページに共通して適用される「枠」の要素を定義します。SLIDE-PATTERN-{name}.mdはコンテンツエリアの構造のみを定義するため、タイトルエリア・ページ番号・装飾はすべてここで一括管理します。これにより、どのパターンを使っても枠の見た目が統一されます。
タイトルエリア： [配置と装飾の説明（例：上部左寄せ、直下にアクセントカラーのバーを配置）]
ページ番号： [配置とフォーマット（例：右下・「01 / 6」形式 / なし）]
ページ番号スタイル： [グラデーションテキスト / 単色テキスト（TextカラーやTextMutedカラー）、モノスペースフォント使用の有無]
ブランドフッター： [配置と内容（例：左下・デザインシステム名をText Mutedカラーで表示 / なし）]
背景アクセント： [半透明グラデーション丸などの装飾の有無・配置・使用カラー（例：右上にSecondaryカラー12%透明・左下にPrimaryカラー8%透明の丸 / なし）]
縦バー： [見出し左側の縦バーの有無・スタイル（例：グラデーション縦バー・幅8px / なし）]
slide_frame:
title_area:
position: "[top-left / top-center]"
text_align: "[left / center]"
decoration: "[accent-bar / underline / none]"
page_number:
position: "[bottom-right / bottom-left / none]"
format: "[01 / 1 / 1/5 等]"
style: "[gradient-text / solid]"
font: "[mono / body]"
brand_footer:
position: "[bottom-left / bottom-right / none]"
content: "[デザインシステム名 / ブランド名 / なし]"
background_accent:
type: "[radial-gradient-circle / none]"
placement: "[right-top, left-bottom / none 等]"
color: "[Secondary薄め / Primary薄め 等]"
section_bar:
style: "[gradient-vertical / solid / none]"
width: "[Xpx / -]"
Component Style
スライド内で使用するコンポーネントの基本スタイルを定義します。
カード： [角丸・影・枠線の標準スタイル（例：border-radius: 22px、薄い影あり、border: 1px solid rgba(0,0,0,0.04)）]
箇条書きマーカー： [ドットの色・形状（例：Primary / Secondary / Accentの3色丸ドット / Primaryカラーの単色丸ドット）]
番号スタイル： [番号付きリストのスタイル（例：グラデーション円に白数字 / 単色円 / テキストのみ）]
component_style:
card:
border_radius: "[Xpx]"
shadow: "[0 1px 3px rgba(60,64,67,0.08),0 4px 16px rgba(60,64,67,0.05) / none]"
border: "[1px solid rgba(0,0,0,0.04) / none]"
bullet:
color: "[Primary / Primary-Secondary-Accent / gradient]"
shape: "[circle / square / line]"
number:
style: "[gradient-circle / solid-circle / text-only]"
color: "[gradient-main / Primary / none]"
Do / Don't
Do（やること）
- [このデザインで推奨されること]
- [このデザインで推奨されること]
Don't（やってはいけないこと）
- [このデザインで避けるべきこと]
- [このデザインで避けるべきこと]
Do / Don't の生成方針
- Do はデザインの特徴から自然に導かれるルールを記述する（例：ミニマルなデザインなら「1スライド1メッセージを徹底する」）
- Don't はデザインと相反する要素を記述する（例：モノクロデザインなら「原色や派手なグラデーションを使わない」）
- 各2〜4項目を目安にする
STEP 5：sample.htmlの生成
SLIDE.mdで定義したデザイントークン（色・フォント・余白）を適用した6ページのHTMLスライドを生成し、STEP 4で作成した SLIDE-md/SLIDE-md-{source}/ フォルダ内に sample.html として保存する。
ページ構成（固定）
| ページ番号 | スライドの種類 | 主な内容 |
|---|
| 1 | デザインシステム概要 | カラーパレット・パーツ・タイポグラフィ・レイアウト・Do/Don'tを1画面に集約した仕様書ページ |
| 2 | 表紙（タイトルスライド） | タイトル・サブタイトル・会社名や日付のプレースホルダー |
| 3 | セクションタイトル | セクション番号・セクション名・説明文 |
| 4 | 箇条書き（本文スライド） | 見出し・番号付きカード形式の4〜5項目リスト |
| 5 | データチャート | 見出し・棒グラフ（左）＋円グラフ（右）（CSSのみで実装） |
| 6 | まとめ | 見出し・3列カード（価値と説明）・締めのCTAボタン |
全スライド共通の実装方針
スライドサイズとフォント
- スライドサイズ：1920 × 1080 px（16:9）
- フォント：本文・UIは
'Manrope', system-ui, sans-serif、数値・コードは 'Roboto Mono', monospace
- Google Fonts から
Manrope:wght@400;500;600;700;800 と Roboto+Mono:wght@700 を <link> で読み込む
- ただしSLIDE.mdで別のフォントが指定されている場合はそちらを優先する
コンテンツ密度の原則
1920×1080pxの大きなキャンバスを有効に使い、スカスカな印象にならないよう以下を守ること：
- 見出しは大きく：ページ内の主見出し（h1相当）は最低
62px、表紙タイトルは 100px 以上を基準とする
- 本文・説明テキストは読みやすく：本文は最低
18px、カード内説明は 18〜22px を基準とする（1920px基準でこのサイズ。0.75スケール後でも14〜16px相当になる）
- コンテンツがキャンバスを埋める：余白は設計上必要な呼吸感のためにとるが、コンテンツエリアが上下左右に偏らず、スライド全体に広がるようにする
- カード・リストアイテムは縦に広げる：
flex:1 や min-height:0 を活用して、コンテンツカードがスライドの縦方向を埋めるようにする
ブラウザ表示のスケーリング
1920pxのスライドをブラウザで確認しやすいよう、以下のCSSをbodyに適用する：
body {
background: #E8EAED;
padding: 40px 20px;
}
.slide-wrapper {
width: 1920px;
transform-origin: top left;
transform: scale(0.75);
margin-bottom: -270px; /* 1080 × (1 - 0.75) = 270px */
}
.slide-outer {
margin: 0 auto 32px;
width: 1440px; /* 1920 × 0.75 */
}
各スライドは .slide-outer > .slide-wrapper > .slide の構造で出力し、ブラウザ上では1440×810px相当で表示されるようにする。
CSSカスタムプロパティの定義
HTMLの <style> タグ内で以下のカスタムプロパティを定義する。SLIDE.mdの値を埋める：
:root {
--color-primary: [SLIDE.mdのPrimaryカラー];
--color-secondary: [SLIDE.mdのSecondaryカラー];
--color-accent: [SLIDE.mdのAccentカラー];
--color-background: [SLIDE.mdのBackgroundカラー（canvas等）];
--color-text: [SLIDE.mdのTextカラー（ink等）];
--color-text-sub: [SLIDE.mdのText Subカラー（body等）];
--color-text-muted: [SLIDE.mdのText Mutedカラー（muted等）];
--color-surface: [SLIDE.mdのsurface-cardカラー。定義がなければBackground+8%暗くした値];
--color-surface-soft: [SLIDE.mdのsurface-softカラー。定義がなければBackground+4%暗くした値];
--color-border: [SLIDE.mdのhairline/borderカラー。定義がなければrgba(0,0,0,0.08)];
--font-display: [SLIDE.mdの見出しフォント], system-ui, sans-serif;
--font-body: [SLIDE.mdの本文フォント（見出しと異なる場合）], system-ui, sans-serif;
--font-mono: [SLIDE.mdのモノスペースフォント / 'DM Mono'], monospace;
--gradient-main: linear-gradient(90deg, [Primary], [Secondary], [Accent]);
--gradient-vert: linear-gradient(180deg, [Primary], [Secondary], [Accent]);
--slide-padding-v: [SLIDE.mdの上下余白];
--slide-padding-h: [SLIDE.mdの左右余白];
}
.slide {
width: 1920px;
height: 1080px;
background: var(--color-background);
font-family: var(--font-display);
color: var(--color-text);
box-sizing: border-box;
position: relative;
overflow: hidden;
}
グラデーションが「なし」のデザインの場合：--gradient-main / --gradient-vert には新たにグラデーションを作らず、Primaryカラーの単色を設定する（例：--gradient-main: #0B57D0;）。background: var(--gradient-main) もグラデーションテキストもそのまま単色として描画されるため、以降のページ仕様の var(--gradient-main) / var(--gradient-vert) は読み替え不要でそのまま使える。ソースにないグラデーションを勝手に追加しないこと。
重要：カード・サーフェスの背景色について
- カードの背景は 白（#ffffff）を使わない。
var(--color-surface)（surface-card相当）または var(--color-surface-soft) を使う
- ボーダーは
rgba(0,0,0,0.04) を使わず、var(--color-border)（hairline相当）を使う
- これによりウォームトーン・ナチュラルなデザインが保たれる
全ページ共通の装飾要素
すべてのスライド（ページ1を除く）に以下を適用する。ただし、SLIDE.mdで対応する定義が「なし」となっている要素は適用しない（例：Background Accentが「なし」なら（A）を置かない、縦バーが「なし」なら（B）を置かない、ブランドフッターが「なし」なら（D）を置かない）：
（A）背景アクセント丸
スライドの隅に position:absolute の半透明グラデーション円を2〜3個配置する。例：
<div style="position:absolute;top:-180px;right:-120px;width:520px;height:520px;
border-radius:50%;background:radial-gradient(circle,rgba([Secondary-RGB],0.12),transparent 65%);
pointer-events:none;"></div>
<div style="position:absolute;bottom:-220px;left:180px;width:560px;height:560px;
border-radius:50%;background:radial-gradient(circle,rgba([Primary-RGB],0.08),transparent 65%);
pointer-events:none;"></div>
（B）セクション見出しバー
ページの見出し左に縦バーを置く（ページ2を除く）：
<div style="width:8px;height:40px;border-radius:4px;background:var(--gradient-vert);"></div>
（C）ページ番号（右下）
全ページ右下に position:absolute; right:[左右余白]; bottom:32px で配置：
<div style="position:absolute;right:80px;bottom:32px;display:flex;align-items:baseline;gap:6px;z-index:2;">
<span style="font-family:var(--font-mono);font-size:16px;font-weight:800;line-height:1;
background:var(--gradient-main);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;">0X</span>
<span style="font-family:var(--font-mono);font-size:12px;color:var(--color-text-muted);">/ 6</span>
</div>
（D）ブランドフッター（左下）
ページ2を除く全ページ左下に表示：
<div style="position:absolute;left:[左右余白];bottom:34px;display:flex;align-items:center;gap:10px;z-index:2;">
<span style="font-size:13px;font-weight:700;color:var(--color-text-muted);letter-spacing:0.02em;">[ブランド名またはデザインシステム名]</span>
</div>
（E）カードコンポーネント
コンテンツをカード形式で表示する場合の標準スタイル（角丸・影・枠線はSLIDE.mdのComponent Styleの値があればそちらを優先し、なければ以下を目安にする）：
background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px;
box-shadow:0 1px 2px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.03); padding:36px;
-
--color-surface は白（#fff）ではなくSLIDE.mdのsurface-card相当の色（ウォームホワイト・クリーム系）を使う
-
--color-border は rgba(0,0,0,0.04) ではなくSLIDE.mdのhairline相当の色（ウォームグレー系）を使う
-
以降のページ仕様に出てくる「白背景カード」は、すべてこの（E）標準カードスタイルを指す。暗色デザインの場合は影を控えめにする（またはなしにする）
-
JavaScriptは使用しない
-
<section class="slide"> を .slide-wrapper 内に置き、各ページを縦に並べる
ページ1：デザインシステム概要ページの仕様
このページは「仕様書ページ」として生成する。カラーパレット・スライドで使うパーツ・タイポグラフィ・レイアウト・Do/Don'tを1画面に集約し、ユーザーがデザインシステムを一目で把握できるようにする。
レイアウト構造：
┌─────────────────────────────────────────────────────────────────────┐
│ [ヘッダー] ロゴ/スパーク DESIGN SYSTEM名（グラデーションテキスト） │
│ Style Sheet / v1.0 · 16:9 │
├─────────────────────────────────────────────────────────────────────┤
│ [基本カラーパレット 行] │
│ ブランドの主要色 | ベースカラー（背景・テキスト・枠線）| データ・状態カラー（あれば） │
├────────────────────┬─────────────────────────┬──────────────────────┤
│ スライドで使うパーツ │ タイポグラフィ │ Do & Don't │
│ （flex:1.6） │ （flex:1.05） │ （flex:1） │
│ ボタン・矢印・ │ タイプスケール一覧・ │ 緑背景のDo欄 │
│ グラデーション・ │ フォント名・ │ 赤背景のDon't欄 │
│ チップ・カード等 │ レイアウト仕様 │ │
└────────────────────┴─────────────────────────┴──────────────────────┘
実装の詳細：
- ヘッダー：左にデザインシステム名をグラデーションテキスト（
font-size:48px; font-weight:800; background:var(--gradient-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent）で表示し、右に「Style Sheet / v1.0 · 16:9」を font-size:17px; color:var(--color-text-muted) で表示する
- カラーパレット行：ブランドに合わせた主要色（10〜12色程度）を1行に収める。色をグループ（例：Brand / Accent / Text / Surface など機能別に3〜4グループ）に分け、グループ間を
width:1px; background:var(--color-border) の縦線セパレーターで区切る。実装方法： 全体を display:flex; gap:16px; align-items:stretch で横並びにし、各グループを display:flex; gap:10px でまとめる。各カラーカード：border-radius:10px; overflow:hidden; flex:1 で囲み、上部にスウォッチ（height:76px）、下部に padding:8px 10px でカラー名（font-size:18px; font-weight:700）とHEXコード（font-size:15px; font-family:var(--font-mono); color:var(--color-text-muted)）を縦並び。選色の目安： Brand系3色・Accent系2色・Text系3色・Surface系3色（計11色）など。StatusカラーやOn-Dark系など多すぎると1行に収まらないため省く。
- 下段3カラム：flexboxで
flex:1.6 / flex:1 / flex:0.85 に分割し、各カラムを background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px のカードで囲む（白背景は使わない）
- 下段左「スライドで使うパーツ」：
display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; align-content:space-between で2列グリッドに配置し、コンテンツが上詰めにならないよう上下均等に分散する。ソースに特定のコンテンツがなくても、デザインシステムの雰囲気・カラー・フォントに合わせて ボタン・タイトルバー・番号付きリスト・箇条書き・カード・チップ/ラベル・仕切り線・ページ番号 の8パーツを必ず生成する。各パーツのサイズ基準：パーツラベル font-size:15px; font-weight:700、ボタン font-size:18px; padding:14px 28px; border-radius:999px、番号・アイコン円 width:30px; height:30px、箇条書きドット width:10px; height:10px、リストテキスト font-size:18px
- 下段中「タイポグラフィ」：タイプスケール（表紙タイトル→大見出し→中見出し→小見出し→本文大→本文小→キャプション、計7段階）を
display:flex; flex-direction:column; justify-content:space-between; flex:1 で均等配置し、各行を display:flex; justify-content:space-between で左にサンプルテキスト・右に font-size:15px; font-family:var(--font-mono) でウェイト・サイズ情報を表示する。下部にフォント名確認ブロックを追加する。さらに「レイアウト」としてスライドサイズ・余白・整列をドット線区切りで記載する
- 下段右「Do & Don't」：上半分にDo欄（背景はSLIDE.mdのSuccess系の薄い色、なければ
#E6F4EA）、下半分にDon't欄（背景はPrimaryカラーの薄い色、なければ #FCE8E6）を配置する。DoアイコンはSuccessカラーの丸（width:34px; height:34px）に font-size:18px で ✓、Don'tアイコンはPrimaryカラーの丸（width:34px; height:34px）に font-size:18px で ✕ を表示する。Do/Don'tラベルは font-size:22px; font-weight:800、本文テキストは font-size:18px; line-height:1.55
- セクション見出し：各カラムの左上に
width:6px; height:28px; border-radius:3px; background:var(--gradient-vert) の縦バー＋タイトルを font-size:26px; font-weight:800 で表示する
- このページには全ページ共通のブランドフッター・ページ番号は適用しない（ページ1はそれ自体が仕様書のため）
ページ2〜6のコンテンツ方針
ページ2〜6のコンテンツはすべてダミーデータで生成する。
- ソースから読み取ったタイトル・本文・数値・固有名詞をそのままコンテンツに使用しないこと
- 会社名・組織名は必ず 「サンプル株式会社」 に統一する（ソースが個人・チーム・ブランド名であっても同様）
- ページタイトル・本文・グラフデータ・カード説明文はすべて汎用的なビジネスプレゼンテーション向けのダミーテキストにする
- ただし、デザインシステムのカラー・フォント・余白・スタイルは正確に反映すること（あくまでコンテンツの文字情報がダミーなのであって、見た目のデザインはソースに忠実に）
ダミーコンテンツの例（参考）
| ページ | タイトル例 | 内容例 |
|---|
| 2（表紙） | 年度事業計画 / 新サービスのご紹介 | サブタイトル＋「サンプル株式会社」＋日付 |
| 3（セクション） | Section 01 — Overview / 事業概要 | 概要説明文 |
| 4（箇条書き） | 成長を支える3つの柱 / 重点施策 | 顧客体験・業務効率化・新規事業などのダミー項目 |
| 5（グラフ） | 四半期業績の推移 / 売上構成比 | 架空の数値データ（Q1〜Q4など） |
| 6（まとめ） | 今後の取り組み / 次のステップ | 強みの強化・新市場開拓・基盤整備などのダミーカード |
ページ2〜6の実装仕様
ページ2（表紙）
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 160px- ロゴやブランドのシンボル（
width:96px; height:96px; margin-bottom:30px）を上部に表示する（SVGアイコンがない場合はグラデーション円で代替）
- アイキャッチテキスト（
font-size:16px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--color-text-muted)）でカテゴリや概要を表示する
- メインタイトル
h1：グラデーションテキスト（font-size:118px; font-weight:800; letter-spacing:-0.03em; line-height:1; background:var(--gradient-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent）
- サブタイトル：
font-size:30px; font-weight:500; color:var(--color-text-sub); margin-top:30px
- グラデーションライン：
width:340px; height:10px; border-radius:999px; background:var(--gradient-main); margin:46px 0
- 日付・組織名：
font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--color-text-muted) で並べ、区切りに小さな ● を挿入する
ページ3（セクションタイトル）
display:flex; flex-direction:column; justify-content:center; padding:0 140px- 背景装飾として巨大な透明数字を右側に
position:absolute; right:90px; top:50%; transform:translateY(-50%) で配置：font-family:var(--font-mono); font-size:480px; font-weight:800; opacity:0.10; background:var(--gradient-vert); -webkit-background-clip:text; -webkit-text-fill-color:transparent
- コンテンツ本体：
display:flex; align-items:stretch; gap:28px で左に width:10px; border-radius:5px; background:var(--gradient-vert) の縦バー、右に以下を縦並び
- セクション番号：
font-family:var(--font-mono); font-size:18px; font-weight:700; letter-spacing:0.28em; color:var(--color-text-muted); text-transform:uppercase
- 大見出し
h1：font-size:96px; font-weight:800; letter-spacing:-0.03em; line-height:1.04
- 説明テキスト：
font-size:24px; font-weight:500; color:var(--color-text-sub); line-height:1.6; max-width:920px
ページ4（箇条書き）
display:flex; flex-direction:column; padding:[上下余白] [左右余白]- 見出しエリア：縦バー＋
h1（font-size:62px; font-weight:800; letter-spacing:-0.02em）を display:flex; align-items:center; gap:16px; margin-bottom:14px で横並び
- サブテキスト：
font-size:24px; font-weight:500; color:var(--color-text-muted); margin-bottom:48px; margin-left:24px
- リストエリア：
display:flex; gap:20px; flex:1; min-height:0（横並び。カード数が3なら横3列、4以上なら縦リストに変える）
- 各リストアイテム：
background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:32px 36px; flex:1 のカード内に縦並びで、番号円（width:64px; height:64px; border-radius:50%; background:var(--gradient-main); color:#fff; font-weight:800; font-size:26px）・見出し（font-size:30px; font-weight:700; margin-top:20px）・説明文（font-size:21px; color:var(--color-text-muted); line-height:1.6; margin-top:12px）を配置（白背景は使わない）
ページ5（グラフ）
display:flex; flex-direction:column; padding:[上下余白] [左右余白]- 見出しエリア：縦バー＋
h1（font-size:62px）＋サブテキスト（ページ4と同構造）
- グラフエリア：
display:flex; gap:40px; flex:1; min-height:0
- 棒グラフ（
flex:1.3）：background:var(--color-surface-soft); border:1px solid var(--color-border); border-radius:16px のカード内に縦棒を align-items:flex-end で並べる。最新月のバーのみグラデーション（background:var(--gradient-vert); box-shadow:0 4px 12px rgba([Secondary-RGB],0.3)）を使用し強調する。他のバーはPrimaryカラーのアルファ値違いで濃淡をつける
- ドーナツグラフ（
flex:1）：background:var(--color-surface-soft); border:1px solid var(--color-border); border-radius:16px のカード内に conic-gradient で円グラフを実装（外円width:280px; height:280px）。中心は background:var(--color-background); border-radius:50%; width:160px; height:160px に主要値（font-size:44px; font-weight:800）と凡例ラベル（font-size:18px）を表示する。右側に凡例をカラーブロック付きで縦列する
ページ6（まとめ）
display:flex; flex-direction:column; padding:[上下余白] [左右余白]- 見出しエリア：縦バー＋
h1（font-size:62px）＋サブテキスト（ページ4と同構造）
- カードエリア：
display:flex; gap:32px; flex:1; min-height:0
- 各カード（
background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:48px 40px）内に縦並びで（白背景は使わない）：
- アイコン正方形：
width:72px; height:72px; border-radius:18px（背景はPrimary/Secondary/Accentカラーを10〜15%透明にした色、中に1〜2文字のブランドカラーの漢字や英字を font-size:32px; font-weight:800 で表示）
- 見出し：
font-size:34px; font-weight:800; letter-spacing:-0.01em; margin-top:24px
- 説明文：
font-size:22px; color:var(--color-text-muted); line-height:1.6; margin-top:14px
- CTAボタン：
display:flex; justify-content:center; margin-top:44px に padding:20px 60px; border-radius:999px; background:var(--gradient-main); color:#fff; font-size:28px; font-weight:700; box-shadow:0 6px 20px rgba([Secondary-RGB],0.35) で締めのメッセージを表示する
生成完了の通知
sample.html生成後、以下のようにユーザーに伝える：
「SLIDE-md/SLIDE-md-{source}/ フォルダにSLIDE.mdとsample.htmlを生成しました。
SLIDE.md：デザインシステムの定義書。AIツールに渡す際のメインファイルです。sample.html：ブラウザで開くとデザインを確認できます（各スライドが75%縮小で表示されます）。AIツールへの参考資料としても使えます。
このSLIDE.mdとsample.html、および別途作成したスライドパターンファイルをAIツールに渡すことで、このデザインでスライドを生成できます。」
