impeccable/layout命令实战全解把产品优先级转化为阅读顺序、分组、节奏与可用空间的结构化布局【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccablelayout是 impeccable 设计技能体系中专门处理布局、间距与视觉节奏的增强Enhance类命令其定位在 .kiro/skills/impeccable/SKILL.md 的命令表中被概括为 Fix spacing, rhythm, and visual hierarchy官方参考文档位于 .kiro/skills/impeccable/reference/layout.md。它并非移动盒子的排版工具而是一套完整的诊断方法先通过斜眼测试squint test、分组、节奏、结构、密度、自适应性、极端场景七个维度定位结构性问题再以一次机械扫描作为第二重客观证据最后在空间论点spatial thesis约束下动刀。读完本文你将掌握 impeccable 布局改版的标准工作流、其底层评估模型以及 Live 模式下密度参数的规范写法。说明本文所依据的参考文档在仓库中多处镜像分发除 .kiro/skills/impeccable/reference/layout.md 外还可在 skill/reference/layout.md、plugin/skills/impeccable/reference/layout.md 找到同源副本。一、定位先诊断结构问题再动手移动盒子参考文档开篇即给出整个命令的方法论基石Layout turns product priority into reading order, grouping, rhythm, and usable space. Diagnose the structural problem before moving boxes.即布局 把产品优先级转译为阅读顺序、分组、节奏与可用空间。这句话隐含了一个最重要的告诫——如果结构本身是错的调整间距与对齐只是在掩盖问题。因此 impeccable 的布局流程绝不始于哪里看着不舒服而是始于这个问题到底属于哪一层。在命令元数据 .kiro/skills/impeccable/scripts/command-metadata.json 中layout被进一步描述为Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.由此可见/impeccable layout [target]的典型适用信号是布局不对、间距混乱、视觉层级弱、界面拥挤、对齐问题、希望更好的构图。它与polish最终质量打磨、adapt跨设备适配、distill去繁存简、new-work全新视觉身份有明确边界。值得注意的是这类结构性问题在仓库的反模式测试夹具中也有实证。例如 tests/fixtures/antipatterns/layout.html 用一个左右两栏 HTML 展示了应被标记should flag与应通过should pass两种布局形态其中 flag 栏专门构造了卡片套卡片card inside card嵌套三层卡片等经典结构反模式——这类用容器补偿弱邻近关系的问题正是 layout 参考文档在分组评估中要打击的对象。二、访问者模式Visitor mode布局姿态必须服从用户任务参考文档把布局的设计空间首先交给访问者模式——layout不是无差别套用网格而是按界面所在模式决定结构的可预测程度Persuade Experience说服与体验当所选视觉世界配得上时构图可以不对称、流动甚至刻意具有破坏性。落地页、营销页、作品集这类设计即产品的表面允许更大胆的构图自由度。Operate Read操作与阅读可预测的结构、稳定的密度、可导航的线性本身就是 affordance可供性。后台界面、仪表盘、编辑器、文档这类表面结构必须服从任务完成与信息理解。Native原生平台导航、安全区 inset、适配、触控目标必须遵循 ios.md 或 android.md 的平台参考。同时文档划出一条不可逾越的红线Preserve the established visual world. A layout command changes structure inside it; identity replacement belongs to new-work.也就是说layout在既定视觉世界内部改变结构它不负责更换品牌身份身份级别的替换属于 new-work.md 的职责。理解这一点才能避免布局命令被误用为偷偷换肤。三、两次互相隔离的评估主观诊断与机械扫描缺一不可参考文档要求布局动手之前必须完成两次彼此隔离的评估。当存在可用且被允许的子代理工具时两者应独立运行否则就按顺序自己执行。3.1 布局评估Layout assessment基于渲染或源码证据回答 7 个问题在代表性状态与视口representative states and viewports上逐条检查且每条都必须有渲染或源码证据阅读顺序Reading order做斜眼测试squint test——眯起眼模糊细节后是否仍能按顺序识别出主元素、次元素与主要分组分组Grouping相关项是否彼此靠近、不同组是否被清晰分开还是说容器在补偿邻近关系的不足这正是 tests/fixtures/antipatterns/layout.html 中嵌套卡片的病根节奏Rhythm紧凑与宽松的间距是否构成了有意的韵律还是单一间距值被重复使用、直到所有元素权重相等结构Structure拓扑结构是否匹配内容与任务重复出现的卡片、列或区块是真正等价还是仅仅是某个框架的默认产物密度Density每块区域的信息量是否与使用频率、决策复杂度及访问者模式匹配自适应性Adaptation在窄、中、宽、缩放与本地化状态下什么会重排、折叠、换行、滚动或保持固定DOM 与焦点顺序是否仍与视觉顺序一致极端场景Extremes长内容、空状态、遮罩层、sticky 元素、安全区、小触控目标是否会暴露结构失效3.2 机械扫描Mechanical scan检测器提供第二重客观证据参考文档给出的命令为node .kiro/skills/impeccable/scripts/detect.mjs --json --scope layout [target files or dirs]提示按 .kiro/skills/impeccable/SKILL.md 的 Setup 约定本技能中所有node .../scripts/...命令都会优先以运行时上报的技能基目录skill base directory解析.kiro/skills/impeccable/scripts仅作为未上报基目录时的回退路径执行扫描时请保持 cwd 位于用户项目根目录。因此在实际会话中命令应理解为通过技能基目录解析出的detect.mjs。文档同时强调两点除扫描结果外还要人工检查检测器无法判定的任意间距、溢出、层叠与容器行为机械证据不得混入第一次评估应在两次通道都完成后综合判断再编辑一次干净的扫描并不能证明层级与节奏的正确性——扫描是必要条件不是充分条件。这两次隔离评估的设计意图在于主观视觉判断负责层级与节奏机械扫描负责可量化缺陷二者互不污染避免为了应付检测器而改代码的误区。四、先立空间论点Spatial thesis动手前的五步宣言参考文档要求在编辑前命名name以下内容把隐性的设计直觉显性化为可验证的论点主要的阅读路径或任务路径primary reading or task path什么应该在一起、什么必须分离what belongs together and what must separate哪个元素领衔、哪个元素支撑which element leads and which supports预期的密度与间距节奏intended density and spacing rhythm结构如何随容器、视口、输入方式与内容极端而变化how the structure changes across containers, viewports, input modes, and content extremes。然后执行核心选择Choose the simplest structural model that expresses those relationships. Use layout primitives according to the relationships they control, and name reusable spacing and container roles semantically.即选择能表达这些关系的最简结构模型按关系而非习惯选用布局原语可复用的间距与容器角色要语义化命名。这保证了布局决策是可推理、可复核、可沉淀进设计系统的而不是随机的像素调整。五、应用Apply十二条实战原则参考文档给出了完整的布局实施原则清单逐条继承如下其中每条都服务于用结构表达优先级这一核心按意义分组先使用邻近性proximity再考虑加容器或装饰。用紧凑与宽松间隔的刻意对比制造节奏。使用有文档记录的间距刻度documented spacing scale而非一次性取值通常 4 单位基底能提供 8 单位刻度所缺失的、有用的中间档位。让层级跟随产品优先级而不是跟随框架默认值。让不同内容保持视觉上的可区分但不要把每一组都变成孤立的组件。让响应式行为成为结构性的基于什么仍然重要来决定重排reorder、折叠collapse、回流reflow或揭示reveal。当同一组件出现在不同上下文时优先使用容器感知的组件container-aware components。当gap比子元素 margin 更能直接表达兄弟关系时用gap表达兄弟节奏。即使可见标记很小也要保证触控目标可用。只在它确能澄清状态或层级时才使用深度depth。光学修正optical correction只在检视过渲染结果之后进行。变化本身不是目的重复应服务于识别只有当内容或优先级改变时才打破重复。六、验证Verify没有证据的 yes 不是验证编辑完成后参考文档要求逐条自证每条同样必须有渲染或源码证据然后重跑一次机械扫描斜眼测试仍能按顺序揭示主元素、次元素与主要分组在每个支持的尺寸下阅读与任务路径依然清晰相关内容自然成组无关内容不混为一团紧凑与宽松的间距形成有意的节奏而非单调重复密度匹配使用频率与内容复杂度长文本、空状态、本地化、缩放与动态内容不破坏结构键盘、触摸与辅助技术的顺序与视觉顺序一致最终一次机械扫描没有任何无法解释的发现。文档的原话值得记住Answer each item with rendered or source evidence, then rerun the scan. Do not substitute a bare yes for verification.——即验证的标准动作是给出证据 重扫而不是口头确认。当结构稳定之后工作流将移交给收尾命令/impeccable polish这对应 polish.md 中polish 是精炼而非伪装的重设计的职责边界layout 负责结构polish 负责把结构上的每个细节打磨到发布标准。七、Live 模式签名参数density与var(--p-density, 1)参考文档的最后一节把布局与 impeccable 的 Live 变体模式见 live.md对接起来。当用户在浏览器里对元素跑 Live 变体并选用 layout 动作时每个变体必须声明一个粗粒度的density参数并把间距对着var(--p-density, 1)来写{id:density,kind:range,min:0.6,max:1.4,step:0.05,default:1,label:Density}这份参数契约的解释如下kind: range渲染为滑杆驱动 CSS 变量--p-densitymin: 0.6 / max: 1.4密度可在紧凑约 0.6×到宽松约 1.4×之间连续调节默认值1为基准密度由于 CSS 默认值写作var(--p-density, 1)即使参数控件尚未注入样式仍能优雅回退到基准密度。作者在被选元素的间距声明中统一使用calc()或乘法式写法例如间距 刻度值 ×var(--p-density, 1)即可让单个滑杆通吃整个元素内的间距韵律且零再生成成本——这正是 live.md 参数预算中粗旋钮coarse knobs的设计意图把用户可能嘀咕再紧凑一点 / 再透气一点的轴暴露成控件而不是迫使每一次微调都重新生成一次变体。最后文档给出一个克制性约束Add one structural parameter only when the topology genuinely branches.即只有当拓扑结构真正分叉例如同一内容需要并排双栏 vs 纵向堆叠两种真实不同的结构形态时才允许额外增加一个结构类参数仅仅的间距微调应全部收归density一个旋钮。任何新增参数都必须遵守 live.md 的参数契约0–4 个参数上限、按视觉体量分配预算、range/steps/toggle三种控件语义。八、小结layout 命令的可执行心智模型把参考文档浓缩为一套可复用的流程阶段关键动作判定/产出定模式按 Persuade/Experience/Operate/Read/Native 选择布局姿态决定可预测 vs 可破坏的构图许可两次隔离评估7 问布局评估含斜眼测试 机械扫描detect.mjs --json --scope layout结构问题清单证据化立论点命名阅读路径、分组关系、主从、密度节奏、跨视口变化Spatial thesis应用邻近性优先、4 单位刻度、gap表达兄弟节奏、结构性响应式最简结构模型验证逐条证据自证 重跑扫描无遗留未知扫描发现后 → 交接polishLive 参数声明density0.6–1.4 范围滑杆间距对着var(--p-density, 1)拓扑真正分叉时才加第二个结构参数这套方法论的核心资产是把布局问题从模糊的审美感觉中剥离出来变成可提问、可扫描、可验证、可参数化的四步工程动作。对于希望让 AI 排版更可控的开发者而言理解这份参考文档就等于掌握了 impeccable 处理一切结构不对类改版请求时的标准答案——先证明问题在哪一层再选择最简模型表达关系最后用参数化把密度决定权交还给使用者。若需在原生平台应用同一套流程请并行阅读 ios.md 与 android.md若本次请求实际是要替换整个视觉身份而非调整内部结构请改走 new-work.md 的流程。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考