arrange

评估并改善布局与间距，让单调、拥挤或结构薄弱的设计更具节奏感，将普通的排列转化为经过精心设计的构图。

强制准备

调用 /impeccable — 其中包含设计原则、反模式和 上下文收集协议。继续之前，请遵循该协议 — 如果尚无设计上下文，必须先运行 /impeccable teach。

---

评估当前布局

分析当前空间设计的薄弱之处：

1. 间距：

   • 间距一致还是随意？（随机的内边距／外边距值）
   • 所有间距都一样吗？（到处使用相同的内边距 = 缺乏节奏）
   • 相关元素是否紧密分组，而不同分组之间留有充足空间？

2. 视觉层级：

   • 进行眯眼测试：模糊你的（想象中的）视线后，是否仍能辨认出最重要的元素、次重要的元素和清晰的分组？
   • 层级是否有效？（仅靠空间和视觉重量就足够 — 但当前做法是否奏效？）
   • 留白是否引导视线关注重点？

3. 网格与结构：

   • 是否有清晰的底层结构，还是布局显得杂乱无章？
   • 是否到处都在使用相同的卡片网格？（图标 + 标题 + 文本，不断重复）
   • 是否所有内容都居中？（左对齐和非对称布局通常更显设计感，但并非一成不变的规则）

4. 节奏与变化：

   • 布局是否具有视觉节奏？（紧凑与宽松的间距交替出现）
   • 每个部分的结构是否都一样？（单调重复）
   • 是否有刻意安排的惊喜或强调之处？

5. 密度：

   • 布局是否过于拥挤？（缺乏留白空间）
   • 布局是否过于稀疏？（留白过多且没有明确用途）
   • 密度是否符合内容类型？（数据密集型 UI 需要更紧凑的间距；营销页面则需要更多留白）

重要：即使颜色和字体没有问题，布局问题往往也是界面感觉“不对劲”的根本原因。空间是一种设计素材 — 请有意识地运用。

规划布局改进

请参阅 impeccable 技能中的空间设计参考，了解网格、节奏和容器查询的详细指导。

制定系统化的计划：

• 间距系统：使用一致的比例 — 可以是框架内置的比例（例如 Tailwind）、基于 rem 的令牌，或自定义系统。具体数值没有一致性重要。
• 层级策略：如何通过空间传达重要性？
• 布局方式：哪种结构适合内容？一维布局用 Flex，二维布局用 Grid，复杂页面布局用命名区域。
• 节奏：哪些地方应该紧凑，哪些地方应该宽松？

系统化改进布局

建立间距系统

• 使用一致的间距比例 — 框架比例（Tailwind 等）、基于 rem 的令牌或自定义比例都可以。关键是数值应来自明确规定的集合，而不是随意设定。
• 使用自定义属性时，请采用语义化的令牌名称：--space-xs 到 --space-xl，而不是 --spacing-8
• 同级元素之间使用 gap 而不是外边距 — 避免外边距折叠的变通做法
• 使用 clamp() 实现流式间距，让较大屏幕上的布局更舒展

营造视觉节奏

• 紧密分组相关元素（同级元素之间相距 8-12px）
• 宽松分隔不同部分（间距为 48-96px）
• 在各个部分内采用不同的间距 — 并非每一行都需要相同的间隔
• 采用非对称构图 — 合适时打破可预期的居中内容模式

选择合适的布局工具

• 一维布局使用 Flexbox：项目行、导航栏、按钮组、卡片内容以及大多数组件内部布局。对于大多数布局任务，Flex 更简单、更合适。
• 二维布局使用 Grid：页面级结构、仪表板、数据密集型界面，以及需要协调控制行和列的任何布局。
• 不要默认使用 Grid：如果用带有 flex-wrap 的 Flexbox 会更简单、更灵活，就不要默认使用 Grid。
• 使用 repeat(auto-fit, minmax(280px, 1fr)) 创建无需断点的响应式网格。
• 对于复杂的页面布局，使用命名网格区域（grid-template-areas）——并在断点处重新定义。

打破卡片网格的单调感

• 不要默认所有内容都使用卡片网格——间距和对齐自然就能形成视觉分组
• 只有当内容确实独立且可操作时才使用卡片——绝不要在卡片内嵌套卡片
• 调整卡片大小、跨列布局，或混合卡片与非卡片内容，以打破重复感

强化视觉层次

• 使用尽可能少的维度来建立清晰的层次。仅靠留白就可能足够——元素周围充足的留白能吸引视线。一些最精致的设计仅通过留白和字重就营造出节奏感。只有在更简单的方式不足以奏效时，才增加颜色或尺寸对比。
• 留意阅读动线——在从左到右（LTR）的语言中，视线通常会从左上扫向右下，但主要操作的位置取决于具体情境（例如，对话框中位于右下角，导航中位于顶部）。
• 通过邻近和区隔创建清晰的内容分组。

管理深度与层级

• 建立语义化的 z-index 层级（下拉菜单 → 粘性元素 → 模态背景 → 模态框 → Toast 提示 → 工具提示）
• 建立一致的阴影层级（sm → md → lg → xl）——阴影应当 subtle
• 用层级强化视觉层次，而不是作为装饰

视觉微调

• 如果图标在几何中心对齐后看起来仍然偏离视觉中心，可以微调它的位置——但只有在确定它确实看起来不对时才这样做。不要凭猜测调整。

绝不要：

• 使用超出间距规范的任意间距值
• 让所有间距都相等——变化能创造层次
• 把所有内容都包进卡片——并非所有内容都需要容器
• 在卡片内嵌套卡片——使用间距和分隔线来建立内部层次
• 到处使用相同的卡片网格（图标 + 标题 + 文本，反复重复）
• 将所有内容居中——左对齐并保持不对称，会让设计感更强
• 默认使用主视觉指标布局（大数字、小标签、统计数据、渐变）作为模板。如果展示真实用户数据，醒目的指标可以发挥作用——但应显示实际数据，而不是装饰性数字。
• 在 Flexbox 更简单时默认使用 CSS Grid——选择最简单且适合当前任务的工具
• 使用任意 z-index 值（999、9999）——建立语义化层级

验证布局改进

• 眯眼测试：模糊视线时，能否辨认出主要内容、次要内容和分组？
• 节奏：页面是否有令人舒适的节奏感，紧凑与宽松的间距是否交替出现？
• 层次：最重要的内容是否能在 2 秒内一目了然？
• 呼吸空间：布局是否令人舒适，而非拥挤或浪费空间？
• 一致性：间距系统是否得到了统一应用？
• 响应式：布局能否在不同屏幕尺寸下自然适配？

请记住：留白是最常被低估的设计工具。节奏和层次恰当的布局，能让简单的内容也显得精致而用心。