用 claude-prism 做出來的個人網站原型，共四個版本
水墨那種感覺，配上現代的排版。大標題用 Instrument Serif，讀起來有點雜誌感，留白也很夠。
就是把終端機的樣子搬到網頁上（認真的）。CRT 掃描線、螢光色，滿滿的極客感。
同一份設計規格，Claude 自己做的版本。水墨感大致相同，多了一些無障礙設計的細節。
Claude 版本的終端風，一樣有打字機效果跟閃爍游標，程式碼結構也比較嚴謹一點。
用 claude-prism 裡的 Skills 輸入一些基本需求，它會自動推導出設計軸向（色溫、明度、飽和度之類的），然後選出差最多的兩個方向，這次我們選擇：雜誌編輯風和工業終端風，各出一份設計文件。
接著用 claude-prism 的 /ui-design Commands，把設計文件直接餵給 Gemini CLI，讓它產出 HTML、CSS、JS 的靜態頁面。兩個風格各做一份，就是你現在看到的 gemini-a 跟 gemini-b。
同樣的設計文件，讓 Claude 自己做一遍，看看差在哪裡。Claude 版本多了一些無障礙細節（skip-link、語意標籤之類的），不確定是習慣問題還是在跟 Gemini 比較（笑）。
四個版本，相同規格，不同的 AI 來做。點進去比看看，視覺上其實差滿多的，程式碼結構也不一樣，各有各的理解方式。
設計文件裡其實沒有要求 light / dark mode 切換，但 Claude 做出來的兩個版本都自己加了模式切換功能。Gemini 就是乖乖照規格做，不會多加東西。不知道該說 Claude 很貼心還是太雞婆（笑）。
| 項目 | Version A 晨霧墨韻 | Version B 終端極客 |
|---|---|---|
| 方向向量 | 編輯雜誌（Editorial） | 工業實用（Industrial） |
| 明度 | 68（淺色優先） | 20（深色優先） |
| 字體 | Instrument Serif + Satoshi | Clash Display + IBM Plex Mono |
| 佈局 | 非對稱雜誌 Grid，留白呼吸 | 等寬字元對齊，資訊密集 |
| 裝飾 | ink-splash 水墨暈染 | CRT 掃描線 + 螢光 glow |
| 互動 | 墨跡滑入、parallax | 打字機效果、閃爍游標 |