mcpField
G
generate-logo

generate-logo

github.com/zernieデザイン・UI15410 回インストール2 日前に更新
リポジトリ

generate-logo について

ImageRouter APIを使ってvigilesのロゴ案を生成するスキルです。APIの設定、画像生成パラメーター、ロゴを選んでコミットする手順を説明します。

主な機能

  1. 01ImageRouterでロゴ画像を生成
  2. 02APIキーとリクエスト設定を案内
  3. 03画像モデルと生成パラメーターを掲載
  4. 04案の保存と選定手順を説明

活用シーン

  1. 01vigilesのロゴ案を作成
  2. 02テキストプロンプトからロゴ案を生成
  3. 03コミットするロゴを選び準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/zernie/vigiles --skill generate-logo

インストール後、Claude Code で/generate-logoを入力して読み込まれたか確認します。

詳細

ロゴを生成する

ImageRouter API（imagerouter.io）を使用して、vigiles のロゴのバリエーションを生成します。

セットアップ

https://imagerouter.io/api-keys から API キーを取得します。引数として渡すか、環境変数 IMAGEROUTER_API_KEY を設定します。キーをコミットしないでください。

API

Endpoint: https://api.imagerouter.io/v1/openai/images/generations
Auth: Bearer token in Authorization header
Method: POST, Content-Type: application/json
リクエストボディ
{
  "prompt": "...",
  "model": "google/nano-banana-2",
  "quality": "high",
  "size": "1024x1024",
  "response_format": "url",
  "output_format": "png"
}
利用可能なモデル（画像生成）

モデル一覧：GET https://api.imagerouter.io/v1/models

動作確認済みのモデル：

  • google/nano-banana-2 — 最高品質、1画像あたり $0.07
  • google/nano-banana-2:free — 無料プラン
  • openai/gpt-image-1 — OpenAI の画像モデル
  • black-forest-labs/FLUX-1.1-pro — FLUX のプロ版
レスポンス
{
  "created": 1775430873,
  "data": [{ "url": "https://storage.imagerouter.io/..." }],
  "cost": 0.069,
  "latency": 27627
}

data[0].url の URL から画像をダウンロードします。

現在のロゴ

現在のロゴ（logo.png）は v6 です。暗い背景に、半透明の炎の花びらが重なったデザインで、アンバーオレンジの配色です。google/nano-banana-2 で生成しました。

生成に使用したプロンプト
A premium, refined logo icon for a developer tool called vigiles that compiles
typed TypeScript specs to AI instruction files. Inspired by OpenAI geometric aesthetic and Apple
minimalism. A single abstract geometric shape: an upward-pointing flame composed
of 3 overlapping translucent rounded shapes, creating depth through overlap —
similar to how the OpenAI logo uses overlapping curves. Warm amber to deep orange
color palette. Black background. No text. No letters. Pure abstract mark. Clean
enough to be an app icon. Luxurious, premium, modern tech company feel.

デザインの原則

  • 炎／たいまつのモチーフ — vigiles はたいまつを持って夜間の見回りをしたローマの夜警でした
  • アンバー／オレンジの配色 — GitHub Action のブランドカラーに合わせています
  • アイコン内にテキストを入れない — 16px のファビコンサイズでも使える必要があります
  • README 用の暗い背景のバリエーションと、npm 用の明るい背景／透明なバリエーション

curl の例

curl 'https://api.imagerouter.io/v1/openai/images/generations' \
  -H "Authorization: Bearer $IMAGEROUTER_API_KEY" \
  -H 'Content-Type: application/json' \
  -d '{
    "prompt": "YOUR PROMPT HERE",
    "model": "google/nano-banana-2",
    "quality": "high",
    "size": "1024x1024",
    "response_format": "url",
    "output_format": "png"
  }'

ワークフロー

  1. 異なるプロンプトでバリエーションを生成します
  2. logo-v*.png として保存します（gitignore 対象）
  3. 最適なものを選び、logo.png にコピーします
  4. logo.png のみをコミットします

コメント

Markdown 対応