AI 製作 HTML 小工具教學：從文字整理器開始，做出能重複使用的工作工具
概念示意，非已完成工具或實測結果。
用 AI 製作 HTML 小工具，可以先選一項規則明確的重複工作，請 AI 產生單檔網頁，再用已知答案驗收。文字整理器適合入門，不必先做登入或資料庫。
每週都要整理一份名單、刪除多餘空白，再把結果貼回文件。這類工作規則明確，卻常因為每次數量不多，一直靠手動處理。
用 AI 製作 HTML 小工具，可以把這段重複操作變成一個檔案：打開瀏覽器、貼上文字、按下整理，再複製結果。第一版不必有登入、資料庫或漂亮首頁，先讓一件小事做得正確。
這篇從 Simon Willison 的公開學習資源出發，示範如何寫需求、交給 AI 產生單檔工具，以及自己怎麼驗收。下方文字整理器是本文設計的練習，尚未提供或實測完成品，不應視為已驗證的工具推薦。
HTML 小工具是什麼？為什麼適合先做一個小功能
HTML 負責頁面結構，CSS 控制外觀，JavaScript 處理互動與運算。把三者放進同一份 .html 檔案，就能承載輸入欄位、處理按鈕與結果區。
Simon 在 2025 年 12 月 10 日的文章中，把這類單檔應用稱為 HTML tools。他偏好控制規模、避免需要建置的框架，讓成果容易複製、保存與部署。這是他的實作取捨，不是所有網頁開發都必須遵守的規則。原文：Useful patterns for building HTML tools
對非工程背景的工作者，適合的起點包括文字清理、固定格式轉換、簡單計算。共同特徵是輸入與輸出容易比較，處理規則也說得清楚。
如果需要多人同時編輯、帳號權限或長期保存客戶資料，就已超出這個入門練習的範圍。先縮小需求，會比一次要求完整管理系統更容易找到錯誤。
先讀開發紀錄，別只收集成品網址
Simon 的工具網站有一個 colophon 開發紀錄頁，整理各工具的程式提交紀錄，許多項目附有產生程式時的 AI 對話連結。頁面也註明，工具介紹文字由 AI 生成。
閱讀時可以挑一個功能接近自己需求的例子，依序看三件事：最初如何描述問題、後來修改哪些地方，以及哪些功能是在第二版才補上。成品畫面能提供介面參考，修改紀錄則能幫你看見需求與錯誤怎麼逐步被釐清。
不必照抄整套提示詞。先記下一個自己能理解的互動，例如「貼上內容後顯示預覽」，再決定它是否適合自己的工作。
建議練習流程，非工具實測結果。
練習：把逐行名單整理成可以貼回文件的文字
假設你要整理公開活動名稱，每行一個項目。第一版只做四件事：刪除每行前後空白、移除空白行、移除完全相同的重複項目，並保留第一次出現的順序。
這裡要刻意保留英文大小寫與行內空格。AI Workshop 和 AI workshop 視為不同項目；工具也不應自行改寫名稱。這些看似瑣碎的決定，正是避免 AI 替你猜工作規則的關鍵。
可以用以下需求開始：
請製作繁體中文文字整理器，輸出一份完整 HTML，CSS 與 JavaScript 都放在同一檔案。不使用 React、外部套件、API、分析追蹤或網路請求，也不保存輸入。畫面包含原文、整理後結果、整理、複製與清除按鈕。逐行移除前後空白、刪除空白行、去除完全相同的項目並保留首次出現順序；保留大小寫和行內空格。結果以純文字呈現，不執行輸入內容。複製失敗時顯示手動複製提示。請另列出測試方式與限制。
這段需求把功能與限制一起交代，也避免把「整理」解讀成潤稿。若還不知道如何寫清楚任務，可以先從 AI 工具與任務實作指南 的任務描述與核對內容開始。
取得 HTML 後，先核對再開啟
請 AI 提供完整檔案，而不只是零散程式片段；若需要自行儲存，檔名可設為 text-cleaner.html，並確認沒有變成 .html.txt。
在開啟前，請 AI 逐項說明程式是否載入外部資源、傳送資料或儲存輸入。這只是輔助檢查，不能當作安全保證。不熟悉程式時，請懂程式的人覆核，再用虛構文字測試。
確認內容符合預期後，以瀏覽器開啟檔案，檢查是否出現輸入區與按鈕。沒有外部依賴與網路請求的設計，目標是讓整理功能在本機完成；是否真的如此，仍要依產生的程式確認。
本機 HTML 一樣可以包含會執行的程式碼。「只有一個檔案」不代表自動安全，也不代表任何下載來的 HTML 都適合直接開啟。
驗收重點：結果正確，比畫面漂亮重要
先準備一組你能手算的資料：第一行是前後帶空白的「台北場」，第二行留白，第三行再放「台北場」，第四行放「高雄場」。整理後應只剩兩行，順序是「台北場」再「高雄場」。
接著補上容易被忽略的測試：
- 空白輸入：顯示空結果或清楚提示，不產生假資料。
- 大小寫不同：
AI Workshop與AI workshop都保留。 - 行內空格：「台北 場」不應變成「台北場」。
- 看似 HTML 的文字：
<b>台北場</b>應原樣顯示，不能變成粗體或執行內容。 - 複製與清除：貼到純文字編輯器核對換行；清除後原文與結果都應清空。
若複製按鈕無法使用，先記錄瀏覽器、開啟方式與錯誤提示，再請 AI 修正，不要只說「不能用」。手動選取結果複製，也可以是第一版明確保留的備援方式。
每次修改後，都重跑上述案例。新功能成功，不代表舊規則仍然正確。
如果工具刪掉了不該刪的項目，把最短的失敗範例交回 AI，清楚列出實際結果與預期結果。例如「這兩行只差大小寫，應保留兩行，目前卻只剩一行」。一次先修一個問題，比同時要求改配色、加功能與修邏輯更容易判斷改動是否有效。
什麼時候值得留下，什麼時候先停下來
完成驗收後，保存 HTML、原始需求與測試案例，並在檔名加上版本，例如 text-cleaner-v1.html。下次修改另存新版，才有機會回到上一個可用狀態。
暫時不要加入 API 金鑰、真實客戶名單或公司機密，也不要為了方便，把敏感資料貼進生成工具的 AI 對話。若要交給同事使用，先附上用途、限制與測試紀錄；需要公開上線時，再另外處理程式審查與部署。
你可以用一個簡單問題決定是否繼續：下週遇到同樣工作，會願意再打開它嗎？若答案是肯定的，先維持這個小範圍。當規則穩定、結果可核對，一份小 HTML 才真正從一次生成，變成可以重複使用的工作工具。