design

デザイン

ブランド、トークン、UI、ロゴ、CIP、スライド、バナー、ソーシャルメディア用写真、アイコンを網羅する統合デザインスキルです。

使用する場面

• ブランドアイデンティティ、ボイス、アセット
• デザインシステムのトークンと仕様
• shadcn/ui + Tailwind を使った UI のスタイリング
• ロゴのデザインと AI による生成
• コーポレートアイデンティティプログラム（CIP）の成果物
• プレゼンテーションとピッチデッキ
• ソーシャルメディア、広告、Web、印刷物向けのバナーデザイン
• Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 向けのソーシャルメディア用写真

サブスキルの振り分け

タスク	サブスキル	詳細
ブランドアイデンティティ、ボイス、アセット	brand	同梱された兄弟スキル
トークン、仕様、CSS 変数	design-system	同梱された兄弟スキル
shadcn/ui、Tailwind、コード	ui-styling	同梱された兄弟スキル
ロゴの作成、AI による生成	ロゴ（組み込み）	references/logo-design.md
CIP モックアップ、成果物	CIP（組み込み）	references/cip-design.md
プレゼンテーション、ピッチデッキ	スライド（組み込み）	references/slides.md
バナー、カバー、ヘッダー	バナー（組み込み）	references/banner-sizes-and-styles.md
ソーシャルメディア用画像／写真	ソーシャルメディア用写真（組み込み）	references/social-photos-design.md
SVG アイコン、アイコンセット	アイコン（組み込み）	references/icon-design.md

スクリプトのパス

このスキルおよびその references/ 内のスクリプトパスは、プロジェクトではなく、この SKILL.md を含むディレクトリを基準とします。scripts/<file> はこのスキル自身の scripts/ フォルダーを指し、../<skill>/scripts/<file> は隣接してインストールされた兄弟サブスキルを指します。そのディレクトリを基点として完全なパスを組み立て、作業ディレクトリはプロジェクトルートに保ってください。スクリプトは、docs/brand-guidelines.md、assets/design-tokens.json、src/ などのプロジェクトファイルを基準に読み書きします。

ロゴデザイン（組み込み）

55 種類以上のスタイル、30 種類のカラーパレット、25 種類の業界ガイドを用意しています。Gemini Nano Banana、Atlas Cloud、MuAPI による画像生成に対応しています。

ロゴ：デザインブリーフの生成

python3 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

ロゴ：スタイル／カラー／業界の検索

python3 scripts/logo/search.py "minimalist clean" --domain style
python3 scripts/logo/search.py "tech professional" --domain color
python3 scripts/logo/search.py "healthcare medical" --domain industry

ロゴ：AI による生成

出力するロゴ画像は必ず白い背景で生成してください。

python3 scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
python3 scripts/logo/generate.py --brand "TechFlow" --provider atlas
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-model nano-banana-pro

重要： スクリプトが失敗した場合は、直接修正を試みてください。

生成後は、HTML プレビューを使うかどうかを AskUserQuestion で必ずユーザーに確認してください。使う場合は、ギャラリーに同梱の ui-ux-pro-max スキルを使用してください。

CIP デザイン（組み込み）

50 種類以上の成果物、20 種類のスタイル、20 種類の業界に対応しています。Gemini Nano Banana（Flash／Pro）を使用します。

CIP：ブリーフの生成

python3 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP：ドメインの検索

python3 scripts/cip/search.py "business card letterhead" --domain deliverable
python3 scripts/cip/search.py "luxury premium elegant" --domain style
python3 scripts/cip/search.py "hospitality hotel" --domain industry
python3 scripts/cip/search.py "office reception" --domain mockup

CIP：モックアップの生成

# With logo (RECOMMENDED)
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

モデル：flash（デフォルト、gemini-2.5-flash-image）、pro（gemini-3-pro-image）。GEMINI_FLASH_IMAGE_MODEL／GEMINI_PRO_IMAGE_MODEL で ID を上書きできます。

CIP：HTML プレゼンテーションのレンダリング

python3 scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

ヒント： ロゴがない場合は、まず上記の「ロゴデザイン」セクションを使用してください。

スライド（組み込み）

Chart.js、デザイントークン、コピーライティングの数式を使った、戦略的な HTML プレゼンテーションを作成できます。

作成ワークフローについては、references/slides-create.md を読み込んでください。

スライド：ナレッジベース

トピック	ファイル
作成ガイド	references/slides-create.md
レイアウトパターン	references/slides-layout-patterns.md
HTML テンプレート	references/slides-html-template.md
コピーライティング	references/slides-copywriting-formulas.md
戦略	references/slides-strategies.md

バナーデザイン（組み込み）

ソーシャルメディア、広告、Web、印刷物向けに、22 種類のアートディレクションスタイルを用意しています。このワークフローにバンドル外のものは必要ありません。スタイルやパレットのガイドには、references/banner-sizes-and-styles.md と同梱の ui-ux-pro-max スキルを使用してください。ブラウザーでの調査、画像生成、スクリーンショットの取得は、実行環境で利用できる場合に限り任意で行えます。利用できない場合は、提供されたアセット、CSS で作成したビジュアル、実行環境の標準的なプレビューまたはキャプチャのワークフローを使用してください。

サイズとスタイルの全リファレンスについては、references/banner-sizes-and-styles.md を読み込んでください。

バナー：ワークフロー

1. AskUserQuestion で要件を収集します — 目的、プラットフォーム、コンテンツ、ブランド、スタイル、数量
2. 調査 — references/banner-sizes-and-styles.md を読み、バンドルされている ui-ux-pro-max スキルをスタイルと配色のガイダンスに使用します。ブラウザーでの調査が利用可能かつ許可されている場合は、参考資料を3～5件収集します
3. デザイン — プラットフォームの正確な寸法で HTML/CSS バナーを作成します。提供されたアセットまたは CSS で作成したビジュアルを使用するか、ランタイムが提供している場合は許可された画像生成機能を使用します
4. エクスポート — ランタイムのブラウザーまたはスクリーンショット機能を使い、正確な寸法の PNG をキャプチャします。利用できない場合は HTML/CSS ソースを納品し、PNG のエクスポートは保留中と明記します
5. 提示 — すべての案を並べて表示し、フィードバックを反映して調整します

バナー：サイズ早見表

プラットフォーム	種類	サイズ（px）
Facebook	カバー	820 x 312
Twitter/X	ヘッダー	1500 x 500
LinkedIn	個人用	1584 x 396
YouTube	チャンネルアート	2560 x 1440
Instagram	ストーリー	1080 x 1920
Instagram	投稿	1080 x 1080
Google Ads	中型レクタングル	300 x 250
ウェブサイト	ヒーロー	1920 x 600-1080

バナー：主なアートスタイル

スタイル	最適な用途
ミニマリスト	SaaS、テクノロジー
大胆なタイポグラフィ	お知らせ
グラデーション	モダンなブランド
写真ベース	ライフスタイル、Eコマース
幾何学模様	テクノロジー、フィンテック
グラスモーフィズム	SaaS、アプリ
ネオン／サイバーパンク	ゲーム、イベント

バナー：デザインルール

• セーフゾーン：重要なコンテンツは中央の70～80％に配置します
• バナーあたりCTAは1つ。右下に配置し、高さは最低44pxにします
• フォントは最大2種類。本文は最低16px、見出しは32px以上
• 広告のテキストは20％未満にします（Metaではペナルティの対象になります）
• 印刷：300 DPI、CMYK、3～5mmの塗り足し

アイコンデザイン（組み込み）

15種類のスタイル、12カテゴリーに対応しています。Gemini 3.1 Pro Preview は SVG テキスト出力を生成します。

アイコン：単一アイコンを生成

python3 scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

アイコン：バリエーションを一括生成

python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

アイコン：複数サイズでエクスポート

python3 scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

アイコン：主なスタイル

スタイル	最適な用途
アウトライン	UI インターフェース、ウェブアプリ
塗りつぶし	モバイルアプリ、ナビゲーションバー
デュオトーン	マーケティング、ランディングページ
角丸	親しみやすいアプリ、ヘルスケア
シャープ	テクノロジー、フィンテック、エンタープライズ
フラット	マテリアルデザイン、Google風
グラデーション	モダンなブランド、SaaS

モデル： gemini-3.1-pro-preview — テキストのみを出力します（SVG は XML テキストです）。画像生成 API は不要です。

ソーシャル画像（組み込み）

複数のプラットフォーム向けのソーシャル画像デザイン：HTML/CSS → スクリーンショットをエクスポートします。バンドルされている ui-ux-pro-max、brand、design-system スキルを使用します。スクリーンショットのエクスポートには、Chrome headless、Playwright、または Puppeteer を使用します（リファレンスを参照）。

サイズ、テンプレート、ベストプラクティスについては、references/social-photos-design.md を読み込みます。

ソーシャル画像：ワークフロー

1. オーケストレーション — ランタイム標準のタスクリストで以下の手順を管理します。独立した作業には並列サブエージェントを使用します
2. 分析 — プロンプトを解析します：主題、プラットフォーム、スタイル、ブランドの背景、コンテンツ要素
3. アイデア出し — コンセプトを3～5案作成し、AskUserQuestion で提示します
4. デザイン — バンドルされている brand → design-system → ui-ux-pro-max スキルを使用します。各案 × サイズごとに HTML を作成します
5. エクスポート — Chrome headless、Playwright、または Puppeteer を使い、正確な px 数でスクリーンショットを撮ります（ツールが対応している場合はデバイスのスケールファクターを2倍にします。リファレンスを参照）
6. 確認 — 利用可能なブラウザーまたは画像ビューアーでエクスポートした PNG を開いて確認します。レイアウトやスタイルの問題を修正し、再エクスポートします
7. 報告 — デザイン上の判断をまとめたレポートを plans/reports/ に作成します
8. 整理 — 出力ファイルとレポートをプロジェクトのアセットディレクトリに分類します

ソーシャル画像：主なサイズ

プラットフォーム	サイズ（px）	プラットフォーム	サイズ（px）
IG 投稿	1080×1080	FB 投稿	1200×630
IG ストーリー	1080×1920	X 投稿	1200×675
IG カルーセル	1080×1350	LinkedIn	1200×627
YT サムネイル	1280×720	Pinterest	1000×1500

ワークフロー

完全なブランドパッケージ

1. ロゴ → scripts/logo/generate.py → ロゴのバリエーションを生成
2. CIP → scripts/cip/generate.py --logo ... → 成果物のモックアップを作成
3. プレゼンテーション → references/slides-create.md を読み込む → ピッチデックを構築

新しいデザインシステム

1. ブランド (brand スキル) → カラー、タイポグラフィ、ボイスを定義
2. トークン (design-system スキル) → セマンティックトークンのレイヤーを作成
3. 実装 (ui-styling スキル) → Tailwind、shadcn/ui を設定

リファレンス

トピック	ファイル
デザインルーティング	references/design-routing.md
ロゴデザインガイド	references/logo-design.md
ロゴスタイル	references/logo-style-guide.md
ロゴカラー	references/logo-color-psychology.md
ロゴプロンプト	references/logo-prompt-engineering.md
CIP デザインガイド	references/cip-design.md
CIP 成果物	references/cip-deliverable-guide.md
CIP スタイル	references/cip-style-guide.md
CIP プロンプト	references/cip-prompt-engineering.md
スライド作成	references/slides-create.md
スライドレイアウト	references/slides-layout-patterns.md
スライドテンプレート	references/slides-html-template.md
スライドコピー	references/slides-copywriting-formulas.md
スライド戦略	references/slides-strategies.md
バナーのサイズとスタイル	references/banner-sizes-and-styles.md
ソーシャルフォトガイド	references/social-photos-design.md
アイコンデザインガイド	references/icon-design.md

スクリプト

スクリプト	目的
scripts/logo/search.py	ロゴのスタイル、カラー、業界を検索
scripts/logo/generate.py	Gemini AI でロゴを生成
scripts/logo/core.py	ロゴデータ用の BM25 検索エンジン
scripts/cip/search.py	CIP 成果物、スタイル、業界を検索
scripts/cip/generate.py	Gemini で CIP モックアップを生成
scripts/cip/render-html.py	CIP モックアップから HTML プレゼンテーションをレンダリング
scripts/cip/core.py	CIP データ用の BM25 検索エンジン
scripts/icon/generate.py	Gemini 3.1 Pro で SVG アイコンを生成

前提条件

Python: このスキルは Python スクリプトを使用します。Windows では、python3 の代わりに python を使用してください (例: python3 scripts/logo/search.py の代わりに python scripts/logo/search.py)。

Python がインストールされているか確認します:

python3 --version || python --version

セットアップ

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

# Optional MuAPI provider (no extra Python package required)
export MUAPI_API_KEY="your-key"

MuAPI は非同期モデルエンドポイントと予測結果 API を使用します。認証については MuAPI API リファレンス を、現在のモデル固有のスキーマについては nano-banana モデル契約 または nano-banana-pro モデル契約 を参照してください。ロゴジェネレーターは文書化された両方の モデルスラッグをサポートし、それらが共有する必須の prompt と任意の aspect_ratio フィールドを送信します。Pro モデルは任意の resolution フィールドも受け付けますが、この焦点を絞った ロゴワークフローではプロバイダーのデフォルトのままにしています。

Windows での注意: 必要に応じて pip の代わりに python を使用してください (例: python -m pip install ...)。

統合

同梱のサブスキル: brand、design-system、ui-styling 関連スキル: ui-ux-pro-max