# 建站
> 依照 spec 生出一頁式網站，包含會流動的首屏
- Skill: `yazelin/skill` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yazelin/skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yazelin/skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yazelin (https://skillmd.com/u/yazelin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yazelin/skill
---
# 階段三：建站
## 動手之前先唸一次 avoid
`spec/site.yaml` 的 `avoid` 是使用者明講「絕對不要」的東西，抄的是他的原話。
**排版之前唸一次，交出去之前再唸一次。**
這一項很容易被忽略，因為它講的是「不要做什麼」，不會主動跳出來提醒你。
實測的例子：「不要像購物網站那樣一格一格標價錢放購物車」——
那句話直接否決掉用卡片格排服務項目的做法，要改用條列。
## 先確認族，再談版面
`docs/families.md` 有七族：克制、訊號、圖鑑、霓虹街機、終端、粗獷、復古介面。
**族是性格，概念是骨架，兩件事分開。** 同一個概念可以做成不同族：
「工單」可以是克制的工程圖，也可以是粗獷的黑黃警示牌。
`templates/` 裡的骨架目前只覆蓋兩族（克制與訊號）。
**其餘五族沒有現成骨架，要照那一份的「關鍵手法」自己寫**，
每一族都附了色彩配方、動畫的性格、三到五個 CSS 層級的手法與參考站。
**族不對就整個重來，不要在錯的族裡調參數。**
一個做電音的人配上克制族，字距與留白調到死都不會對。
## 概念夠強的時候，不要挑版面，用概念生一個
`templates/` 那五種是**沒有概念時的安全牌**。訪談問出了概念，
就照 `docs/concept.md` 的三個問題生一個新的：
1. **容器**：每個區塊被裝在什麼裡面（一片面板、一張圖紙、一格片格、一列欄位）
2. **重複單元**：內容清單怎麼排（一台設備、一個件號、一格底片、一次會談）
3. **分節**：區塊之間怎麼編號（U 數、圖號、底片編號、第幾次）
`examples/` 裡那四個都是這樣生出來的，**沒有一個屬於那五種版面**：
| 範例 | 容器 | 重複單元 | 分節 |
|---|---|---|---|
| 講師 | 一張圖紙加右下角標題欄 | 件號 M-01 | 圖號 DWG-01…05 |
| 後端 | 一片 U 面板加一顆綠燈 | 一台設備 | U01…U05 |
| 攝影 | 一格片格加邊碼 | 一格底片 230-014 | FRAME 036A…060 |
| 諮商 | 一列「標籤｜內容」欄位 | 一次會談 | 單號 0001…0005 |
**這條路的成本沒有比較高**，四份都是純 CSS，加起來不到兩百行版面樣式。
真正的成本在訪談有沒有問出概念。
生出來的東西要跟五種版面一樣通過 `tools/check.mjs`，
而且 `docs/craft.md` 那三條（破除置中、中文行高、標題不要負字距）一樣要遵守。
## 沒有概念的時候才挑版面
`templates/` 裡有六種版面，**結構不一樣，不只是換顏色**。
開 `templates/preview.html` 可以一次看到，每一種都寫了適合誰。
| 版面 | 檔案 | 給誰 |
|---|---|---|
| 堆疊 | `stack.html` | 內容量中等到大。判斷不出來就用這個 |
| 左右分屏 | `split.html` | 內容量中等、想要一點設計感。區塊超過六個就改用堆疊 |
| 編號索引 | `editorial.html` | **內容少的人用這個最划算**，它靠結構撐場面不靠字數 |
| 滿版出血 | `bleed.html` | **手上有好圖的人**。沒有圖不要選 |
| 工控面板 | `console.html` | 製造業、自動化、工業軟體。**這是概念驅動的示範，不是通用版面** |
| 訊號 | `signal.html` | **動效當主角那一路。** 作品是視覺的人、想被記住勝過被讀完的人 |
版面決定於**內容有多少**與**有沒有圖**，不是決定於好不好看。
訪談的時候他能講出來的東西有多少，這裡就會知道。
`console.html` 是特例：它是照一個概念（工廠的控制台）做出來的示範。
**使用者不在那一行就不要拿來用。** 要看的是它怎麼把一個概念變成版面。
實測它跟同樣內容的中性版對打是五比零，做法在 `docs/concept.md`。
挑好或生好之後開工：
```bash
mkdir -p site
cp templates/<挑的版面>.html site/index.html
cp templates/tokens.css templates/base.css site/
cp hero/<挑的動效>.js site/hero.js
```
不要直接改 `templates/`。使用者之後想重來一次，模板要是乾淨的。
## 模板是骨架，不是成品
每一份版面裡填的都是示範內容，有一個叫李默的虛構人物。
那些字全部都要換掉。頁首那一行 ``
換完之後刪掉，`tools/check.mjs` 看到那一行就直接判不通過。
**區塊可以刪。** 模板大致有這些區塊：首屏、我是誰、可以找我做什麼、做過的事、
常見問題、行動呼籲、頁尾。使用者沒東西可以填的區塊就整塊刪掉，
不要留一個只有兩行字的區塊在那裡。求職的人通常不需要「可以找我做什麼」，
名片型的人只需要首屏加頁尾。
## 選風格
`tokens.css` 裡有四組預設，寫在 ``：
| 風格 | 長什麼樣 | 給誰 |
|---|---|---|
| `calm` 克制 | 淺底、細字、大量留白、幾乎沒有顏色 | 求職、顧問、專業服務 |
| `bold` 明確 | 深底、大字、一個亮色 | 賣東西、接案 |
| `gallery` 作品優先 | 介面退到最淡，圖片佔滿 | 設計、攝影、影像 |
| `grand` 大氣 | 墨底、襯線大標、金屬色、超大留白 | 講者、顧問、想要沉穩恢弘那一路 |
預覽的時候網址加 `?vibe=grand` 就能直接換一種看。定案之後把
`` 寫死，並且刪掉檔尾那段讀網址參數的程式。
**四組都只是起點。** 使用者有自己的品牌色就覆蓋 `--accent`；
字太大就調 `--step-4`；留白不夠就加 `--space-6`。
顏色、字級、間距這些都在 `tokens.css` 改。版面本身的樣式在各份 `.html` 自己的
`