先否掉兩版方塊草圖：一座超充站大屏的「高級感」，是從哪一步來的

2026 年 10 月 7 日，掘金作者「紙片人」發布了一篇技術長文，記錄自己如何在一天之內，與 AI（Claude Code）協作完成一座「光儲充一體化超充站」的數位孿生大屏。技術棧是 Vue 3、Three.js r186 與 Blender 5.2，模型在 Blender 裡以約兩千四百行 Python 腳本建出，Three.js 只負責展示與驅動。對設計觀察者來說，這篇文章真正有意思的地方不在工程效率，而在作者坦白記錄了「哪一步做錯了、哪一步被否掉」，那正是視覺決策發生的現場。

幾何體草圖為什麼被否

作者一開始讓 AI 用 Three.js 幾何體快速拼了兩版設計稿，場站加上 HTML 面板合成，結果他自己否掉了。他的判斷是：布局沒問題，但一眼就是程式設計師畫的方塊。這句話很誠實。方塊的問題不在比例，而在沒有材質與光影可言，沒有瀝青的粗糙、光伏板的反光、暗場裡那圈把沙盤託起來的輝光。所謂「不夠高級」，多數時候指的就是這一層的缺席。

他的解法是把視覺設計稿交給生圖模型。找一張光儲充 EMS 大屏的參考圖，讓 AI 先拆解風格：懸浮沙盤、正交等軸俯視、暗場藍調、四角能量節點、青綠紅三色發光，整理成提示詞後生出概念圖，再把資料面板合成上去。這一步的關鍵，是把「風格」拆成可以指認的五個視覺決定，而不是籠統地說「要酷一點」。暗場藍調配青綠紅三色，是能源監控畫面的成熟語彙：青色走正常、綠色走充電、紅色留給故障，顏色本身就是狀態介面。

概念圖定下來之後，後面的建模與調光都變成「照著還原」，目標明確。這個流程其實是把傳統遊戲美術的 concept-to-final 管線搬進了大屏開發，只是中間的執行者換成了 AI。

為什麼模型要回到 Blender

作者先前做過一個純代碼建模的校園大屏，這次刻意換路線。理由很具體：充電站裡的車、樁、光伏板、儲能櫃，用 Three.js 幾何體拼很難有真實感。Sketchfab 下載的車輛與充電樁模型經過批量減面、換材質、統一朝向後進場，地面光照則用 Cycles 烘焙成貼圖。等於把「真實感」拆成三件事：模型的形、貼圖的質、烘焙的光。Three.js 場景只按對象名驅動，仿真器負責車輛滑入車位、插槍充電、充滿駛離，道閘同步抬杆。

場站本身的編排也值得看：三排光伏車棚下是三十根雙槍快充樁，超充區四根液冷終端樁頂帶狀態光環，六臺儲能櫃與箱變用鋼絲網圍欄圈出能源區，服務樓做成兩層剖切，一樓司機之家、二樓監控中心。剖切是建築圖學的老手法，在沙盤上同時露出內部活動與外部量體，這在純方塊拚法裡幾乎不可能出現。

這套「Blender 建模、Three.js 展示」的分工，與我們先前觀察過的Antigravity 加 Blender MCP 的倉儲地面標線設計是同一條路線：讓建模工具承擔材質與細節，讓網頁端只做驅動與互動。差別在於那次的重點是把 0.07 公尺的螢光青線做成可信的工業介面，這次的重點是把整座能源場站做成可觀看的沙盤。

仿真出來的「像真的」

沒有後端，運行資料從哪來？作者的答案是仿真，而且仿真的顆粒度不小：點任意樁或車位，能彈出各槍 SOC、功率、電量、時長，每秒刷新；分時電價按真實時鐘切換谷、平、峯、尖，儲能櫃跟著做「谷充峯放」。樁燈按充電中、空閒、故障、離線四種狀態變色，故障車位有紅色波紋擴散，右側告警列表同步。還有一個安靜的細節：無人操作時鏡頭緩慢左右擺動，人工拖拽後十五秒自動恢復。

這些設計共同的目標是讓畫面「像有人在管」。客戶看大屏時要的那種安心感，往往來自這些微小的連續動作，而不是數字本身有多大。這一點上，大屏的仿真與 BootLoops 把算對設計成流程 的思路意外相近：可信度是被一套可觀察的機制做出來的，只是這裡的機制換成了車輛、光環與波紋。

觀點

這篇長文最值得留下的，不是「AI 讓大屏一天做完」這個效率故事，而是作者對設計稿的取捨順序。他先承認代碼幾何體做不出材質與氛圍，把概念圖交給生圖模型，再把還原工作交給 Blender 腳本，最後讓 Three.js 只做它擅長的驅動。每個工具被放在它最強的一環。「高級感」從來不是最後加的濾鏡，而是在第一步被否掉的那兩版方塊草圖裡，就已經決定要去別處找的東西。

SLUG 與上述欄位請以本篇為準，正文到此結束。