logo-designer

ロゴデザイナー

プロジェクトのコンテキストを分析し、SVG ベースのブランドアセットを生成して、モダンでプロフェッショナルなロゴをデザインします。

環境チェック

このスキルを実行する前に、以下を確認してください。

• README または package.json があるプロジェクトディレクトリにいる
• /assets/logo/ ディレクトリを作成する書き込み権限がある
• プロジェクトディレクトリが git リポジトリである（任意ですが、推奨）

いずれかのチェックに失敗した場合、このスキルは停止して確認を求めます。

サブエージェントアーキテクチャ

このスキルでは、Explorer+Executor（A）+ Review Loop（C） アーキテクチャを使用します。

Phase 1: Brand Research
  ↓ (brand-researcher agent)
  ↓
Phase 2: Interactive Style Selection
  ↓ Main agent: confirm style selection with user
  ↓
Phase 3: Generate All 7 SVGs
  ↓ (svg-generator agent)
  ↓
Phase 4: SVG Validation
  ↓ (svg-reviewer agent)
  ↓
Final Output: 7 SVG files in /assets/logo/ + brand-showcase.html + Design Rationale

エージェント：

1. agents/brand-researcher.md — プロジェクトファイルを読み込み、構造化されたブランド概要を作成します
2. agents/svg-generator.md — 7 つの SVG ファイル（マーク、ワードマーク、フル、アイコン、ファビコン、白、黒）をすべて生成します
3. agents/svg-reviewer.md — SVG の構造（viewBox、ラスター画像がないこと、すべてのファイルが揃っていること、ファイル名が正しいこと）を検証します

重要なポイント：7 つの SVG ファイルをインラインで生成することが、コンテキストの負荷の中で最も大きな要因です。複数のプロジェクトファイルにわたるブランド調査も負荷を増やします。レビュアーは、ファイルをコミットする前に SVG の構造上の問題を検出する品質ゲートとして機能します。

編集前のリポジトリ同期（必須）

既存のリポジトリでファイルを作成・更新・削除する前に、現在のブランチをリモートと同期してください。作業ツリーがクリーンでない場合は、先に stash して同期し、その後復元します。

branch="$(git rev-parse --abbrev-ref HEAD)"
dirty=0
if [ -n "$(git status --porcelain)" ]; then
  git stash push -u -m "pre-sync"
  dirty=1
fi
git fetch origin
git pull --rebase origin "$branch"
if [ "$dirty" -eq 1 ]; then
  git stash pop
fi

origin がない場合、pull を実行できない場合、または rebase／stash で競合が発生した場合は、停止して続行する前にユーザーに確認してください。

ワークフロー

フェーズ 1：プロジェクト分析

ブランドのコンテキストを把握するため、現在のプロジェクトを自動的に分析します。

1. 製品の識別情報を検出する — 次のファイルを順番に確認します。

   • README.md — 製品名、説明、タグライン
   • package.json — 名前、説明、キーワード
   • pyproject.toml — プロジェクト名と説明
   • Cargo.toml — パッケージ名と説明
   • go.mod — モジュール名

2. 既存のブランドアセットを探す — 以下を検索します。

   • /docs/brand_kit.md、/.docs/brand_kit.md、brand_kit.md
   • /docs/prd.md、prd.md — ブランド情報を含む製品要件
   • /assets/logo/、/public/logo、/static/logo — 既存のロゴ
   • 既存のカラーパレットを確認するための Tailwind 設定

3. コードベースの構造からプロジェクトの種類を特定する：

   • Developer／CLI／オープンソース — .github/、CLI のエントリーポイント、MIT ライセンス
   • SaaS／生産性 — Web アプリの構造、認証、ダッシュボードのパターン
   • スタートアップ — 無駄のない構成、MVP のパターン
   • エンタープライズ／B2B — 複雑なアーキテクチャ、インテグレーション
   • コンシューマー／モバイル — React Native、Flutter、モバイルファーストのパターン

4. 続行する前に調査結果を要約する：

   Product: [name]
   Type: [Developer Tool / SaaS / Startup / Enterprise / Consumer]
   Purpose: [1-sentence description]
   Audience: [target users]
   Existing colors: [hex codes if found, or "None detected"]
   Assets found: [list or "None"]
   

フェーズ 2：ロゴデザイン

検出したプロジェクトの種類（Developer／SaaS／Startup／Enterprise／Consumer）に基づいてスタイルを選び、16px のファビコンからヒーローバナーまで、あらゆるサイズで視認できるミニマルな幾何学的マークをデザインします。検出されたブランドカラーがある場合はそれを使用し、ない場合はデフォルトスタイルガイドを適用します（暗色のベースにネオングリーンのハイライトのみ。塗りつぶしには使用しないでください）。テキストを含む SVG を生成する前に、ワードマークで製品名をどのように大文字・小文字表記するか、ユーザーに確認してください。

スタイル表、ビジュアル／カラー／タイポグラフィの全ルール、およびシステムステータスカラーを含むデフォルトスタイルガイドのパレットについては、references/design-principles.md を参照してください。

デフォルト品質基準

依頼されていない場合でも、7 つの SVG と brand-showcase.html はすべてプロフェッショナルで、本番環境で使用できる品質を備え、洗練され、高級感のある仕上がりでなければなりません。選択したスタイルが方向性を定め、この基準が仕上がりを定めます（装飾ではなく、技巧と節度）。光学的なバランス、ストロークの一貫性、16px でも判読できるクリーンでミニマルなパス、洗練されたワードマークのカーニング、プレースホルダーのない完成度の高いショーケースを実現してください。この基準を svg-generator に伝えてください。

フェーズ 3：成果物

まず基準となるマークを生成し、その正確なパスデータから派生する 6 つのバリエーションを作成します。これにより、すべてのファイルで同じジオメトリが共有されます。svg-generator エージェントには、文字どおりの d="" 文字列を渡してください。図形を言い換えてはいけません。

出力構成：

/assets/logo/
├── logo-mark.svg          # Canonical 64×64 mark (source of truth)
├── logo-full.svg          # 320×72 mark + wordmark
├── logo-wordmark.svg      # 180×40 text only
├── logo-icon.svg          # 512×512 app icon (centered, padded)
├── favicon.svg            # 16×16 simplified 2-layer mark
├── logo-white.svg         # 320×72 white (for dark backgrounds)
├── logo-black.svg         # 320×72 black (for light backgrounds)
└── brand-showcase.html    # Self-contained brand identity page

7 つのファイルをすべて書き込んだ後、mark、full、icon、white、black の各バリエーションを読み返し、d="" 文字列が同一であること（または transform によって正しく拡大縮小されていること）を確認します。続行する前に、相違があれば修正してください。

バリエーションの詳しい仕様、拡大縮小の計算、ファビコンの簡略化ルール、SVG の要件については、references/svg-deliverables.md を参照してください。

フェーズ 4～5：ドキュメントとブランド紹介

SVG を書き込んだ後、デザインの根拠（シンボルの意味、色の選択、タイポグラフィの理由）、16 進カラーコードの仕様、Tailwind の設定スニペットを出力します。次に、自己完結型のプレゼンテーションページ（ヒーロー、デザインコンセプト、バリエーショングリッド、パレット、タイポグラフィ、開発者向けリファレンス、フッター）となる /assets/logo/brand-showcase.html を生成し、ブラウザーで開きます。

HTML ページの構成、デザインガイドライン、ドキュメントのテンプレートについて詳しくは、references/brand-showcase.md を参照してください。

想定される出力

「fastbuild」という CLI ツールの場合、このスキルは次を生成します。

/assets/logo/
├── logo-mark.svg          — 64×64 abstract "F" mark (canonical geometry)
├── logo-full.svg          — 320×72 mark + "FASTBUILD" wordmark
├── logo-wordmark.svg      — 180×40 text-only wordmark
├── logo-icon.svg          — 512×512 mark centered in rounded square
├── favicon.svg            — 16×16 simplified 2-layer mark
├── logo-white.svg         — 320×72 full logo in white (for dark backgrounds)
├── logo-black.svg         — 320×72 full logo in black (for light backgrounds)
└── brand-showcase.html    — self-contained brand identity presentation page

ユーザーに提示するデザインの根拠の要約：

Product: fastbuild
Type: Developer/CLI Tool
Symbol: Abstract "F" from stacked horizontal speed bars
Colors: #0A0A0A base, #00FF41 neon green accent (borders and highlights only)
Typography: Inter Bold for wordmark

エッジケース

• プロジェクトのコンテキストが見つからない場合：生成を開始する前に、製品名、製品の種類、目的を説明する 1 文をユーザーに尋ねます。
• 既存のブランドカラーが検出された場合：既定のダーク／ネオングリーンのパレットではなく、その色を使用します。続行する前にユーザーの確認を取ります。
• ユーザーがワードマークの大文字・小文字を指定しない場合：続行する前に明示的に尋ねます（大文字・小文字のルールと例については references/design-principles.md を参照してください）。
• バリエーション間で SVG のジオメトリに相違がある場合：フェーズ 3 の確認手順を再実行し（d="" 文字列を読み返して差分を確認）、完了前に修正します。
• Git リポジトリがない場合：ブランチと同期の手順を省略し、現在のディレクトリに直接書き込みます。その旨を要約に記載します。
• favicon.svg が複雑すぎる場合：16×16 ではマーク全体が判読できません。必ず 2 層（外側＋内側）に簡略化し、中央のディテール層を削除して、比率を保ちます。
• ユーザーが提案したスタイルを却下した場合：ユーザーが承認するまで、SVG ファイルを生成せずにフェーズ 2（スタイルの選択）を繰り返します。

最終レポート

実行を終了するたびに、中断時も含めて、次の簡潔なテキストブロックで締めくくります。ステータスは、COMPLETE（7 つの SVG と brand-showcase.html がすべて書き込まれ、ジオメトリの確認に合格）、PARTIAL（ファイルは書き込まれたが、確認項目にまだ不合格がある）、または BLOCKED（ファイルが書き込まれていない）のいずれかです。ユーザーの回答を待つ質問では実行を終了しません。ユーザーが回答せずに実行を終了した場合、ステータスは BLOCKED です。記入ルール、PARTIAL と BLOCKED の例、読み取り確認については references/final-report.md を参照してください。例：

Result: COMPLETE. Wrote 7 SVGs and brand-showcase.html to /assets/logo/.
Evidence: Read back mark, full, icon, white and black variants: d="" strings identical. svg-reviewer: all viewBox attributes correct, no embedded rasters. Default Quality Bar passed. sync: skipped (not a git repo)
Uncertainty: Assumed a developer-tool audience from the CLI entry point; the user did not say.
Decision: No approval needed. Export PNG sizes from logo-icon.svg if you need raster assets.

受け入れ基準

• 7 つすべての SVG ファイルが、正しいファイル名で /assets/logo/ に書き込まれている
• logo-mark.svg が最初に作成され、その d="" パス文字列が派生するすべてのバリアントでそのまま使用されている
• すべての SVG に正しい viewBox 属性があり、埋め込みラスタ画像が含まれていない
• モノクロバリアント（logo-white.svg、logo-black.svg）は、ジオメトリではなく色だけが logo-full.svg と異なる
• favicon.svg は、マークを 16×16 にしたシンプルな 2 層バージョンである
• brand-showcase.html が作成され、ブラウザーで正しく開ける
• デザインの意図（シンボルの意味、色の選択、タイポグラフィ）が回答内に記載されている
• カラー仕様に、すべてのパレットの役割に対応する HEX コードが含まれている
• テキストを含む SVG を生成する前に、ワードマークの大文字・小文字の表記をユーザーに確認している
• ユーザーから求められなくても、すべての SVG とショーケースページがデフォルト品質基準（プロフェッショナル、本番環境向け、エレガント、プレミアム）を満たしている
• 最終レポートは Result: とそのステータスで始まり、Evidence:、Uncertainty:、Decision: の各行がある。Evidence: には実行したチェックのみを記載している
• 最終レポートが references/final-report.md の 4 つの読者チェック（結果を見つけやすい、事実と仮定が分けられている、主張を追跡できる、次の判断が明確）に合格している。人間のレビュアーから回答がない場合、人間が内容を理解したかどうかは未確認とする

ステップ完了レポート

各フェーズの後に、チェックごとの合否と最後の Result: 行（PASS | FAIL | PARTIAL）を記載した ◆ [Phase] (step N of 4) ステータスブロックを出力します。各フェーズで言い換えず、テンプレートを再利用してエージェントのコンテキスト予算を抑えてください。

完全なレポートテンプレート、フェーズごとのチェックリスト、および分析サマリーの記入例については、references/step-reports.md を参照してください。

注記

• ロゴのプレビューは、明るい背景（#FAFAFA）と暗い背景（#0A0A0A）の両方で必ず表示してください
• 生成前にワードマークの大文字・小文字の表記を確認してください（Phase 2 と Edge Cases を参照）
• プロジェクトのコンテキストが見つからない場合は、ユーザーに製品名、種類、目的を尋ねてください
• シンプルさを優先してください。ロゴは 16x16 ピクセルでも認識できる必要があります
• 一貫性は必須です：すべてのバリアントが、視覚的に同じロゴとして認識できる必要があります。マークの形状、レイヤー数、アクセント要素は、すべてのファイルで一致していなければなりません。バリアント間で変更できるのは、色（モノクロ）、サイズ（ファビコン、アイコン）、ワードマークの有無だけです。パスの一致を検証できない場合、成果物は不完全です。