企业官网建设流程全解析

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-skills

Designer 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 个评审技能，每个技能都有自己的检查清单：

每个维度的输出格式统一：观察（看到了什么）→ 问题（坏在哪）→ 修复（具体改法），并给出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 则会给出实际测得的对比度数值和达标下限，而不是"对比度可能偏低"。

快速上手：三步安装使用

1. 获取 Claude Code：免费应用，下载安装并登录
2. 添加技能市场：在 Claude Code 中输入

   /plugin marketplace add Owl-Listener/designer-skills

3. 按需安装插件：输入/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。

常见问题 FAQ

Q：没有设计基础能用吗？可以。评审标准全部来自技能文件里的检查清单（对比度数值、触控尺寸、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