打磨跟出貨準備
把運作程式變成完成產品
⏱ 預估 ~9 分鐘
01 · 讀一讀
你遊戲運作。兩玩家能找到彼此、即時玩 tic-tac-toe、優雅處理斷線。但運作跟完成不同。
完成專案有乾淨 UI、解釋它是什麼的 README、程式裡沒留 debug log、適當 git 歷史。這是 side project 跟作品集件的差別 — 你會真的秀給另一個工程師或招聘主管的東西。
這課關於讓前 90% 努力發光的最後 10%。
重點整理
- 運作程式跟完成程式不一樣
- 打磨表示：乾淨 UI、README、沒 debug log、適當 git
- README 是任何人看你專案第一個看到的
- 這分 side project 跟作品集件
02 · Prompt 範本
請 Claude 改善遊戲視覺打磨。給粗糙感覺的具體回饋。
改善井字遊戲的 UI。具體要求：（1） 符號出現在格子裡時加上平滑的過場動畫。（2） 有人獲勝時，用不同的背景色 highlight 獲勝的三格。（3） 加一個視覺提示顯示輪到誰——例如讓狀態文字脈動，或把顏色改成目前玩家符號的顏色。（4） 搜尋對手的過程中，停用 Find Game 按鈕，並顯示 loading spinner 或動畫。（5） 確保遊戲在手機上也好看——棋盤要能在小螢幕上自動縮放。
03 · Prompt 範本
每個專案要 README。請 Claude 寫一個解釋專案是什麼、怎麼跑、用什麼技術。
幫我的井字遊戲專案建一個 README.md，內容包含：（1） 標題和一句話的簡介。（2） 'How to Play' 章節，說明遊戲流程（找對手、輪流下、勝 / 平）。（3） 'Tech Stack' 章節，列出 Node.js、Express、Socket.io，以及純 HTML/CSS/JS。（4） 'Run Locally' 章節，逐步說明：clone、npm install、node server.js、打開 localhost:3000。（5） 'How It Works' 章節，簡短說明 client-server 架構和 WebSocket 通訊。請保持精簡——沒人會讀一篇 500 行的 README。
04 · 確認清單
走過這出貨準備清單。每項分業餘專案跟專業的。
- 移除所有 debug 用 console.log 陳述（只留 server.js 的 connection/disconnection log）
- 遊戲 UI 看起來乾淨 — 沒重疊元素、壞排版、佔位文字
- README 解釋專案是什麼跟怎麼跑
- 建排除 node_modules/ 的 .gitignore 檔
- 程式裡沒寫死 localhost URL — 用相對路徑部署也能動
- 所有打磨改後再測一次完整遊戲流程
05 · 真機練習
初始化 git repository、做第一個 commit、push 到 GitHub。這是你 Level 4 學的流程。
06 · 選擇題
為什麼出貨前該移除 console.log debug 陳述？
- 它們顯著拖慢 server
- 暴露內部狀態給任何開 DevTools 的人，讓 server log 雜亂、真實問題更難找
- JavaScript 不准 production 模式有 console.log
- Socket.io 跟 console.log 衝突
07 · 填空
_____ 檔告訴其他工程師你專案是什麼、怎麼裝、怎麼跑。
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。