Back to Details

arrange

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.
Use this when the problem is mainly spatial composition. If the bigger issue is unclear priority, competing emphasis, loud section titles, or label/value weighting, use 
hierarchy
.
评估并改进显得单调、拥挤或结构薄弱的布局与间距——将普通的排布转变为有意图、有节奏的构图。
当问题主要涉及空间构成时使用本技能。如果核心问题是优先级不明确、强调冲突、章节标题过于醒目，或者标签/值的权重问题，请使用
hierarchy
。

MANDATORY PREPARATION

强制准备工作

Users start this workflow with 
/arrange
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
用户通过
/arrange
启动此工作流。本技能激活后，请加载$frontend-design——它包含设计原则、反模式以及上下文收集协议。在继续操作前请遵循该协议——如果尚无设计上下文，你必须先加载$setup。

Assess Current Layout

评估当前布局

Analyze what's weak about the current spatial design:
  1. Spacing:
    • Is spacing consistent or arbitrary? (Random padding/margin values)
    • Is all spacing the same? (Equal padding everywhere = no rhythm)
    • Are related elements grouped tightly, with generous space between groups?
    • Is there more space around groups than within groups? If not, the grouping may feel ambiguous.
  2. Visual hierarchy:
    • Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings?
    • Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?)
    • Does whitespace guide the eye to what matters?
  3. Grid & structure:
    • Is there a clear underlying structure, or does the layout feel random?
    • Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
    • Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
  4. Rhythm & variety:
    • Does the layout have visual rhythm? (Alternating tight/generous spacing)
    • Is every section structured the same way? (Monotonous repetition)
    • Are there intentional moments of surprise or emphasis?
  5. Density:
    • Is the layout too cramped? (Not enough breathing room)
    • Is the layout too sparse? (Excessive whitespace without purpose)
    • Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air)
    • Would starting with more whitespace and removing some produce a cleaner result than adding whitespace reactively?
CRITICAL: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention.
分析当前空间设计的薄弱点：
  1. 间距：
    • 间距是一致的还是随意的？（随机的padding/margin值）
    • 所有间距都一样吗？（各处padding相等=没有节奏）
    • 相关元素是否紧密分组，组与组之间有充足的间距？
    • 组周围的间距是否大于组内间距？如果不是，分组可能会显得模糊。
  2. 视觉层级：
    • 进行眯眼测试：（比喻性地）眯起眼睛——你还能识别出最重要的元素、次重要的元素，以及清晰的分组吗？
    • 层级是否有效实现？（仅靠间距和字重就足够——但当前的方法有效吗？）
    • 留白是否引导视线关注重要内容？
  3. 网格与结构：
    • 有没有清晰的底层结构，还是布局感觉很随机？
    • 是不是到处都用相同的卡片网格？（图标+标题+文本，无限重复）
    • 所有内容都居中吗？（左对齐加不对称布局会更有设计感，但这并非硬性规定）
  4. 节奏与多样性：
    • 布局有视觉节奏吗？（紧密/宽松间距交替出现）
    • 每个章节的结构都一样吗？（单调重复）
    • 有没有有意设置的惊喜或强调点？
  5. 密度：
    • 布局是不是太拥挤？（没有足够的呼吸空间）
    • 布局是不是太稀疏？（无意义的过度留白）
    • 密度是否与内容类型匹配？（数据密集型UI需要更紧凑的间距；营销页面需要更多留白空间）
    • 先留出更多留白再逐步删减，会不会比被动添加留白得到更干净的效果？
关键提示：布局问题往往是界面感觉「不对劲」的根本原因，即便颜色和字体都没问题。空间是一种设计材料——要有意图地使用它。

Plan Layout Improvements

规划布局改进方案

Consult the spatial design reference from the frontend-design skill for detailed guidance on grids, rhythm, and container queries. Consult the hierarchy checklist for grayscale testing, action prioritization, and label/value treatment when layout and hierarchy problems overlap. Consult the surface separation when deciding whether cards, borders, shadows, spacing, or background shifts are the right way to separate adjacent regions.
Create a systematic plan:
  • Spacing system: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency.
  • Density stance: Should this start roomy and be tightened, or intentionally begin dense because the product demands it?
  • Hierarchy strategy: How will space communicate importance?
  • Layout approach: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts.
  • Rhythm: Where should spacing be tight vs generous?
请参考frontend-design技能中的空间设计参考，获取关于网格、节奏和容器查询的详细指导。 当布局和层级问题重叠时，请参考层级检查清单，了解灰度测试、操作优先级和标签/值处理的相关内容。 在决定使用卡片、边框、阴影、间距还是背景变化来分隔相邻区域时，请参考表面分隔参考。
制定系统性的计划：
  • 间距系统：使用一致的尺度——可以是框架内置尺度（如Tailwind）、基于rem的token或自定义系统。具体数值不如一致性重要。
  • 密度定位：应该从宽松开始再收紧，还是因为产品需求故意从紧凑开始？
  • 层级策略：如何用空间传达重要性？
  • 布局方案：什么结构适合内容？一维布局用Flex，二维布局用Grid，复杂页面布局用命名区域。
  • 节奏：哪些地方应该用紧凑间距，哪些地方应该用宽松间距？

Improve Layout Systematically

系统性改进布局

Establish a Spacing System

建立间距系统

  • Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers.
  • Use a scale with meaningful jumps; if adjacent values are too similar, the system won't help you decide quickly.
  • Name tokens semantically if using custom properties: 
    --space-xs
    through 
    --space-xl
    , not 
    --spacing-8
  • Use 
    gap
    for sibling spacing instead of margins — eliminates margin collapse hacks
  • Apply 
    clamp()
    for fluid spacing that breathes on larger screens
  • 使用一致的间距尺度——框架尺度（Tailwind等）、基于rem的token或自定义尺度都可以。重点是取值要来自预定义的集合，而非随意的数字。
  • 使用有明显差异的尺度等级；如果相邻值太接近，系统无法帮你快速做决策。
  • 如果使用自定义属性，请用语义化方式命名token：从
    --space-xs
    到
    --space-xl
    ，而不是
    --spacing-8
  • 使用
    gap
    设置同级元素间距，代替margin——这样可以避免margin塌陷的hack方案
  • 使用
    clamp()
    实现流体间距，在大屏幕上有更舒展的表现

Create Visual Rhythm

打造视觉节奏

  • Start with slightly too much white space, then pull it back until the page feels balanced
  • Tight grouping for related elements (8-12px between siblings)
  • Generous separation between distinct sections (48-96px)
  • Varied spacing within sections — not every row needs the same gap
  • Asymmetric compositions — break the predictable centered-content pattern when it makes sense
  • Make group boundaries obvious: more space around a set than inside it
  • 先留出稍多的留白，再逐步收紧，直到页面感觉平衡
  • 相关元素紧密分组（同级元素间距8-12px）
  • 不同章节之间宽松分隔（48-96px）
  • 章节内部使用变化的间距——不是每一行都需要相同的gap
  • 不对称构图——在合适的时候打破可预测的居中内容模式
  • 让分组边界更明显：组周围的间距要大于组内间距

Choose the Right Layout Tool

选择合适的布局工具

  • Use Flexbox for 1D layouts: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks.
  • Use Grid for 2D layouts: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control.
  • Don't default to Grid when Flexbox with 
    flex-wrap
    would be simpler and more flexible.
  • Use 
    repeat(auto-fit, minmax(280px, 1fr))
    for responsive grids without breakpoints.
  • Use named grid areas (
    grid-template-areas
    ) for complex page layouts — redefine at breakpoints.
  • Use fixed or max widths when the content has an obvious ideal width; not every element should scale fluidly forever.
  • 1D布局使用Flexbox：元素行、导航栏、按钮组、卡片内容、大多数组件内部布局。Flex更简单，适合绝大多数布局场景。
  • 2D布局使用Grid：页面级结构、仪表盘、数据密集型界面，以及任何需要同时控制行和列的场景。
  • 当使用带
    flex-wrap
    的Flexbox更简单灵活时，不要默认用Grid。
  • 使用
    repeat(auto-fit, minmax(280px, 1fr))
    实现无需断点的响应式网格。
  • 复杂页面布局使用命名网格区域（
    grid-template-areas
    ）——在断点处重新定义。
  • 当内容有明显的理想宽度时，使用固定宽度或最大宽度；不是每个元素都要无限流体缩放。

Break Card Grid Monotony

打破卡片网格的单调感

  • Don't default to card grids for everything — spacing and alignment create visual grouping naturally
  • Use cards only when content is truly distinct and actionable — never nest cards inside cards
  • Vary card sizes, span columns, or mix cards with non-card content to break repetition
  • 不要什么都用卡片网格——间距和对齐本身就能自然形成视觉分组
  • 只有当内容确实独立且可操作时才使用卡片——绝对不要在卡片里嵌套卡片
  • 变化卡片尺寸、跨列，或者混合卡片与非卡片内容来打破重复

Strengthen Visual Hierarchy

强化视觉层级

  • Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient.
  • Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation).
  • Create clear content groupings through proximity and separation.
  • Avoid shrinking components just because a grid suggests it; let them stay at their ideal size until constraints force compromise.
  • 用最少的维度实现清晰的层级。仅靠间距就足够——元素周围充足的留白会吸引注意力。一些最精妙的设计仅通过间距和字重就能打造出节奏。只有当更简单的手段不够用时，再添加颜色或大小对比。
  • 注意阅读流——在LTR语言中，视线自然会从左上扫到右下，但主要操作的位置取决于上下文（例如对话框中在右下角，导航中在顶部）。
  • 通过邻近性和分隔创建清晰的内容分组。
  • 不要因为网格的限制就缩小组件；让它们保持理想尺寸，直到约束条件迫使你妥协。

Manage Depth & Elevation

管理深度与视觉高程

  • Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip)
  • Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle
  • Use elevation to reinforce hierarchy, not as decoration
  • 创建语义化的z-index尺度（dropdown → sticky → modal-backdrop → modal → toast → tooltip）
  • 建立一致的阴影尺度（sm → md → lg → xl）——阴影应该很微妙
  • 用高程强化层级，而非作为装饰

Optical Adjustments

视觉微调

  • If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively.
NEVER:
  • Use arbitrary spacing values outside your scale
  • Make all spacing equal — variety creates hierarchy
  • Make spacing within a group equal to spacing between groups when spacing is the only separator
  • Wrap everything in cards — not everything needs a container
  • Nest cards inside cards — use spacing and dividers for hierarchy within
  • Use identical card grids everywhere (icon + heading + text, repeated)
  • Center everything — left-aligned with asymmetry feels more designed
  • Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers.
  • Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job
  • Force layouts to fill every inch of available width
  • Use arbitrary z-index values (999, 9999) — build a semantic scale
  • 如果一个图标几何上居中但视觉上看起来偏了，可以微调位置——但前提是你确定它确实看起来不对。不要凭猜测调整。
绝对禁止：
  • 使用间距系统之外的随意数值
  • 让所有间距都相等——多样性才能打造层级
  • 当间距是唯一的分隔方式时，让组内间距等于组间距
  • 把所有内容都包在卡片里——不是所有内容都需要容器
  • 嵌套卡片——使用间距和分隔线来实现内部层级
  • 到处使用相同的卡片网格（图标+标题+文本，无限重复）
  • 所有内容都居中——左对齐加不对称布局更有设计感
  • 默认使用hero指标布局（大数字、小标签、统计数据、渐变）作为模板。如果展示真实用户数据，突出的指标是可以的——但它应该显示实际数据，而非装饰性数字。
  • 当Flexbox更简单时默认使用CSS Grid——要用最简单的工具完成工作
  • 强制布局填满所有可用宽度
  • 使用随意的z-index值（999、9999）——要建立语义化的尺度

Verify Layout Improvements

验证布局改进效果

  • Squint test: Can you identify primary, secondary, and groupings with blurred vision?
  • Rhythm: Does the page have a satisfying beat of tight and generous spacing?
  • Hierarchy: Is the most important content obvious within 2 seconds?
  • Breathing room: Does the layout feel comfortable, not cramped or wasteful?
  • Consistency: Is the spacing system applied uniformly?
  • Responsiveness: Does the layout adapt gracefully across screen sizes?
Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.
  • 眯眼测试：模糊视线时，你能识别出主要内容、次要内容和分组吗？
  • 节奏：页面的紧松间距有没有令人舒适的节奏感？
  • 层级：最重要的内容能在2秒内被识别吗？
  • 呼吸感：布局看起来是否舒适，既不拥挤也不空旷？
  • 一致性：间距系统是否得到了统一应用？
  • 响应式表现：布局在不同屏幕尺寸下是否能优雅适配？
请记住：空间是最被低估的设计工具。拥有合适节奏与层级的布局，哪怕是简单的内容也会显得精致且有意图。