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.
评估并改善单调、拥挤或结构松散的布局与间距——将通用排列转化为具有目的性、富有节奏的排版设计。

MANDATORY PREPARATION

必备准备步骤

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.
调用/frontend-design——其中包含设计原则、反模式以及上下文收集协议。在继续操作前请遵循该协议——如果尚无设计上下文，你必须先运行/teach-impeccable。

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?
  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)
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. 间距：
    • 间距是一致的还是随意设置的？（随机的内边距/外边距值）
    • 是否所有间距都相同？（所有地方内边距相等=无节奏）
    • 相关元素是否紧密分组，不同组之间是否有充足的间距？
  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.
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.
  • 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的令牌，还是自定义系统。具体数值的重要性低于一致性。
  • 层级策略：如何通过空间传达重要性？
  • 布局方法：哪种结构适合内容？一维布局用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.
  • 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的令牌或自定义比例都可行。重要的是数值来自定义集合，而非任意数字。
  • 如果使用自定义属性，请为令牌赋予语义化名称：如--space-xs到--space-xl，而非--spacing-8
  • 使用
    gap
    设置同级元素间距，而非外边距——消除外边距折叠的技巧
  • 使用
    clamp()
    实现自适应间距，在大屏幕上有更好的呼吸感

Create Visual Rhythm

创造视觉节奏

  • 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
  • 相关元素紧密分组（同级元素间距8-12px）
  • 不同区块之间宽松分隔（间距48-96px）
  • 区块内使用多样化间距——并非每一行都需要相同的间隙
  • 不对称排版——在合理的情况下打破可预测的居中内容模式

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.
  • 一维布局使用Flexbox：项目行、导航栏、按钮组、卡片内容、大多数组件内部结构。Flex更简单，适合大多数布局任务。
  • 二维布局使用Grid：页面级结构、仪表盘、数据密集型界面、任何需要同时协调控制行和列的场景。
  • 不要默认使用Grid——当Flexbox配合
    flex-wrap
    更简单灵活时，优先选择Flexbox。
  • 使用
    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.
  • 使用最少的维度实现清晰的层级。仅通过空间就足够——重要元素周围的充足留白能吸引视线。一些最精致的设计仅通过空间和权重就能实现节奏。只有当更简单的方式不足以实现时，再添加颜色或尺寸对比。
  • 注意阅读流——在从左到右的语言中，视线自然会从左上扫描到右下，但主要操作的位置取决于上下文（如对话框中的右下位置、导航栏中的顶部位置）。
  • 通过邻近性和分隔创建清晰的内容分组。

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层级（下拉菜单 → 粘性元素 → 模态框背景 → 模态框 → 提示框 → 工具提示）
  • 建立统一的阴影层级（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
  • 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
  • Use arbitrary z-index values (999, 9999) — build a semantic scale
  • 如果图标在几何上居中但视觉上看起来偏移，可以微调——但只有当你确定它确实看起来不对时才这么做。不要随意调整。
绝对禁止：
  • 使用间距系统之外的任意间距值
  • 所有间距都设置为相等——多样性才能形成层级
  • 所有内容都用卡片包裹——并非所有内容都需要容器
  • 在卡片内嵌套卡片——使用间距和分隔线实现内部层级
  • 所有地方都使用相同的卡片网格（图标+标题+文本，重复）
  • 所有内容都居中——左对齐的不对称布局更具设计感
  • 默认使用英雄指标布局（大数字、小标签、统计数据、渐变）作为模板。如果展示真实用户数据，突出的指标是可行的——但应显示实际数据，而非装饰性数字。
  • 当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秒内被识别？
  • 呼吸空间：布局是否感觉舒适，既不拥挤也不浪费？
  • 一致性：间距系统是否统一应用？
  • 响应式：布局能否在不同屏幕尺寸下优雅适配？
记住：空间是最被低估的设计工具。拥有合适节奏和层级的布局，即使是简单内容也能显得精致且富有目的性。