mcpField
L
LogoLab

LogoLab

ローカル
logolab.fabraham.devメディア・デザイン22 日前に更新
リポジトリ公式サイト

LogoLab について

LogoLabは、コーディングエージェント向けにラスター画像を編集可能なSVGへ変換し、アプリアイコン一式を出力するMCPサーバーです。画像を埋め込まずにローカルで形状をトレースし、アップロードせずディスク上のファイルを扱います。

主な機能

  1. 01画像を編集可能なSVGにトレース
  2. 02アプリや各種プラットフォーム向けアイコンを出力
  3. 03アイコンシートを個別のSVGに分割
  4. 04変換前にトレース結果を確認
  5. 05stdioでローカル実行

活用シーン

  1. 01ラスター画像からファビコンを作成
  2. 02PWAやモバイルアプリのアイコン一式を生成
  3. 03アイコンのグリッドを複数のSVGに変換

MCP 対応

LogoLabは、画像トレース、アイコン出力、シート分割、検査のツールをMCPクライアントに提供します。ローカルのstdioサーバーとして動作し、ディスク上のファイルを読み書きします。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "blaxzter-logolab": {
      "command": "npx",
      "args": [
        "-y",
        "logolab"
      ]
    }
  }
}
起動コマンドnpx -y logolab

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmlogolab0.8.0

ツール

5

掲載時のツール一覧 · 4 日前に更新

パラメーター型必須説明
modeenumいいえauto（デフォルト）はインクの数を調べます。紙面に1色だけならモノクロでトレースし、線画をよりすっきり仕上げます。それ以外はカラーでトレースします。auto | color | mono
imagestringはいPNG、JPEG、WebP、GIF、BMP、SVG ファイルへのパスです。相対パスは作業ディレクトリを基準に解決されます。
detailenumいいえhigh はフラットアートのラスタライズ上限を 2048 から 4096 に引き上げます。より鮮明になりますが、処理量は約4倍です。balanced | high
strokesbooleanいいえ線画を中心線のストロークとしてトレースし、ストローク幅を測定します（幅を再調整できる開いたパスと閉じたパスを生成）。各線を塗りつぶしアウトラインにする方式とは異なります。ストロークのないインク要素（点や音符の符頭など）は塗りつぶしになります。カラー モードでは、各ストロークは通過するインクの色で描画されます。デフォルトはオフです。
fidelitynumberいいえ形状の美化許容値（px）。0 にすると、円や直線へのスナップが無効になります。
layeringenumいいえカラーモード。stacked（デフォルト）：図形を前面の図形の下に描画します。ノードが少なく、色の間に細い隙間ができず、デザインツール内で図形が分割されません。tiled：図形の端同士をぴったり合わせ、別の図形が内側にある部分は穴にします。どちらも輪郭は同じです。モノクロでは無視されます。tiled | stacked
despecklenumberいいえ0 はすべての小さな斑点を残し、100 は強力に除去します。デフォルトは25です。
gradientsenumいいえauto（デフォルト）は実際のカラ―グラデーションを検出します。flat は単色塗りつぶしを強制します（ほとんどのアイコンに適しています）。rich はグラデーションのフィッティングを強制します。auto | flat | rich
smoothingnumberいいえ0 はシャープでノードが密、100 は滑らかで疎です。デフォルトは 50 です。
flattenOntostringいいえトレース前に、透明な元画像をこの色に合成します（例："#ffffff"）。省略すると alpha を保持します。（カードの色ではありません。カードの色は appearance.background で指定します。）
strokesOnlybooleanいいえ`strokes` を使用すると、塗りつぶしパスは一切生成されません。ドット、音符の符頭、塗りつぶされた図形など、ストロークのないインクも、それ自体の中央に沿って、その箇所と同じ幅の丸い端のストロークとして描画されます。ドットは丸い端の点になります。何も削除されませんが、線ではない形状は近似されます（正方形は端が丸くなります）。プロッターやストロークのみのアイコンセット向けです。デフォルトはオフです。
removeBackgroundbooleanいいえ検出された背景レイヤーを削除し、返される SVG を透明にします。

詳細

logolab

コーディングエージェントから、マシン上で画像をきれいな SVG と完全なアプリアイコンセットに変換できます。

LogoLab のベクター化ツールとアイコンエクスポーターをラップした MCP サーバーです。モデルが生成する 1024px の PNG には、エッジのぼかしや JPEG のようなハローが含まれます。これを 16px でも判読できるファビコンに変換する必要があります。手作業ではラスター画像を拡大することになり、アイコンがぼやけてしまいます。このサーバーは画像を埋め込むのではなく、領域の分割と曲線のフィッティングによる本格的なトレースを実行するため、結果を拡大してもきれいに表示されます。

データがアップロードされることはありません。stdio サーバーとして、エージェントが子プロセスとして起動し、ディスク上のファイルを読み書きします。ソケットを開くこともありません。

インストール

claude mcp add logolab -- npx -y logolab       # Claude Code

アイコンを配置するプロジェクトで、設定を自動で書き込ませることもできます。

npx -y logolab install                   # .mcp.json here (Claude Code)
npx -y logolab install --scope user      # every project
npx -y logolab install --client cursor   # .cursor/mcp.json
npx -y logolab install --client vscode   # .vscode/mcp.json
npx -y logolab install --client print    # print the JSON, change nothing

ほかのクライアントに必要なのは、通常どおり次の 3 つの情報です。

{ "mcpServers": { "logolab": { "command": "npx", "args": ["-y", "logolab"] } } }

次に、エージェントに 「icon.png をトレースして、PWA アイコンセットを public/ にエクスポートして」 と頼みます。

…またはスキルとして

サーバーは不要です。このパッケージの CLI を実行する エージェントスキルです。

/plugin install logolab --marketplace Blaxzter/LogoLab   # Claude Code plugin
npx -y logolab install --skill                           # .claude/skills/logolab/ (--scope user: every project)
npx -y logolab install --skills-dir <dir>                # any agent that reads skills from a folder

スキルが実行する CLI は、手動でも使用できます。

npx -y logolab tools                      # the tools, or `tools <name>` for one tool's inputs
npx -y logolab call trace_icon image=icon.png strokes=true

ツール

ツール説明
make_app_icons画像 → トレースした SVG → 完全なアイコンセット。一度の呼び出しで処理が完了します。
trace_iconベクター化のみを実行し、編集可能できれいな SVG を作成します。
export_icons既存の SVG/PNG を、PWA、ファビコン、Tauri、Electron、Android、iOS、拡張機能用のアイコンに変換します。
split_icon_sheet1 枚のキャンバス上のアイコングリッドから、アイコンごとにトレースした SVG を作成します。アイコンセットにそのまま使えます。grid ヒント、names、normalize: 24、ink: "currentColor"、透明なタイルに対応しています。
inspect_iconトレースを実行する前に、トレーサーがどのように処理するかを確認します。

プリセット：pwa、favicon、web、tauri、electron、android、ios、extension。

クライアントを使わずに試す

npx -y logolab try ./icon.png ./out

注意事項

  • Node ≥ 22.18 が必要です。
  • WebP 入力には、オプションの sharp デコーダーが必要です。これは オプションのピア依存関係であり、デフォルトではインストールされません。サーバー本体を大きく上回る、プラットフォーム固有の libvips バイナリが取得されるためです。必要に応じて npm install sharp を実行するか、PNG に変換してください。それ以外の形式（PNG、JPEG、GIF、BMP、SVG）は、追加設定なしで使用できます。
  • ツール呼び出しで指定する相対パスは、このパッケージではなく、エージェントの作業ディレクトリを基準に解決されます。そのため、./public/ は作業中のプロジェクト内のディレクトリを指します。

MIT © Frederic Abraham

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。