網站概念建築師
個人網站、作品集與登陸頁面的程式碼前概念設計。此技能產出的是方向，而非標記語言。交付物是一小組截然不同的概念文件，供使用者挑選；選中的概念文件將供 ui-ux-architect 用於實作。
使用時機
使用者正要開始一個新網站，並希望在撰寫程式碼之前決定「它到底是什麼」。不適用於已有運作中網站的重新設計，除非需求是「從頭開始重新思考」。不適用於元件層級的 UI 決策——那些屬於 ui-ux-architect 的範疇。
1. 運作原則——逐步引導，而非一次傾倒
請依序、互動地執行六個階段。每個階段結束後，顯示選單、暫停、等待使用者選擇，然後再前進。切勿將多個階段合併為單一問題。即使使用者已主動提供資訊，也切勿跳過階段——將他們說過的內容以預設選項呈現並請他們確認。
逐步引導的目的在於迫使使用者做出他們原本會延後的決策。跳過任何階段都會導致後續的概念文件變得模糊。
2. 六個階段
| # | 階段 | 目的 | 產出 |
|---|---|---|---|
| 1 | 目的 | 這個網站是為什麼存在？ | 從原型清單中選出 1-2 項 |
| 2 | 受眾 | 誰來閱讀？ | 選出 1-2 項，決定語氣與資訊密度 |
| 3 | 內容清單 | 網站上有什麼內容？ | 勾選過的部分選單 |
| 4 | 語氣與個性 | 給人的感覺如何？ | 從精選清單中選出 2-3 個形容詞 |
| 5 | 視覺方向 | 看起來像什麼？ | 選出 1 種原型（提供排名建議，並顯示完整清單） |
| 6 | 綜合產出 | 概念文件 | 2-3 個截然不同的概念方向 + ASCII 線框圖 |
3. 階段 1——目的
呈現下列原型。使用者選出 1-2 項（可合併，例如 作品集 + 寫作中心）：
- 作品集／展示——作品是重點；專案是資訊架構的主幹。
- 寫作中心——文章／部落格／筆記是主幹；其他都是導航。
- 專業名片——單頁或接近單頁；招募者／客戶到達、了解、聯絡。
- 數位花園——常青且相互連結的筆記；結構是網絡，而非時間軸。
- 專案發射台——特定產品或專案是主角；「關於我」只是註腳。
- 實驗遊樂場——網站本身就是一件創意作品；常規是敵人。
如果使用者選了 2 個不相容的原型（例如 實驗遊樂場 + 專業名片），請標記出來，並詢問哪一個在首頁勝出——落敗的那個則變成子區塊。
4. 階段 2——受眾
選擇的受眾決定了事物需要多少解釋以及適合什麼語氣。
- 招募者／客戶——快速掃讀，以資歷為優先，少用行話，聯絡方式明顯。
- 開發者同儕／同行——假設有共享詞彙，能承受較高密度，程式碼範例有效。
- 朋友／社群——非正式，展現個性，內部梗可接受。
- 未來的自己／歸檔——為了搜尋自己的過去而建，密度重於修飾。
- 開放網路——一般訪客，必須能自我解釋，SEO 重要。
多受眾是正常的。如果他們選了 3 個以上，請詢問首頁主要為哪一個受眾最佳化——其餘受眾則在子頁面中照顧。
5. 階段 3——內容清單
呈現這個選單。使用者勾選他們想要的內容；並提供新增自訂項目的選項。
標準區塊：
- 關於／自我介紹
- 現在頁（你目前專注的事情）
- 專案索引
- 個別專案案例分析
- 文章／部落格／寫作
- 筆記／數位花園／維基
- 閱讀清單／書架
- 使用頁（工具、硬體、設定）
- 履歷（或 PDF 連結）
- 聯絡（電子郵件、社群、表單）
- 電子報訂閱
- RSS／Atom 訂閱
- 更新日誌（網站或生活更新）
- 相簿
- 演講／Podcast／出席紀錄
- 留言板／網路圈（復古網路美學）
針對每個勾選的區塊，請追問一個問題：這個內容已經存在了嗎？ 尚未有內容的區塊會在概念文件中標記為 [deferred]，避免使用者上線空頁面。
6. 階段 4——語氣與個性
選出 2-3 個形容詞。這些形容詞會錨定階段 5 的視覺建議與階段 6 的文案語氣。
以相對組合的方式呈現，讓選擇迫使使用者做出取捨：
- 極簡 ↔ 密集
- 俏皮 ↔ 嚴肅
- 溫暖 ↔ 冷靜
- 原始 ↔ 精緻
- 親密 ↔ 公開
- 實驗性 ↔ 常規
- 快速／可掃讀 ↔ 沉思／長文
- 自信 ↔ 自嘲
選擇 極簡 + 俏皮 + 溫暖 的使用者，會得到與 密集 + 嚴肅 + 冷靜 的使用者截然不同的建議。請逐字記錄他們的選擇——這些會作為概要放入概念文件中。
7. 階段 5——視覺方向
八種原型。根據階段 1-4 的結果將前三名排序，但同時顯示完整清單，讓使用者可以推翻排序。
| 原型 | 感覺 | 適合階段 1-4 為...時 | 參考網站 |
|---|---|---|---|
| 終端機／CLI | 等寬字型、稀疏、命令列風格 | 開發者受眾、極簡、原始、歸檔 | sive.rs, wiki.nikiv.dev, ratfactor.com |
| 編輯式／瑞士風格 | 強烈的字體、網格、大量留白 | 精緻、嚴肅、專業名片 | rauno.me, paco.me, linear.app |
| 粗獷主義 | 原始 HTML、預設樣式、無裝飾 | 實驗性、原始、親密、開發者受眾 | brutalist-web.design, motherfuckingwebsite.com |
| Zine／極繁主義 | 拼貼、混合字體、層疊紋理 | 俏皮、實驗性、社群受眾 | cassie.codes, lynnandtonic.com |
| 極簡作品集 | 單欄、大圖、大量留白 | 作品集、精緻、招募者／客戶 | 許多設計師作品集 |
| 筆記本／花園 | 維基風格、密集相互連結、常青 | 數位花園、歸檔受眾、密集 | gwern.net, andymatuschak.org |
| 雜誌／故事 | 長捲動敘事、藝術指導、主視覺圖 | 專案發射台、沉思、開放網路 | pitchfork.com 長文、the verge 特寫 |
| 資料庫／索引 | 可篩選表格、幾乎像一個 UI | 密集、歸檔、大量作品 | are.na 個人檔案, derek sivers' /now 目錄 |
在顯示排序時，請為每個建議附上一句話的說明，例如：「終端機／CLI 符合你的選擇，因為你選了開發者受眾 + 極簡 + 原始。」 使用者選定一個；如果他們推翻你的排序，請詢問原因並記錄下來（這種推翻往往會揭露先前未浮現的限制條件）。
8. 階段 6——綜合產出
產出 2-3 個截然不同的概念方向，而非只一個。即使使用者已經有定見，提供替代方案能幫助他們理解自己正在取捨什麼。
概念文件格式
針對每個方向，撰寫一份含下列區段的 Markdown 文件：
# 概念：<名稱>
## 一句話定位
<用 15 個字以內描述這個網站>
## 概要
- 目的：<階段 1 的選擇>
- 受眾：<階段 2 的選擇，主要受眾排第一>
- 語氣：<階段 3 的形容詞>
- 視覺原型：<階段 5 的選擇>
## 資訊架構
<頁面／區塊的樹狀結構，最多 2 層>
## 首頁策略
<用 2-3 句話說明首頁要做什麼——第一印象、主要行動、訪客離開時會知道什麼>
## 範例文案語氣
<用選定的語氣撰寫 2-3 句話——關於頁的開場白，或是首頁標語 + 副標>
## 此概念犧牲了什麼
<誠實列出與其他概念相比，本概念優先順序較低的項目——每個概念都會有所取捨>
## ASCII 首頁線框圖
<請參閱 §9>
三個方向應該在真正的軸線上有所差異，而非僅是外觀上的變化：
- 概念 A = 從使用者選擇中得出的最直觀解讀
- 概念 B = 為主要受眾做更深入的優化（通常更極簡）
- 概念 C = 一個刻意的延伸——如果把實驗性的旋鈕再轉一格會怎麼樣？
如果其中兩個方向最終極為相似，請刪除其中一個並說明原因。
9. ASCII 首頁線框圖
每個概念一個。保持在 80 欄寬內，使用 [括號] 標示區域。用方框繪圖或簡單的虛線顯示層級。
以終端機／CLI 作品集為例：
+------------------------------------------------------------------------------+
| ~ example.dev [now] [writing] [/] |
+------------------------------------------------------------------------------+
| |
| 陳小美 |
| 後端開發者 · 工具開發 · 開源 CLI |
| |
| > 目前正在用 Go 打造一個小型建置快取工具 |
| |
| --- 近期 ---------------------------------------------------------- |
| 2026-05-18 發佈：cachetool v0.3 |
| 2026-05-02 文章：為什麼我把所有工具放在同一個儲存庫 |
| 2026-04-21 專案：build-cache 內部運作 |
| |
| --- 專案 ---------------------------------------------------------- |
| cachetool 增量建置快取 [→] |
| notes 關於工具開發的短文 [→] |
| |
+------------------------------------------------------------------------------+
| 電子郵件 · GitHub · RSS |
+------------------------------------------------------------------------------+
線框圖的重點在於比例與層級，而非像素級佈局。請勿使用顏色、字體，或 ASCII 以外的圖示。如果某個區塊需要說明，請在線框圖下方加上一行的備註，而非放在圖內。
10. 反模式
- 因「使用者已經說過」而跳過階段。 將他們的輸入以預設值呈現並請他們確認；不要自行假設。一半的價值在於迫使使用者審視他們沒說的部分。
- 只產出一份概念文件而非 2-3 份。 替代方案是使用者理解他們在選擇什麼的方式。只產出一個概念代表執行失敗。
- 在語氣鎖定之前就決定視覺原型。 階段順序很重要——視覺是目的的、受眾的、語氣的後續，而非平行項目。
- 為
[deferred]區塊填寫內容。 如果使用者還沒寫文章，不要自己發明主題清單——概念文件承諾的是結構，而非內容。 - 在線框圖中加入實作細節。 不要寫「此處使用 shadcn Card」——那是 ui-ux-architect 的工作。線框圖只顯示什麼東西放在哪裡。
- 提出過於通用的建議。 「一個乾淨的現代化作品集」不算是概念。每份概念文件都必須在每個軸線上做出具體的選擇。
11. 交接
使用者從 2-3 個概念中選定一個後，該概念文件即作為以下項目的概要：
- ui-ux-architect——處理 tokens、元件、無障礙設計、四個必要狀態。
- 內建的
frontend-design技能——用於實際的程式碼（若需達到生產級品質）。
概念文件應儲存於專案儲存庫中（例如 docs/concept.md），以便作為設計理念的留存依據。
12. 跨技能連結
- ui-ux-architect——實作層級的標準；此技能為其提供概要。
- demo-presentation-architect——類似的互動引導結構，但適用於不同領域。
- demo-script-architect——敘事原則（受眾優先、漸進揭露）同樣適用於首頁文案。