‹ 首页

design-critique

@getcrew44 · 收录于 昨天 · 上游提交 1 个月前

Use to give structured feedback on a screen, flow, or mockup — first impression, hierarchy, usability, consistency, accessibility, and what to fix first.

适合你,如果经常需要评估设计稿的可访问性和一致性

/ 通过 npx 安装 校验哈希
npx oh-my-skill add getcrew44/crew44/design-critique
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- getcrew44/crew44/design-critique
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify getcrew44/crew44/design-critique
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
358GitHub stars
~622上下文体积 · 单文件
索引托管

怎么用

商店整理自技能原文 · 版本 cfcf1e7 · 表述以原文为准
它做什么

Claude 会对屏幕、流程或原型进行结构化设计评审,覆盖第一印象、层次、可用性、一致性、可访问性等维度,并输出总体印象、发现列表、亮点及前三项改进建议。

什么时候触发

当用户上传或描述界面设计(如截图、原型),或要求对设计提供反馈时触发。

装好后可以这样说
Claude 会按五个维度给出结构化反馈。
Claude 会指出与设计系统的偏差。
Claude 会检查色彩对比度、触控目标等。
技能原文 SKILL.md作者撰写 · MIT · cfcf1e7

Design Critique

Give the kind of feedback a designer actually wants: specific, prioritized, and tied to the user's goal — not adjectives.

Frame the critique

Ask, then critique. The same screen gets different feedback at different stages.

  • Stage. Exploration (push for range), refinement (tighten), or polish (catch what shipped).
  • Context. Who is it for? What is the user trying to do? What is this screen in service of?
  • Focus. All of it, or one slice (navigation, the empty state, the hero, the form)?
Pass 1: First impression (two seconds)
  • What draws the eye first? Is that what should?
  • Is the purpose of the screen clear before you read any copy?
  • What's the emotional read — calm, urgent, dense, sparse — and does that match the user's state?
Pass 2: Hierarchy and reading flow
  • Does the reading order match what the user is trying to do?
  • Are the right elements emphasized? Anything competing with the primary action?
  • Is whitespace doing work, or just sitting there?
Pass 3: Usability
  • Can the user accomplish the goal without backtracking?
  • Are interactive elements obviously interactive? Are read-only elements clearly not?
  • Are there unnecessary steps, fields, or confirmations?
Pass 4: Consistency
  • Does this match the existing design system, or invent locally? Name the specific deviations.
  • Spacing, typography, color tokens — pulled from the system, or magic numbers?
  • Do similar elements behave similarly across the screen?
Pass 5: Accessibility floor
  • Color contrast: body text ≥ 4.5:1, large text and UI ≥ 3:1.
  • Touch targets ≥ 44×44.
  • Focus order is logical; focus indicators are visible.
  • Form inputs have labels, not just placeholders.
How to deliver feedback
  • Be specific. "The CTA competes with the navigation" beats "the layout is confusing."
  • Explain the why. Tie each note to a user need or principle, not just taste.
  • Suggest, don't just diagnose. A direction is more useful than a problem.
  • Call out what works. Reinforces the moves to keep.
  • Rank by impact. Lead with the change that buys the most.
Output
  • Overall impression — one or two sentences. What works, what's the biggest opportunity.
  • Findings — grouped by pass (hierarchy, usability, consistency, accessibility). Each finding names the element, the issue, the severity (critical / moderate / minor), and the suggested fix.
  • What works well — short list. Preserve these.
  • Top three changes — prioritized. For each: what to change, why, expected effect.
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。