mcpField
C
canva-edit-design

canva-edit-design

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

canva-edit-design について

canva-edit-designは、既存のCanvaデザインをトランザクション方式で編集し、変更の確定前にユーザーの承認を求めます。テキスト、メディア、レイアウト、メタデータを慎重に変更したいユーザー向けで、非対応の編集も明示します。

主な機能

  1. 01トランザクションの開始、編集、確定、取消
  2. 02テキスト内容と書式の変更
  3. 03メディア要素の置換、挿入、削除
  4. 04要素の位置とサイズの調整
  5. 05タイトルと自動入力マッピングの更新
  6. 06レスポンシブページでの操作制限

活用シーン

  1. 01デザイン内のテキストや画像を置換
  2. 02レイアウトを調整して変更をプレビュー
  3. 03削除や置換の対象範囲を確認
  4. 04保存前に下書きのサムネイルを確認

MCP 対応

Canvaの編集ツールを順番に呼び出し、変更を確定する前にユーザーの明示的な承認を求めます。利用可能な操作とページごとの制限も説明します。

インストール

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

$npx skills add https://github.com/canva-sdks/canva-skills --skill canva-edit-design

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

詳細

Canva デザインの編集

既存の Canva デザインに変更を適用するための、正式かつ安全な方法です。デザインを変更するすべての Canva スキルは、必ずこのプロトコルに従ってください。トランザクションを開始 → 操作を実行 → 承認を得てコミットします。コミットされるまでは変更はドラフトにすぎず、コミットされない場合は完全に失われます。

トランザクションプロトコル(必ずこの順番で実行)

  1. Canva:start-editing-transaction — design_id を渡します。返された transaction_id と pages 配列を記録してください。どちらも後続の呼び出しで必要です。ここで返されたサムネイルは、必ずユーザーに表示してください。
  2. Canva:perform-editing-operations — 編集を適用します。transaction_id、前回の応答に含まれる pages 配列、最初に変更するページの page_index、および operations 配列を渡します。可能な限り、複数の操作を1回の呼び出しにまとめてください。
  3. Canva:commit-editing-transaction — 保存します。以下の承認ゲートを参照してください。コミット後、transaction_id は無効になります。新たに編集するには、新しいトランザクションが必要です。
  4. Canva:cancel-editing-transaction — 保存せずにドラフトを破棄します(例:ユーザーがプレビューを拒否した場合や、デザインを確認するためだけにトランザクションを開始した場合)。

機能 — API でできること/できないこと

できること(perform-editing-operations の操作)
  • テキストの内容:replace_text(要素全体)、find_and_replace_text(部分文字列)
  • テキストの書式設定(format_text):フォントサイズ、太さ(通常/太字)、スタイル(通常/斜体)、色、配置、行の高さ、下線、取り消し線、リンク、リストのレベル/マーカー
  • メディア:update_fill(画像/動画の置き換え)、insert_fill(画像/動画の追加)、delete_element
  • レイアウト:position_element、resize_element
  • メタデータ:update_title
  • オートフィルのマッピング:update_autofill_field(固定ページのデザインのみ)
できないこと
  • フォントのファミリー/書体の変更(サイズ、太さ、スタイルのみ変更可能)
  • 新しいテキスト要素の追加(メディアは挿入できますが、新しいテキストボックスは追加できません)
  • 背景色やグラデーションの変更
  • ページ/スライドの追加、削除、並べ替え
  • アニメーション、トランジション、要素の不透明度の変更(新たに挿入した塗りつぶしを除く)
  • 要素のグループ化/グループ解除、図形のスタイル変更(図形内のテキストのみ編集可能)

依頼された変更が「できないこと」の一覧に含まれる場合は、Canva エディターで手動で行う必要があることをユーザーに伝えてください。回避策を試みないでください。

レスポンシブページ — 操作の制限

一部のページは is_responsive: true として返されます。そのようなページでは、次の操作のみ許可されています。 update_title、replace_text、update_fill、delete_element、find_and_replace_text

perform-editing-operations を呼び出す前に、pages 配列を確認してください。レスポンシブページを対象とする操作に未対応の操作(例:format_text、position_element、resize_element、insert_fill)が含まれている場合は、呼び出しを行わず、その操作がそのページではサポートされていないことをユーザーに伝え、代替案を提示してください。

コミットの承認ゲート(必須)

commit-editing-transaction を実行すると、変更が確定します。コミットする前に、変更内容とプレビューのサムネイルをユーザーに提示し、明示的な承認を得る必要があります。たとえば、「プレビューはこちらです。この変更をデザインに保存しますか?」と尋ねてください。明確な承認を待ってください。

  • 承認なしにコミットしないでください。
  • コミット呼び出しが成功する前に、変更が保存されたとユーザーに伝えないでください。
  • コミットに成功したら、Canva でデザインを開くための直接リンクをユーザーに提示してください。
  • コミットに失敗した場合、変更はすべて失われます。再試行するには、新しいトランザクションを開始してください。

スキルを作成する際の注意:変更の一括処理に対する事前の承認をすでに1回取得しているスキル(例:canva-implement-feedback)では、その承認をコミットの承認も含むものとして扱い、再度尋ねないでください。そのスキル独自の確認ルールに従ってください。上記のゲートは、直接的な個別編集における既定のルールです。

ワークフロー

ステップ 1:デザインを特定する
  • 短縮リンク(canva.link/...)→ Canva:resolve-shortlink で URL を取得します。
  • Canva の完全な URL → デザイン ID(/design/ の後の部分)を抽出します。
  • デザイン ID のみ(D で始まるもの)→ そのまま使用します。検索はしないでください。
  • 何も指定されていない場合 → デザイン ID またはリンクを尋ねます。
ステップ 2:トランザクションを開始して確認する

Canva:start-editing-transaction を呼び出します。サムネイルを表示します。返されたコンテンツを使って、対象にする必要がある正確な element_ids を特定します。(確認だけが必要だった場合は、cancel-editing-transaction を呼び出して終了します。)

ステップ 3:操作を組み立てて実行する

ユーザーの依頼を具体的な操作に変換します。find_and_replace_text の文字列が複数の場所やコンテキストに一致する可能性がある場合は、まず対象範囲を確認します。可能な場合は、すべての操作を 1 回の perform-editing-operations 呼び出しにまとめます。

ステップ 4:プレビューして確定する

変更後のサムネイルと、変更内容を平易な言葉で列挙したリストを表示します。承認を求めてから、commit-editing-transaction を呼び出します。編集リンクを共有します。

ルール

  • トランザクション内では、transaction_id と pages 配列を必ず覚えて再利用します。
  • ユーザーに下書きが破棄されたことを伝えずに、トランザクションを未確定のままにしないでください。
  • 破壊的な操作(delete_element、大規模な find_and_replace_text)を行う前に、対象範囲を確認します。
  • 複数の小さな呼び出しよりも、perform-editing-operations の 1 回の呼び出しにまとめることを優先します。

コメント