mcpField
S
style-guide-builder

style-guide-builder

github.com/picsartクリエイティブ・メディア682 回インストール2 日前に更新
リポジトリ

style-guide-builder について

style-guide-builderは、参考画像を再利用可能なビジュアルスタイルガイドにまとめるクリエイティブスキルです。一貫したルールと個別の要素を分け、参考にない題材へスタイルを広げる方法も記録します。

主な機能

  1. 01参考画像の分析
  2. 02スタイルルールと個別要素の分類
  3. 03配色とレンダリングの記録
  4. 04未登場の題材への展開ルール
  5. 05プロンプト用フレーズの作成

活用シーン

  1. 01映画やゲームのフレームからガイドを作成
  2. 02生成画像のスタイルを参考に合わせる
  3. 03未登場の題材をスタイルに合わせる方法の記述

インストール

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

$npx skills add https://github.com/picsart/gen-ai-skills --skill style-guide-builder

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

同梱ファイル

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

references/
extrapolation.md
observation-checklist.md
output-files.md

詳細

スタイルガイドビルダー

参考画像を受け取り、スタイルガイドを作成します。スタイルガイドは、同じ世界観に属する新しい作品を生成できるよう、見た目を正確に説明した Markdown ファイルのセットです。

画像ごとにキャプションを書くのではありません。この用途では、キャプションは役に立ちません。大切なのは、セット全体で一貫している要素を、たまたま特定の1フレームに当てはまる要素と分けて捉えることです。

使用する場面

ユーザーが参考画像を持っていて、そこから再利用できるビジュアルスタイルを抽出し、新しい画像や動画を同じスタイルに合わせて生成したい場合に使用します。「これらからスタイルガイドを作って」「こんな見た目のアニメーションにしたい」「このスタイルに合わせて」「これらの参考画像を分析して」「このスクリーンショットからスタイルを抽出して」「これらの画像からテーマを作って」「ルックブックを作って」「これらからビジュアルアイデンティティを定義して」「これらの参考画像と一貫性を保って」「好きな番組のスクリーンショットを撮った」「このスタイルで画像をもっと生成して」「これはどんなスタイル?」「プロンプト用にこれらの画像を説明して」「このフレームをスタイルに変換して」などの依頼があれば使用します。画像のフォルダーを渡され、どうすればよいか尋ねられた場合も使用します。

出力するのは、ほかのスキルが読み込む Markdown ファイルのセットであり、単一の説明文ではありません。

よくあるケースでは、ユーザーはアニメーション、ゲーム、ブランドキャンペーン、映画のスクリーンショットを持っていて、同じ制作物の一部のように見える新しい素材を求めています。あとで、参考画像にはまったく登場しないものも生成することになりますが、それでもスタイルを一致させる必要があります。そのため、ガイドでは次の2つの問いに答える必要があります。

  1. このスタイルでは、目に見えるものをどのように描写するか? トラ、キッチン、顔など。
  2. このスタイルでは、目に見えないものをどのように描写するか? ブタ、バス停、群衆など。

スタイルガイドを単なる飾りではなく、実用的なものにするのは2つ目の問いです。作業の大半はそこに費やします。references/extrapolation.md を参照してください。

参考資料から導き出すのではなく、ブランドシステムの作成を依頼された場合は、このスキルではなく agency-brand-scoping と brandkit ツールを使用します。

前提条件

  • 参考画像。 枚数に制限はありませんが、8~50枚が適切な範囲です。8枚未満の場合は、ガイドの内容が薄くなると正直に伝えてください。数枚のフレームだけでは、一貫性と偶然の一致を見分けられません。
  • 分析に対応したビジョンモデル。 通常は自身のビジョン機能を使用します。代替手段(Picsart gen-ai MCP、gen-ai CLI、MCP 経由で指定するモデル)は、手順のステージ0で選択します。
  • ステージ0の回答 — 目的、対象ユーザー、除外事項、モデル。画像を1枚でも調べる前に確認します。

実行方法

  1. ユーザーから参考画像を集めます。
  2. ステージ0の4つの質問(目的、対象ユーザー、除外事項、モデル)を、デフォルト値とともに1つのメッセージで尋ねます。
  3. 以下の手順に沿って、各ステージを順番に進めます。
  4. ガイドファイルを ~/.gen-ai/projects/style/<slug>/ に書き込みます。<slug> はスタイルを表す短い名前です。また、ユーザーのリポジトリなど、希望する場所への一式のコピーも提案します。
  5. 最も重要な10個のルールと、内容が薄い箇所を報告し、テスト用レンダリングを提案します。

クイックリファレンス

段階内容
0基本ルールを定めます:目的、対象読者、除外事項、使用するモデル
1素材を確認します:権威ある参考資料と付随的な参考資料を区別し、参考資料ではないものを除外します
2各画像を説明します:観察できることだけを記述します
3スタイルと個別事例を区別します:ルール、例、範囲のどれに当たるかを明確にします
4ファイルを ~/.gen-ai/projects/style/<slug>/ に書き込みます
5パレットのルール:観察された色と、新しい色を選ぶためのルール
6キャラクターと外挿:見たことのない対象を描くための造形ルール
7引き継ぎ:最重要ルール10項目、情報が不足している箇所、テスト用レンダリング
ファイル内容
STYLE.mdインデックスです。1段落の要約、次に最重要ルール10項目、最後にその他のファイルへのリンクを記載します。このファイルだけを読んだ人でも、十分なプロンプトを書けるようにします
palette.mdHEX 値と役割を添えた色、および参考資料にない色を選ぶためのルール
rendering.md媒体、線の処理、塗り、テクスチャ、陰影モデル、ディテールのレベル、エッジの質
lighting.md標準の光、その方向と硬さ、影の出方、名前付きのバリエーション
camera.md使用するショットのサイズ、アングル、レンズの特性、被写界深度、フレーミングの傾向
characters.md繰り返し登場するキャラクターや生き物ごとのセクションに加え、新しい対象を生み出す造形ルール
environments.md舞台設定、繰り返し登場する小道具、葉、水、空、建築物、群衆のスタイル上の扱い方
motion.md参考資料が動画のフレームの場合のみ:テンポ、静止ポーズ、モーションブラー、カメラワーク
typography.md参考資料にテキストがある場合のみ
negatives.mdスタイルに合わない要素を除外事項として記述し、禁止すると逆効果になる場合は肯定的な表現も記載します
audience.mdステージ0の回答を、そのまま記載し、禁止事項も含めます
product.md商用の参考資料のみ。スタイルルールとは分けて、保持すべき製品情報を記載します
extrapolation.md参考資料にないものを描く方法を記載します。STYLE.md に次いで最も重要なファイルです
fragments.md上記を組み合わせた、すぐに貼り付けられるプロンプトの文節
manifest.json機械可読形式:slug、参考資料数、使用したモデル、ファイル一覧、項目ごとの確信度

手順

ステージ0:基本ルールを定める

画像を1枚でも見る前に、4つの項目を確認します。デフォルト値を添えて、1つのメッセージで質問します。

Four things before I start:
1. What are you making with this? (a cartoon, ads, a game, a picture book)
2. Who is the audience? (young children, teens, general, adults only)
3. Anything that must never appear? (weapons, alcohol, injury, religious imagery,
   real brands, real people)
4. Which model should do the analysis and the generation?

質問2は必須であり、推測してはいけません。 幼い子ども向けのスタイルガイドと、大人向けホラー短編のスタイルガイドは、視覚的によく似た参考資料から作成できても、別々の文書になります。どのような色使いを許容するか、どのような表情を認めるか、傷や武器にどれほどのディテールを加えるか、除外リストに何を含めるかが異なります。これを誤ると、ユーザーが公開できない方向へ、以後のあらゆる生成をひそかに導くガイドになってしまいます。

クライアントが「子ども向け」というだけでは、たとえば昆虫や暗闇も禁止するのかどうかがわからないため、質問3は質問2とは別に確認します。

回答は audience.md にそのまま記録します。ほかのファイルはすべて、回答内容を適用して作成します。

質問 4:どのモデルを使うか

ホストモデルを決めつけずに尋ねてください。ユーザーは、あるアシスタントであなたを実行しながら、別のアシスタントに作業を依頼したい場合があります。利用可能な方法を提示してください。

方法使い方適している用途
ホストモデルのビジョン機能自分で画像を見る高速で、設定不要。汎用的な説明に適しています
Picsart gen-ai MCPapi.picsart.com/gen-ai/mcp の picsart-gen-ai サーバーPicsart 内で完結し、生成と分析を一か所で行えます
gen-ai CLI--model gemini-3-pro-image、--model flux-2-proモデルを明示的に選択する場合や、バッチ処理に適しています
MCP 経由でモデルを指定MCP に gemini-3-pro-image などを依頼ユーザーが特定のビジョンモデルを希望する場合

妥当なデフォルトは、分析には自分のビジョン機能を使い、生成の前には確認することです。生成にはクレジットを消費するためです。ユーザーがモデルを指定した場合はそれを使い、manifest.json に記録してください。あるビジョンモデルで抽出したガイドを別のモデルで適用すると結果にずれが生じることがあり、次の担当者にはどのモデルで生成したかを知る必要があるためです。

要求された方法が利用できない場合は、その旨を明確に伝え、次善の方法を提案してください。何も言わずに別の方法へ切り替えてはいけません。

ステージ 1:画像の受け取り

画像の枚数に制限はありません。実際に作業するうえでの目安は次のとおりです。

  • 8 枚未満:ガイドの内容が薄くなることを正直に伝えてください。数枚のフレームだけでは、一貫性と偶然の一致を見分けられません。追加の画像を依頼し、これ以上ない場合はそのまま進めてください。
  • 8~50 枚:有用な範囲です。すべての画像を確認してください。
  • 50 枚超:約 20 枚ずつのバッチに分け、各画像のメモを取りながら進め、その後、画像ではなくメモをもとに統合してください。80 枚の画像を一度にすべて覚えておこうとしてはいけません。内容を曖昧に平均化してしまいます。

セット内に複数の種類の画像がある場合は、どの画像が正式な参照画像なのかを尋ねてください。ある作品のフレームを 12 枚とユーザー自身の試作を 3 枚貼り付けた場合、ユーザーが説明してほしいのは作品であって、試作ではありません。

重複画像、ほぼ重複している画像、ほとんどがテキストのフレーム、UI の装飾が写り込んだスクリーンショットなど、参照画像ではないものを記録してください。それらは除外し、どれを除外したか伝えてください。

ステージ 2:各画像を説明する

各画像について、観察できることだけを記録してください。目に見えない制作上の事実を推測してはいけません。スタジオ、ソフトウェア、制作年は分かりません。

画像ごとに、次の点を記録してください。

  • 被写体と構図:何が、どこに、どのくらいの大きさで写っているか
  • カラーパレット:実際の色。判断できる場合は HEX 値と、それぞれの役割
  • 描画表現:線、塗り、テクスチャ、陰影、ディテールの度合い
  • ライティング:光の方向、硬さ、色、影が落ちる位置
  • カメラ:見た目上のショットサイズ、角度、レンズの特性、被写界深度
  • 異常な点:ほかの画像と何らかの点で異なる要素

これらのメモを保管してください。メモは根拠となる情報であり、ステージ 3 の内容はそこまでたどれる必要があります。

references/observation-checklist.md には、各観点で確認すべき項目と、観察から導き出せることの全リストがあります。

ステージ 3:スタイルと個別の事例を切り分ける

このステージが、ガイドの成否を左右します。

観察した内容ごとに、どれに当たるか判断してください。

スタイル参照画像の大半で一貫している特徴。ルールとしてガイドに記載します
個別の事例1、2 枚のフレームに見られる特徴。記載するとしても、ガイドには例として記載します
幅一定の範囲内で変化する特徴。平均ではなく、その範囲をガイドに記載します

3 つ目の分類を誤る人が多くいます。6 枚のフレームが暖かみのある午後の光で、3 枚が冷たい夜の光なら、スタイルは「中間的な光」ではありません。スタイルは「基本は暖かみのある午後の光で、暗くなった後の室内では冷たい夜の光」です。ガイドにはそのように記載してください。範囲を平均化すると、スタイルが損なわれます。 参照画像の彩度が非常に高いものと、ほぼグレーのものに分かれているのに「中程度の彩度」と書かれたガイドでは、何も説明できません。

各ルールを裏付ける参照画像の枚数を記載してください。「12 枚中 11 枚で一貫している」はルールです。「1 回だけ確認」は注記です。

Stage 4: ファイルを書く

~/.gen-ai/projects/style/<slug>/ に書き込みます。<slug> はスタイルを表す短い名前です。 ユーザーが希望する場所(リポジトリなど)へ一式をコピーすることも提案してください。ファイル一覧と各ファイルの内容は、上記のクイックリファレンスに記載されています。

すべてのファイルに根拠を明記します。参照元のないルールは推測であり、スタイルガイドの推測は、そこから生成されるすべてのものに波及します。

各ファイルのテンプレートと必須の見出しは、references/output-files.md に記載されています。

Stage 5: パレットのルール

16 進数値の一覧は、パレットではありません。「豚は何色か」という問いには答えられず、まさにその問いが投げかけられることになります。

palette.md には、次の内容を記載する必要があります。

  1. 観察された色。16 進数値、役割、使用箇所を含めます。

  2. 色同士の関係:色相の数と間隔、彩度と明度の範囲、影が無彩色か色味を帯びているか、パレット全体が暖色系か寒色系か。

  3. 新しい色を選ぶルール。誰でも実行できる指示として記述します。

    新しい色:既存の 4 色とは異なる色相を選び、彩度をこのスタイルの全色が属する 30~45%の範囲まで下げ、明度を 75~90%の範囲まで上げます。既存の色と同じ調子のパステルカラーにし、純色や彩度が最大の色は使いません。影には同じ色相を明度 60%にして使い、青寄りにわずかにずらします。

この段落は、16 進数値の一覧よりも価値があります。汎用的なルールになるからです。16 進数値の一覧が対象にできるのは、すでに存在する色だけです。

線の太さやディテールの密度、コントラストなど、範囲があるものについても同じように記述します。

Stage 6: キャラクターと応用

characters.md では、繰り返し登場する各モチーフについて、プロポーション、特徴、顔の構成方法、パレット、表面の描き方、輪郭線を使うかどうかを説明します。

そして、ここが重要ですが、その背後にある造形ルールを説明します。そうすれば、このスタイルに登場したことのないモチーフでも、正しく描けるようになります。

動物:頭は体高のおよそ 3 分の 1 と大きめにします。目は大きく、ハイライトを見せます。通常は白目を見せません。手足は関節を見せず、柔らかな筒状に簡略化します。毛並みは一本ずつ描かず、各領域につき 3~4 本の筆跡で表現し、必ず内側ではなくシルエットの縁に描きます。

このルールがあれば、このスタイルの豚を見たことがなくても、トラから豚を描けます。それこそが、このファイルを作る理由です。

参照画像に登場するモチーフの分類を網羅し、例が少なく推測に頼っているものを明記します。

  • 人物:プロポーション、顔の構成、手、髪、衣服のしわ
  • 動物:上記に加え、毛、羽毛、うろこ
  • 植物:木の描き方と、それをもとにした草、茂み、作物の描き方
  • 水、空、天候
  • 建築と室内
  • 群衆と背景の人物:通常どの程度簡略化するか

確信度を明示してください。「木は 1 本しかないため、葉のルールは暫定とします」と書くのは、誠実で有用です。たった 1 つの例から確信をもってルールを定めることが、スタイルガイドが嘘をつき始める原因になります。

Stage 7: 引き継ぎ

次の内容を報告します。

  1. ファイルの保存場所とファイル一覧。
  2. 特に重要な 10 個のルールを本文に記載し、ファイルを開かなくてもユーザーが価値を得られるようにします。
  3. 根拠が乏しい箇所:証拠が弱い側面と、それを補うためにどのような参照画像が必要か。
  4. 次に行うこと:テスト画像を生成するか、モーション制作のためにガイドを video-prompt-engineer に渡します。

落とし穴

  • 対象者を推測すること。 ステージ 0 の質問 2 には必ず回答してください。推測で済ませてはいけません。対象者を誤ると、すべてのファイルに気づかないうちに悪影響が及びます。
  • 範囲を平均化すること。 参照画像が極端に彩度の高いものと、ほぼグレーのものに分かれているのに「中程度の彩度」とすると、何も説明していないのと同じです。範囲の上下限と、それぞれが当てはまる条件を明記してください。
  • 1 つの例から確信を持ってルールを定めること。 暫定的なルールとして示し、どのような根拠が不足しているのかを述べてください。
  • 観察結果ではなく意図を説明すること。 輪郭線は黒ではなく濃い茶色です は観察結果です。アーティストは温かみを出そうとしました は観察結果ではありません。
  • 画像を実際に見て判断していない色、比率、数を断定すること。 16 進カラーコードに確信が持てない場合は、色名を示し、概算であることを明記してください。
  • 著作権で保護されたキャラクターを再利用可能な素材として扱うこと。 知的財産ではなく、スタイルを説明してください。参照画像が既知の作品のものである場合は、このガイドが視覚的なアプローチを捉えたものであり、キャラクター自体は再利用できないことを明記してください。
  • 文章のスタイル:平易な英語にします。em ダッシュ、二重ハイフン、絵文字は使いません。

検証

  • すべてのファイルのすべてのルールに根拠を記載します(12 フレーム中 11 フレームで一貫)。暫定的なルールにはその旨を明記します。
  • manifest.json には、スラッグ、参照画像の数、使用したモデル、ファイル一覧、アスペクトごとの確信度を記録します。
  • audience.md には、ステージ 0 の回答を一字一句そのまま記載します。
  • 引き渡しと同じターンでテストレンダリングを提案します。ガイドに基づく生成画像が 1 枚あれば、読み返しを何度繰り返すよりも早くルールの誤解を見つけられ、ユーザーは 40 枚生成した後ではなく、その場で確認できます。

商業用途の参照資料

参照資料が架空の世界ではなく、製品、衣服、モデル、車両の場合は、3 つの点が変わります。

製品そのものはスタイルではありません。 実際の形状、色、マーキングを保持すべき事実として記録し、product.md セクションにまとめて、スタイルのルールとは分けてください。スタイルのルールは一般化しますが、製品に関する事実は一般化してはいけません。「このスタイルのボトル」を導き出すのは問題ありません。ルールからクライアントのボトルを描き直すと、ラベルが間違ってしまいます。

ブランド素材は観察結果ではなく制約です。 ロゴ、ラベルのタイポグラフィ、バッジの形状、パターンの繰り返しは、変更してはならないものとして negatives.md に記載します。また、生成ツールは細かな文字を劣化させるため、後から合成するほうが適していることも注記してください。

モデルの参照資料は慎重に扱う必要があります。 外見は、肌の色、髪の質感、年齢層、体格など、平易な身体的特徴で説明してください。外見を表す代わりに、民族性を示す略称を使ってはいけません。参照資料に複数の肌の色が含まれている場合は、それぞれの肌の色について照明を個別に記録してください。すべての肌の色に同じ照明ルールを適用すると、一部のバリエーションは露出不足になり、別のものは露出過多になります。また、実在する人物を特定できる形で再現するガイドを作成してはいけません。似姿ではなく外見の特徴を捉え、ユーザーから似姿を求められた場合は、その旨を明確に伝えてください。

video-prompt-engineer の commerce.md には、製品アニメーション、衣服の差し替え、モデルの変更、ジュエリー、車両に関するケースごとの詳細が記載されています。内容を重複させず、ユーザーにそちらを案内してください。

他のスキルとの連携

  • video-prompt-engineer は、スタイル、パレット、照明、カメラについてこのガイドを参照し、尺、カメラの動き、モーション、除外項目を扱います。スラッグを指定してください。ガイドに記載のない要素がある場合は、独自に作り出さず extrapolation.md を適用します。
  • text-to-visual と product-photo-studio には、fragments.md をそのまま渡せます。
  • ユーザーが参照資料から導き出した外観ではなく、ブランドシステムを求めている場合は、このスキルではなく agency-brand-scoping と brandkit ツールを使います。

コメント