arrange

评估并改善显得单调、拥挤或结构薄弱的布局与间距，将通用的排布转变为有意设计、富有节奏感的构图。

当问题主要出在空间构图时使用此工作流。如果更大的问题在于优先级不清、强调元素相互竞争、区块标题过于醒目，或标签与数值的权重失衡，请使用 hierarchy。

必须完成的准备工作

用户通过 /arrange 启动此工作流。此技能激活后，加载 $frontend-design——其中包含设计原则、反模式和上下文收集协议。继续之前必须遵循该协议——如果尚无设计上下文，必须先加载 $setup。

---

评估当前布局

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

1. 间距：

   • 间距是否一致，还是随意设定的？（随机的内边距／外边距值）
   • 所有间距是否都一样？（各处内边距相同 = 缺乏节奏）
   • 相关元素是否紧密分组，而组与组之间留有充足空间？
   • 组间距是否大于组内间距？如果不是，分组可能会显得含糊。

2. 视觉层级：

   • 应用眯眼测试：模糊你的（比喻意义上的）视线后，你还能辨认出最重要的元素、次重要的元素和清晰的分组吗？
   • 层级是否有效建立？（仅凭空间和权重就足够——但当前做法有效吗？）
   • 留白是否引导视线关注重要内容？

3. 网格与结构：

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

4. 节奏与变化：

   • 布局是否具有视觉节奏？（紧凑与宽松的间距交替出现）
   • 每个区块的结构是否都相同？（单调重复）
   • 是否有意设置出其不意或突显重点的时刻？

5. 密度：

   • 布局是否过于拥挤？（缺乏留白空间）
   • 布局是否过于稀疏？（留白过多且没有目的）
   • 密度是否符合内容类型？（数据密集型 UI 需要更紧凑的间距；营销页面则需要更多留白）
   • 从更多留白开始，再减少一部分，是否比临时增加留白能带来更整洁的效果？

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

规划布局改进

查阅 frontend-design 技能中的空间设计参考，了解网格、节奏和容器查询的详细指南。 当布局与层级问题重叠时，查阅层级检查清单，了解灰度测试、操作优先级和标签／数值处理。 在决定如何分隔相邻区域时，查阅表面分隔，判断卡片、边框、阴影、间距或背景变化是否更合适。

制定系统化计划：

• 间距系统：采用一致的比例——可以使用框架内置的比例（例如 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 会更简单、更灵活。
• 使用 repeat(auto-fit, minmax(280px, 1fr)) 创建无需断点的响应式网格。
• 复杂的页面布局使用命名网格区域（grid-template-areas）——并在断点处重新定义。
• 当内容有明显的理想宽度时，使用固定宽度或最大宽度；并非所有元素都应始终流动缩放。

打破卡片网格的单调感

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

强化视觉层级

• 使用尽可能少的维度来建立清晰的层级。仅靠空间就足够——元素周围充足的留白能吸引视线。一些最精妙的设计仅凭空间和字重就能营造节奏。只有在更简单的方式不足以达到效果时，才增加颜色或尺寸对比。
• 留意阅读动线——对于从左到右书写的语言，视线通常会从左上自然扫向右下，但主要操作的位置取决于上下文（例如，对话框中位于右下方，导航中位于顶部）。
• 通过邻近和间隔来清晰地划分内容组。
• 不要仅仅因为网格暗示了缩小尺寸，就缩小组件；让组件保持理想尺寸，直到约束迫使你做出妥协。

管理深度与层级

• 建立语义化的 z-index 刻度（下拉菜单 → 粘性元素 → 模态背景层 → 模态框 → toast → 工具提示）
• 建立一致的阴影刻度（sm → md → lg → xl）——阴影应保持微妙
• 使用层级来强化层次，而不是作为装饰

光学调整

• 如果图标在几何上居中，但视觉上看起来偏离中心，可以微调位置 — 但只有在你确定它确实看起来不对时才调整。不要凭猜测调整。

切勿：

• 使用设计尺度之外的任意间距值
• 让所有间距都相等 — 不同的间距能营造层次
• 在间距是唯一分隔方式时，让组内间距等于组间间距
• 把所有内容都放进卡片 — 并非所有内容都需要容器
• 在卡片中嵌套卡片 — 使用间距和分隔线来构建内部层次
• 到处使用相同的卡片网格（图标 + 标题 + 文本，反复排列）
• 将所有内容居中 — 左对齐并采用不对称布局会更有设计感
• 默认套用主视觉指标布局（大数字、小标签、统计数据、渐变）。如果要展示真实用户数据，醒目的指标可以奏效 — 但应展示实际数据，而不是装饰性数字。
• 在 Flexbox 更简单时默认使用 CSS Grid — 选择最简单的工具来解决问题
• 强迫布局填满所有可用宽度
• 使用任意的 z-index 值（999、9999）— 建立有语义的层级体系

验证布局改进

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

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