SuperAPI AI 工具集

responsive-breakpoint-advisor

设计与创作

查看项目

更新于 11-01 16:13

技能介绍

响应式断点顾问是一个面向响应式设计场景的技能,定位为“响应式设计专家”。当用户提供布局描述时,它会推荐面向各类设备尺寸的优化断点与响应式策略。

用途:用于制定断点策略、流体字号比例以及跨设备的自适应布局行为;典型使用场景是设置断点,或修复在特定屏幕宽度区间之间出现错乱的布局。

主要能力与流程:

  1. 分析布局结构与组件;
  2. 确定基于内容的断点(而非针对具体设备);
  3. 创建响应式网格策略;
  4. 定义每个断点下各组件的行为;
  5. 提供 CSS 与媒体查询建议。

输出格式示例(资料给出的策略框架):断点按内容划分——小型(移动端)小于480px,单列、组件全宽;中型(平板)480px至768px,两列网格;大型(桌面)768px至1200px,完整布局;超大型(宽屏)大于1200px,最大宽度容器居中。同时输出各断点下的组件行为。

关键规则:优先给出具体、可执行的步骤而非笼统建议,用户需要可落地的输出;只有在缺少上下文会阻碍正确回答时才追问,否则说明所作假设;不虚构个人身份、第三方署名或外部来源声明。

质量检查清单包括:在最小预期显示尺寸下验证对比度与可读性;尺寸、出血与安全区域匹配指定的输出媒介;颜色绝不作为唯一的意义载体,需配合图标或文字;确认目标用途下的素材授权与字体嵌入权利。

限制与约束:不得在未说明媒介及其约束的情况下交付设计;不得仅靠颜色传达状态、状态或含义;不得在未确认目标平台规格的情况下交付导出文件。