六種版面

結構不一樣，不只是換顏色。前四種都可以再套四種風格，網址後面加 ?vibe= 就換。第五種是概念驅動的示範，第六種把動效變成主角。

堆疊 stack.html

吸頂導覽、靠左首屏、區塊上下堆疊。最通用，內容多也撐得住，不會出錯。

給誰：內容量中等到大的人，接案、顧問、求職。判斷不出來就用這個。

克制明確 作品優先大氣

左右分屏 split.html

首屏左字右動效，內容區左邊是黏著的區塊標題、右邊捲動。雜誌感最強。

給誰：內容量中等、想要一點設計感的人。區塊超過六個就改用堆疊。

克制明確 作品優先大氣

編號索引 editorial.html

每個區塊掛一個大編號，服務用條列不用卡片。字級對比拉到最大，像一本年鑑的目錄。

給誰：內容少的人用這個最划算，因為它靠結構撐場面，不靠字數。

克制明確 作品優先大氣

滿版出血 bleed.html

首屏滿版、作品一張一列鋪滿寬度，文字疊在圖上。

給誰：手上有好圖的人，攝影、設計、影像。沒有圖不要選， 空的滿版區塊比小圖更難看。這個版面的示範圖刻意留空，所以連結開起來會是破圖， 那是提醒你先準備圖。

作品優先大氣 明確

工控面板 console.html

黑黃警示斜紋、粗框、不模糊的位移陰影、直排側標、工單編號。

給誰：製造業、自動化、工業軟體那一行。這是「概念驅動」的示範， 不是給所有人用的版面。換一個行業就要換一個概念，做法在 docs/concept.md。 實測它跟同內容的中性版對打是五比零。

看看

訊號 signal.html

動效鋪滿整個首屏，名字用漸層剪成看動效的窗，配顆粒與暗角，附深淺主題切換。

給誰：作品本身就是視覺的人、想被記住勝過想被讀完的人。 前面五種是「動效當背景」，這一種反過來——動效是主角。 內容量大、要被仔細讀的人不要選。

看看

挑好之後：把那一份複製成 site/index.html， 連同 tokens.css、base.css 一起， 再把 hero/ 裡選的動效複製成 site/hero.js。 首屏動效另外有一頁可以比較，在 hero/preview.html。