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

必备准备工作

Use the frontend-design skill — 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:

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?
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?
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)
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?
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.

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

间距:
- 间距是否一致，还是随意设置？（随机的内边距/外边距值）
- 是否所有间距都完全相同？（所有地方内边距一致=无节奏）
- 相关元素是否紧密分组，不同组之间是否留有充足间距？
视觉层次:
- 进行眯眼测试：（象征性地）模糊双眼——你是否仍能识别出最重要的元素、次重要元素以及清晰的分组？
- 视觉层次是否有效实现？（仅通过间距和权重就可以实现——但当前方案是否奏效？）
- 留白是否能引导视线聚焦到关键内容上？
网格与结构:
- 是否有清晰的底层结构，还是布局看起来杂乱无章？
- 是否所有地方都使用相同的卡片网格？（图标+标题+文本，无休止重复）
- 是否所有内容都居中对齐？（左对齐的不对称布局通常更具设计感，但并非硬性规则）
节奏与多样性:
- 布局是否具有视觉节奏？（紧凑/宽松间距交替出现）
- 每个版块的结构是否完全相同？（单调重复）
- 是否有刻意设计的惊喜或强调元素？
密度:
- 布局是否过于拥挤？（没有足够的呼吸空间）
- 布局是否过于稀疏？（无意义的大量留白）
- 密度是否与内容类型匹配？（数据密集型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.

用最少的维度实现清晰的层次。仅通过间距就足够——重要元素周围的大量留白会吸引视线。一些最精致的设计仅通过间距和字重就实现了节奏。只有当简单方式不足以实现时，再添加颜色或尺寸对比。
注意阅读流——在从左到右（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尺度（下拉菜单 → 粘性元素 → 模态框背景 → 模态框 → 提示框 → 工具提示）
建立统一的阴影尺度（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秒内是否能明确最重要的内容？
呼吸感测试：布局是否舒适，既不拥挤也不浪费空间？
一致性测试：间距系统是否统一应用？
响应式测试：布局在不同屏幕尺寸下是否能优雅适配？

记住：空间是最被低估的设计工具。拥有合适节奏和层次的布局，即使是简单内容也能显得精致且富有设计感。