Layout

/impeccable layout

适用场景

• 页面缺少清晰主次。
• 内容本身不错，但排布把价值藏住了。
• 你想先解决结构，再考虑色彩和动效。

什么时候用

/impeccable layout 适合那种“技术上没错，但就是不呼吸”的页面。所有地方 padding 一样，卡片网格单调到麻木，内容从左铺到右，层级只能靠字号硬拉开。当一个布局“感觉不对”，但你又说不上具体哪里不对时，就该用它。

典型触发语： “所有东西都太挤了”、 “读起来像一堵墙”、 “我不知道该先看哪里”。

工作方式

这个技能会沿着五个布局维度排查：

1. 间距：间距尺度是不是一致，还是到处都是随机的 13px；相关元素有没有紧密归组，组与组之间有没有真正的留白；节奏是否存在。
2. 视觉层级：用户能不能在 2 秒内落到主操作上；层级有没有真的在工作，还是所有东西都在喊。
3. 网格与结构：有没有底层网格，还是元素纯靠堆；有没有基线对齐。
4. 节奏：页面是在紧与松之间交替，还是所有地方都一样。
5. 密度：布局是太挤还是太浪费，密度是否匹配内容类型。

常见修法包括：重建间距尺度、引入非对称、把呆板的等宽卡片网格改成“主元素 + 支撑元素”的混合布局，并给主操作真正的空间。

试试看

/impeccable layout the settings page

典型变化：

• 间距尺度统一为 8 / 16 / 24 / 48 / 96px
• section 之间拉到 48px，行间距 16px，表单字段组 8px
• 主操作从表单流里被拉出来，前后留 32px 缓冲
• 去掉装饰性边框，改成依靠间距分组
• 重新平衡侧栏和主栏比例（280 / flex，而不是死板的 25 / 75）

常见陷阱

• 把 arrange 和 distill 混为一谈。 如果问题是东西太多，先跑 /impeccable distill。Layout 负责排对现有这组东西，而不是先决定删什么。
• 低估 diff 的规模。 如果页面压根没有网格，layout 会先给你建一个。那种情况下改动往往会比你预期大。
• 忽略层级结论。 如果它告诉你“没有任何东西是主角”，那光调间距救不了。你需要的是内容决策，而不是布局小修。

相关命令

• Distill
• Adapt
• Typeset