mcpField
B
brand-intake

brand-intake

github.com/charlie947デザイン・UI4561.6k 回インストール2 週間前に更新
リポジトリ

brand-intake について

brand-intakeは、ブランドとモーションデザインの要件を集め、他のスキルが参照するbrand.mdとMOTION.mdを作成します。さらに、後続の制作で両ファイルを先に読むルールをCLAUDE.mdに追加します。

主な機能

  1. 01ブランドと対象者の情報収集
  2. 02カラー、フォント、ロゴファイルの整理
  3. 03モーション参考フレームの確認
  4. 04brand.mdとMOTION.mdの作成
  5. 05CLAUDE.mdへの先読みルール追加

活用シーン

  1. 01デザイン前のブランド情報記録
  2. 02モーション参考の文書化
  3. 03後続スキル向け視覚ルールの設定

インストール

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

$npx skills add https://github.com/charlie947/motion-graphics-skills --skill brand-intake

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

詳細

ブランドのヒアリング

このパックのほかのスキルはすべて、このスキルが作成する2つのファイルを読み込みます。これらがないと、Claudeは色も書体もモーションのアイデアも独自に選んでしまいます。ブランドごとに一度実行してください。

すぐに始める

これを依頼されたら、最初のメッセージでバッチ1の質問をします。スキルの要約や前置きは不要です。

ステップ1:2つのバッチに分けてヒアリングする

バッチ1。 次の4つをまとめて質問し、回答を待ちます。

  1. ブランド名と、何をしているかを一言で教えてください。
  2. 誰に向けたものですか?動画を見る人について、一文で教えてください。
  3. 動画で販売または宣伝するものは何ですか?オファー、商品、ニュースレターを、実際のリンクとともに教えてください。
  4. 最初の1秒で、どんな気持ちになってほしいですか?次から最大3つ選んでください:落ち着いた、高級感のある、遊び心のある、緊急性のある、技術的な、温かみのある、大胆な。

バッチ2。 続けて次の3つを質問し、回答を待ちます。 5. 色のHEXコード、フォント名、ロゴファイル(SVGまたはPNG、添付)を教えてください。HEXコードがない場合は、「サイトからサンプルを取って」と伝え、リンクを教えてください。 6. 参考にしたいフレームを3〜5点:Dribbble、Pinterest、またはご自身の作品から、気に入っているモーションのスクリーンショットを用意してください。examplesという名前のフォルダーに入れてください。 7. モーションで絶対にしてはいけないことを1つ教えてください。

回答が空欄の場合は、一度だけ再度質問してから先に進みます。推測で空欄を埋めてはいけません。

ステップ2:brand.mdを作成する

プロジェクトのルートに、300語未満で保存します。

# Brand

## Name and what we do
## Audience
## What we promote (with the real link)
## The feeling
## Assets
Colours (hex, typed by me or sampled from a named source), fonts, logo file names
## Never

ステップ3:フレームをもとにMOTION.mdを作成する

examples内のフレームをすべて確認してから、次の指示を自分に向けて記したMOTION.mdを作成します。

Write one file called MOTION.md that any AI can read before it animates anything for me. It must cover:

1. Every colour as a hex code, and what each one is for
2. The fonts and the type sizes
3. Timing: how things come in, how long they hold, and how they leave
4. How things move: the frame rate, the easing, and anything that makes it feel handmade
5. Texture and finish
6. Five things my motion must never do, named plainly
7. One example, described shot by shot, of it done right

Work only from what is in the frames. Where you cannot tell, write ASK ME rather than guessing.

保存する前に、ファイルをユーザーに見せてください。brand.mdの色は、フレームからサンプリングした色より優先されます。

ステップ4:CLAUDE.mdに最初に読むルールを追加する

CLAUDE.mdが存在しない場合は作成し、次のブロックを一字一句そのまま追加します。

Before designing, generating or animating anything, read MOTION.md in full.

Every colour, font, timing and motion value comes from that file.

The file sets the look, not the ambition. When I say go all out, go all out.

If something I ask for is not covered there, ask me rather than choosing for yourself.

When you have finished, check your own frames against MOTION.md, fix what fails, and only then show me.

苦労して学んだこと

  • フレームのテイストが混在すると、見た目も混在します。 私の5つのフレームには、4種類の異なるテイストが含まれていました。ファイルにはその4種類をすべて記載し、どれを使うか尋ねるようにしました。基準となるテイストを1つ選ぶか、どの用途にどのテイストを使うか指定してください。
  • 意欲の水準を示す一文は必須です。 「このファイルが決めるのは見た目であり、意欲の水準ではない」という一文がないと、ファイルを使った最初の試みはあまりにも控えめになりました。
  • 質問することも機能の一つです。 ファイルを配置すると、一行のプロンプトは制作を始める前に立ち止まって質問するようになりました。それこそがファイルの役割です。
  • サンプリングしたHEXコードにはずれが生じます。 JPEGから読み取った色には、数ポイントのずれがあります。入力したHEXコードがある場合は、そちらを使ってください。

ステップ5:動作を確認する(任意、2分)

同じ一行のプロンプトを2回実行します。1回は空のフォルダーで、もう1回はこのプロジェクトで実行します:「モーションデザイナーとしてのあなたの素晴らしさを示す、躍動感のある15秒のモーショングラフィックス動画を作成してください。思い切り作ってください。」2つを並べて比較します。どちらも思い切り作られているはずです。あなたらしい見た目になるのは片方だけです。

引き継ぎ

brand.md、MOTION.md、CLAUDE.mdのルールが配置されたことをユーザーに伝え、次に試すものとしてlaunch-video、vox-explainer、animated-chart、milestone-revealを挙げてください。両方のファイルが揃うまでは、ほかのスキルはその結果をブランドに沿ったものと呼ぶことはできません。

コメント