SuperAPI AI 工具集

design-review

设计与创作

查看项目

更新于 10-16 06:21

技能介绍

用途:对已构建的界面做结构化设计评审,以设计简报和既定美学方向为基准,检查视觉层级、一致性、响应式、可访问性与美学还原度,最终产出按严重程度分级的改进清单。

主要能力:读取简报(优先 .design/<feature-slug>/DESIGN_BRIEF.md,其次项目根目录 DESIGN_BRIEF.md,均无则询问用户设计方向);检查新增或修改的组件、设计令牌使用、重复组件、文件命名与组织;强制截取运行中应用截图(Playwright MCP 优先,其次 cursor-ide-browser,均不可用则要求用户手动提供桌面 1280px、平板 768px、移动 375px 及暗色模式截图);逐张对照简报分析;按清单评审视觉层级、一致性、美学还原、组件质量、状态与交互、响应式、可访问性、排版、暗色模式、移动优先;输出 Must fix / Should fix / Could improve 分级清单并保存为 DESIGN_REVIEW.md。

使用方式:以“Review what I just built”“Run a design critique on the landing page”“Check this against the brief”“QA pass before I ship this”等提示触发。截图保存到 .design/<feature-slug>/screenshots/,无 .design/ 时回退到项目根目录 screenshots/,文件名需描述内容,如 review-homepage-desktop-1280.png。Playwright 示例序列:browser_navigate → { url: "http://localhost:3000" };browser_resize → { width: 1280, height: 800 };browser_take_screenshot → { type: "png", filename: ".design/onboarding-flow/screenshots/review-homepage-desktop-1280.png", fullPage: true }。

适用场景:功能或页面交付前的设计 QA、落地页评审、对照简报核查、带截图的视觉走查。

限制:视觉截图环节不可跳过,缺少浏览器工具时必须等待用户提供截图;评审依赖简报与运行中的应用;具体安装方式、收费与平台支持暂未提供。