請 AI 做一張可勾選的小網頁

要出門清單、讀書清單或簡單活動工具時，可以先請 AI 做一個小版本。

做完，你會得到

得到一個可下載、可開啟、能勾選與重設的清單網頁。

成果示意

文字示意：☑ 下載車票　☑ 確認集合地點　☐ 帶水壺
已完成2/3；取消一項變1/3，重設回0/3。

這是預先寫好的範例；你的 AI 用詞可以不同。

跟著做

操作位置：自己的 AI 工具

練習資料

虛構清單：標題『出發前檢查』；三項任務依序為『下載車票』『確認集合地點』『帶水壺』。本題不用網路、不保存進度；重新開啟時回到0/3。

給 AI 的要求

請依下方三項任務做一個完整HTML清單，CSS與JavaScript放在同一檔，不用外部套件或網路。每項可勾選，顯示已完成n/3，附重設按鈕。手機與鍵盤都能操作。不要保存進度，重新開啟清為0/3，頁面也寫明這點。請給完整程式碼，不要省略。

1. 把「練習資料」與「給AI要求」貼到自己的AI，取得完整HTML程式碼。
2. 複製程式碼，貼到本頁「完整 HTML 程式碼」欄，不含開頭與結尾的三個反引號；按「更新隔離預覽」。
3. 在預覽勾兩項、取消一項，再按重設：數字應依序是2/3、1/3、0/3。
4. 按「下載這份 HTML」，從瀏覽器下載清單開啟檔案，看看重新開啟是否回到0/3。
5. 回同一個AI對話送出：「只把帶水壺改成帶筆記本，給我完整新版HTML。」把新版貼回工作區、更新預覽，再測勾選、取消與重設。
6. 再次按「下載這份 HTML」，把新版另存為departure-v2.html並保留首版；重開新版，確認第三項是「帶筆記本」且起始為0/3。

做完再看：結果可以長這樣

你會得到一個可開啟的HTML檔：三項任務可勾選，完成數會跟著變，重設與重新開啟回到0/3。新版把「帶水壺」換成「帶筆記本」。配色和排版可以不同，重點是你真的能用。

看結果時，注意這幾件事

勾兩項顯示2/3，取消一項1/3，重設0/3。
重新開啟回到0/3；此練習不保存進度。
修改版只有第三項改成「帶筆記本」，計數仍正常；已保留首版，另存departure-v2.html並重開確認起始0/3。

換個情境，自己試一次

新虛構清單：『讀書準備』，任務『選一篇文章』『記下三個問題』。自行寫需求請AI產生另一個不保存進度的HTML，保存study.html並測勾選、取消、重設及重開。

初始0/2；兩項全勾2/2；取消一項1/2；重設0/2；重開0/2。需有自己的需求與實際產生檔，任務文字不得變成解說段落。

試試更進一步的任務

加搜尋但不改變完成計數口徑。先貼上你已完成的完整HTML；尚未有檔案者先完成主練習。在同一AI對話確認目前完整版本，再貼下方新需求，不假設AI看得到本機檔案。

虛構三項：下載車票、確認集合地點、帶筆記本。搜尋只影響顯示；計數仍統計全部三項；重設清除全部勾選及搜尋。

在我的完整HTML加上文字搜尋，依來源規則；保留原功能與不保存進度。先列測試預期再提供完整檔案。

先勾下載車票與帶筆記本為2/3；搜尋『車票』只顯示一項，計數仍2/3；取消可見項後1/3；清除搜尋可看見帶筆記本仍勾選；重設後三項可見且0/3。

保存成果，下次繼續

把 AI 回答存進自己的筆記，並留下一句「我改了什麼」。想用本站整理，可展開下方紀錄。