mcpField
C
canva-design-feedback

canva-design-feedback

github.com/canva-sdks设计与 UI138250 次安装5 天前更新
代码仓库

关于 canva-design-feedback

用于评审 Canva 设计并提供按优先级排列、可执行反馈的只读技能。它结合渲染缩略图、文本和可选的只读事务,评估布局、层级、文案与可读性,不修改设计。

主要功能

  1. 01读取设计缩略图和文本内容
  2. 02通过只读事务检查布局
  3. 03评估层级、间距、文案和可读性
  4. 04按严重程度和页面排列反馈
  5. 05提供具体修改建议但不编辑

适用场景

  1. 01分享前评审幻灯片或社交媒体图稿
  2. 02查找多页设计中的布局和可读性问题
  3. 03在不修改设计的情况下获取文案与视觉反馈

MCP 相关

通过 Canva 工具读取设计信息、缩略图和文本,也可检查只读编辑事务;事务会取消,不会提交更改。

安装

复制下面的命令,在终端中运行。

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

安装后在 Claude Code 中输入/canva-design-feedback确认已加载。

详细介绍

获取设计反馈

扮演设计评审者:阅读设计的实际呈现效果,然后提供具体、按优先级排列且用户可以据此采取行动的反馈。此技能为只读,绝不会编辑设计。用户想要进行修改时,请交由 canva-edit-design 或 canva-implement-feedback 处理。

实际可读取的内容(以及需要注意的局限)

  • Canva:get-design-content 只返回文本(richtexts),适合查看文案、标题和措辞,但不包含颜色、字体、字号或元素位置。
  • Canva:get-design-thumbnail 提供渲染后的图像——这是查看布局、层级、平衡、颜色和对比度的方式。务必获取此图;视觉评议离不开它。
  • 元素位置、尺寸和文本可通过只读编辑事务可靠获取:调用 Canva:start-editing-transaction,检查返回的 richtexts/fills,然后调用 Canva:cancel-editing-transaction(绝不提交——你不会更改任何内容)。使用此方式了解布局、间距和对齐细节。
  • 颜色和字体并不总能可靠获取。 经测试,事务载荷通常只会返回每个元素的文本、位置和尺寸,不包含颜色或字体属性。因此,评判颜色、对比度或排版时,应以缩略图为主要依据;事务中的样式数据仅供参考(存在时可用,但不可依赖)。除非载荷确实包含具体的十六进制颜色值或字体名称,否则绝不要将其作为确定事实报告。

工作流程

步骤 1:解析设计

短链接 → Canva:resolve-shortlink;完整 URL → 提取 ID;原始 D... ID → 直接使用;否则请用户提供。

步骤 2:读取设计
  • 调用 Canva:get-design 获取标题和页数。
  • 调用 Canva:get-design-thumbnail(和/或 Canva:get-design-pages)查看每一页。
  • 调用 Canva:get-design-content 获取文本。
  • 可选(排版/颜色细节):按上述说明进行只读事务,然后取消事务。
步骤 3:从多个维度评估

根据以下角度评估设计。与设计类型无关的项目可跳过:

  • 视觉层级——视线是否首先落在最重要的内容上?标题/副标题/正文之间是否有对比。
  • 布局与间距——对齐、平衡、拥挤程度,以及边距/间隔是否一致。
  • 文案与信息传达——清晰度、长度、语气、错别字、行话,以及每页是否只有一个明确的核心信息。
  • 一致性——各页的字体、字号、颜色和间距是否统一。
  • 可读性与对比度——文字大小是否适合观看场景,图片上的文字是否易读,颜色对比是否足够。
  • 无障碍性——对比度、替代文本,以及信息是否不只通过颜色传达。
  • 用途适配性——是否符合指定渠道/受众的需求(幻灯片 ≠ Instagram 帖文 ≠ 传单)。
步骤 4:提供结构化反馈

按页面整理发现,每项都注明严重程度并给出具体修改建议:

## Feedback — "<design title>" (N pages)

### Top priorities
1. [High] Page 2 — Title competes with the body text (same size/weight).
   Fix: bump the title to ~1.5× and bold it so it reads first.
2. [High] Page 4 — White caption over a light photo is hard to read.
   Fix: darken the image or add a scrim; or move the caption to a solid band.

### Page-by-page
**Page 1** — [Med] Three different accent colors; pick one. [Low] "recieve" → "receive".
**Page 2** — ...

### What's working
- Consistent margins; strong cover image.

使用以下严重程度:High / Med / Low。先列出影响最大的几项,再提供逐页详情。描述要具体且指出位置(页面 + 元素),不要给出“让它更醒目”之类的泛泛建议。

步骤 5:提出协助修改

结尾时,提出通过 canva-edit-design 实施 API 可处理的项目,并说明哪些项目需要在 Canva 中手动处理(例如 API 无法修改的字体系列或背景更改——完整列表请参阅 canva-edit-design)。

规则

  • 绝不编辑或提交任何内容——此技能严格为只读。如果开启事务进行检查,务必调用 cancel-editing-transaction。
  • 每条反馈都必须以你在缩略图或内容中实际观察到的信息为依据——不得给出泛泛的建议。
  • 按优先级排序。简明的重点清单胜过用户不会阅读的详尽列表。
  • 直率但有建设性;指出问题时务必同时给出具体的修改建议。

评论

支持 Markdown