design

デザイン

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

使用する場面

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

サブスキルの振り分け

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

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

55 種類以上のスタイル、30 種類のカラーパレット、25 種類の業界ガイドを用意しています。Gemini Nano Banana モデルを使用します。

Logo：デザインブリーフを生成

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

Logo：スタイル／色／業界を検索

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

Logo：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

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

生成後は、AskUserQuestion を使って、HTML プレビューを表示するか必ずユーザーに確認してください。希望する場合は、ギャラリー表示のために /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-preview）

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

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

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

スライド（組み込み）

Chart.js、デザイントークン、コピーライティングの公式を用いた、戦略的な HTML プレゼンテーションです。

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

Slides：ナレッジベース

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

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

ソーシャルメディア、広告、ウェブ、印刷物向けに、22 種類のアートディレクションスタイルを用意しています。frontend-design、ai-artist、ai-multimodal、chrome-devtools スキルを使用します。

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

Banner：ワークフロー

1. AskUserQuestion で要件を収集 — 目的、プラットフォーム、コンテンツ、ブランド、スタイル、数量
2. リサーチ — ui-ux-pro-max を有効化し、Pinterest で参考資料を確認
3. デザイン — frontend-design で HTML／CSS バナーを作成し、ai-artist／ai-multimodal でビジュアルを生成
4. エクスポート — chrome-devtools で正確な寸法の PNG にスクリーンショットを出力
5. 提示 — すべての候補を横並びで表示し、フィードバックをもとに調整

Banner：サイズのクイックリファレンス

プラットフォーム	種類	サイズ（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

アイコン: トップスタイル

スタイル	最適な用途
outlined	UI インターフェース、Web アプリ
filled	モバイルアプリ、ナビゲーションバー
duotone	マーケティング、ランディングページ
rounded	親しみやすいアプリ、ヘルスケア
sharp	テック、フィンテック、エンタープライズ
flat	マテリアルデザイン、Google スタイル
gradient	モダンなブランド、SaaS

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

ソーシャル写真（組み込み）

マルチプラットフォーム向けソーシャル画像デザイン: HTML/CSS → スクリーンショット書き出し。ui-ux-pro-max、brand、design-system、chrome-devtools スキルを使用します。

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

ソーシャル写真: ワークフロー

1. オーケストレーション — TODO タスクには project-management スキルを使用。独立した作業には並列サブエージェントを使用
2. 分析 — プロンプトを解析: 被写体、プラットフォーム、スタイル、ブランドコンテキスト、コンテンツ要素
3. アイデア出し — 3～5 個のコンセプトを作成し、AskUserQuestion で提示
4. デザイン — /ckm:brand → /ckm:design-system → /ck:ui-ux-pro-max または /ck:frontend-design をランダムに呼び出し、アイデア × サイズごとに HTML を作成
5. 書き出し — chrome-devtools または Playwright で正確な px 指定（deviceScaleFactor 2x）でスクリーンショットを撮影
6. 検証 — Chrome MCP または chrome-devtools スキルを使用して、書き出したデザインを目視で検査。レイアウトやスタイルの問題を修正して再書き出し
7. レポート — デザイン上の判断とともに plans/reports/ にサマリーを出力
8. 整理 — assets-organizing スキルを呼び出して、出力ファイルとレポートを分類

ソーシャル写真: 主要サイズ

プラットフォーム	サイズ (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

Windows に関する注意： 必要に応じて、pip の代わりに python を使用してください（例：python -m pip install ...）。

統合

外部サブスキル： brand、design-system、ui-styling 関連スキル： frontend-design、ui-ux-pro-max、ai-multimodal、chrome-devtools