Figma ↔ モーションキット
クリエイターはプロンプトよりも Figma でデザインする方が得意です。すべてのキットコンポーネントを 編集可能なボード としてミラーリングし、クリエイターがそこで編集できるようにしましょう。
初期設定
- ブランドファイル内のページ（例：「Claude - Editable」）に、キットのバージョンごとにセクションを作成します（「Motion kit v1」、「Vlog kit v1」）。
- ビデオのフレームサイズに合わせた、実際のコピーと名前付きレイヤーを持つ、コンポーネントごとのボードを1つずつ作成します。
- 色とタイポグラフィは 変数（「Motion」コレクション: インク、ペーパー、アクセント/ハイライター、グレー; フォントサイズとパディングは数値）にバインドします。これにより、色の変更が1回の編集で完了します。
- Figma MCP を使用します（ファイルに書き込む前に
figma-useスキルを読み込んでください）。ファイルキーとページをCLAUDE.mdに記録します。
「ボードを変更した」と言われたとき
- 変更された各ボードのレイヤー（フォント、太さ、サイズ、行間、パディング、位置、使用している変数、角の半径、ストローク）を読み取ります。
- その差分をコンポーネントと
brand.jsonに移植します（トークンを優先し、コンポーネントコードはレイアウトのみ変更します）。 - 同じコンポーネントのプレビュースチルをレンダリングし、ボードと並べて比較します。
- 変更内容をリストアップします（「タイトル Light 120 → Regular 108、パディング 64 → 80、ラベルが大文字のモノスペースになりました」など）。
コードでキットが変更されたとき
（例：狭いフレームのレイアウト、キャプションセーフバンドなど）一致するボードを更新して両者がずれないようにするか、どのボードが最新でなくなったかをクリエイターに伝えます。
学習したテイスト（クリエイターに確認してください。これらは例です）
大きなサイズではライト/レギュラー、太字は避ける; モノスペースのライト大文字ラベル; 80px のパディング; 十分な余白; 要素ごとに1つのスムーズな動き; デバイスのモックアップは使わない（付加価値が少ない）; テキストオーバーレイと個人的なメモを優先する。