mcpField
L
logo-maker

logo-maker

github.com/panel-uiデザイン・UI89791 回インストール今日更新
リポジトリ

logo-maker について

logo-maker は、ファビコンサイズでも判別できる製品ロゴを作るデザインスキルです。画像生成ツールの有無に応じて画像生成または SVG の手順を選び、32 × 32 ピクセルで確認します。

主な機能

  1. 01画像生成ツールの有無に応じた手順選択
  2. 02ロゴ生成用プロンプトの作成
  3. 03生成ツールがない場合の SVG 作成
  4. 043 つの方向性の提案と候補制作
  5. 0532 × 32 ピクセルでの視認性確認

活用シーン

  1. 01ファビコンサイズでも明瞭な製品ロゴの作成
  2. 02製品リポジトリで管理できる SVG ロゴの作成

インストール

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

$npx skills add https://github.com/panel-ui/panelui --skill logo-maker

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

design.md
palette.md
prompt.md
vector.md

詳細

ロゴメーカー

イラストではなく、ロゴを作成します。主題を、ファビコンのサイズまで縮小しても認識できるシンボルにまで簡略化し、そのサイズで認識できない要素は、描く前にすべて取り除きます。

成果の良し悪しを左右するのは2つの要素で、どちらもスタイルではありません。何を省くか、そしてシルエットがひとつの形として認識できるかどうかです。

まず制作方法を選ぶ

アートワークの制作方法は2つあり、デザイン作業に入る前にどちらか一方を選びます。

  • 画像生成ツールを利用できる場合 — それを使います。デザインルールをプロンプトにまとめ、生成結果から除外すべきものを示した prompt.md に従ってください。
  • 画像生成ツールを利用できない場合 — SVGでマークを作成します。vector.md に従ってください。出力は、プロジェクトで保持、差分確認、再エクスポートできるファイルです。すでにリポジトリがある製品では、多くの場合こちらのほうが適しています。

画像生成ツールを使わずに画像を生成したと主張してはいけません。どちらの方法も使えない場合は、その旨を伝えて作業を中止してください。

design.md と palette.md は、どちらの方法にも適用されます。2つの方法が異なるデザイン言語にならないよう、ファイルを分けています。

ワークフロー

  1. 主題を特定します。 依頼で指定されている場合は、それを使います。指定がなく、作業ディレクトリが製品のものである場合は、質問する前にREADME、パッケージのメタデータ、ランディングページのコピーを確認してください。製品の機能、対象ユーザー、表現すべき印象は、通常すでに記載されています。

  2. 必要な場合に限り、一度だけ質問します。 製品、対象ユーザー、トーンについてまとめて質問します。ブランディングのワークショップではなく、二度目の質問もしてはいけません。

  3. 描く前に3つの方向性を提案します。 それぞれ1行で示します。 <subject> — <what it says about the product> — <the shape it makes> 主題が固定されている場合は、代わりに表現方法を変えます。構図、シルエット、2色目を使う領域、表情の表し方などです。主題が固定されていない場合は、それぞれの主題を、製品が訴求する異なる特徴に結びつけます。適当に選んだ動物を3つ並べても、3つの方向性にはなりません。

  4. 候補をまとめて提示します。 方向性ごとに2案、合計6案を用意し、A1~C2 のラベルを付けます。すでに描画の許可が依頼に含まれていない限り、合意を得るまで待ちます。

  5. 各案を描きます。 それぞれ個別の正方形アセットとして作成します。1枚の画像にグリッドやコンタクトシートを作るよう依頼してはいけません。完成したマークを使って、後から比較用の画像を作成してください。

  6. 提示する前に、各案をすべて design.md と palette.md の却下ルールに照らして確認します。 ルールに抵触するものがあれば、そのルールを明示してください。黙って修正したり、実際には確認していないのに合格したと主張したりしてはいけません。

  7. 結果を報告します。 各案のラベル、主題、配色、保存先のパス、サイズを示し、まだ問題がある場合はその内容も伝えます。その後、どの案を改良するか尋ねてください。

合否を決める唯一のチェック

マークを 32 × 32 でレンダリングして確認します。何が描かれているか分からなければ、フルサイズでどれほど見栄えがよくてもデザインは失敗です。色や細部をいくら加えても解決しません。問題の原因は細部だからです。

design.md のすべての項目は、このチェックに合格するためにあります。

コメント