Designer Skills视觉评审实战/critique-screen如何一键输出优先级修复清单快速定位设计缺陷【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skillsDesigner Skills 是面向 AI 智能体的设计技能合集其中visual-critique 插件提供了/critique-screen视觉评审命令只需丢进一张屏幕截图它就能从视觉层级、品牌一致性、构图、字体、色彩、交互可供性、信息密度 7 个维度完成评审并一键输出按 P1/P2/P3 分级的修复清单帮你快速定位设计缺陷。为什么需要自动化的视觉评审 设计评审最耗时的部分不是发现问题而是把问题讲清楚、排好序新手评审容易漏维度只盯着配色和排版忽略了层级和交互信号资深评审的意见常常停留在感觉不对缺少可执行的修复建议评审意见满天飞团队不知道先修哪个/critique-screen把这套评审流程固化成了标准工作流7 个维度逐一过筛每条问题都附带问题描述 所属维度 具体改法最后自动按优先级归组。评审从经验活变成流程活。一键评审7个维度如何自动过筛运行方式非常简单在 AI 编码助手如 Claude Code中输入/visual-critique:critique-screen onboarding step 2参数可以是屏幕名称、Figma 链接或直接附一张截图。命令会依次调度 7 个评审技能每个技能都有自己的检查清单维度检查什么视觉层级视线入口、阅读动线、字重分配、强调是否抢戏品牌一致性对照mood.md、voice.md、tokens.md检查风格漂移构图平衡、留白、节奏、格式塔原则字体字号阶梯、可读性、token 合规色彩WCAG 对比度正文 4.5:1、语义用色、色觉障碍友好度交互可供性可点击信号、状态可见性、CTA 清晰度、操作可发现性信息密度认知负荷、内容优先级、扫描模式、渐进披露每个维度的输出格式统一观察看到了什么→ 问题坏在哪→ 修复具体改法并给出pass / minor issue / major issue评级。修复清单P1/P2/P3三级优先级这是/critique-screen最有价值的部分——所有被标记的问题会被汇总并重新排序P1 · 严重破坏可用性、无障碍或品牌合规发布前必须修P2 · 重要损害体验或造成不一致本迭代内修复P3 · 打磨细微视觉优化有余力时处理每条清单项包含Issue问题、Dimension所属维度、Fix具体改动三要素最后附一段整体评估点出这块屏幕最强和最弱的维度。这意味着评审结论可以直接进 backlog不用二次翻译。快速模式只查功能缺陷用/critique-ux如果只想抓阻断任务的问题不必跑完整 7 维评审。同插件下的/critique-ux只覆盖层级、可供性、信息密度三个最容易阻断用户完成任务的维度适合快速反馈循环和产品经理主导的评审。评审技能的底层逻辑示例以交互可供性技能为例它内置了明确的量化标准而不是空泛的看起来不像按钮移动端触控目标不小于44×44px聚焦态必须高对比可见不能只靠浏览器默认描边主 CTA 应为实心填充样式次级操作用幽灵/文字样式编辑、删除等操作不能藏在 hover 里触屏用户无法触发这些检查点都写在 visual-critique/skills/critique-affordance/SKILL.md 中色彩技能 visual-critique/skills/critique-color/SKILL.md 则会给出实际测得的对比度数值和达标下限而不是对比度可能偏低。快速上手三步安装使用获取 Claude Code免费应用下载安装并登录添加技能市场在 Claude Code 中输入/plugin marketplace add Owl-Listener/designer-skills按需安装插件输入/plugin在 Discover 标签勾选visual-critique也可以只装这一个集合完整说明见 README.md评审插件的目录结构与命令列表见 visual-critique/README.md。评审之后把结论接进设计流程修复清单产出的下一步取决于你处在哪个阶段想做更全面的可用性审计 →/prototyping-testing:evaluate启发式评估进入交付期需要开发交接文档 →/design-ops:handoff怀疑问题根源是系统级债务 →/design-systems:audit-system对特定维度深挖 → 单独调用某个技能例如用 critique-visual-hierarchy 技能评审这个屏幕核心命令定义见 visual-critique/commands/critique-screen.md。常见问题 FAQQ没有设计基础能用吗可以。评审标准全部来自技能文件里的检查清单对比度数值、触控尺寸、CTA 样式规则输出是结构化清单而非主观判断新手也能照着清单逐条修复。Q评审的依据是什么会不会编品牌规则品牌一致性维度会显式对照项目中的mood.md、voice.md、tokens.md三个参考文件文件缺失时会跳过该维度而不会凭空发明品牌规则。Q评审结果能直接给开发看吗能。每条问题自带具体改法字段P1/P2/P3 分级可以直接映射到发布前/本迭代/有空再修的排期逻辑。总结/critique-screen的价值不在又一个 AI 点评而在于把评审维度、量化标准、优先级规则三件套全部工程化7 维过筛保证不遗漏统一输出格式保证可执行P1/P2/P3 分级保证团队知道先修哪里。对于正在迭代现有产品的团队建议把它作为设计流程的第一站——先定位真正坏掉的东西再决定往哪加新功能。【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考