mcpField
A
adobe-design-from-template

adobe-design-from-template

github.com/adobeデザイン・UI316299 回インストール今日更新
リポジトリ

adobe-design-from-template について

Adobe Express のテンプレートを探してカスタマイズするスキルです。テキストや画像、背景色の変更、アニメーション追加を行い、共有や追加編集に使えるドキュメントを作成します。

主な機能

  1. 01Adobe Express テンプレートの検索
  2. 02テンプレートのテキスト更新
  3. 03デザイン内の画像置換
  4. 04背景色の変更
  5. 05デザインへのアニメーション追加

活用シーン

  1. 01イベントポスターの作成と調整
  2. 02ソーシャルメディア投稿テンプレートの調整
  3. 03名刺テンプレートの編集

インストール

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

$npx skills add https://github.com/adobe/skills --skill adobe-design-from-template

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

詳細

Adobe テンプレートからデザインを作成

Adobe Express テンプレートを見つけてカスタマイズできます。テキストの更新、画像の置き換え、背景色の変更、アニメーションの追加を行い、共有、ダウンロード、または Express で開いてさらに編集できる完成済みの Express ドキュメントを作成します。

表示方法に関する注意: デフォルトでは、search_design の検索結果は、ユーザーがタップして選択できるインタラクティブなテンプレートギャラリーとして表示されます。ギャラリーのない画面(例:Codex)では、代わりに検索結果を Markdown リンクとして表示してください。手順 3 を参照してください。また、手順 1 で、この画面で実際に利用できるツールによる編集アクションのみを提示し、それ以外は何も言わずに省略してください。ツールの結果に importantNote が含まれている場合は、そのターンではその指示に従ってください。


ツールリファレンス

手順ツール備考
初期化adobe_mandatory_initファイル処理とルーティングのルール。最初に呼び出します
テンプレートを検索search_designテンプレートを返します。表示方法は画面によって異なります
テキストとコピーを編集fill_text一時的なエラーが発生した場合は 1 回再試行します
画像を置き換えreplace_image生成 AI による画像の置き換え。1 回の呼び出しにつき 1 要素。利用できない場合があります
背景色を変更change_background_color16 進数の値を指定します。必要に応じて色の説明から推測します
デザインにアニメーションを追加animate_design利用できない場合があります。403 の場合はスキップします
PDF としてダウンロードdownload_designページごとに事前署名済み PDF URL を返します。利用できない場合があります

すべての画面で、すべてのツールが利用できるわけではありません。手順 1 で利用可能なツールを確認します。


ツールの結果に含まれる importantNote の確認

search_design、fill_text、replace_image、change_background_color、animate_design は、他の出力とともに importantNote フィールドを返す場合があります。これは、現在のターンにおけるその結果の表示方法(使用する正確な描画・書式など)や、次に呼び出すツールリファレンスのツールを示す、Adobe Express コネクターからの最新のガイダンスです。

ツールの結果に importantNote が含まれている場合は必ず、その表示方法と次の手順に関する指示を読み、従ってください。このスキルの他の箇所に記載された書式設定のデフォルトが上書きされる場合も同様です。指示で示されるのは、ツールリファレンスの表にすでに記載されているツールのみです。その指示だけを根拠として、表にないツールを呼び出さないでください。importantNote がない場合は、このドキュメントの残りの部分を既定の動作として扱ってください。


ワークフロー

手順 0 — Adobe ツールを初期化する

最初に adobe_mandatory_init を呼び出します。これにより、ワークフローの残りの部分で必要となるファイル処理のルールとツールのルーティングガイダンスが返されます。

{ "skill_name": "adobe-design-from-template", "skill_version": "2.1.0" }

手順 1 — 利用可能なツールを確認する

adobe_mandatory_init によって「Adobe for creativity」コネクターが有効であることを確認したら、この画面で実際に利用できるツールリファレンスのツールを確認します。画面によっては、すべてのツールが公開されているとは限りません。たとえば、replace_image や download_design が利用できない場合があります。

利用できるツールを記録します。以降の手順では、利用可能なツールに対応するアクションのみを提示してください。該当するツールがない場合は、画像の置き換え、アニメーションの追加、PDF のダウンロードに触れないでください。

また、この画面でインタラクティブなテンプレートギャラリー(ユーザーがタップして選択できるビジュアルピッカー)が表示されるのか、またはテキストベースの検索結果のみが表示されるのかを確認します。これは、手順 3 でテンプレートを表示する方法を決めるために必要です。


Step 2 — 検索クエリを作成する(最初に質問しない)

ユーザーの発言からデザインの種類を抽出し、そのままステップ 3 に進みます。 テンプレートを提示する前に確認の質問をすると手間が増えます。まず選択肢を提示すれば、 ユーザーはより早く希望を伝えられます。

クエリは汎用的なものにします。デザインの種類のみを含めてください。ユーザーが指定した 具体的な詳細(名前、日付、会場、ビジネス情報など)は generalQuery に含めず、 後で fill_text のステップに引き継ぎます。

ユーザーの発言generalQuery
「チラシを作って」"flyer"
「Instagram 用に何か必要です」"Instagram post"
「イベントのポスターをデザインして」"event poster"
「名刺を作って」"business card"
「アイスクリーム交流会のチラシ」"ice cream social flyer"

Step 3 — テンプレートを検索する

search_design を呼び出します。

{
  "generalQuery": "<design type from user prompt>",
  "pageSize": 24,
  "fillDescription": "<any specific text the user gave, verbatim — or omit>"
}

まず結果の importantNote を確認してください。これは、このターンでテンプレートを表示する方法と 次のアクションを明確に指定しているため、その指示に従います。importantNote がない場合は、 表示環境に応じて結果を提示します。

インタラクティブギャラリー(デフォルト): 検索結果はチャット内に視覚的なピッカーとして表示されます。ユーザーが テンプレートをタップして選択すると、デザイン識別子が自動的に返されます。ギャラリーを埋めるには pageSize: 24 を使用します。

ギャラリーを利用できない場合(Codex など、テキストのみの表示環境): 結果は構造化データ (templateURN、title、previewUrl、editorUrl、および任意で isPremium)として返されます。 すべての URL を Markdown のハイパーリンクとして表示し、URL をそのまま表示しないでください。 一覧を見やすくするために pageSize: 10 を使用します。各テンプレートについて、タイトル、プレビュー画像、 「Adobe Express で編集」リンク(主なアクション)を表示し、isPremium が true の場合は「(プレミアム)」を 付記します。expressExploreTemplatesUrl がある場合は、「テンプレートをさらに見る」リンクを付記します。 一覧の後に、ステップ 1 のツールをもとに利用可能な次のアクションを表示し、ユーザーにテンプレートを選ぶよう 尋ねます。

必ずテンプレートの一覧全体を提示し、ユーザーが選ぶまで待ってください。 テンプレートを自動選択しないでください。結果の 1 つがぴったりに見える場合や、ユーザーがすでに希望する 編集内容を説明している場合も同様です。次に進む前に、ユーザーが番号、タイトル、または URN で明示的に 選択する必要があります。編集内容(例:「背景を紫に変更して」)を説明することはテンプレートの選択では ありません。これは、選択後に何をするかを伝えるものであり、どのテンプレートを使うかを指定するものでは ありません。

選択内容を templateURN に解決します。

ユーザーがテンプレートを選び、同じメッセージ内で変更内容も指定している場合(例:「2 を選んで、 テキストを…に変更して」)、ステップ 4 に直接進み、編集を適用してください。確認は不要です。

ユーザーがアクションを指定せずにテンプレートだけを選んだ場合は、選択を確認し、利用できる内容が分かるよう 編集メニューを再表示します。

ユーザーが「もっと」/「次へ」と依頼した場合は、まったく同じ generalQuery で再度 search_design を呼び出し、前回の pageSize 分だけ startIndex を進めます。クエリの言い換えは しないでください。


Step 4 — 編集を適用する

注: デザインを識別するのは templateURN(またはピッカーから返されたデザイン識別子)です。これを templateURN または templateOrDocumentURN に渡してください。どちらのパラメーターにも同じ値を 使用できます。最初の編集後、各ツールは documentURN を返します。同じデザインへの変更を積み重ねるため、 以降の編集では最新の documentURN を使用してください。

編集を適用するたびに、次のように尋ねます。「ほかに変更したいところはありますか?それとも、これでよさそうですか?」

テキスト/コピーを編集する

fill_text を呼び出します。

{
  "templateURN": "<templateURN or latest documentURN>",
  "description": "<what to change and what to change it to>",
  "generalQuery": "<same, minus any PII>"
}

ユーザーがテキストの内容を指定していない場合は、呼び出す前に尋ねてください。

fill_text は一時的なエラーにより、最初の試行で失敗することがあります。エラーが返された場合は、 失敗を報告する前に、同じパラメーターでもう一度再試行してください。

画像を置き換える

生成機能 — 生成 AI が利用できるサーフェス(つまり、replace_image が利用可能な環境。例:Codex)でのみ実行します。replace_image が利用できない場合は、こちらから提案するアクションメニューには含めないでください。ユーザーが画像の置き換えを明示的に依頼した場合は、このサーフェスでは利用できないことを説明し、利用可能な編集アクションを提案してください。

replace_image を呼び出し、言葉で説明した AI 生成の画像に写真やオブジェクトを置き換えます。1 回の呼び出しで変更できる視覚要素は1 つだけです。また、ユーザーがアップロードした画像や画像 URL はサポートされていないため、希望する結果を説明してください。

{
  "templateOrDocumentURN": "<templateURN or latest documentURN>",
  "description": "<what to replace and what it should become, e.g. 'replace the dog with a cheerful Labrador'>",
  "generalQuery": "<same as description, with PII removed>"
}

説明が具体的であるほど(被写体、設定、雰囲気、照明、スタイルなど)、結果が良くなります。単色の背景にする場合は、このツールではなく change_background_color を使用してください。

背景色を変更する

change_background_color を呼び出します。

{
  "templateOrDocumentURN": "<templateURN or latest documentURN>",
  "backgroundColor": "<hex, e.g. #FF6F61>",
  "description": "<e.g. change background to coral pink>",
  "generalQuery": "<same, minus any PII>"
}

ユーザーが色を指定していても 16 進数の値がない場合(例:「コーラルピンク」)、判断して妥当な 16 進数値を選んでください。

ツールは variations を返す場合もあります。これは、それぞれ固有の documentURN、editorUrl、previewUrl、reportAbuseUrl、backgroundColor を持つ、背景色の異なる代替ドキュメントです。返された場合は、すべてを表示し、主要な結果だけに限定しないでください。そうすれば、ユーザーは比較して選べます。

ユーザーがいずれかを選んだ場合は、そのバリエーションの documentURN/editorUrl を以降の編集に引き継いでください。

アニメーションを追加する

animate_design が利用できない場合は、このセクションを省略してください。

animate_design を呼び出します。

{
  "templateOrDocumentURN": "<templateURN or latest documentURN>",
  "description": "<animation style or intent>",
  "generalQuery": "<same, minus any PII>"
}

この手順ではユーザーに何も尋ねず、ユーザーが示した意図(指定がない場合は妥当なデフォルトのアニメーション)に基づいて、animate_design を直接呼び出してください。

結果の importantNote を確認し、バリエーションの提示方法に関する指示に厳密に従ってください。importantNote がない場合は、次のとおりです。

インタラクティブなサーフェス(デフォルト): 結果はインラインで表示され、ユーザーはその場でプレビューできます。

テキストのみの代替表示: ツールは animationPresetVariations(プリセット名)と variations(それぞれに documentURN と editorUrl を含む)を返します。比較できるよう、各バリエーションのプリセット名を、すぐに開ける Markdown リンクとして提示してください。

ユーザーが後から希望するものを伝えた場合は、そのバリエーションの documentURN/editorUrl を以降の編集に引き継いでください。

animate_design が 403 を返した場合、ユーザーのプランにはアニメーションが含まれていません。アニメーションを省略し、納品時にその旨を伝えてください。再試行しても、403 の権限エラーは解消されません。


ステップ 5 — 完成したデザインをダウンロードする

download_design が利用できない場合、またはデザインにアニメーションを追加済みの場合は、この手順を省略してください。 download_design は静的な PDF をエクスポートします。アニメーションは保持されません。デザインにアニメーションを追加した場合は、エディターのリンクを渡し、PDF のダウンロードは提案しないでください。

ユーザーがファイルを希望する場合(またはテキストのみのサーフェスで納品の一環として)、download_design を呼び出してデザインを PDF にエクスポートします。ページごとに 1 つの、事前署名付きダウンロード URL が返されます。

{
  "documentUrn": "<latest documentURN — note: this parameter uses camelCase>",
  "format": "application/pdf",
  "pages": "1",
  "originatingTool": "<last edit tool used, e.g. fill_text, replace_image, change_background_color>"
}

複数ページのデザインでは、pages にカンマ区切りのリストまたは範囲(例:"1,3-5")を設定します。1 ページ目をデフォルトにする場合は省略してください。originatingTool には、現在のデザインを作成した編集ツールを設定します。返された各 downloadUrl を、通常の Markdown リンクとして提示してください。


ステップ 6 — 納品する

ユーザーが満足したら:

✅ Here's your finished design:

🎨 Template: [name]
[Edits applied, e.g. ✏️ Copy updated · 🖼️ Image replaced · 🎨 Background changed · ✨ Animated]

📎 Open in Express: [editor link]
⬇️ Download PDF: [downloadUrl(s)]   ← only if download_design was used

編集リンクには最後の編集ツールの応答に含まれる editorUrl(または editorShortUrl)を使用し、PDF(利用可能な場合)には download_design の downloadUrl(複数可)を使用してください。

ドキュメントは一時的なもので、12 時間後に削除されることをユーザーに伝えてください。保存するには Express で開き、保持するには PDF をダウンロードするよう案内してください。


エラー処理

状況対応
fill_text が最初の試行で失敗する同じパラメーターで 1 回再試行します
replace_image が 403 を返す画像の置き換えはユーザーのプランでは利用できません。スキップしてその旨を伝え、デザインの残りの部分は維持します
animate_design が 403 を返すアニメーションはユーザーのプランでは利用できません。スキップし、納品時にその旨を伝えます
download_design が一部ページの失敗を報告する成功したページとエディターのリンクを渡し、エクスポートできなかったページを伝えます
いずれかのツールが 401 を返すAdobe OAuth で再認証するようユーザーに依頼してから、再試行します
クエリに一致するテンプレートがないより広範な generalQuery を試します
ユーザーがまだテンプレートを選択していないtemplateURN が確定するまでステップ 3 を先に進めません。これは以降のすべての呼び出しに必要です
ユーザーがすべての編集をスキップする問題ありません。テンプレートのリンクをそのまま渡します(PDF が利用可能、またはリクエストされている場合は PDF も渡します)
ツールが現在のサーフェスで利用できないその選択肢は何も言わずに省略します。利用できない機能についてユーザーに伝えてはいけません

制約

  • ワークフローは、編集を行う前に必ずテンプレートを検索するところから始めます。
  • テンプレートを自動選択してはいけません。 検索結果を必ず提示し、ユーザーが選ぶまで待ちます。たとえ結果の 1 つが完全に一致しているように見えても、またユーザーがすでに編集内容を説明していても同様です。テンプレートの提示を省略すると、ワークフローが破綻します。
  • テンプレート/ドキュメントの URN は、ツールの応答(ピッカーまたは検索結果)からのみ取得します。決して自分で生成してはいけません。
  • 最初の編集後は、最新の documentURN を以降の呼び出しに引き継ぎ、編集内容が 1 つのデザインに蓄積されるようにします。
  • すべての編集は任意です。ユーザーが特定の変更を望んでいると決めつけてはいけません。
  • 現在のサーフェスで利用できるツールに対応したアクションのみを提示します(ステップ 1 を参照)。
  • replace_image では、希望する画像を言葉で説明します。ユーザーがアップロードしたファイルや URL は取り込めません。
  • animate_design と change_background_color はそれぞれ複数の variations を返すことがあります。主な結果だけでなく、すべてを応答に表示し、ユーザーが比較して選べるようにします。
  • ツールの結果に importantNote が含まれている場合は、そのターンでは指示に厳密に従います。この指示は、このスキル内の他の既定の指示より優先されます。

コメント