用途：为用户的真实界面产出可用的移动优先布局代码，包括重构页面外壳、网格或组件布局，而非讲 CSS 教程。核心原则是内容决定结构：按内容形状选择 Grid 或 Flexbox，在内容真正断裂处设置断点，其余交给弹性轨道吸收。
主要能力：处理页面结构、对齐、响应式、网格、重叠/溢出缺陷与断点策略。流程为先检查代码库（定位目标文件、识别 Tailwind/CSS Modules/styled-components 等样式体系、检索固定宽度、绝对定位、负外边距、断点数量、overflow-x 与 100vw 等布局异味），再按需一次性询问关键屏幕与最小/最大视口（默认 320px–1440px，内容上限约 1200–1280px）。
决策规则：行列都需对齐（页面外壳、仪表盘、画廊、对齐标签表单）用 Grid；单向且尺寸由内容决定（导航栏、按钮行、标签列表）用 Flexbox；未知数量卡片网格用 repeat(auto-fit, minmax(min(100%, 280px), 1fr))，无需媒体查询。页面外壳用 grid-template-areas，窄屏折叠区域，宽屏用 minmax(0, 1fr) 防止宽子元素撑破轨道。断点由内容断裂处决定，每组件 2–3 个，复用项目已有断点令牌。组件在不同宽度容器中渲染时用容器查询（container-type: inline-size 与 @container），视口媒体查询只用于页面级结构。媒体用 aspect-ratio 加 object-fit: cover，不用固定高度。单位上间距与字号用 rem，轨道用 %/fr/minmax()，文本行宽用 ch，px 仅用于边框等真实像素场景。
验证与输出：在 320、375、768、1024、1440 检查横向滚动、列过窄、行宽超出 45–75ch、触控目标小于 44px、内容被粘性元素遮挡。交付代码并附布局变更、决策表、已移除异味表与各宽度验证结果。质量要求包括 320px 无横向滚动、容器无固定像素宽、二维用 Grid 一维用 Flexbox、正文行宽 45–75ch、移动端触控目标不小于 44×44px、间距使用项目比例、每组件不超过 3 个断点、视觉重排不打乱 DOM 与 Tab 顺序。
限制：资料未提供具体安装命令、收费方式与平台支持信息；该技能依赖项目已有的间距与断点令牌，并与其他前端设计技能衔接。