logo-designer

ロゴデザイナー

SVG を使ってロゴをデザインし、ブラッシュアップします。並べてプレビューを生成し、標準サイズの PNG として書き出します。

フェーズ 1：ヒアリング

何かを生成する前に、背景情報を集め、ユーザーが必要としているものを尋ねます。

ステップ 1：背景情報を自動で集める

ユーザーがリポジトリ、URL、既存のプロジェクトを示した場合：

• README、package.json、CSS／設定ファイル、既存のブランディングを確認します
• 以下を抽出します：プロジェクト名、目的、技術スタック、カラーパレット、デザインの方向性、フォント
• 質問する前に、見つかった情報を要約します。これにより、すでに分かっていることを質問せずに済みます

ユーザーがプロジェクトの情報なしに「ロゴをデザインして」とだけ伝えた場合は、ステップ 2 に進みます。

ステップ 2：構造化された質問をする

これらの質問をするには、AskUserQuestion ツールを使います。関連する質問はまとめて（1 回につき最大 4 問）、ステップ 1 で集めた背景情報やユーザーの最初のメッセージで回答済みの質問は省略します。

質問 1 — 形式：

question: "What format do you need?"
header: "Format"
options:
  - label: "Icon only (512x512)"
    description: "Square icon, works for favicons, app icons, social avatars"
  - label: "Wordmark only"
    description: "Text logo, 1024x512"
  - label: "Combination mark"
    description: "Icon + text together, 1024x512"

質問 2 — スタイルの方向性：

question: "What style direction?"
header: "Style"
options:
  - label: "Minimal / geometric"
    description: "Clean lines, simple shapes, modern feel"
  - label: "Playful / hand-drawn"
    description: "Friendly, casual, organic shapes"
  - label: "Bold / corporate"
    description: "Strong, professional, high contrast"
  - label: "Match existing app style"
    description: "I'll extract the design language from your project"

質問 3 — 色の好み：

question: "Any color preferences?"
header: "Colors"
options:
  - label: "Use project colors"
    description: "I'll pull colors from your existing design system"
  - label: "Surprise me"
    description: "I'll pick a palette that fits the vibe"
  - label: "I have specific colors"
    description: "I'll ask you for them"

質問 4 — 出力サイズ（ユーザーが特定のプラットフォームに言及した場合のみ）：

question: "Any specific size requirements?"
header: "Size"
options:
  - label: "Standard sizes"
    description: "16, 32, 48, 192, 512, 1024, 2048px — covers most uses"
  - label: "Custom size needed"
    description: "I'll ask for the exact dimensions"

背景情報に応じた対応

• ユーザーがリポジトリを示した場合： まず背景情報を集め、形式とスタイルだけを尋ねます（色はすでに分かっている可能性が高いため）。
• ユーザーが「X のロゴをデザインして」と言った場合： 形式、スタイル、色をまとめて尋ねます。
• ユーザーが詳しい説明をした場合： すでに説明されている内容は省略し、不足している点だけを尋ねます。
• ユーザーが「おまかせ」と言った場合： 妥当なデフォルト（アイコンのみ、ミニマル、意外性のあるデザイン）を使い、フェーズ 2 に進みます。

特徴の異なるコンセプトを生成できるだけの情報が集まったら、フェーズ 2 に進みます。

SVG の規約

SVG ロゴを生成する際は、以下のルールに従います。

• viewBox のサイズ — 固定の width／height 属性は使わず、常に viewBox="0 0 W H" を使います。アイコンには 512x512、ワードマーク／コンビネーションマークには 1024x512 を使います。
• 自己完結型 — 外部フォント、画像、他のファイルを参照する <use> は使いません。すべてインラインにします。
• テキストの扱い — 広く利用されているシステムフォント（Arial、Helvetica、Georgia など）を使うか、テキストを <path> 要素に変換します。システムフォントを使う場合は、必ず汎用フォールバックを含めます（例：font-family="Helvetica, Arial, sans-serif"）。
• 意味のあるグループ — 論理的なセクションを、説明的な ID を持つ <g> 要素で囲みます：id="icon"、id="wordmark"、id="tagline"。ユーザーが「アイコンを大きくして」「ワードマークの色を変えて」と言ったときに、調整しやすくなります。
• デフォルトではベタ塗り — 単色の fill を使います。グラデーション（<linearGradient>、<radialGradient>）は、ユーザーが希望した場合、またはスタイルに明らかに適している場合に限り使います。
• 小さいサイズでの視認性 — ロゴは 16〜32px（ファビコン）で使える必要があります。細い線よりベタ塗りを優先し、小さいサイズで見えなくなる細部は避けます。輪郭を視認できる状態に保つ必要がある場合は、stroke-width を 6 以上にします。頭の中で確認してください。幅 32px で見えなくなる細部は、単純化します。
• クリーンなマークアップ — 不要な変換、空のグループ、デフォルトの名前空間を追加しません。SVG を読みやすく保ちます。

フェーズ 2：アイデアを展開する

互いに異なる SVG ロゴのコンセプトを 3〜5 個生成します。それぞれのコンセプトで、アイコンのモチーフ、タイポグラフィのスタイル、レイアウト、全体的な美的方向性のいずれかを変え、意味のある違いを出します。同じアイデアの小さなバリエーションは生成しません。

並列生成

Task ツールを使って、すべてのコンセプトを並列生成します。順番に作成するより大幅に速くなります。

1. まず logos/concepts/ ディレクトリを作成します
2. すべてのコンセプトに対してエージェントを 1 つずつ割り当て、同じメッセージ内でディスパッチして並行実行します。各エージェントには、以下を指示します。
   • 完全なデザインブリーフ（形式、スタイル、色、viewBox、SVG の規約）を受け取る
   • 固有のクリエイティブな方向性（例：「幾何学的なレターフォーム」、「抽象的なシンボル」、「マスコットをベースにしたデザイン」）を割り当てる
   • SVG を指定のファイルパス（例：logos/concepts/concept-1.svg）に書き出す
   • subagent_type: "general-purpose" と mode: "bypassPermissions" を使用する
3. すべてのエージェントの作業完了後、logos/preview.html を生成して結果を提示します

ディスパッチ例（すべてを 1 つのメッセージ内で実行）：

Task 1: "Write logos/concepts/concept-1.svg — geometric letterform using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 2: "Write logos/concepts/concept-2.svg — abstract symbol using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

Task 3: "Write logos/concepts/concept-3.svg — mascot-based icon using [colors]. viewBox 512x512. Self-contained SVG, no external fonts. [full SVG conventions]."

各エージェントへのプロンプトには、以下を必ず含めてください。スキルに記載された SVG の規約一式、出力先のファイルパス、固有のクリエイティブな方向性、関連するすべてのコンテキスト（プロジェクト名、色、スタイルの好み）。エージェント同士でコンテキストは共有されません。各エージェントに必要な情報をすべて渡してください。

ファイル出力

logos/
├── concepts/
│   ├── concept-1.svg
│   ├── concept-2.svg
│   ├── concept-3.svg
│   └── ... (up to concept-5.svg)
└── preview.html

並列実行したすべてのエージェントの作業が完了したら：

1. 下記のプレビューテンプレートを使って logos/preview.html を生成します
2. ブラウザーで logos/preview.html を開くようユーザーに伝えます
3. 各コンセプトを 1 文ずつ簡潔に説明し、説明とビジュアルを照合できるようにします
4. 次のように尋ねます：「どの方向性を試してみたいですか？番号を選ぶか、気に入った点や気に入らなかった点を教えてください。」

プレビュー HTML テンプレート

logos/preview.html を生成する際は、以下のテンプレートを使用します。{{CARDS}} を SVG ファイルごとのカードに置き換えます。explore 中は {{PHASE}} を "Concepts" に、refine 中は "Iterations" に設定します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Preview — {{PHASE}}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 2rem;
    transition: background-color 0.3s, color 0.3s;
  }
  body.light { background: #f5f5f5; color: #333; }
  body.dark { background: #1a1a1a; color: #eee; }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }
  h1 { font-size: 1.5rem; font-weight: 600; }
  .toggle {
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .card {
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    overflow: hidden;
  }
  .card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 240px;
  }
  body.light .card-img { background: #fff; }
  body.dark .card-img { background: #2a2a2a; }
  .card-img img {
    max-width: 100%;
    max-height: 200px;
  }
  .card-label {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
  }
  body.light .card-label { background: #fafafa; }
  body.dark .card-label { background: #222; }
</style>
</head>
<body class="light">
  <div class="header">
    <h1>Logo Preview — {{PHASE}}</h1>
    <button class="toggle" onclick="document.body.classList.toggle('dark'); document.body.classList.toggle('light'); this.textContent = document.body.classList.contains('dark') ? '☀️ Light' : '🌙 Dark';">🌙 Dark</button>
  </div>
  <div class="grid">
    {{CARDS}}
  </div>
</body>
</html>

ファビコンサイズ確認ストリップ

Phase 3（Refine）では、イテレーショングリッドの下に「ファビコンサイズ確認」セクションを追加します。各イテレーションを 64px、32px、16px で表示し、ユーザーが早い段階で視認性の問題に気づけるようにします。次の HTML パターンを使用します。

<h2>Favicon Size Check</h2>
<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:end;">
  
  <div style="display:flex;flex-direction:column;align-items:center;gap:0.5rem;">
    <div style="font-size:0.8rem;font-weight:500;">{{LABEL}}</div>
    <div style="display:flex;gap:1rem;align-items:end;">
      <div><img src="{{FAVICON_PATH}}" width="64" height="64"><div style="font-size:0.75rem;opacity:0.6;">64px</div></div>
      <div><img src="{{FAVICON_PATH}}" width="32" height="32"><div style="font-size:0.75rem;opacity:0.6;">32px</div></div>
      <div><img src="{{FAVICON_PATH}}" width="16" height="16"><div style="font-size:0.75rem;opacity:0.6;">16px</div></div>
    </div>
  </div>
</div>

アイコンのみのロゴでは、{{FAVICON_PATH}} にイテレーションのパスを指定します。コンビネーションマークの場合は、意味のある #icon グループから単独の正方形 SVG を作成し、そのパスを {{FAVICON_PATH}} に指定します。横長のワードマーク全体を正方形のファビコン用セルに無理に押し込まないでください。32px で細部が見えなくなる場合は、簡略化（細部を取り除く、線を太くする、装飾要素を省く）を提案します。

{{CARDS}} の各エントリは次のとおりです。

<div class="card">
  <div class="card-img">
    <img src="{{PATH}}" alt="{{LABEL}}">
  </div>
  <div class="card-label">{{LABEL}}</div>
</div>

{{PATH}} は logos/ からの相対パス（例：concepts/concept-1.svg または iterations/iteration-3.svg）、{{LABEL}} は拡張子を除いたファイル名（例："concept-1" または "iteration-3"）です。

explore 中はすべてのコンセプトを表示します。refine 中はすべてのイテレーションを新しい順に表示します。

Phase 3：Refine

ユーザーがコンセプトの方向性を選んだら、それを反復して改善します。

単独イテレーションとバッチイテレーション

単独イテレーション — ユーザーから具体的なフィードバック（「アイコンを大きくする」「青を緑に変える」など）があった場合は、変更を直接適用し、次のイテレーションの SVG を自分で書き出します。

バリエーションの一括生成 — 複数の方向性を同時に試す場合（「異なるカラーパレットを試す」「目の形を 5 パターン見せて」「バーの本数を変えてみる」など）は、Phase 2 と同様に Task ツールでバリエーションを並列生成します。

1. バリエーションごとにエージェントを 1 つずつ割り当て、すべてを同じメッセージ内でディスパッチします
2. 各エージェントには、ベース SVG の内容（完全な SVG をプロンプトにコピーして含める）、適用する固有のバリエーション、出力先のファイルパス、SVG の規約一式を渡します
3. すべてのエージェントの作業完了後、logos/preview.html を再生成して結果を提示します

バッチディスパッチの例：

Task 1: "Take this base SVG [full SVG content] and create a variation with a warm color palette (reds, oranges, yellows). Write to logos/iterations/iteration-5.svg."

Task 2: "Take this base SVG [full SVG content] and create a variation with a cool color palette (blues, teals, purples). Write to logos/iterations/iteration-6.svg."

Task 3: "Take this base SVG [full SVG content] and create a variation with a monochrome palette (grays + one accent). Write to logos/iterations/iteration-7.svg."

各エージェントには subagent_type: "general-purpose" と mode: "bypassPermissions" を使用します。エージェント同士でコンテキストは共有されないため、各エージェントのプロンプトには必ずベース SVG の内容全体を含めてください。

ファイルの出力

logos/
├── iterations/
│   ├── iteration-1.svg    # First refinement (based on chosen concept)
│   ├── iteration-2.svg
│   └── ...
└── preview.html           # Regenerated to show iterations

1. 選択したコンセプトを出発点としてコピーし、最初の改良版を logos/iterations/iteration-1.svg として保存します
2. ユーザーからのフィードバックを適用し、新しいバージョンを番号を増やして保存します
3. 各イテレーションの後に logos/preview.html を再生成し、ユーザーが比較できるよう、すべてのイテレーションを新しい順に表示します
4. 各イテレーションの後に、ブラウザーを更新するようユーザーに伝えます
5. 各イテレーションの後に、変更点を簡潔に説明し、次のフィードバックを尋ねます

イテレーションのヒント

• ユーザーが「イテレーション N に戻して」と言った場合は、それを新たなベースとして使用します
• ユーザーが特定のイテレーションを比較したい場合は、プレビューで確認するファイル名を伝えます
• イテレーション間で SVG の構造を一貫させ（グループ ID を同じにし）、ユーザーが変更点を追跡できるようにします
• 一括探索（3 種類以上のバリエーション）には並列エージェントを使用し、単一の微調整には順次書き込みを使用します
• 小さいサイズでの視認性を確認します — イテレーションを生成した後、プレビューにファビコンサイズの確認用ストリップを含めます。32px で細い線が消える場合は、積極的に太くすることを提案します。細部（時計、きらめき、細いアイコン）が読み取れなくなる場合は、削除または簡略化を提案します。これにより、イテレーションを重ねる回数を減らせます。
• ユーザーが満足したら、フェーズ 4 に進みます

Lineage による任意のレビュー（明示的なオプトインがある場合のみ）

スタンドアロンの SVG ファイルと logos/preview.html が常に既定の方法です。Lineage がインストールされている可能性やランタイム記述子が存在することだけを理由に、Lineage を探したり、起動したり、接続したりしないでください。Lineage は、ユーザーがキャンバスでのレビューを明示的に依頼し、Lineage のチェックアウト先またはアダプターコマンドを提示した場合にのみ使用します。

明示的なレビューでは、引き渡しを一方向かつ公開境界内に限定します。明示的な成果物、セレクター、ターゲットを指定して Lineage アダプターを実行し、バージョン付きの単一の JSON レシートを、同梱の標準入力専用ハンドオフにパイプします。

npm --prefix /absolute/path/to/lineage-logo --silent run agent:submit -- \
  --mode replace \
  --artifact /absolute/path/to/logos/iterations/iteration-2.svg \
  --selector '#logo' \
  --target-name logo | \
node <path-to-skill>/scripts/lineage-handoff.mjs \
  --logos /absolute/path/to/logos

ハンドオフは Lineage を起動したり場所を特定したりすることはなく、トークン、API オリジン、成果物引数、接続コンテキストも受け付けません。標準入力からアダプターのレシートのみを受け取ります。受理されたレシートの場合、衝突を安全に回避して次の logos/iterations/iteration-N.svg をアトミックに作成し、公開されたバイト列を読み直して検証した後、iterationPath、bytes、sha256 を含むメタデータのみのレシートを出力します。この継続用レシートが出力される前に、ファイルデータとサポート対象のディレクトリメタデータが同期されます。トランザクション開始前の無効または利用不可なアダプターのレシートには、架空のトランザクション、ソースパス、リビジョン ID は含まれず、同じハンドオフで終端まで処理できます。 改良はその正確な iterationPath からのみ続け、その後 logos/preview.html を再生成して、検証済みのイテレーションが通常のワークフローで表示されるようにします。

取り消し、拒否、古い、利用不可、競合、タイムアウト、または無効なレシートの場合は、出力された終端時のガイダンスに従い、イテレーションを作成または予約しないでください。プロデューサーは一時的なエディター切断中も待機し、このハンドオフがリッスンを停止した後にキャンバスが再接続されても、同じ提案を受理できないようにします。権威ある受理済みレシートを永続化できない場合、終了コード 27 により、そのトランザクション ID、バイト数、ハッシュが保持されます。ローカルストレージの問題を修正し、同じトランザクション ID と同じ成果物を指定して、同じアダプターコマンドを再実行してください。新しいトランザクションを作成しないでください。タイムアウトまたは競合後に自動で再送信しないでください。現在のキャンバスの状態を確認した後、ユーザーの明示的な指示があった場合に限り、新しい送信を行ってください。 暫定的な受理中にローカルサーバーが置き換えられたと Lineage が報告した場合、終端結果を推測したり、ブラウザーのメモリーから処理を続けたりしないでください。ロックされたキャンバスを確認し、明示的な復旧操作 Restore previous document を使用します。その正確なトランザクションが解決した後にのみ、ユーザーは次のハンドオフを明示的に開始できます。

フェーズ 4：エクスポート

ユーザーが「エクスポートして」「これで問題ありません」「これにします」などと言った場合：

1. 最終版の SVG を特定します（どれか判断できない場合は、どれにするかユーザーに確認します）
2. logos/export/ ディレクトリを作成します
3. 最終版の SVG を logos/export/logo.svg にコピーします。コンビネーションマークの場合は、意味のある #icon グループから、単独で使用できる正方形の logos/export/icon.svg も作成します。アイコンの見た目を維持し、正方形にぴったり合う viewBox を指定します。ワードマークは含めないでください。
4. 同梱のエクスポートスクリプトを実行して PNG を生成します。すでに出力先にある SVG を渡すこともできます：

bash <path-to-skill>/scripts/export.sh logos/export/logo.svg logos/export/

コンビネーションマークの場合は、単独のアイコンを省略可能な第 3 引数として渡します：

bash <path-to-skill>/scripts/export.sh logos/export/logo.svg logos/export/ logos/export/icon.svg

スクリプトは以下を生成します：

• logo-16.png
• logo-32.png
• logo-48.png
• logo-192.png
• logo-512.png
• logo-1024.png
• logo-2048.png

アイコンの SVG を指定すると、スクリプトは icon.svg も保持し、対応する icon-16.png から icon-2048.png までの一連のファイルも生成します。ファビコンとアプリアイコンには icon-* アセットを使用し、コンビネーションマーク全体が必要な場所には logo-* アセットを使用します。

5. 結果を報告します。エクスポートしたファイルをすべてサイズとともに一覧表示します
6. エクスポートスクリプトが失敗した場合（変換ツールが見つからない場合）は、ユーザーに次のように伝えます：

   「SVG から PNG への変換ツールが見つかりません。次のいずれかをインストールしてください：npm install -g @aspect-build/resvg、Inkscape、または librsvg。その後、もう一度エクスポートを実行してください。」

エクスポートスクリプトの場所

エクスポートスクリプトは、このスキルに scripts/export.sh として同梱されています。SKILL.md ファイルからの相対パスでスキルのディレクトリを特定してください。

フェーズ 5：リポジトリへの統合（任意）

ユーザーがロゴのプロジェクトリポジトリへのコミットまたは PR の作成を依頼した場合：

1. 対象ファイルを特定する — リポジトリ内に既存のアイコン／ロゴファイルがあるか確認します：public/favicon.svg、public/favicon.ico、public/pwa-*.png、public/apple-touch-icon.png、assets/logo.svg、ios/.../AppIcon.appiconset/、public/manifest.json など。
2. クローンしてブランチを作成する — リポジトリをクローンするか、既存のチェックアウトを使用し、chore/new-logo のようなブランチを作成します。
3. ファイルを置き換える — 最終版の SVG をファビコン／ロゴとしてコピーします。プラットフォーム固有のサイズを生成します：
   • favicon.ico — 48px（ImageMagick の convert または magick を使用）
   • apple-touch-icon.png — 180px
   • pwa-192x192.png — 192px
   • pwa-512x512.png — 512px
   • iOS [email protected] — 1024px
   • リポジトリにすでにあるファイルだけを置き換えます。プロジェクトで使用していないファイルは追加しないでください。
4. コミットして PR を作成する — chore: replace logo with new [description] のようなメッセージでコミットし、プッシュして、更新内容の概要を記載した PR を作成します