用途:评估并改进单调、拥挤或结构薄弱的布局与间距,把通用排布转为有意图、有节奏的构图。
主要能力:从间距、视觉层级、网格与结构、节奏与变化、密度五个维度诊断问题;建立一致的间距系统;用空间与字重构建层级;选择合适布局工具;打破卡片网格单调;管理深度与阴影;做光学微调。
必要用法:必须先调用 /impeccable,其中包含设计原则、反模式与上下文收集协议;若尚无设计上下文,必须先运行 /impeccable teach。随后按评估现状、制定计划、系统性改进、验证的顺序执行。
关键做法:间距取自一致尺度(如 Tailwind、rem 令牌或自定义系统),用语义化令牌命名;用 gap 代替 margin 处理同级间距;用 clamp() 实现流式间距;相关元素紧凑分组,不同区块留出充足间隔;一维布局用 Flexbox,二维布局用 Grid,复杂页面用命名网格区域;响应式网格可用 repeat(auto-fit, minmax(280px, 1fr));建立语义化 z-index 与阴影尺度。
适用场景:界面布局显得“不对劲”但配色字体正常时;卡片网格重复单调;间距随意或处处相同;层级不清;密度与内容类型不匹配。
限制与禁止:不使用尺度外的任意间距值;不让所有间距相等;不把所有内容包进卡片;不嵌套卡片;不处处使用相同卡片网格;不全部居中;不默认使用英雄指标模板;不在 Flexbox 更简单时默认用 Grid;不使用任意 z-index(如 999、9999)。验证时可用眯眼测试、节奏、层级、呼吸感、一致性、响应式等检查。具体收费、价格与平台信息暂未提供。