# 一個屬於他的概念

**這一份是這條線上最容易被跳過、但影響最大的一步。**
版面乾淨、字級有階層、留白正確，做完之後仍然會被說「看起來像模板」。
多數時候問題出在別的地方：**這個站沒有一個屬於這個人的想法**。

## 一個例子

[musicalwebdev.com](https://musicalwebdev.com/) 是一位開發者兼教學者的個人站。
整個站的概念是**百老匯的節目單**：首屏是一張傾斜的 Playbill 封面，
名字直排在右側像海報邊條，頂端跑著歌詞，導覽項目前面掛著音符。

技術上它用了什麼？**沒有 WebGL，沒有 canvas，唯一的外部 script 是流量統計。**
實際查過它的 CSS：`rotate()` 八次、`writing-mode` 直排四次、
`box-shadow` 位移陰影十八次、三組 keyframes、等寬字、grid。全部都是普通 CSS。

**它比多數精緻的模板更像人做的，而它用的技術更少。**
差別在於它有一個概念，而那個概念來自她是誰。

## 怎麼問出來

訪談問完風格之後，加這一題：

> 你這一行有沒有一個東西，別人一看就知道是你們在做的？
> 一個物件、一張表、一個場景都可以。

給他幾個例子讓他好回答：

| 他是做什麼的 | 可能的概念 |
|---|---|
| 攝影 | 底片格、印樣（contact sheet）、光圈刻度 |
| 排程或物流顧問 | 排班表、甘特圖、路線卡 |
| 烘焙 | 食譜卡、配方比例表 |
| 工廠系統 | 工單、儀表、報工終端 |
| 寫作 | 校對符號、稿紙格、目錄頁 |
| 音樂 | 節目單、五線譜、播放清單 |

**答不出來就不要硬掰一個。** 沒有概念的乾淨版面，比有一個牽強概念的版面好得多。
概念要嘛來自他真的每天在碰的東西，要嘛不要。

## 跟模型要概念，不要跟它要程式碼

**掰概念的時候幻覺是功能，掰程式碼的時候才是缺點。** 模型很會想一個有說服力的概念，
所以概念這一步交給它，CSS 自己寫。

### 實際有用的問法

問法很重要。開放地問「幫我想個設計」會拿到一堆形容詞。
下面這個三行的格式跨五個行業都問得出可以直接動手的答案：

```
幫下面這個人的個人品牌網站想一個「概念」。

- <姓名>，<職稱>，<行業>
- 一句話：<他的首屏標題>
- 補充：<他的自我介紹>

概念的意思是：一個物件、一個場景、或一種印刷品的隱喻，來自這個人每天真的在碰的東西，
而且能讓整個版面的結構跟著它走，不只是換顏色或加圖示。

限制：只能用純 CSS（旋轉、粗框、位移陰影、直排文字、漸層、遮罩、格線、偽元素、
CSS 動畫），不能用圖片、不能用 JavaScript、不能連外部資源。

只回三行，不要任何其他文字：
第一行：概念的名字，六個字以內。
第二行：這個概念在版面上的三個具體做法，用頓號分隔，每個都要是 CSS 做得到的。
第三行：為什麼這個概念屬於這個人，一句話。
```

**第三行是關鍵。** 逼它講「為什麼屬於這個人」，答不上來的概念就是套上去的。

### 要問哪一個模型

實測問三個家族、四個行業，各家的表現差很多：

| 模型 | 表現 |
|---|---|
| `glm-5.3-flash` | **四次都給出可用的三行**，而且第三行真的接得回這個人的定位 |
| `qwen3.5:397b` | 概念名稱可以，但第二行常常只給屬性名稱（「CSS 隨機旋轉、層疊陰影、網格排版」），不能直接動手 |
| `deepseek-v4-pro` | 四次有兩次回空字串（推理把 token 全部用掉），而且輸出是簡體 |

**問兩三個家族，挑第三行最站得住的那一個。** 概念題不像事實題那樣要看收斂，
不同的好概念可以並存；判準是「屬於這個人」，不是「幾個模型都提到」。

順帶一提：長的程式碼別跟 gemini-web 要，它拿不到（Gemini 會把長程式碼丟進 Canvas 面板）。
概念與短片段沒問題。

### 已經問出來的概念，可以直接參考

這些是實際問出來、而且做成網站驗證過的：

| 行業 | 概念 | 版面上怎麼做 |
|---|---|---|
| 產品設計（工業軟體） | 工廠控制台 | 黑黃警示斜紋、工單編號、按下去會位移的實體按鈕、直排側標 |
| 企業內訓講師 | 工程圖說 | 格線圖紙、粗框、右下角標題欄（繪製／版本／比例）、虛線引線接直排標註 |
| 後端與系統可靠性 | 機櫃 | 左右軌道的螺絲孔、每個區塊一片面板、右上角慢慢呼吸的綠燈、等寬字狀態列 |
| 婚禮攝影 | 接觸印樣 | 上下兩排底片齒孔、格線印樣頁、首屏那格被紅筆圈起來、外緣直排邊碼 |
| 諮商心理師 | 會談紀錄單 | 粗框表頭、格線紙底、「主訴」欄放他的一句話、**「處理」欄永遠留白** |

其他問出來但沒做的：轉接頭（講師）、值班日誌與連續報表紙帶（後端）、
等待的取景框（攝影）、話語便利貼（諮商）。**同一個人可以有好幾個成立的概念**，
挑一個就好。

## 這件事到底有沒有用：五個行業的實測

每個行業做兩個版本，**文案一字不差，只有版面不同**，然後問三個看得懂圖的模型
「哪一邊比較像專業人士親手為這個人設計的」，左右順序各跑一次。

| 行業 | 概念版 : 中性版 |
|---|---|
| 產品設計 | 5 : 0 |
| 企業內訓講師 | 4 : 1 |
| 後端工程師 | 4 : 2 |
| 攝影師 | 5 : 1 |
| 諮商心理師 | 5 : 1 |
| **合計** | **23 : 5** |

三個模型各自也都偏向概念版（gemma4 是 5 比 3、kimi 是 7 比 0、qwen 是 6 比 2），
投票的位置分布沒有壓過結果。

**概念版在五個行業全勝，而且模型給的理由都直接點名概念本身**：
「以終端機介面呼應後端專業」「膠片邊框、鏡頭紅環與直式文字」
「以會談紀錄單為視覺概念」「將工程藍圖概念融入設計」。

成品在 `examples/`，四份都可以直接開來看。

**這是這條線上單一改動效果最大的一件事。** 排版數值的微調完全比不上：
行高、字距、間距那幾條照著改，同一個測試的票數一票都沒動。

## 五個概念裡重複出現的手法

做完五個之後，這幾樣每次都會用到，可以當成起手式：

1. **粗框加不模糊的位移陰影**（五個全用）。`box-shadow: 8px 8px 0` 那種，
   不要用模糊的陰影，模糊陰影是另一種設計語言。
2. **一種格線或紙底**（印樣、圖說、紀錄單）。`repeating-linear-gradient` 兩行做完。
3. **直排文字**（印樣、圖說、控制台）。`writing-mode: vertical-rl`，
   中文限定，英文模板做不出來，成本極低。
4. **編號**（五個全用）。`counter()` 或 `font-variant-numeric: tabular-nums`。
   工單號、場次號、第幾次會談、U01。
5. **一到三度的旋轉**（印樣、紀錄單的印章、控制台的標籤）。超過五度就像壞掉。

還有一個更重要的：**每個概念都找到了自己表達「檔期／狀態」的方式**。
控制台是儀表讀數、機櫃是綠燈與 STATUS 列、印樣是紅框標籤、
紀錄單是「候補」欄、圖說是虛線的尺寸標註。

**「現在能不能接你」是個人品牌站上最有用的一句話**，而概念給了它一個位置。
沒有概念的版面只能把它塞進一般的文字區塊。

## 概念要撐起整頁，不是只做首屏

**這一節是踩過坑之後重寫的。** 原本這裡寫的是「概念只在首屏做足，內文回到乾淨」。
照那樣做出來的四個範例，首屏各有各的樣子，**首屏以下的結構完全一樣**：
同一組 `wrap → 標題 → 段落 → 清單`。四個站看起來就是同一個模板換了顏色。

更糟的是當時的比對測試只截首屏，所以完全沒量到塌掉的那一半。

**正確的做法是回答三個問題，讓概念決定整頁的骨架：**

**一、容器長什麼樣？** 每一個區塊被裝在什麼裡面。
機櫃就是一片一片的面板、圖說就是一張一張的圖紙、紀錄單就是一列一列的欄位、
印樣就是一格一格的片格。**這個容器要從第一屏用到頁尾。**

**二、重複的單元是什麼？** 內容清單怎麼排。
作品在印樣裡是片格、在機櫃裡是一台設備、在圖說裡是一張分解圖、在紀錄單裡是一次會談。
**不要全部退回成項目符號清單。**

**三、怎麼分節？** 區塊之間靠什麼隔開、怎麼編號。
機櫃用 U 數、圖說用圖號、印樣用底片編號、紀錄單用第幾次。

三個問題都回答了，這個站才會從頭到尾是同一件東西。

### 換底色要覆寫 tokens，不要自己發明一組

概念常常需要換整片底色（機櫃是黑的、印樣是深灰、圖紙是淡藍）。
**要換就覆寫 `--bg` 與 `--fg`，不要自己開一個 `--rack` 之類的變數去畫 body。**

實測踩過：印樣那份只寫了 `--sheet` 當底色，沒有覆寫 `--fg`。
系統偏好淺色的時候 `gallery` 的 `--fg` 翻成深色，**深字配深底，連結整個看不見**，
而 `tools/check.mjs` 的對比檢查比的是 `--bg`，所以放行了。
現在檢查器會提醒「body 的背景不是 `var(--bg)`」。

### 還是有分寸

概念決定**結構**，不決定密度。同一個容器重複二十次會累，
所以：容器與編號從頭到尾一致，裝飾性的細節（印章、齒孔、警示斜紋）只在首屏出現一次。

判準：**把概念的所有裝飾拿掉之後，版面的骨架還看得出是那個東西**，就對了。

## 便宜的手法

這些全部是普通 CSS，沒有依賴，也不吃效能：

```css
/* 傾斜一點點。角度小於 3 度看起來像手放的，大於 5 度看起來像壞掉 */
.card { transform: rotate(-1.4deg); }

/* 粗框加位移陰影，紙卡的感覺。不要用模糊的陰影，那是另一種語言 */
.card { border: 2px solid var(--fg); box-shadow: 8px 8px 0 var(--fg); }

/* 名字或標籤直排，當作版面的邊條 */
.sidename { writing-mode: vertical-rl; letter-spacing: 0.12em; }

/* 票券的缺口 */
.ticket { mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) ; }

/* 稿紙方格或工程紙的底 */
.grid-paper {
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 頂端的跑馬燈。記得包 prefers-reduced-motion */
@keyframes slide { to { transform: translateX(-50%); } }
.marquee > div { display: flex; gap: 3rem; animation: slide 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee > div { animation: none; } }
```

## 三條紅線

**一、概念不能承載資訊。** 關掉所有概念元素之後，這一頁還是要讀得懂。
把重要的內容做成裝飾的一部分，第一個受害的是用螢幕閱讀器的人。

**二、不要用 emoji 或剪貼畫代替概念。** 在標題前面放一個相機圖示不是概念，
那只是圖示。概念是它改變了版面怎麼排。

**三、裝飾只做一次，結構從頭做到尾。** 印章、齒孔、斜紋這種裝飾在首屏出現一次就夠，
但**容器、重複單元、編號方式要貫穿整頁**。
只做首屏的結果就是四個站長得一樣，那個坑我踩過了。

## 驗收

做完之後問自己兩題：

1. 把這個概念換成另一個人的行業，這個版面還成立嗎？**還成立就代表概念沒進去**，
   只是換了顏色。
   **把首屏遮起來再問一次同樣的問題。** 遮起來就分不出來，代表概念只做了一屏。
2. 使用者看到之後有沒有笑一下，或說「對，就是這個」。
   **沒有反應就是沒打中**，回去改概念，不要改設計。