mcpField
D
design-director

design-director

github.com/bhagyamudgalデザイン・UI2109 回インストール3 日前に更新
リポジトリ

design-director について

ブリーフ、ロゴ案、レイアウト、タイポグラフィ、配色、批評、アイデンティティ、仕上げを扱うデザインディレクション用スキルです。承認済みの判断を改訂時に保ち、モード別の成果物とチェックを適用します。

主な機能

  1. 01依頼を適切なデザインモードに振り分け
  2. 02追加変更でも承認済みの基準を維持
  3. 03未確定のデザイン要件だけを確認
  4. 04出力仕様とコントラスト検査を適用
  5. 05アイデンティティ素材の仕上げに対応

活用シーン

  1. 01ブリーフからデザイン方針を作成
  2. 02ロゴやアイデンティティ案の作成・改訂
  3. 03タイポグラフィ、レイアウト、配色の評価
  4. 04承認済みアイデンティティ素材の納品準備

インストール

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

$npx skills add https://github.com/bhagyamudgal/skills --skill design-director

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

同梱ファイル

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

modes/
brief.md
color.md
critique.md
finalize.md
identity.md
layout.md
logo.md
type.md

詳細

デザインディレクター

最初に、何を実行するのかを伝えます。「I'm using design-director to ...」と言い、モードまたはリクエストの振り分け方法を補ってください。

質問する前に、ブリーフ、リポジトリ内のファイル、元のアートワーク、会話を確認してください。すでに決定している事項を拾い出します。結果を左右する不足情報だけを質問してください。利用できる場合は、構造化された質問ツールを使ってください。そうでない場合は、短い質問を1つだけ通常のテキストで尋ねてください。

デザインディレクションはこのスキルの範囲内で行います。ユーザーが成果物を求めており、それに必要なツールが存在する場合に限り、別のビルドツールを使用してください。完成した本番用パッケージに、Figmaへの引き継ぎは必要ありません。

フェーズ 0:承認済みの基準を維持する

通常のモード判定の前に、スレッド内に選択済みの方向性、バージョン、またはアセット一式がすでにあるか確認してください。

  • 既存の基準がある場合は IS_CONTINUATION = true に設定します。承認済みの基準、固定済みの決定事項、依頼された変更を1行で述べてください。
  • フォローアップは差分として扱います。指定された変更以外はすべて維持してください。
  • 色のみの変更は color に、マークまたはレターフォームの変更は logo に振り分けます。ロックアップの順序、書き出し、パッケージ化、クリーンアップは、現在の基準が承認済みのロゴまたはアイデンティティアセットである場合に限り、finalize に振り分けてください。
  • それ以外の継続案件は、ユーザーが別のモードを明示的に指定しない限り、現在のモードを維持します。
  • 以前のバージョンに戻すリクエストでは、ほかの差分を適用する前に、そのバージョンを新しい基準にします。
  • 差し戻しのみのリクエストは、復元した基準を提示して終了します。承認済みのロゴまたはアイデンティティアセットの場合に限り、復元またはファイル削除を finalize に振り分けてください。
  • ユーザーが承認済みの方向性を却下するか、新しいコンセプトを求めた場合にのみ、探索を再開します。

フェーズ 0 は、基準を設定し、差分をモードに振り分けるか、新規のリクエストとしてフェーズ 1 に進んだ時点で終了します。

フェーズ 1:モードを判定する

  1. 呼び出し元のメッセージと、添付された画像または Figma URL を確認します。モード名だけでも有効な引数です。有効なモード名は brief、logo、layout、type、color、critique、identity、finalize および finalise です。finalise は後で正規化します。承認済みのロゴまたはアイデンティティの文脈では、「これが最終版です」「本番用ブランドアセット」「承認済みロゴを SVG/PNG として書き出す」「ブランドパッケージ」などのリクエストは finalize に振り分けます。

  2. 以下のモードメニューに照らして判定します。1つだけ一致した場合は MODE を設定し、続行します。

  3. 画像のみの場合のフォールバック。ユーザーが画像を添付し、明確なテキストの指示がない場合は、MODE = critique に設定します。

  4. 複数のモードに一致する場合は、より具体的なモードを優先します。「ブランドアイデンティティのタイポグラフィ」は Typography に振り分けます。より具体的なモードが1つもない場合、または何も一致しない場合にのみ、メニューを表示します。

    Question: "Which design-director mode fits this request?"
    Header: "Mode"
    Options:
      1. Brief Simplify:        extract objective, audience, message, tone, deliverables from a client brief
      2. Logo Concepts:         staged logo directions and controlled refinements
      3. Layout Compose:        5 layout ideas for a poster / post / section
      4. Typography System:     font pairing, hierarchy, usage guidelines
      5. Color Palette:         primary/secondary/accent palette with WCAG contrast notes
      6. Design Critique:       honest, specific feedback on an existing design
      7. Brand Identity:        full visual identity system (logo + color + type + style)
      8. Finalize Identity:     production SVG/PNG assets, theme variants, and package checks
    
  5. 選択したモードを短い1文で伝えます。例:「ロゴのコンセプトを作成します。」

フェーズ 1 は MODE を設定して終了します。

モードの引き継ぎ

いずれかの振り分けフェーズで MODE が設定されたら、finalise を finalize に正規化します。フェーズ 2 に進む前に ${CLAUDE_SKILL_DIR}/modes/<MODE>.md を読みます。このファイルには、入力項目、出力仕様、ファイル保存フラグ、次のステップが定義されています。8つのモードファイルは modes/brief.md、modes/logo.md、modes/layout.md、modes/type.md、modes/color.md、modes/critique.md、modes/identity.md、modes/finalize.md です。

フェーズ 2:入力項目を収集する

メッセージ、成果物、リポジトリ、これまでの決定事項から、モードの入力項目を埋めます。継続案件では、変更のない新規案件用の入力項目は基準によって満たされます。一度に質問するのは1つだけにし、差分に影響する未解決の事実のみを尋ねてください。

  • 回答の選択肢が限られている場合は、入力項目ごとに適切な選択肢を2〜4個提示します。雰囲気を尋ねる項目では、モダン、エディトリアル、遊び心のある雰囲気、またはラグジュアリーを提示します。
  • 業界やブランド名など、自由回答の入力項目でも、よくあるケースを2〜3個と「その他」の選択肢を含めてください。
  • 方向性に影響しない場合は、適切なデフォルトを適用し、それを明示して質問を省略します。

フェーズ 2 は、現在のルートに必要なすべての項目に値が設定された時点で終了します。フェーズ 3 の前に、確定した項目を1行で提示してください。

フェーズ 3:出力を生成する

モードの出力仕様を実行します。続きの場合は、関連する値を維持しながら、要求されたフィールド、依存するすべての出力、無効になったすべてのチェックを生成します。finalize 以外のモードでは、まずチャットにリッチな Markdown を出力します。finalize はビルドのライフサイクルに従い、ブロッキングチェックに合格した後にのみ引き継ぎの概要を出力します。

すべてのモードで、次の基準を徹底します。

  • すべての推奨事項を仕様にします。要素と値を明記します。書体、px、比率、16 進数などです。「見出しにはセリフ体を使う」は仕様ではありません。「UI には Söhne、見出しには GT Sectra Display を組み合わせ、H1 と H2 の比率を 1.6 にする」なら仕様です。
  • 命令形で書きます。書体を組み合わせます。H1 を 48px にします。判断を示します。
  • 理由を示します。各コンセプトに、象徴性、原則、または前例に基づく理由を 1 行で添えます。
  • 参考例は目標ではなく、特徴として扱います。ロゴやアイデンティティの制作では、引用したブランドと成果物を区別する意図的な工夫を 2~3 点挙げます。画像検索が利用できる場合は、最終的な方向性を選ぶ前に、近接するカテゴリのロゴを少数、目視で調査します。この調査はビジュアル上の類似確認として記録し、独自性、商標クリアランス、法的安全性の証明として扱わないでください。
  • コントラストを評価する前に分類します。WCAG 2.2 では、通常のテキストに 4.5:1 が必要です。18 pt 以上の通常ウェイト、または 14 pt 以上の太字テキストには 3:1 が必要で、意味を持つ非テキストのグラフィックや UI の境界にも 3:1 が必要です。ロゴタイプは対象外のため、測定した比率と視覚的な読みやすさを、WCAG 準拠の証明ではなく、ブランド用途の根拠として報告します。アクセントカラーがテキストに使われる場合は、テキストのしきい値を適用します。
  • 最初にコンセプトを提示します。

フェーズ 4:ファイル保存を提案する

ユーザーがすでに保存を依頼している場合は、再度尋ねずに保存します。それ以外の場合、File save: yes と設定されているモードでは、最後に保存を提案します。optional の場合は、出力が約 30 行を超える場合にのみ提案します。no の場合は提案しません。

保存先の規則:design/<mode-slug>-<short-name>.md。例は design/typography-acme.md と design/palette-lumen.md です。

作業ディレクトリに .git がない場合は、こちらから保存を提案しません。明示的な保存依頼がある場合はユーザー指定のパスに保存し、指定がない場合はパスを尋ねます。

finalize では、出力ディレクトリの決定とアセットの書き込みを行います。このモードでは、上記の Markdown 保存規則を適用しません。

フェーズ 5:次のステップを提案する

モードの Next step を一字一句そのまま、Next: を付けて 1 行だけ出力します。none の場合はその行を省略します。その後、終了します。

対象外

  • マーケティングコピーは copywriting に依頼します。
  • Figma の実装は figma-generate-library または figma-generate-design に依頼します。
  • アプリケーション UI コードでのブランド実装は figma:figma-implement-design または frontend-design:frontend-design に依頼します。
  • ネーミング、タグライン、ムードボード、アイコノグラフィーの体系は、このスキルの対象外です。

コメント