用途：评估并改进单调、拥挤或结构薄弱的布局与间距，把通用排列变成有意图、有节奏的构图。
主要能力：检查间距是否一致或随意、是否所有间距相同、相关元素是否紧密分组；用眯眼测试判断视觉层级；检查网格与结构是否清晰、是否到处使用相同卡片网格、是否全部居中；评估节奏与变化、密度是否匹配内容类型。
使用方式：必须先调用 /frontend-design，其中包含设计原则、反模式与上下文收集协议；若尚无设计上下文，必须先运行 /teach-impeccable。随后按步骤评估现状、制定系统化计划、系统性改进并验证。改进要点包括：建立一致间距尺度（框架内置尺度、基于 rem 的 token 或自定义尺度），语义化命名 token（如 --space-xs 到 --space-xl），用 gap 代替 margin 处理同级间距，用 clamp() 实现流式间距；创建视觉节奏（相关元素 8-12px，不同区块 48-96px，区块内间距有变化，必要时采用非对称构图）；一维布局用 Flexbox，二维布局用 Grid，响应式网格可用 repeat(auto-fit, minmax(280px, 1fr))，复杂页面用命名网格区域；打破卡片网格单调，仅在内容确实独立且可操作时用卡片，禁止卡片嵌套；用最少维度强化层级，优先用空间和字重；建立语义化 z-index 与阴影尺度；仅在确有把握时做光学微调。
适用场景：前端界面布局优化、间距系统整理、视觉层级与节奏调整。
限制：资料未提供具体收费、价格、平台支持范围或效果保证；不得使用尺度外的任意间距值、让所有间距相等、把所有内容包进卡片、到处使用相同卡片网格、全部居中、默认使用 CSS Grid 或任意 z-index 值。