Claude 寫程式與 Artifacts 實戰

對開發者來說，AI 寫程式已經不是新鮮事，但真正能提升生產力的關鍵，在於你是否掌握了正確的協作方式。Claude 在這方面有兩個明顯優勢:一是能一次讀進大量程式碼理解整個專案脈絡，二是 Artifacts 功能讓產出的程式碼，網頁或元件能即時預覽與迭代。這篇文章聚焦在如何把這兩點，落實成一套可靠的日常開發流程。

Artifacts 是什麼，為什麼重要

Artifacts 是 Claude 介面裡的一塊獨立工作區，當你請它產生一段較完整的程式碼，一個 HTML 頁面，一個 React 元件或一份文件時，成果會顯示在對話右側的專屬面板，而不是混在對話訊息裡。它的價值在於:

• 即時預覽:HTML 與前端元件可以直接在 Artifacts 裡渲染出來，看得到實際效果。
• 就地迭代:你要求修改時，它更新的是同一份 Artifact，而不是每次重貼一整段，方便追蹤版本。
• 內容分離:程式碼與說明文字分開，複製，閱讀都更清楚。

這讓 Claude 從「給你一段程式碼」進化成「陪你把一個小工具做出來並看到它跑起來」。

開始前:先給脈絡，再給任務

最常見的失敗，是直接丟一句「幫我寫一個登入功能」。模型不知道你的技術棧，不知道你的命名慣例，產出的東西往往要大改。有效的做法是先提供脈絡:

技術棧:前端 React + TypeScript，後端 Node.js + Express，資料庫 PostgreSQL。
這是我現有的使用者資料表結構與 API 慣例(附上程式碼)。
請依照相同風格，新增一個以 email 登入的端點，
密碼要雜湊，錯誤要回傳一致的格式。

把技術棧，現有程式碼範例，命名慣例交代清楚，產出的程式碼才會融入你的專案，而不是一段孤立的示範。

除錯:貼錯誤訊息，更要貼相關程式碼

除錯是 Claude 最實用的場景之一，但很多人只貼了錯誤訊息就問「怎麼辦」。錯誤訊息只是症狀，模型還需要看到相關的程式碼與情境。一個高品質的除錯提問應包含:

1. 完整的錯誤訊息與堆疊追蹤。
2. 觸發錯誤的那段程式碼。
3. 你期望的行為與實際的行為。
4. 你已經試過什麼。

這樣模型才能做真正的推理，而不是猜。另一個好習慣是要求它「先解釋根本原因，再給修正方案」，避免拿到一個能跑但你不懂為什麼的補丁，埋下未來的地雷。

重構:一次一個目標

重構時最忌諱「幫我把這段程式碼變好」這種模糊指令。好在哪?可讀性，效能，還是可測試性?這些目標有時互相衝突。正確做法是明確指定單一目標:

請只針對可讀性重構這個函式:
拆分過長的函式，為魔術數字命名，加上型別註記，
但不要改變任何外部行為與函式簽章。

明確，可驗證的目標，才能得到你真正要的結果，也讓你容易檢查它有沒有偷改了不該改的地方。

用 Artifacts 打造可互動原型

Artifacts 特別適合快速驗證想法。假設你想做一個「房貸試算」的小工具，可以這樣要求:

用單一 HTML 檔(內含 CSS 與 JavaScript)做一個房貸月付金試算器。
輸入:貸款金額，年利率，年限。
輸出:每月應繳金額與總利息，即時計算。
介面簡潔，支援手機寬度，不要用外部函式庫。

它會在 Artifacts 面板直接渲染出可操作的工具，你當場輸入數字就能看到結果，再逐步要求它調整樣式或加功能。這種即看即改的迭代，比在本機反覆存檔重整快得多，很適合做提案 demo 或內部小工具。

要注意的是，Artifacts 環境是沙盒，通常無法連外部網路或呼叫外部 API，資源也有限。它適合自足的前端邏輯與原型，不適合當成正式的生產部署環境。真正上線前仍要把程式碼搬回你的專案，補上測試與安全檢查。

常見錯誤與陷阱

第一，盲目信任產出。AI 產生的程式碼可能看起來正確卻有邏輯漏洞，或使用了過時，不安全的寫法。任何涉及認證，金流，資料庫查詢的程式碼，務必人工審查，特別留意 SQL 注入，未驗證輸入等安全問題。

第二，忽略測試。請 Claude 順便產生單元測試是好習慣，但別忘了測試本身也需要你審視，確認它測的是真正的行為，而不是為了通過而寫的空殼。

第三，對話太長導致脈絡漂移。當一段開發對話拉得很長，模型可能忘記早期的約束。適時重貼關鍵的架構決定與慣例，或開新對話並帶上必要脈絡，能維持產出品質。

第四，把 Artifacts 當成最終產品。它是原型與預覽的利器，不是部署平台。驗證想法後，務必回到正規的版本控制與 CI 流程。

一套可落地的協作流程

1. 開場先貼技術棧，現有程式碼範例與命名慣例。
2. 用小而明確的任務推進，一次一個目標。
3. 除錯時提供完整脈絡，要求先講根因再給解法。
4. 用 Artifacts 快速做出可互動原型，即時驗證。
5. 所有涉及安全與金流的程式碼，人工審查不可省。
6. 定稿後搬回專案，補測試，進版控。

結語

Claude 加上 Artifacts，讓開發者能在同一個地方構思，產生，預覽並迭代程式碼。但工具再好，主導權仍在你手上。把它當成一位反應快，知識廣但需要你把關的協作者，給足脈絡，設定明確目標，並對安全保持警覺，你就能在不犧牲品質的前提下，顯著加快開發節奏。