跳转到使用指南
design-critique作者 Anthropic

Design Critique Skill.

Claude Code 和 Codex 的设计评审 skill:针对可用性、层级和一致性的结构化设计反馈。

  • Design Review & Accessibility
  • 审查报告
anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md
--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]
从上游文件读取的前言和章节标题,2026-09-14 · 完整 3,898 字符

01 功能说明

design-critique skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

design-critique 为任何持有 Figma URL、截图或书面描述的人提供共享的设计评审,适用于从探索阶段到最终打磨阶段的任何环节。它通过一个五部分框架运作:第一印象、可用性、视觉层级、一致性和可访问性。反馈规则要求 Agent 超越模糊的抱怨:指明冲突的元素,依据设计原则或用户需求解释原因,提出替代方案,并肯定可行之处。

输出是一份 Markdown 格式的评审,包含总体印象、带严重程度评级的可用性表格(严重、中等、轻微)、一致性表格、可访问性说明、“优点”列表以及三条优先建议。当存在设计工具或用户反馈连接器时,它会检查组件和 token,或与支持工单进行交叉核对。

它产出什么

  • 一份可用性表格,列出每项发现及其严重程度和建议的修复方案。
  • 一张针对设计系统的字体、间距和色彩偏差进行核对的一致性表格。
  • 一份按影响力排序的收尾性优先级建议清单。
查看示例提示词 ↗

工作方式

  1. 01
    让设计走在前面

    系统会从 Figma 拉取一个 Figma URL 并读取引用的文件;如果两者都不存在,Agent 会要求用户描述或分享该设计。

  2. 02
    从两秒印象开始

    在进行任何分析之前,它会先记录第一眼吸引注意力的地方,这是否正确、情绪反应如何,以及目的是否一目了然。

  3. 03
    按顺序遍历五个维度

    可用性、视觉层级、一致性和无障碍性各自都有一套对应的提示,涵盖从阅读顺序、留白到对比度和触控目标等方面。

  4. 04
    依据既定的风格规则撰写反馈

    发现的问题必须具体、附带解释、给出替代方案,并与已经做得好的地方相互平衡。

  5. 05
    填充 Markdown 输出模板

    固定结构包括整体印象、带严重程度的可用性表格、层级说明、一致性表格、无障碍性、做得好的地方,以及按优先级排序的建议。

02 找到适合场景

何时使用 design-critique Skill

当工作是此类设计评审时,在 Claude Code 或 Codex 中使用 design-critique skill。适用范围和限制取自该 skill 自己的文件。

适合场景

  • 在设计尚未完成时粘贴 Figma 链接或截图以获取反馈,涵盖从探索阶段到最终打磨的全过程。
  • 一个有名称、有上下文的流程,例如一个 B2B SaaS 的结账流程,其受众和目的能让反馈更精准。
  • 一次限定范围的评审,例如要求它只查看导航部分,以在某一区域获得更深入的分析。
  • 在工作过程中随口触发的短语,例如要求它评价一个原型稿或说说对某个界面的看法。

了解边界

  • 除非环境中配置了设计工具连接器,否则它无法拉取实时的 Figma 文件。
  • 将决策与真实用户投诉进行交叉核对,需要一个已连接的用户反馈来源。

需要提供的信息

  • 设计本身一个 Figma URL、一张截图,或一段详细的文字描述,是最低要求。
  • 上下文这是什么、面向谁、处于哪个阶段——从探索、细化或最终定稿中选择。
  • 一个可选的关注点你可以缩小评审范围,例如仅关注移动端或引导流程,以获得深度而非广度。
  • 一个斜杠命令参数该命令接受一个参数,无论你的设计素材是什么形式。

03 Skill 内部

design-critique skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 绝不让发现的问题含糊不清

    反馈必须指出冲突中的具体元素,例如说明 CTA 与导航存在竞争关系,而不是笼统地说布局令人困惑。

  2. 始终提出修复方案

    发现问题本身不是交付物;每条问题旁都必须附带可行的替代方案。

  3. 认可可取之处

    正面观察是良好反馈的必要部分,而非可选的礼貌之举,输出模板中设有「可取之处」小节用于呈现它们。

  4. 根据阶段匹配深度

    早期探索阶段与最终打磨阶段所需的反馈不同,因此 Agent 应据此调整,而不是用同一套标准衡量一切。

  5. 按严重程度对每项可用性发现分级

    可用性表格采用三个固定级别:严重、中等、轻微,每项均配有相应建议。

  6. 将无障碍作为独立环节考察

    该框架包含专门的无障碍维度,而不是将对比度和目标尺寸并入一般可用性说明。

  7. 设计缺失时应主动询问

    如果未提供 URL 或文件,Agent 应要求提供描述或截图,而不是凭空编造点评。

04 投入使用

在 Claude Code 或 Codex 中安装 design-critique

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 design-critique 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

针对 design/skills/design-critique/SKILL.md 的通用 skills CLI 形式;具体仓库可能记录其自有路径。

为 Skill 提供第一个设计审查任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Review this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 无障碍检查应专门针对关键文本报告对比度是否通过。

在 OpenDesign 中通过其 SKILL.md 链接导入 design-critique:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Anthropic
Skill 文件
design/skills/design-critique/SKILL.md 验证时记录的内容校验和;commit 8f877b6
License
Apache-2.0 来自 LICENSE。
仓库星标数
24,012 GitHub 快照拍摄于 2026-09-14,针对整个 anthropics/knowledge-work-plugins 仓库,该仓库在此目录中包含 7 个 skills。不是 design-critique 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 用法斜杠命令如何接收参数并解析设计来源。
  2. 我需要你提供的信息设计、上下文,以及可选的关注重点。
  3. 点评框架五个有序维度:第一印象、可用性、层级结构、一致性、无障碍。
  4. 如何给出反馈五条表述发现的风格准则,涵盖从具体性到阶段匹配的各方面。
  5. 输出点评必须遵循的 markdown 模板,包括表格。
  6. 若有可用连接器当连接了设计工具或用户反馈来源时的额外准备工作。
  7. 建议分享上下文、说明阶段,并要求缩小关注范围。
Skill 自身的描述
"获得关于可用性、层次和一致性的结构化设计反馈。通过「评审这个设计」、「批评这个原型」、「你觉得这个界面怎么样?」触发,或在从探索到最终打磨的任何阶段分享 Figma 链接或截图以获取反馈时触发。"

来自 SKILL.md 的 Front-matter 描述。完整文件约 3,898 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-critique Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

是否需要连接 Figma connector 才能使用?

不需要。连接设计工具后,它可以直接从 Figma 中提取设计并检查组件、token 和图层。如果没有连接,你仍然可以粘贴截图或详细描述设计,同样能获得相同框架的应用效果。

Design Critique

在真实设计审查任务中运行 design-critique。

下载 OpenDesign,从其 SKILL.md 链接导入 design-critique,粘贴上面的提示,在结果之前阅读计划。

终端
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows