mcpField
S
scenario-brand-kit

scenario-brand-kit

github.com/scenario-labsデザイン・UI1.2k398 回インストール1 日前に更新
リポジトリ

scenario-brand-kit について

Scenario で、文書化したアイデンティティ仕様から再利用可能なベクターロゴ、各種展開物、ボードまでを作成するスキルです。明確なルールと確認工程に基づいてブランド素材を制作するチーム向けです。

主な機能

  1. 01配色とタイポグラフィの仕様作成
  2. 02SVG ロゴの生成と再利用
  3. 03仕様に沿った素材のチェック
  4. 04ロゴのカラーバリエーション作成
  5. 05ブランド展開物とボードの制作

活用シーン

  1. 01新しいスタジオのアイデンティティ策定
  2. 02背景に応じたロゴのバリエーション準備
  3. 03一貫性のあるブランド展開画像の制作

MCP 対応

Scenario ツールで画像モデルの選定と実行、素材分析、キットファイルのアップロードと整理、ボードの合成を行います。関連スキルが画像生成、テキスト重ね合わせ、サイズ調整、素材分析を担当します。

インストール

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

$npx skills add https://github.com/scenario-labs/skills --skill scenario-brand-kit

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

詳細

Scenario ブランドキット

概要

アイデンティティを決定してから、適用します。パレットとタイポグラフィは、実行前に仕様へ記す選択項目です。ロゴは実際に使えるベクター形式で一度だけ生成し、あらゆる場所で再利用します。各アプリケーションでは、マークを再解釈せず、承認済みのものを参照します。接続と基本ループについては、scenario スキルを参照してください。何も決まっていない状態から方向性を見つけるには、scenario-inspiration を参照してください。画像の実行と参照の設定については、scenario-image を参照してください。アプリケーションで正確なタグラインと CTA を使うには、scenario-text-overlay を参照してください。配置ごとのサイズについては、scenario-formats を参照してください。ゲーティングの仕様については、scenario-asset-analysis を参照してください。ここに記載されたスキルが利用可能なスキルにない場合は、ユーザーにインストールを依頼してください(npx skills add scenario-labs/skills --skill <name>)。無人で実行する場合は、ツールのスキーマに基づいて進め、不足している点を明示してください。

クイックリファレンス

必要なもの手順
仕様書生成を始める前に、ユーザーと相談して最初に作成します。「仕様書の内容」に記載されている内容をまとめます。
ロゴ、ネイティブrecommend capability="txt2img" を使い、ラスターではなく編集可能な SVG を求めるプロンプトを指定します。ベクター生成機能を呼び出すのは、機能ではなくこの指示です。スタイル入力なしでは実行できない、最上位にランクされたスタイルメンバーは使わず(「アイコン一覧」を参照)、同じ名前で search して、プレーン SVG の兄弟メンバーを見つけます。
ロゴ、トレース既存のラスター形式のマークには、recommend capability="img2img" を使い、再生成せず、編集可能な SVG にトレースするようプロンプトで指定します。
確認text_inputs で仕様書を渡し、マークを asset_analyze します。ワードマークにずれがあれば、修正を加えず再実行します。
バリエーションマークを asset_get し、その url を保存して(curl -L)、保存済み SVG を取得します。ローカルで色を変更し、各バリエーションを upload_asset します。
適用例承認済みマークを参照画像として指定し、プロンプトに仕様書の 16 進カラー値を含めて、recommend と capability="img2img" で 1 回につき 1 つの配置を生成します。
アイコン一覧ベクター生成機能のスタイルメンバー(search、filters={"tags": ["style-consistency", "svg"]}。プレーン SVG メンバーには画像フィールドがありません)を使います。最初のアイコンでは、マークのラスター画像(format に png を指定した asset_download で、保存済み SVG をラスター画像として取得)を styleReferenceImages に指定します。以降は、最初のジョブの style_id(job_get、verbose=true、出力メタデータ)を styleId に指定し、両方を同時に指定しないでください。
ボードファーストパーティのコンポジター(ID 固定)である model_scenario-compose-image を使い、マーク、色見本、サンプル、適用例を配置済みレイヤーとして配置し、scenario-text-overlay でラベルを追加します。
キットを登録最初の実行前に collection_create し、採用するアセットができるたびに collection_add_assets し、それぞれの役割とルールを asset_update します。

仕様書

すべての実行とすべてのゲートの基準となるのは、1つの短い文書です。役割(primary、ink、paper、accent)を定めた4〜6個の16進数値を記載します。accentはすべてのアセットに繰り返し使用します。2つ目のaccentは、ないも同然だからです。書体は2ファミリーとし、それぞれのウェイトと用途(display、body)を定めます。スローガンではなく、短く具体的なボイスラインを1つ記載します。ロゴのクリアスペースと最小サイズを定めます。また、「してはいけないこと」を3つ記載します(引き伸ばさない、パレット外の色に変更しない、ワードマークを別の書体で設定しない)。プロンプトには仕様書の16進数値をそのまま記載し、各ゲートでは全文をtext_inputsを介してasset_analyzeに渡します(言い換えると、正確な表記と16進数値の役割が失われます)。書体には、出力先で読み込めるファミリー(広く利用可能なもの、またはライセンス取得済みのもの)を使います。生成された「フォント」はその画像にすぎないため、実際のテキストは仕様書に定めたファミリーを使ってscenario-text-overlayで設定します。例外はワードマークです。これは一度だけマークに描き込み、文字ごとにゲートで確認した後は、アートワークとして再利用します。

作例:新しいゲームスタジオのアイデンティティ

  1. まず仕様を固めます。何かを書き始める前に、カテゴリー、対象ユーザー、約束する価値、核となるメタファーを決めてください。ステップ2のマークは、そのメタファーから生まれるためです。ブリーフで定めるのはムードです。方向性が何も示されていない場合は、scenario-inspiration で選んだ方向性に落とし込みます。生成を始める前に、カラーパレット、書体、ルールを書き出し、ユーザーに確認してください(無人運用の場合は、ブリーフの制約を採用し、それ以外を決めて暫定として明記します)。最初の生成を行う前に、今回の実行用コレクションを作成し(collection_create、カタログ書き込みレーン、name のみ)、採用するものができたら都度 collection_add_assets で追加します。戻り値の itemCount が追加の確認になります。
  2. マーク:capability="txt2img" を指定して recommend を呼び出し、ラスター画像ではなく、実際に編集可能な SVG を要求するプロンプトにします。選んだ候補の model_schema_get を取得します。スタジオが何を作るのかを表すアイデアを1つ、1色でもファビコンサイズで認識できるまで簡略化してプロンプトにします。フラットで閉じた形状、少ない色数、仕様で定めた16進数の値、ワードマークに使うスタジオ名を指定してください。避けるものも明示します。そうしないと、モデルはグラデーションメッシュ、きらめき、根拠のない稲妻、地球儀といった既定の表現を使いがちです。スキーマに準拠した呼び出しを拒否する候補は見切りをつけ、デバッグせず次の候補に進みます。スキーマではフィールドが任意とされていても、モデルが必須としている場合があるためです。異なる構築方法で、それぞれ2つまでを組み合わせた候補を3つ作り、同じアイデアを再生成するのではなく、異なる軸に広がるセットにします。たとえば、メタファーと融合させたモノグラム、製品の動詞をシンボルにしたもの、2つのアイデアを1つにまとめたもの、2つ目の読み取り方を担うネガティブスペース、明示したグリッド上の幾何学形状です。この段階では候補3つのうち2つを破棄するため、recommend が既定で品質重視の候補を選ばないよう、priority="cost" を指定します。候補ごとに model_run を1回実行し、jobs_wait、asset_display で表示して、ユーザーに選んでもらいます(無人運用の場合は、すべてをチェックし、最も優れたものを採用します)。
  3. asset_analyze で選んだマークをチェックします(書き込みレーン、契約は scenario-asset-analysis)。仕様の内容は text_inputs で渡します。名前が1文字ずつ正しく読めること、形状が閉じて中央に配置されていること、既存のマークに似ていないことを確認します。チェック対象はレンダリング結果であり、ファイルではありません(scenario-asset-analysis)。そのため、パレットの確認は SVG の塗りのローカル解析で行います。失敗した場合は、プロンプトを厳密にして再実行し(再チェックの前に新しいジョブの jobs_wait を実行)、ずれた出力を編集してはいけません。
  4. バリエーション:採用したマークの asset_get を実行し、返された url を curl -L で保存します。保存された SVG がそのまま返されます(asset_download はラスターに変換し、format の既定値は png です)。塗りの色を変更して、モノクロ版、反転版、紙色背景版を作成し、それぞれを upload_asset でアップロードします(kind は image)。マークは1つ、カラーバリエーションはデータとして扱います。
  5. 展開例:capability="img2img" を指定して recommend を呼び出し、配置する場面が when_general_better または caveats に記載されている候補は除外します。スキーマの指示どおりに、承認済みのマークを参照画像として渡します(配列にするのは array: true の場合のみです。スキーマに画像フィールドがない候補はマークを保持できないため、次の候補を選びます)。配置例(アバター、バナー、印刷カードまたはバッジ)ごとに model_run を1回実行し、シーンよりマークを優先させ、フレーム内の文字や偽の UI を禁止するプロンプトを指定します(プレートには製品の動作ではなく、配置されたマークを表示します)。「参照画像のロゴをそのまま、変更せず、…の中央に配置する」のように指定します。実行結果に jobs_wait を行い、それぞれ仕様に照らしてチェックします。出力サイズでは判定できないテキストは、合格ではなく未検証です(拡大して再チェックするか、その旨を明記します)。シーンによってマークが崩れている場合は、承認済みマークを正しい基準として、欠陥をプロンプトに明記し、同じ img2img 呼び出しを再度行います。
  6. タグライン、ハンドル、URL などの正確なテキストは、プレートにプロンプトで生成させず、仕様で定めた書体を使って scenario-text-overlay で合成します。配置サイズは scenario-formats に基づいて決めます。
  7. ボード:キット全体を1枚の画像として評価します。model_scenario-compose-image では、マーク、カラーパレットのスウォッチ、書体見本、サイズを大きくしたボイスライン、画像の方向性を示すプレート(追加の生成を1回実行)、アイコンとバッジの帯、2つの展開例をレイヤーとして配置します。レイヤーは x、y、anchor、zIndex で配置し、canvasMode: "custom" のキャンバスを使います。さらに、マスター SVG からローカルで作成した構造パネルを加えます。構造パネルは生成してはいけません(生成した図には、マークにない形状が描かれるためです)。パネルのラベルは scenario-text-overlay で描画します(レイヤーフィールドと注意点については scenario-video-assembly を参照)。各レイヤーに明示的な width と height を指定し、マークはほかのどのレイヤーよりも大きくして、それぞれに fit: "contain" を指定します。未指定の場合はネイティブサイズが使われると説明されていますが、動作は安定しません。また、両方の寸法を設定すると既定の fill が有効になり、引き伸ばしが発生して、仕様にある「引き伸ばさない」というルールに違反します。画面向けのサイズではなく、最も小さいキャプションに合わせてキャンバスのサイズを決めます(最大サイズは 7680x4320 ですが、1920x1080 のボードではパレットのキャプションが高さ約10ピクセルになってしまいます)。また、すべてのレイヤーを同じラスター画像で使い回すのではなく、各レイヤーの占有ピクセルサイズに合わせてマスター SVG からレンダリングします。ベクターのマスターがあるのは、どのレイヤーも拡大しないようにするためです。レイヤーの source にはローカルファイルではなくアセットを指定するため、合成する前にレンダリング結果をそれぞれ upload_asset でアップロードします。
  8. 実行中に内容を追加してきたコレクションがキットになります。SVG マスター、すべてのバリエーション、すべての展開例、ボードを含めます。各アセットの役割とルールを asset_update の説明に記載し、仕様書をキットの使い方ページとして提供します。

よくある間違い

  • 仕様書がないままアプリケーションを生成する:記述された色の16進値とルールがなければ、照合する基準がなく、アセットごとにキットがばらばらになります。
  • ロゴを参照せず、アプリケーションごとに作り直す:似ているだけで統一感のないものが十個できます。ロゴマークは一度だけ生成し、再利用します。
  • ロゴのラスター画像を拡大する:ベクターはすでに拡大縮小できるため、SVGをマスターとして維持します。
  • 再生成して色を変える:SVGの塗りと線はテキストを編集すれば変更できますが、再生成すると形状も変わります。
  • サムネイルサイズで見栄えのよいワードマークを渡す:文字形のずれはそのサイズでは目立ちませんが、ゲートでは一文字ずつ読み取って確認します。
  • パレットの16進値を単なる雰囲気として扱う:名前のない色は実行ごとに暖色系や寒色系へと揺れます。すべてのプロンプトで仕様書にある名前を指定します。
  • マスターとバイト単位で同一のバリエーションをアップロードする:プラットフォームはマスター自身のアセットIDを返すため、キットの二つのエントリーが気づかれないまま一つに統合され、コレクションの件数が誤ります。何も変えていないものはバリエーションではありません。アップロードする前に塗りを編集するか、埋め込み済みの背景パスを削除します。
  • マスターではなくモックアップからバリエーションを作る:派生物からさらに派生させると、アーティファクトが積み重なります(scenario-formatsに処理の順序が記載されています)。

コメント