layout

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 /impeccable — 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 /impeccable teach first.

调用 /impeccable —— 它包含设计原则、反模式以及上下文收集协议。在继续操作前遵循该协议——如果暂未存在设计上下文，你必须先运行 /impeccable teach。

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.

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

间距：
- 间距是一致的还是随意的？（随机的 padding/margin 值）
- 所有间距是否完全相同？（各处 padding 相等 = 无节奏）
- 相关元素是否紧密归组，不同组之间是否有充足的留白？
视觉层级：
- 做眯眼测试：（想象）眯起眼睛——你还能识别出最重要的元素、次重要元素以及清晰的分组吗？
- 层级是否实现得足够高效？（仅靠间距和字重就足够了，但当前方案是否有效？）
- 留白是否能引导视线聚焦到重要内容上？
网格与结构：
- 是否有清晰的底层结构，还是布局看起来很随机？
- 是否所有地方都用了一模一样的卡片网格？（图标+标题+文本，无限重复）
- 是否所有内容都居中对齐？（左对齐加非对称布局的设计感更强，但这不是硬性规定）
节奏与多样性：
- 布局有没有视觉节奏？（紧密/宽松的间距交替出现）
- 每个版块的结构都一模一样吗？（单调重复）
- 是否有刻意设计的惊喜点或强调区域？
密度：
- 布局是否太拥挤？（没有足够的呼吸空间）
- 布局是否太稀疏？（无意义的过度留白）
- 密度是否匹配内容类型？（数据密集型UI需要更紧凑的间距；营销页面需要更多留白）

关键提示：即便颜色和字体没问题，布局问题也通常是界面感觉「不对劲」的根本原因。留白是设计素材——要有意识地使用它。

Plan Layout Improvements

规划布局优化方案

Consult the spatial design reference from the impeccable 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?

查阅 impeccable 技能中的空间设计参考，获取网格、节奏和容器查询的详细指南。

制定系统性的规划：

间距体系：使用一致的刻度——可以是框架自带的刻度（如 Tailwind）、基于 rem 的 token，或是自定义体系。具体数值的重要性远低于一致性。
层级策略：如何用空间传递内容重要性？
布局方案：什么结构适配内容？1D 布局用 Flex，2D 布局用 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 的 token、自定义刻度都可以。重点是数值要来自定义好的集合，而非随意取值。
如果使用自定义属性，用语义化方式命名 token：
```
--space-xs
```
到
```
--space-xl
```
，不要用
```
--spacing-8
```
这类命名
同级元素间距用
```
gap
```
而非 margin——避免处理 margin 塌陷的 hack
用
```
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）
版块内使用差异化间距——不是每一行都需要相同的 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.

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.

用最少的维度实现清晰的层级。仅靠间距就足够了——元素周围充足的留白会吸引视线。一些最成熟的设计仅靠间距和字重就能实现节奏。仅当更简单的手段不够时，再添加颜色或大小对比。
注意阅读流：在从左到右的语言环境中，视线自然会从左上扫到右下，但主操作按钮的位置要结合上下文（比如弹窗里放在右下，导航里放在顶部）。
通过 proximity（近距原则）和分隔打造清晰的内容分组。

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 刻度（下拉菜单 → 吸顶元素 → 模态框背景 → 模态框 → toast 提示 → tooltip 提示）
搭建一致的阴影刻度（sm → md → lg → xl）——阴影要足够 subtle（柔和）
用 elevation（ elevation 层级）强化层级，不要用作装饰

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

如果一个图标几何上居中但视觉上看起来偏位，可以微调位置——但只有你确定它确实看起来不对的时候再调整，不要凭猜测修改。

绝对不要：

使用间距体系外的随意数值
让所有间距都相等——多样性才能打造层级
把所有内容都包在卡片里——不是所有内容都需要容器
嵌套卡片——内部层级用间距和分割线实现
所有地方都用一模一样的卡片网格（图标+标题+文本，重复出现）
所有内容都居中——左对齐加非对称的设计感更强
默认用 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秒内被识别吗？
呼吸空间：布局感觉舒适，不会太拥挤也不会太空旷吗？
一致性：间距体系是否被统一应用？
响应性：布局在不同屏幕尺寸下能优雅适配吗？

记住：留白是最被低估的设计工具。拥有合适节奏和层级的布局，哪怕是简单内容也会显得精致且有设计感。