From brand-slide-kit
PPTX・PDF・画像・スクリーンショット等の参考資料からデザイン情報を抽出し、design-guideline.yaml を生成するスキル。ユーザーが「デザインガイドラインを作って」「このPPTXからブランドカラーを抽出して」「参考資料を元にデザイン定義ファイルを作って」「design-guideline.yaml を生成して」「このスライドのブランド情報を取り出して」などと依頼したときは必ず使用すること。PPTX・PDF・画像ファイルが渡されてデザイン情報の抽出を求められた場合も積極的にトリガーする。
How this skill is triggered — by the user, by Claude, or both
Slash command
/brand-slide-kit:design-extractorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
参考資料(PPTX / PDF / 画像 / スクリーンショット)を解析し、ブランドのデザイン情報を抽出して `design-guideline.yaml` を生成する。
参考資料(PPTX / PDF / 画像 / スクリーンショット)を解析し、ブランドのデザイン情報を抽出して design-guideline.yaml を生成する。
生成した YAML は presentation-builder スキルで直接利用できる。
設計思想:
python-pptx でプログラマティックに精密抽出- または 未確認 のままにし、確認後に補完Pythonスクリプトの詳細: PPTX抽出に使う具体的なコードは
references/pptx-extraction.mdを参照すること。
以下をユーザーに確認(不明な場合):
| 確認項目 | デフォルト |
|---|---|
| 参考資料のパス(複数可) | 必須 |
| 出力 YAML のパス | 同ディレクトリの design-guideline.yaml |
| ブランド名 | ファイル名から推定 |
複数ファイルが渡された場合:
視覚的な構造を読む前に、まずガイドライン資料に書かれたテキスト説明を読む。
ブランドガイドライン資料には、視覚的なデザイン情報だけでなく、
**「なぜその色を使うか」「何を禁止するか」「どう使い分けるか」**という文章・ルールが記載されている。
これらを YAML の color_rules, typography.rules, color_rules[].rule に反映することが重要。
# markitdown でテキスト全文を先に抽出し、ルール文章を読む
python -m markitdown guideline.pptx > guideline_text.md
以下のキーワードを含むテキストを重点的に読み取り、YAML に反映する:
| 読み取り対象 | YAML への反映先 |
|---|---|
| 「〇〇専用」「〇〇にのみ使用」「〇〇は禁止」 | color_rules[].rule + forbidden |
| 「プライマリカラーは〇色」「メインカラーは〜」 | colors.* の分類・コメント |
| 「フォントウェイトは〜のみ」「イタリック禁止」 | typography.rules[] |
| 「ロゴを変形・回転・色変更しない」等のNG例 | logos.*.rules[] または extraction_notes |
| 「白背景では赤ロゴ、暗背景では白ロゴ」等の使い分け | logos.placement.* + color_rules |
| 「拡張パレットはチャートのみ」等の使途制限 | color_rules[context="chart_diagram"] |
| フォントサイズの用途説明(「タイトルは〇pt」等) | typography.size_* のコメント |
PPTX/PDF からプログラム的に色を取得しても、
「その色を何に使うか」「何に使ってはいけないか」 は視覚解析では分からない。
ガイドライン資料に書いてある使用ルール文章を読んで初めて正確な color_rules が作れる。
例:#4A90D9(chart_blue)は視覚抽出で取れるが、
「このカラーはチャート・図表専用であり、通常のコンテンツには使用しない」という
ルール文章を読んで初めて chart_blue として正しく分類し、禁止ルールを記載できる。
python-pptx を使ってプログラマティックに解析する。具体的なスクリプトは references/pptx-extraction.md を参照。
抽出する情報:
エラーハンドリング:
try-except でスキップ)shape.fill.fore_color が取得できない場合は None 扱いClaude の視覚解析機能で以下を推定する:
以下の優先順位で色情報を分類する:
1. Primary(最も多用される背景色・アクセント色) → colors.primary
2. テキスト色(最も多いテキスト色) → colors.text
3. 背景色(白/淡色) → colors.background
4. 補助色(チャート・図表専用) → colors.chart_*
Extended Palette の判別:
chart_* として分類color_rules に明示前提: パターン名はスキル側に持たない。参考資料に実際に存在するレイアウトだけを帰納的に命名・記述する。
以下の手順で各スライド / ページのレイアウトを観察し、パターンを導出する:
全スライドを走査して構造を記録する
prs.slide_layouts および実スライドの両方を確認する同一構造のスライドをグループ化し、資料に存在する構造から直接命名する
three-column-card)背景色が異なるだけの同構造は別バリアントとして定義する(下記チェック参照)
同名レイアウトの全バリアントを個別エントリとして登録する。 背景色が異なるだけ(red/light/dark など)でも別パターンとして定義すること。 「ライト版しか見ていなかったためダーク版・カラー版を見落とす」ミスが最も多い。
PPTX の場合は prs.slide_layouts を全件走査してバリアントを識別する(スクリプトは references/pptx-extraction.md の「レイアウトバリアントの全件走査」を参照)。
背景色がテーマカラー(schemeClr)の場合、必ずテーマカラー値に解決する。
accent6 等の名前だけ記録してはいけない。XMLからテーマの対応HEXを取得して記載する。
layout_patterns の description には、タイトル・本文・メタ情報のY座標(cm)を実測値として記載する。
「上部」「下部」「中央」などの曖昧な表現は禁止。プレゼンテーションビルダーが CSS で再現できる精度で記録する。
スクリプトは references/pptx-extraction.md の「テキスト縦位置の実測」を参照。
抽出した色情報とレイアウトパターンをもとに color_rules セクションを生成する:
color_rules:
- context: "title_slide"
rule: >
タイトルスライドでは primary を背景に使用。テキストは white。
allowed: ["primary", "white"]
- context: "content_slide"
rule: >
通常コンテンツスライドでは background を使用、テキストは text。
primary はアクセント(縦ライン・バッジ等)にのみ使用。
allowed: ["background", "text"]
accent_only: ["primary"]
- context: "chart_diagram"
rule: >
チャート・図の系列色には chart_* カラーを使用。
通常スライドコンテンツへの混入禁止。
allowed: ["chart_green", "chart_blue", "chart_orange", "chart_yellow"]
- context: "dark_background_component"
rule: >
ダーク背景(暗色)を持つすべての要素(スライド・カード・フッター・セクション区切り等)では
テキストカラーは必ず white (#FFFFFF) または rgba(255,255,255,0.XX) を使用。
black や暗色テキストをダーク背景に重ねることは禁止。
コントラスト比は WCAG AA 基準(4.5:1 以上)を満たすこと。
required: { dark_bg_text: "white", min_opacity: 0.70 }
forbidden: ["black", "#222", "#333", "#555", "gray"]
YAML を生成する前に、抽出した内容をユーザーに提示して確認を得る。
以下のフォーマットでサマリーを返信し、承認を待つ。承認前に YAML ファイルを出力してはならない。
## 抽出結果サマリー
### ブランド情報
- ブランド名: [抽出値 or 推定値]
- スライドサイズ: [幅 × 高さ mm / px]
### カラーパレット
- Primary: [HEX] — [用途]
- Background: [HEX] — [用途]
- Text: [HEX] — [用途]
- [その他抽出した色を列挙]
- ※ 未確認の色: [あれば記載]
### タイポグラフィ
- 見出しフォント: [フォント名 or 未確認]
- 本文フォント: [フォント名 or 未確認]
- フォントサイズ: h1=[pt], h2=[pt], body=[pt] など
### ロゴ
- ロゴファイルパス: [パス or 未確認(テキストフォールバック使用)]
- 配置: [位置・サイズ]
### レイアウトパターン([N]種類を検出)
1. [パターン名]: [1行説明]
2. [パターン名]: [1行説明]
...
### アクセントライン
- [検出された場合: 位置・幅・色を記載 / 検出されなかった場合: 「なし」]
### 未確認・要補完の項目
- [未取得の項目があれば列挙。なければ「なし」]
---
この内容で design-guideline.yaml を生成してよいですか?
修正や追加があればお知らせください。問題なければ「OK」と返信してください。
ユーザーから承認(「OK」「はい」「生成して」等)を受け取った後、Step 8 へ進む。 修正指示があった場合はサマリーを更新して再提示し、再度確認を得る。
このステップは Step 7 でユーザーの承認を得た後にのみ実行する。
以下の構造で design-guideline.yaml を生成する:
# ============================================================
# ブランドガイドライン — design-guideline.yaml
# 抽出元: [参考資料ファイル名]
# 抽出日: YYYY-MM-DD
# ============================================================
name: "[ブランド名]"
version: "1.0"
# --- カラーパレット ---
colors:
primary: "[HEX]" # [用途コメント]
black: "#000000"
white: "#FFFFFF"
background: "[HEX]"
text: "[HEX]"
# Extended Palette(チャート・図表専用)
chart_green: "[HEX]"
chart_blue: "[HEX]"
# ...
# --- カラー使用ルール ---
color_rules:
- context: "title_slide"
rule: >
[抽出した使用ルール]
allowed: [...]
# ...
# --- タイポグラフィ ---
typography:
heading_font: "[フォント名]"
heading_font_web: "[Webフォールバック]"
body_font: "[フォント名]"
body_font_web: "[Webフォールバック]"
heading_h1: "[サイズ]"
heading_h2: "[サイズ]"
heading_h3: "[サイズ]"
body_size: "[サイズ]"
# --- ロゴ ---
# path / path_dark_bg は このYAMLファイルと同じディレクトリからの相対パス
logo:
name: "[ブランド名]"
path: "" # 通常背景用ロゴ(例: 赤/黒ロゴ)— Step 7 で確認
path_dark_bg: "" # 暗背景用ロゴ(例: 白ロゴ)— Step 7 で確認。不要なら削除
viewbox: "" # SVGのviewBox値(例: "0 0 360 87")— width計算に必要
position: "bottom-left"
height: "32px"
# --- フッター(スライドマスターから実測) ---
footer:
logo_left: "[px]" # ロゴ左端からの距離(実測値)
logo_bottom: "[px]" # ロゴ下端からの距離(実測値)
logo_height: "[px]" # ロゴの高さ(実測値)
# 日付テキスト(右下に表示される場合)
date_right: "[px]" # 右端からの距離(実測値)
date_bottom: "[px]" # 下端からの距離(実測値)
date_font_size: "[px]" # 日付テキストのフォントサイズ
date_color_light: "[HEX]" # ライト背景スライドでの日付テキスト色
date_color_dark: "[rgba]" # ダーク背景スライドでの日付テキスト色
# 著作権表記
copyright_text: "" # 例: "© 2026 Your Company. All Rights Reserved."(空なら非表示)
copyright_exclude_layouts: # 著作権を表示しないレイアウト名リスト
- "[layout-name]"
# --- ブランドアクセント要素(検出された場合のみ記載、なければ省略) ---
# 繰り返し登場する装飾的な視覚要素をすべて列挙する
# type: line / corner / dot / shape / gradient / pattern / other
brand_accents:
- type: "[line|corner|dot|shape|gradient|pattern|other]"
description: >
[要素の外観・配置・用途・禁止事項を自然言語で詳しく記述する。
presentation-builder はこの description を読んで CSS 実装を決定する。]
# --- type=line の場合に追記するフィールド ---
# position: "[left|right|top|bottom]"
# width: "[px]" # position が left/right の場合
# height: "[px]" # position が top/bottom の場合
# color: "[HEX]"
# apply_to: "all" # all / context名 / [context名リスト]
# rule: >
# [使用ルール・禁止事項がある場合に記載]
# --- ビューア背景色 ---
viewer_background_color: "[HEX]" # スライドビューア外側の背景色(例: "#2b2b2b")
# --- 出力モード ---
output_mode: "slide" # slide | page
# --- レイアウトパターン ---
layout_patterns:
- name: "title"
description: >
[抽出した説明]
css_class: "layout-title"
# ...
# --- 抽出メモ ---
extraction_notes: |
抽出元: [ファイル名リスト]
確認済み情報: [抽出できた情報の概要]
未確認・要追加確認: [不明な項目リスト]
出力後、以下を報告する:
design-guideline.yaml を生成しました。
抽出できた情報:
- カラー: 12色(Primary 3色 + Extended 7色 + Gray 2色)
- レイアウトパターン: 8種類
- タイポグラフィ: フォントサイズ 6段階
未確認(手動で補完してください):
- ロゴファイルパス(現在はテキストフォールバック)
- アニメーション・トランジション規定
特定ブランドの公式ガイドライン資料を事前に把握している場合は、
抽出前に既知情報を design-guideline.yaml のベースとして記入しておくことで精度が向上する。
手順:
extraction_notes に記載しておく注意: 既知情報を使う場合も、必ずファイルから実測値を取得して検証すること。 ブランドガイドラインは改定されることがあり、古い既知情報をそのまま使うと誤った YAML が生成される。
PPTX解析時:
pip install python-pptx
PDF解析時(オプション):
pip install pdfplumber # テキスト・色の抽出
# または
pip install pymupdf # PyMuPDF
画像・スクリーンショット: 追加インストール不要(Claude の視覚解析を使用)
「このファイルからデザインガイドラインを作って」
→ projects/brand/template.pptx を解析 → design-guideline.yaml を生成
「複数のPPTXからブランドガイドラインを抽出して」
→ brand-guide.pptx + slide-template.pptx + layout-samples.pptx を並列解析
→ design-guideline-brand.yaml を生成
「このスクリーンショットのブランドカラーを抽出して」
→ 視覚解析で色・レイアウトを推定 → design-guideline.yaml を生成
npx claudepluginhub manji6/brand-slide-kit --plugin brand-slideAnalyzes images, websites, and Figma files to extract design tokens, component inventory, and reconstruction notes. Outputs a design.md for replicating or auditing visual designs.
Analyzes UI screenshots to extract design tokens, color palettes, typography scales, spacing patterns, components, and layout structures via eight-phase process.
Generates HTML slide design system markdown from a reference URL by analyzing color palette, typography, logo, and aesthetic mood, applying rules like 1280×720 fit, overflow safety, and mobile fixes.