【Day 18】用電腦模擬一個裝置爆開，然後看見裏面的零件，這種畫面我還是做不來⋯⋯嗎？

▲ 圖 1：揭開吧！你原本的模樣！Midjourney 概念示意圖～

其實後來有做出來了🤣，
但是不太算精緻。
相信大家偶爾會在 IG 上面滑到，
有人用 ChatGPT 最新的模型製作很多有趣的 3D 遊戲，
也有一種是可能針對複雜機器製作動態展示頁面：
一鍵點擊，一個引擎就被分拆成不同的部件，
這樣子的有趣展示～

痛點與日常觀察：社群上的 3D 動態展示與作業目標

▲ 圖 2：初版介紹元太科技電泳式電子墨水原理的展示網頁

好吧前一天輕微談及了元太科技這是一家做電子紙的龍頭企業嘛！最近的作業其實有一個目標：

「運用生成式 AI 整理電子紙的顯示原理、技術名詞與演進，製作技術時間軸及元件圖。」

真的會想起經常在社群媒體上面看見不少例子是 Vibe Coding 出動態網頁的時候，可能會有一些是複雜的引擎裝置點擊後各個零件拆開並且逐一介紹。

這在進行科技知識普及的時候，其實也是一個挺好的展示方法。

當然有時候這樣子的展示也會讓人聯想起專利說明書也要有各種細緻的展示圖例，不過這個有機會再細說吧，說不定真的能夠讓 AI 幫手畫圖呢。

模型選型的心理戰：在 Antigravity 裡切換 Claude Sonnet 4.6

▲ 圖 3：Antigravity 目前可以自由切換的多模型選單～

要製作出這樣子的動態頁面效果，這時候我就不太相信 Gemini 3.8 模型的效果了，儘管自己習慣用 Antigravity，Gemini 3.8 的額度在學生方案情況底下也比較多。

當然也有觀察過 Antigravity 其實也是可以選擇用 Claude 或 ChatGPT 的模型，儘管額度比較少，但如果碰上了一些需要更加精美及複雜設計的部份，都會交給他們弄。

這次是用 Claude 的 Sonnet 4.6 模型，因為只是為了應付作業出的題目所做的一個試作版。這次因為產出的代碼就不再只是可以嵌入到 Google Sites 的單一 HTML 檔案，而是包含 JS 跟 CSS，要做短暫部署自己也是尋找了一些其他的方法。

💡 核心 Prompt 模組分享

大家可以參考我這次使用的提示詞，直接複製調整使用：

開設一個新的專案資料夾，要設計一個科幻風格，簡約 3D 裝置檢視畫面，會有動態拆開效果，然後扮演 cyberpunk 修理員修理不同的裝置。
裝置的參考用以下資料（事前用 Perplexity 蒐集一大堆元太電子紙的技術說明）⋯⋯

💡 提示：以上內容直接複製即為標準 Prompt！事前搭配 Perplexity 整理的技術知識庫，能讓 AI 生成的硬體細節與維修邏輯更加專業嚴謹。

簡易部署：不用複雜框架，用 GitHub Pages 一鍵上線！

▲ 圖 4：GitHub Pages 設定頁面：選擇 main 分支一鍵部署！

當然之前可能已經有提及過 GitHub Pages，這次也簡單說明一下：

只需要在 GitHub 上面該專案的 Settings ➔ 找到 Pages 項目 ➔ 在 Branch 裡面選擇 main，然後按 Save 儲存就可以了！非常簡單快速。

成果展示：莫名其妙誕生的「賽博龐克維修員」遊戲化體驗

▲ 圖 5：Cyberpunk 修理員 3D 裝置拆解與遊戲化體驗畫面

好吧這次又是莫名其妙製作的是一個遊戲化體驗，之前也是在 IG 上面看見最近有一款 cyberpunk 維修員的遊戲才突然之間想起可以這樣玩玩看。

畢竟原先已經做了一個介紹電子紙技術的簡單頁面了，這次如果想要做裝置展開的部份，就加點新的有趣元素吧～也不知道案主會覺得怎麼樣⋯⋯

🎮 試玩體驗傳送門

• 🔗 線上試玩連結：點此立即進入 Cyberpunk Repair Bay 線上試玩

📌 本篇重點整理