知名開發者Simon Willison 在過去兩年利用LLM 構建了超過150 個“HTML Tools”，“單文件HTML + 瀏覽器原生能力+ AI 編程”的經驗很值得思考 Simon 在最新的部落格「Useful patterns for building HTML tools」中介紹了一種極其輕量、實用且易於維護的軟體開發模式，將其稱為“HTML Tools”，指的是將HTML、JavaScript 和CSS 全部包含在一個檔案中，無需後端伺服器即可運行的微型應用程式。 https://t.co/SCvbUyXZ1p 什麼是「HTML Tools」？ · 單一檔案架構：所有程式碼（HTML/JS/CSS）都在一個檔案中。沒有複雜的建置流程（如Webpack 或npm），也無需伺服器部署，檔案可以直接在瀏覽器打開，甚至透過「複製貼上」即可分發。 · LLM 驅動：這些工具絕大多數是由ChatGPT、Claude 或Gemini 等AI 輔助編寫的。單一檔案結構非常適合LLM，因為AI 可以一次讀取或產生完整的程式碼上下文。 核心建構模式與技巧 Simon 總結了一套高效的開發“最佳實踐”，為了降低複雜度並提高實用性： · 堅決避免複雜框架：作者強烈建議在使用AI 產生程式碼時提示"No React"。因為React 等框架需要編譯步驟，這會破壞單一檔案的便攜性，增加偵錯和部署的難度。原生JS 或簡單的CDN 函式庫是更好的選擇。 · 利用LLM 的「畫布」功能原型開發：利用ChatGPT Canvas 或Claude Artifacts 快速產生互動原型。 · 依賴CDN：如果需要第三方函式庫（如PDF 處理、圖表繪製），直接透過CDN 連結引入，保持本地程式碼的純淨和零依賴。 · 巧妙的狀態管理： · URL 參數：將工具的狀態（如編輯中的配置）保存在URL 中，以便使用者可以透過分享連結來分享目前的工作狀態。 · localStorage：用於儲存敏感資料（如API Key）或大段文本，確保資料只停留在使用者瀏覽器端，不上傳伺服器，保障隱私。 · 運用瀏覽器原生能力： · CORS API：直接在瀏覽器前端呼叫支援跨域的公共API，無需後端轉送。 · 檔案處理：利用 在本機上讀取和處理檔案（如裁切圖片、OCR 辨識），無需上傳檔案到雲端。 · WebAssembly & Pyodide：透過WebAssembly 在瀏覽器端執行Python 資料分析（Pandas）或複雜的C++ 函式庫（如FFmpeg、Tesseract），大幅擴展了前端工具的能力邊界。 為何這種模式很重要？ 它展示了AI 時代軟體開發範式的轉變： · 降低門檻：開發者可以用極低的成本（幾分鐘）建構出一個解決特定痛點的小工具（例如：轉換特定格式的JSON、提取圖片中的文字、調試API）。 · 資料主權與隱私：由於工具是靜態且在本地運行，使用者不需要擔心將私密的資料傳送給第三方伺服器。 · 可重複使用與Remix：因為程式碼簡單且獨立，舊工具的程式碼可以很容易地作為「上下文」餵給AI，讓其基於現有功能快速開發出新工具。
