Layout

/impeccable layout

适用场景

• 頁面缺乏明確的重點。
• 內容很好，但版面組合掩蓋了它。
• 你想要在處理色彩或動態之前先建立更強的流動感。

何時使用

/impeccable layout 適用於那些技術上沒有問題但也沒有呼吸空間的頁面。到處都是相同的 padding、單調的卡片網格、內容從頭到尾跑滿、僅靠大小區分的層次。當版面配置「感覺不對」但你無法具體說出為什麼時使用它。

好的觸發點：「所有東西都感覺擁擠」、「讀起來像一堵牆」、「我不知道該先看哪裡」。

運作方式

技能從五個版面配置維度進行檢查：

1. 間距：間距比例是否一致，還是有隨機的 13px 間隙，相關元素是否緊密分組且組間有充裕空間，是否有任何節奏可言。
2. 視覺層次：眼睛是否在 2 秒內落在主要操作上，層次是否在真正發揮作用還是所有東西都在喊叫。
3. 網格和結構：是否有底層網格還是版面隨機，元素是否對齊基線。
4. 節奏：頁面是否在緊湊和寬鬆間距之間交替，還是一切都均勻一致。
5. 密度：版面是過於擁擠還是浪費空間，密度是否匹配內容類型。

修復通常涉及重建間距比例、引入不對稱、將單調的網格折疊為帶 hero 和支援元素的混合版面，以及給主要操作真正的空間。

試試看

/impeccable layout the settings page

典型變更：

• 間距比例統一為 8 / 16 / 24 / 48 / 96px
• 區塊分隔 48px，行間距 16px，表單欄位群組 8px
• 主要操作從表單流程中拉出，附帶 32px 緩衝
• 裝飾性邊框移除，替換為以間距驅動的分組
• 側邊欄和主欄比例重新平衡（280 / flex vs 25 / 75）

注意事項

• 混淆 arrange 與 distill。 如果問題是東西太多，先執行 /impeccable distill。Layout 是用來排列已經是正確集合的內容。
• 期望它挽救一個破碎的網格。 如果頁面完全沒有網格，arrange 會建立一個。只是要知道 diff 會比你預期的大。
• 忽略層次判定。 如果 arrange 說「沒有任何東西是主要的」，多少間距工作都無法修復。你需要的是內容決策，不是版面調整。

相关命令

• Distill
• Adapt
• Typeset