用 Claude Code 打造小型網頁工具

用一段簡介描述一個小型的瀏覽器工具,讓 Claude Code 把它建成單一 HTML 檔案。這個網站上每個免費工具都是這樣做出來的。

挑選一個 agent 能完成的範圍。

能成功的工具,刻意做得很小:只做一件事、在瀏覽器本機運作、不需要帳號、不需要後端、不上傳任何東西。想想文字差異比對工具花紋產生器,或是一個計算機。這種範圍剛好放得進一個 HTML 檔案,代表 agent 可以在同一個循環中完成建置、測試與修正 — 而且無論放在哪裡託管都是免費的。

你需要準備的東西。

  • Claude Code — 隨 Claude Pro 方案附贈(年繳每月 $17,月繳 $20)。可在終端機、Claude 桌面應用程式,或瀏覽器中執行。
  • 一個空資料夾,以及用來測試的瀏覽器。
  • 一段意圖描述 — 詳見步驟二的簡介寫法。

六個步驟,從想法到上線。

  1. 安裝 Claude Code 並用你的 Claude 帳號登入,然後在空資料夾中開啟它。
  2. 寫下簡介:這個工具做什麼、是給誰用的,以及有哪些限制條件 — 一個 index.html、CSS 與 JavaScript 都寫在行內、所有運算都在瀏覽器中完成、不傳送任何東西到伺服器。
  3. 讓 agent 建出第一版,然後在瀏覽器中打開這個檔案,像陌生使用者一樣實際用用看。
  4. 用平常的語言回報哪裡有問題 — agent 會直接修正檔案,所以「複製按鈕在 Safari 上沒反應」就是一個完整的指示。
  5. 用免費的 Responsive Preview 工具,檢查三種寬度下的版面。
  6. 把檔案部署到任何免費的靜態主機,並先執行 Launch Checklist Prompt上線檢查指南會告訴你怎麼做。

實際要花多少錢。

一個小型工具花的是訂閱費,不是開發預算。整個網站 — 上面每個免費工具與頁面 — 都有公開的建置紀錄,AI 使用花費總計大約落在 $565 到 $825 之間(見發布紀錄)。一個工具只是其中一小部分。Claude Pro 內含 Claude Code,年繳每月 $17 — 這個 Claude 推薦連結能幫你開始。

什麼時候小型工具不是對的做法。

帳號系統、金流、儲存使用者資料,或任何敏感資訊,都會打破瀏覽器本機運作的模式 — 這些需要真正的後端與真正的工程投入。而如果你真正需要的是一個登陸頁而不是工具,Carrd 版型是更快的路徑。