layout

layout 技能概覽

layout 技能能幫你改善 UI 工作中的間距、層級與構圖，特別是當介面看起來扁平、擁擠，或排列得像機械式排版時。它最適合需要實用的 UI Design 版面指引、而不是泛泛的美化處理的設計師與代理：例如留白分配不均、群組感薄弱、格線重複性太高，以及畫面無法清楚引導視線的情況。

layout 技能的用途

當真正的問題是結構，而不只是視覺精修時，就該使用 layout 技能。它的設計目標是把粗糙的排版整理成更清楚的閱讀順序、更強的節奏感，以及更有意圖的間距，而不必把整個產品重做一遍。

什麼情況最適合

如果提示裡提到的是間距問題、對齊問題、資訊密集的儀表板、單調的卡片格狀排列，或重點不夠明確，這個技能就很合適。若任務只和色彩、品牌或插圖有關，layout 技能通常不是對的工具。

這個技能有什麼不同

這個技能的立場很明確：它會先診斷目前的版面，再開始修改。這讓它比一句「把它弄得好看一點」更有用，因為它會把脈絡、間距邏輯與結構修正納入考量，而不是隨機做些視覺微調。

如何使用 layout 技能

安裝 layout 技能

使用 layout 安裝步驟對應的 repository 安裝流程：npx skills add pbakaus/impeccable --skill layout。接著先從 SKILL.md 開始，並依照裡面的準備要求操作，再提出修改需求。

給技能正確的輸入

layout 技能最吃重的是你有沒有提供目標畫面、目前的版面問題，以及真正重要的限制條件。弱提示會說「改善這個頁面」。更好的提示會像這樣：「請改善這個 analytics dashboard 的版面，讓摘要指標成為主要視覺焦點、卡片之間不要那麼擁擠，並且在不改變內容順序的前提下，維持桌面版間距緊湊。」

先看對的檔案

先讀 SKILL.md，因為裡面包含必要的準備步驟與版面改善流程。如果你的環境裡還有輔助文件，也一併檢查 README.md、AGENTS.md、metadata.json，以及任何 rules/、resources/、references/ 或 scripts/ 資料夾。就這個 repository 而言，這個技能大致是自成一體的，所以判斷品質的關鍵，主要在於是否真正理解 SKILL.md。

用「先診斷、再修正」的迭代方式

這個技能的設計意圖，是先評估間距、層級與格線結構，再動手修改。你可以先請它指出哪裡不夠好，再要求有針對性的調整：把相關群組收緊、拉開不同區塊的距離、減少重複且完全一致的間距，並讓主要元素更清楚。比起直接跳到最後的精修，這種工作流更能發揮 layout 技能的效果。

layout 技能 FAQ

layout 技能只適合視覺設計師嗎？

不是。它也很適合前端開發者、產品設計師，以及需要實際版面決策的 AI 代理。只要你能描述畫面與它的目標，這個技能就能幫你整理構圖。

它跟一般提示有什麼不同？

一般提示常常只會產出表層的視覺調整。layout 技能則多了一套決策框架：先評估現有結構、找出層級問題，再有意圖地改善間距。當問題是構圖而不是單純美觀時，這通常會帶來更好的結果。

layout 技能對初學者友善嗎？

可以，只要你能說出目標畫面和痛點就行。初學者只要用白話描述哪裡不對勁，通常就能得到不錯的結果，例如「太擠了」、「沒有明確焦點」或「每張卡片都在搶戲」。

什麼情況不該使用 layout 技能？

如果主要工作是內容撰寫、色彩系統建立、動效設計，或 component API 設計，就不要用它。當 UI 結構本身已經很穩定，而真正需要的只是文案修正或視覺品牌調整時，它也不太適合。

如何強化 layout 技能

給更明確的版面限制

layout 技能要有好結果，最關鍵的是那些會影響間距決策的限制：手機版還是桌面版、資訊密集還是留白充足、內容順序是否固定、卡片最小尺寸是多少，或是否必須保留既有元件。這些資訊可以避免輸出流於泛泛的「讓間距更好看」。

用商業語言描述層級

如果你想要更好的 UI Design 結果，就直接說出哪個、哪個第二、哪個第三要先吸引注意力。例如：「讓營收總額最醒目，把篩選條件放次要位置，並把輔助指標往下移。」這比只說「層級要更強」更有用。

注意常見失敗模式

最常見的失敗，是間距被平均化得太過頭，讓每個空隙看起來都一樣大，整個頁面因此失去節奏。另一種是只做表面整理，卻忽略了結構本身。如果第一次產出還是顯得平板，下一步就應該明確要求群組、節奏與重點的調整，而不是籠統地要求大改版。

搭配可看截圖的回饋反覆調整

在第一版輸出之後，先檢查一眼就能不能看出閱讀順序、相關項目有沒有被分組、以及視線是否落在預期的焦點上。接著只做一個聚焦的追問：減少雜亂、拉開區塊間距，或強化主區塊。