SuperAPI AI 工具集

responsive-layout-review

前端与建站

查看项目

更新于 10-16 02:00

技能介绍

Responsive Layout Review 是一个专注于响应式布局审查与改进的技能,目标覆盖移动端、平板、桌面、Web 应用、SaaS 仪表盘、营销页面以及类桌面工具等场景。其基本主张是:布局应依据内容意图进行适配,而不是依赖任意断点。

用途方面,该技能用于系统性地检查并优化响应式布局在多种设备与视口类别下的表现,适合需要将布局适配逻辑与内容层级、主任务对齐的工作。

主要能力与工作流程如下:

  1. 识别内容层级、主任务以及支持的视口/设备类别。
  2. 阅读 references/responsive-layout-rules.md 参考文件。
  3. 审查布局状态,包括紧凑、中等、宽屏、高密度、键盘、缩放以及窄宽度等情况。
  4. 检查导航、表格、表单、模态框、媒体以及空态/错误态。
  5. 产出断点策略、问题清单与验收检查项。

防护规则(Guardrails):

  • 断点应跟随内容压力点,而不仅仅依据设备名称。
  • 不得在小屏幕上隐藏关键操作。
  • 须保持键盘、焦点、缩放和屏幕阅读器的可用性。

输出格式固定为以下结构: Surface: Primary task:

Responsive strategy:

  • <layout state> -> <behavior>

Findings:

  • <rule id> <issue> -> <fix>

Acceptance checks:

  • <viewport/state check>

适用场景:需要对移动端、平板、桌面、Web 应用、SaaS 仪表盘、营销页面或类桌面工具进行响应式布局审查与改进时。

限制:资料明确说明,不应将本技能用于基础模型无需该技能特定产物契约即可处理的通用建议。其他关于收费、价格、平台支持等具体信息暂未提供。