如何蓋一間客棧：建立網站主題
部落格已經可以放文章、切換語言和搜尋內容，但畫面基本上還是 VitePress 原本的樣子，看不出來這裡為什麼叫作客棧。
原本只是打算和 AI 商量一下點陣圖風格，結果 Codex 一口氣列出設計規劃，就順勢做下去了，成果也還不錯。
先決定客棧長什麼樣子
我想要的不是完全考據歷史的中式客棧，也不是常見的西式奇幻酒館，而是中式六成、西式四成的混合。
中式的部分放在木造空間、窗格、燈籠和匾額；冒險酒館的部分則放在地圖、骰子和工具。首頁採用第一人稱櫃台構圖，讓訪客像是真的坐到了櫃台前。
把網站功能放進場景裡
入口畫面可以只是一張主題圖，但是我希望可以有些互動，所以請 Codex 額外加入了一些互動物件：
- Engineering 是機關圖紙和工具。
- AI Workflows 是算盤和卷宗。
- Games 是冒險地圖和骰子。
點擊物件後，櫃台會展開卷軸式搜尋結果，木頭、紙張與牌匾也延伸到文章頁、標籤和導覽，內文使用容易閱讀的字體。
日後有機會再加一些有趣的小物件。
真正的點陣圖，而不是點陣濾鏡
我希望主力素材是真正的點陣圖，而不是先畫一張高清圖片，再縮小或套上濾鏡假裝成像素風格，因為真正的點陣圖可以有效輕量化頁面，我不希望部落格的載入太繁重。
桌面場景使用 320×180 的原生畫布，手機則另外製作 180×320 的直式構圖，並限制色盤、關閉反鋸齒，以最近鄰方式放大。
白天和夜晚不是同一張圖。白天使用窗光，夜晚更換窗景並點亮燈籠和蠟燭。
把腦中的形容詞變成規格
客棧的方向與風格是我原本就有的規劃，AI 在這次工作中主要負責協助產出和落地。流程上先讓 AI 依照規格產出一般圖片，確認空間、物件和構圖，再以原圖為參考生成並整理成原生點陣素材。
最初的圖片也會保留下來，作為日後增加物件、調整場景時的風格基準，避免網站每改一次就換一種畫風。
現在這間客棧只是第一版，日後會慢慢擴建。
結語
雖然 VitePress 提供的主題不多，但是這次透過 AI 協作生成的主題還算滿意，可能有部分也要歸功於 VitePress 基底單純，AI 容易規劃。
我原本以為產圖會很耗 Token，但是實際上只產了一張大圖加四張點陣圖，其他都是 CSS 實作，實際用量只花了每日上限的 10% 不到。
有興趣的朋友可以多試試幾種設計。