mcpField
A
adobe-design-from-template

adobe-design-from-template

github.com/adobe设计与 UI316299 次安装今天更新
代码仓库

关于 adobe-design-from-template

帮助用户从 Adobe Express 模板中选择设计并进行定制,支持修改文字、替换图像、调整背景色和添加动画,产出可分享或继续编辑的文档。

主要功能

  1. 01搜索 Adobe 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 Express 模板并进行自定义 — 更新文本、替换图像、更改背景颜色并添加动画,最终生成可供分享、下载或在 Express 中打开以继续编辑的完整 Express 文档。

界面说明: 默认情况下,search_design 的结果会以交互式模板库呈现,用户可以点击选择。在没有模板库的界面(例如 Codex)上,请改用 Markdown 链接呈现结果 — 参见步骤 3。无论如何,只提供此界面上实际可用工具对应的编辑操作(步骤 1);其余操作请静默省略。工具结果包含 importantNote 时,请在本轮遵循其中的指引。


工具参考

步骤工具说明
初始化adobe_mandatory_init文件处理和路由规则;首先调用
搜索模板search_design返回模板;呈现方式取决于界面
编辑文本和文案fill_text遇到瞬时错误时重试一次
替换图像replace_image生成式 AI 图像替换;每次调用处理一个元素;可能不可用
更改背景颜色change_background_color传入十六进制值;必要时根据颜色描述推断
添加动画animate_design可能不可用;遇到 403 时跳过
下载为 PDFdownload_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 — 构建搜索查询(不要先提问)

从用户所说的内容中提取设计类型,然后直接进入 Step 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,则附加“浏览更多模板”链接。列表后,根据 Step 1 中的工具展示可用的后续操作,并请用户选择一个模板。

始终展示完整模板列表,并等待用户选择。 绝不要自动选择模板——即使某个结果看起来非常合适,或用户已经说明想要进行哪些编辑也一样。用户必须通过编号、标题或 URN 明确选择,然后你才能继续。描述想要的编辑(例如“把背景改成紫色”)不算选择模板——这说明用户希望在选择之后进行什么操作,而不是要用哪个模板。

将用户的选择解析为 templateURN。

如果用户在选择模板的同时,也说明了要更改什么(例如“选 2 并把文字改成……”),则直接跳到 Step 4 并应用编辑——无需确认。

如果用户只选择了模板,却没有指定操作,则确认选择并重新显示编辑菜单,让用户了解可用的操作。

如果用户要求“更多”/“下一个”,则使用完全相同的 generalQuery 再次调用 search_design,并将 startIndex 增加先前的 pageSize。不要改写查询。


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 生成内容。每次调用只能更改一个视觉元素,并且不支持用户上传的图像或图像 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>"
}

如果用户描述了颜色但没有提供十六进制值(例如“珊瑚粉”),请自行判断并选择合理的十六进制值。

此工具还可能返回 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。此工具会返回预签名下载 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 首次尝试失败使用相同参数重试一次
replace_image 返回 403用户的套餐不支持替换图片;跳过并说明原因,保留设计的其余部分
animate_design 返回 403用户的套餐不支持动画;跳过并在交付时说明
download_design 报告部分页面失败交付成功的页面和编辑器链接;注明哪些页面无法导出
任意工具返回 401请用户通过 Adobe OAuth 重新进行身份验证,然后重试
没有模板符合查询条件尝试使用范围更广的 generalQuery
用户尚未选择模板在解析出 templateURN 之前,不要推进到步骤 3 之后;后续每次调用都需要它
用户跳过所有编辑没问题——按原样交付模板链接(以及可用或用户要求的 PDF)
当前界面不提供某个工具静默省略该选项——不要向用户提及不可用的功能

限制

  • 工作流始终从搜索模板开始,然后才能进行任何编辑。
  • 绝不要自动选择模板。 始终展示搜索结果并等待用户选择,即使某个结果看起来非常匹配,或用户已经描述了想要的编辑内容。跳过模板展示会破坏工作流。
  • 模板/文档 URN 只能来自工具响应(选择器或搜索结果)——绝不要自行编造。
  • 首次编辑后,后续调用都要传入最新的 documentURN,以便将编辑累积到同一设计中。
  • 所有编辑都是可选的——不要假定用户想要任何特定更改。
  • 只提供当前界面上可用工具对应的操作(见步骤 1)。
  • replace_image 只能通过文字描述所需图片;无法接收用户上传的文件或 URL。
  • animate_design 和 change_background_color 各自都可能返回多个 variations——在回复中展示所有结果,而不只是主要结果,以便用户比较和选择。
  • 如果工具结果包含 importantNote,本轮必须严格遵循该说明——其优先级高于此技能其他位置的默认规则。

评论

支持 Markdown