SuperAPI AI 工具集

critique

设计与创作

查看项目

更新于 10-15 16:34

技能介绍

定位与用途:critique 是更大的 ui-craft 技能中的一个镜头(lens),专注于从设计角度评审界面。如果同时安装了 ui-craft 技能,应先阅读其 SKILL.md 以了解 Discovery + Anti-Slop + Craft Test,再应用本镜头。它的职责是批评(critique)而非修改——默认不编辑代码。

第 0 步:视觉采集(强制)。仅审查代码是不够的,每次审查/批评都从用户所见的界面表面开始。按顺序尝试以下方式,使用第一个可用的:1)Playwright MCP——若可用则用它,在三种视口截取整页截图:桌面(1280×800)、平板(768×1024)、移动(375×812);若应用支持深色模式也一并截取。2)浏览器 DevTools / Chrome MCP——第二选择,视口集相同。3)其他浏览器自动化(agent-browser、cursor-ide-browser)——第三选择。4)询问用户——最后手段。若没有自动化可用,在继续前请用户提供截图,并具体说明所需内容:“Full-page at 1280px (desktop) / Full-page at 768px (tablet) / Full-page at 375px (mobile),若支持则每种视口的深色模式。”在视觉素材被捕获或提供之前不要开始评审;当自动化不成功时要向用户明确说明,不要静默回退到纯代码审查。若用户拒绝提供截图,则执行纯代码检查,并在报告顶部清晰标注 [CODE-ONLY REVIEW — visual issues not assessed]。

CRAFT_LEVEL 门槛:CRAFT_LEVEL 决定什么算“需要改进”。CRAFT_LEVEL 3 → 只标记 anti-slop 的 Critical 项,跳过 Minor 打磨。CRAFT_LEVEL 5-7 → 标记 Critical + Major,Minor 打磨列为可选。CRAFT_LEVEL 9+ → 标记所有内容,包括 Minor 打磨和缺失的标志性细节。

审查镜头(按顺序运行):Anti-Slop Test(来自 SKILL.md)——标记出现的每一项,先 Critical(全大写、紫色渐变、完全相同的卡片网格、bounce 缓动、emoji 图标、glassmorphism + neon),再 Major(趋势上的彩色药丸、粗彩色边框、统一圆角、渐变文字、大段文字墙),再 Minor(直引号、缺少 tabular-nums、通用 CTA)。Craft Test——找出设计未达到“一个强调色、3-5 处使用;对比用朴素的次级文字;颜色只用功能色;每个区块都配得上它的空间”的地方。Hierarchy——用户能否一眼看出主、次、三级?还是所有东西都在同等程度地喊叫?Clarity——价值主张能否在 5 秒内读懂?CTA 是否具体(而不是“Learn more”)?Signature detail——是否有一个令人难忘、让界面感觉是“设计过”而非“拼装”的元素?若没有,建议一个(母题、布局突破、自定义标记、独特的 hover)。Inspiration gap——阅读 references/inspiration.md,说明其中观察到的哪个原型/标志性细节模式适用,以及当前状态如何偏离。

输出格式——Review Format 表格:Before / After / Why,按影响力而非文件顺序排序。结尾用一段话总结能把界面从“AI 生成”提升到“经过设计”的前 3 项改动。不要编辑代码,这是批评(critique)。

收尾:以 Craft Report(references/review.md → Craft Report)作为最终包裹层,包裹发现表格和 top-3 总结。Checked 列出实际运行的镜头(Anti-Slop、Craft Test、Hierarchy、Clarity、Signature、Inspiration gap)以及所用的 CRAFT_LEVEL 门槛;Passed 载明在这些镜头下站得住的部分;Changed 保持为空(批评不编辑);Left alone 涵盖被标记但超出范围的内容;Verdict 是一句话的状态描述。即使界面通过且干净,也要生成该报告——这正是用户所请求的验证。

下一步:/polish——应用本次批评所指出的修复(rung 1)。

限制与缺失事实:本文档未提供具体价格、收费、平台支持范围或量化效果数据;CRAFT_LEVEL 的取值方式和 $ARGUMENTS 的具体传入方式,资料中未详细说明,暂未提供。