SuperAPI AI 工具集

design-review

设计与创作

查看项目

更新于 10-15 21:04

技能介绍

用途:design-review 用于对应用进行 UI 与设计审查,评估视觉质量与可用性,发现通常需要专业设计师才能识别的问题,包括响应式断点、无障碍合规、视觉层级、间距一致性、排版可读性与国际化准备度。

主要能力:审查引用 WCAG 2.1 AA、Material Design / Human Interface Guidelines、ISO 9241-110、APCA 等标准。检查分为五类:响应式设计(RES,如视口 meta、横向溢出、触控目标≥48x48px、移动端可读性、导航适配、图片缩放、表单可用性);无障碍(A11Y,如对比度、alt 文本、表单标签、标题层级、焦点可见、键盘导航、跳转链接、ARIA、lang 属性、模态焦点陷阱、错误关联、减少动效、闪烁内容);视觉一致性(VIS,如间距尺度、字体尺度、配色数量、交互元素样式、对齐、加载/空/错误状态、深色模式);排版与可读性(TYP,如正文字号、行高、行长、字体加载、层级、对齐);国际化准备度(I18N,如硬编码字符串、文本扩展、RTL、日期数字本地化、字体回退、图标含文字)。

使用方式:流程分五阶段——EDUCATE 说明检查内容与原因;SCOPE 自动检测框架、CSS 方案、设计系统、路由与现有 a11y 工具,并向用户确认目标 URL、关键页面、目标设备、品牌规范与关注点,定义断点(移动 375px/390px、平板 768px、桌面 1280px/1920px);ANALYZE 用 new_session 并设 record_evidence: true 打开浏览器,逐页执行检查,用 act 调整视口、inspect_page 抓取 DOM 与截图,用 JavaScript 计算对比度、测量尺寸、检查 ARIA 与标题层级,并用键盘操作测试焦点;REPORT 生成结构化报告保存到 shiplight/reports/design-review-{date}.md,含总分、分类得分、按严重级别列出的发现、证据截图与置信度;REMEDIATE 为每条发现给出修复指引与 YAML 回归测试,保存到 shiplight/tests/design-review.test.yaml。置信度低于 50% 不上报。最后用 close_session 关闭会话,并用 generate_html_report 生成可分享报告。

适用场景:无设计师审查即上线 UI、发布或演示前、UI 重大变更或重设计后、检查 WCAG 2.1 AA 合规、验证多设备响应式行为。

限制:资料未提供具体收费、价格、平台支持范围与效果保证;部分检查依赖浏览器会话与项目可访问性,i18n 与 RTL 等检查需按实际适用性判断。