← ClaudeAtlas

arrangelisted

arrange 布局:修复 layout/spacing/visual hierarchy 问题,建立有节奏感的视觉结构。
wzyxdwll/ccgx-workflow · ★ 12 · AI & Automation · score 85
Install: claude install-skill wzyxdwll/ccgx-workflow
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. --- ## 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