恭喜各位順利闖過後端新手村。現在正式從黑手轉職為網頁設計師。
多數教學要求在電腦安裝英文軟體並設定環境變數，過程繁雜。我們追求極限操作，只需開啟網頁 StackBlitz。這是雲端精神時光屋，只要有瀏覽器，平板或舊電腦都能成為頂規開發機。無論換新電腦實測或第一次開工，這篇文章即為你的復原標準作業程序。
第一關：靈魂綁定！用 GitHub 登入存檔
進入 StackBlitz 官網後，請聽 夜星 一句勸：務必先用 GitHub 帳號登入。使用訪客身份開工，一旦瀏覽器當機或誤關網頁，心血將全部消失。點擊右上角「Sign in」，連動第一章申請的 GitHub 帳號。這如同遊戲連動雲端存檔，保證努力不會白費。
登入後點擊「New Project」，選擇 React (TypeScript)。我們主要撰寫 JavaScript，選此環境能讓系統自動抓錯，具備更強的偵錯工具。
第二關：大腦移植！五支關鍵設定檔
請看左側檔案列表，進行硬核的大腦移植。直接將調校好的設定檔貼上覆蓋，不需手打代碼。找出以下五個檔案，執行「全選、刪除、貼上」：
相關程式碼，請到我的 github 尋找，並複製程式碼
請對照下方目錄樹結構，在 StackBlitz 左側找出並替換這五個關鍵檔案：
專案根目錄/
├── package.json
├── vite.config.js
├── postcss.config.js (若無此檔請手動新增)
├── index.html
└── src/
└── index.css
package.json(採購清單)： 核心檔案。記錄所有神兵利器與最新版 Tailwind 4。貼上後右下角出現進度條，代表系統自動採購積木。vite.config.js(引擎說明書)： 藏有關鍵伏筆base: '/smartboard/'。預告未來的網址名稱。(這裡可以替換為你自己的github專案目錄名稱)postcss.config.js(裝潢翻譯官)： 負責處理 CSS 樣式，確保網頁排版正確。如果找不到這個檔案，直接在左側按「+」號，新增這個檔案。index.html(網頁骨架)： 位於根目錄。替換此檔可強制寫入 LINE 官方 CDN (static.line-scdn.net)，解決後續 LIFF 登入的打包編譯錯誤。src/index.css(牆紙刷漆)： 位於src資料夾。注入@import "tailwindcss";核心指令，並加入隱藏捲軸的專屬客製化樣式。漏掉這步，網頁排版將完全崩壞。
第三關：尋找隱藏的「+」號（終端機寶藏）
若系統未自動採購套件，請使用終端機。視線移至畫面最下方，找出不起眼的 「+」號圖示 (New Terminal)。
點擊後彈出黑底白字視窗，這是對雲端電腦下指令的指揮部。輸入指令： npm install 按下 Enter。英文字母瘋狂滾動即代表採購成功。
💡 夜星的開發提醒：省錢才是王道
在開始寫前端介面前，務必注意一個極端重要的細節。目前為了守住 LINE 每個月僅有 200 則 的免費額度，夜星在 GAS 後端程式碼中，將所有 replyToLine(...) 開頭的行數前面加上雙斜線 //。如果你的LINE額度足夠，可以取消"//" 就能看到機器人回應你了。
好的助理應保持沈默。只要資料成功寫入試算表，不需要讓機器人回覆「紀錄完成」這類廢話。每一句回覆都在吃掉額度。沒消沒息，正是極限操作的最高境界。
💡 夜星的防呆檢查清單
召喚裝甲前請執行最後檢查，節省崩潰時間：
- 名字對齊： 檢查左側檔案列表
src/main.tsx。確認內容寫法為import App from './App'或import App from './app'。若主程式檔名為app.jsx（小寫 a），大小寫必須改到完全一致。 - 引入樣式： 確認
main.tsx檔案頂部包含import './index.css'。大門有接電，介面才有裝潢。
準備迎接暫時的黑暗 設定檔移植完畢後，預覽畫面可能報錯或變黑。因為大腦升級到頂規，身體尚未換裝。下一篇正式召喚威力強大的 app.jsx 主程式，直擊白畫面地獄。我們召喚篇見。
