mcpField
C
canva-brand-check

canva-brand-check

github.com/canva-sdksデザイン・UI138228 回インストール5 日前に更新
リポジトリ

canva-brand-check について

Canvaのデザインを選択したブランドキットと比較し、一致点や相違点を報告する読み取り専用のブランド審査スキルです。機械可読な色やフォント情報がない場合は、値を捏造せず検証できない点を明示します。

主な機能

  1. 01デザインとブランドキットの比較
  2. 02サムネイルとデザイン内容の確認
  3. 03色、タイポグラフィ、ロゴ、コピーの評価
  4. 04検証できない詳細の明示
  5. 05APIで修正可能な項目の提示

活用シーン

  1. 01共有前のCanvaデザイン審査
  2. 02複数ページのブランド一貫性確認
  3. 03ロゴ、色、フォントの逸脱発見
  4. 04検証済みの所見と視覚的推定の区別

インストール

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

$npx skills add https://github.com/canva-sdks/canva-skills --skill canva-brand-check

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

詳細

ブランドチェッカー

デザインをユーザーのブランドキットと比較し、ブランドに沿っている点と外れている点を項目ごとに報告します。これは、ブランドを意識した特化版の canva-design-feedback です。読み取り専用で「デザインを読み取ってから批評する」という基本は同じですが、評価基準にはブランドキットを使用します。デザインを編集することはありません。

ブランドキットのデータ不足について — まずお読みください

Canva:list-brand-kits は、ブランドキットのID、名前、サムネイルを返す仕様です。機械可読なパレット(16 進数のカラーコード)やフォントファミリーは返さない場合があります。実際に取得できた内容に応じて対応してください。

  • キットからカラーやフォントを取得できる場合 → 正確な 16 進数のカラーコードとフォント名を評価基準として使用します(正確なチェック)。
  • サムネイルや名前しか取得できない場合 → 16 進数のカラーコードやフォントを正確に照合することはできません。キットのサムネイルとの視覚的な比較に切り替え、正確にチェックできるよう、ユーザーにブランドカラー(16 進数)とフォントを貼り付けてもらうよう依頼してください。これらがない場合、カラーやフォントに関する指摘は概算であることを明示してください。

ブランドカラーやフォントを決してでっち上げないでください。実際の値がわからない場合は、その旨を伝えてください。

デザインで実際に使われているカラーとフォントの確認

Canva:get-design-content が返すのはテキストのみで、カラーやフォントは含まれません。

  • 読み取り専用の編集トランザクション(Canva:start-editing-transaction → 調査 → Canva:cancel-editing-transaction。必ずキャンセルしてください)では、要素のテキスト、位置、サイズを確実に取得できます。
  • トランザクションからカラーやフォントが確実に取得できるとは限りません。テストでは、カラーやフォントの属性なしで、テキスト、位置、寸法のみが返されることがよくありました。そのため、カラーやタイポグラフィの主な証拠としてサムネイルを使用してください。ペイロードにスタイルデータが含まれていれば活用できますが、実際にペイロードに含まれていない限り、デザインのカラーコードやフォントを事実として断定しないでください。

ブランドキット(上記のデータ不足を参照)とデザインのどちらにも機械可読なカラーやフォントが含まれていないことが多いため、ブランドチェックでは、デザインのサムネイルとブランドキットのサムネイルを視覚的に比較し、ユーザーから提供されたパレットやフォントも確認することがよくあります。ロゴの配置や全体的な視覚的トーンの確認には Canva:get-design-thumbnail を使用してください。

ワークフロー

ステップ 1:デザインを特定する

短縮リンクの場合は Canva:resolve-shortlink を使用します。完全な URL の場合は ID を抽出します。D... 形式の ID の場合はそのまま使用します。それ以外の場合はユーザーに確認してください。

ステップ 2:ブランドキットを取得する
  • Canva:list-brand-kits を使用します。複数ある場合は、どれを使うか尋ねてください(またはチームやコンテキストから判断してください)。
  • キットから取得できる情報(名前、サムネイル、含まれている場合はカラーやフォント)を記録します。
  • 上記のデータ不足への対応を適用します。スコープが不足している場合(例:「Missing scopes: [brandkit:read]」)、トークンを更新するため、Canva コネクターをいったん切断して再接続するようユーザーに伝えてください。
ステップ 3:デザインを確認する
  • 視覚、ロゴ、トーンの確認には Canva:get-design-thumbnail を使用します。
  • 読み取り専用のトランザクション(開始 → 調査 → キャンセル)を使って、実際に使用されているカラーとフォントを確認します。
ステップ 4:ブランドと比較する

各項目を確認し、ブランドに沿っている/ブランドから外れている/確認できないのいずれかを付けます。

  • カラー — 塗りつぶし、テキスト、アクセントがブランドパレットの範囲内か。パレット外のカラーコード(および最も近いブランドカラー)を指摘します。
  • タイポグラフィ — フォントがブランドフォントと一致しているか。ブランド外のフォントファミリーや、サイズ・太さの使い方に一貫性がない点を指摘します。
  • ロゴ — 想定される場所に配置されているか、正しいバージョンか、引き伸ばし、色の変更、他の要素との過度な近接がないかをサムネイルで確認します。
  • トーンとコピー — 文言がユーザーの説明したブランドボイスに合っているか。
  • 一貫性 — すべてのページでブランドの適用に一貫性があるか。

キットからデータを取得できず、ユーザーからも提供されていない場合は、正直に確認できないとしてください。

ステップ 5:報告する
## Brand check — "<design title>" vs "<brand kit name>"

Overall: ⚠️ Mostly on brand, 3 issues

### Off brand
- [Color] Page 2 heading is #1A73E8 — not in palette. Nearest brand color: #0B5CD7.
- [Font] Page 4 body uses Arial; brand body font is Inter.

### Can't verify (need input)
- Brand kit didn't expose hex values. Paste your palette + fonts for an exact check,
  or confirm the colors above against your guidelines.

### On brand
- Logo placement and cover treatment match the kit.
ステップ 6:修正を提案する

API で修正可能な問題については、canva-edit-design で修正すると提案してください。API で変更できるのはテキストのカラーとフォントのサイズ/太さ/スタイルですが、フォントのファミリーや背景色は変更できません(これらは Canva で手動で変更してください。詳しくは canva-edit-design を参照してください)。

ルール

  • 読み取り専用です。確認後は必ず cancel-editing-transaction を実行してください。コミットは絶対にしないでください。
  • ブランドの値を捏造しないでください。キットの実際のデータまたはユーザーが提供した情報を使用し、それ以外は 確認できません と記してください。
  • 問題のある値とブランドの値を比較し、該当するページや要素を具体的に明記してください。
  • ハード違反(誤ったロゴ、パレット外の色)と、ソフト違反(間隔のわずかな不一致)を区別してください。

コメント