DESIGN COMPOSITIONS / 40 RECIPES

構圖可以學，
版型不必一樣。

這裡整理 Claude 的 40 個網站編輯式構圖配方。每類都能點進去，查看實際渲染的元件，而不只是閱讀設計規格。先決定內容動線、再選構圖、功能元件與動效。

01 / 05

H01–H12 · 12 種

Hero 構圖

用邊注、錯位、編輯式圖片、海報、巨大年份與路徑取代制式左右兩欄。

02 / 05

S01–S08 · 8 種

宣言、服務適配、書信、暗色分區、長文導讀、分類與證據。

03 / 05

L01–L06 · 6 種

帳簿式列表、時間線、索引表、折疊、日期和目錄。

04 / 05

R01–R06 · 6 種

留白梯度、色帶、線條層級、欄位鏡像與字形節奏。

05 / 05

C01–C08 · 8 種

低壓邀請、服務界線、真實證明、流程與資料來源。

先看 12 款網站版型的整頁閱讀路徑，再選這裡的構圖配方，搭配功能元件與動效元件。最後要檢查 1440、1280、768、390px 的實際畫面，而不是只看 Build 成功。

原始規格、設計決策、逐站原始碼觀察及配方來源請見專案中的 .ai/astro-editorial-layout-design/。示範內容不代表正式服務或真實資格。