上一篇講完了構思和規劃，手上已經有了 spec 和 plan。但這些都還是文字，看不到也摸不到。這一篇要講的是怎麼把這堆文字變成一個有畫面的東西。
先有風格，再有畫面
做設計的第一步不是畫 UI，而是先決定整體的視覺方向。我用了 cinematic-ui 這個 skill，它的作用是根據你對風格的描述，產出一套完整的視覺主題。
我給它的方向是「太空感、科技感、暗色系」，靈感來自電影 Interstellar 和 Gravity 那種安靜但有張力的視覺風格。cinematic-ui 拿到這些描述之後，會產出一整套設計語言：
色彩系統（主色、輔助色、背景色、文字色）
字體配置（標題用什麼、內文用什麼、標籤用什麼）
間距和佈局規則
動態效果的基調（緩動函數、過渡時間）
這套東西出來之後，就等於有了整個網站的視覺 DNA。後面不管做什麼頁面，都是在這個框架裡面展開的。
用 design-consultation 確認方向
有了初步的視覺主題之後，我用 design-consultation skill 來做更細緻的設計決策。這個工具的角色比較像是一個設計顧問——你跟它討論品牌方向、色彩心理學、排版原則這些比較高層的問題。
比方說我問它：深色背景配什麼顏色的 call-to-action 按鈕最醒目？導覽列要固定在頂部還是做成漢堡選單？文章列表要用卡片式還是清單式？
它不只是給你一個答案，而是會解釋為什麼——這個選擇在視覺層次上有什麼效果、對使用者的閱讀動線有什麼影響。這些討論幫我在動手之前就把很多設計決策定下來了。
design-html 快速出原型
設計方向確認之後，下一步是把它變成可以看的東西。design-html skill 的作用是根據你描述的頁面結構和視覺風格，直接產出 HTML 原型。
這不是最終的 production code，而是用來驗證設計概念的快速原型。它會在瀏覽器裡跑起來，讓你可以實際看到顏色、字體、間距搭配在一起的效果。
這一步的價值在於，它讓設計從抽象的描述變成了具體的畫面。很多在文字描述裡覺得沒問題的東西，一放到畫面上就會發現不對——比方說某個顏色太暗看不清楚、某個間距太窄顯得擁擠。這些問題用文字討論很難發現，但看到畫面就一目瞭然。
design-review 做視覺稽核
原型出來之後，不是直接就開始切版，而是先用 design-review skill 做一輪視覺稽核。
design-review 會從幾個維度來檢視設計：
一致性：各頁面之間的視覺語言是否統一？
層次感：資訊的主次關係是否清楚？
可讀性：文字大小、行高、對比度是否適合長時間閱讀？
響應式：在不同螢幕尺寸下是否都能正常顯示？
這個稽核幫我抓到了好幾個問題：首頁的 hero section 文字太大在手機上溢出、系列頁面和文章頁面的標題字級不一致、某些頁面的間距用了不同的值。這些瑣碎但重要的問題，如果沒有系統化的檢查很容易漏掉。
從原型到實作的橋樑
經過這一輪「主題 → 諮詢 → 原型 → 稽核」的流程，設計就不再是模糊的概念了。我手上有了明確的色彩系統、字體規則、佈局模式，還有經過驗證的 HTML 原型可以參考。
接下來就是把這些設計轉譯成真正的 code。下一篇會講架構和實作——怎麼用 Serena MCP 這類語意工具，讓寫程式的過程也能保持設計階段的那種條理和效率。