本篇階段：Prj#4 個人網頁
使用介面：Claude Code（via VS Code）
Day 20 花了一整天，把三年前弄的個人網站從頭盤點健檢了一遍。這網站 2023 年架好之後幾乎沒再動過，今年才開始零星往裡面加東西。加著加著自己反而有點疑惑的部分，才想趁機把整個流程複習一次。盤點的時候翻到今年稍早、教召前後做過的一件事：把兩份跟寫程式八竿子打不著的清單放上網頁。這正是網站今年「長東西」的一個例子，就拿來寫今天這篇。
當過兵的大概都知道，退伍不是結束。在除役之前，都還可能被抽到教召，收到一張教召令，就要放下手邊的事回營區報到幾天（新制教召是 14 天唷 ^^），重新熟悉當兵時的那一套。這件事的麻煩不在營區裡，而是在出發前：到底要帶什麼？帶了什麼會比較好？
我手上剛好有兩份檔案，是同一件事在不同時間點留下來的。一份是今年教召之前，照著網路上查到的資訊跟自己的想像列的 攜帶物品.docx；另一份是實際去過一趟、在空軍基地待了幾天回來之後，把「早知道就帶」跟「帶了根本沒用」重新整理過的 攜帶物品推薦與說明.xlsx。這兩份的差別本身就是這篇的重點，而我當時做的很單純：把它們交給 Claude Code，變成掛在個人網站上、自己跟同梯、朋友都能打開來看的頁面。
這篇的兩個成品都在網站上：教召攜帶物品清單（教召前、Word 轉的）與教召攜帶物品推薦清單（教召後、Excel 轉的）。兩份原始檔（攜帶物品.docx、攜帶物品推薦與說明.xlsx）放在同一個專案連結底下。
第一份是結構一般的 Word 檔案：先分「穿著」、「去程攜帶」，去程再拆成「身上」、「隨身後背包」、「行李袋」，底下用表格把東西一格一格填進去。短袖、輕薄長褲、運動鞋、軍中穿的襪子；教召令正本、工作地證明、個人私章；行動電源、摺疊傘、免洗餐具⋯⋯
這份清單的特徵是「每項一樣重要」。每一項的地位都一樣，沒有哪個比哪個重要，因為列的時候我根本不確定哪個重要（當然必帶的部分很重要），全部都是照別人的經驗跟自己的猜測寫下來的，寧可多帶也不要少帶。當時就是隨手用 Word 開了個表格填，一格接一格。
把它交給 Claude Code 的要求很直接：讀這份 docx，做成一頁放在個人網站上的清單，並且套用現在網站的樣式。產出的頁面就在這裡：教召攜帶物品清單。分類、項目都照原檔搬過來，那些用重複儲存格湊出來的小標題也被還原成正常的分段，排版換成網站的樣子，一份 Word 就這樣變成一個網址。
去過一趟回來之後，對那份清單就可以再加以改造了。因為實際到了營區才知道，有些東西非帶不可、有些帶了反而佔空間、有些現場會發根本不用自己帶，這些差別我後來是拿 Excel 記的。而第一份用 Word、第二份用 Excel，純粹是當下手邊剛好開了不一樣的軟體，沒什麼特別用意，變的其實是裡面寫了什麼。
攜帶物品推薦與說明.xlsx 的欄位變成三個：項目、推薦指數、備註。推薦指數用星號，★★★ 是非帶不可，★ 是可有可無。備註那一欄才是這份檔案真正的價值，全是實戰換來的細節：
分類也不再是硬湊的。這次用 emoji 開頭把物品分成 🪖 穿著、💳 身上、💊 醫藥用品包、💤 睡覺用品包、🧴 洗澡用品、🧼 洗衣用品這些一眼認得出來的群組，該歸哪裡就歸哪裡。
更明顯的差別是語氣。第一份 Word 沒有語氣，就是名詞的堆疊；第二份 Excel 的備註裡到處是猶豫跟後悔。駕照寫「不確定有沒有需要」，小剪刀寫「其實滿可能用到，不確定會不會被沒收」，隨身洗衣機那項給了一顆星，備註是「如果真的懶得手洗又不嫌重的話⋯」。
第一份每一項的份量都一樣，第二份每一項後面都跟著幾顆星跟一句為什麼。
這份也交給 Claude Code 做成頁面：教召攜帶物品推薦清單。星號、備註、emoji 分類全都在，一樣套進網站的樣式。原本是給自己下次看的，順手也就變成能丟給同梯、丟給之後被抽到的朋友一個連結（還很剛好提供給那時候要去漢光演習的朋友，笑死）。
如果只是把表格內容照抄成 HTML，那用不用 Claude Code 差別不大。真正讓我覺得值得寫一篇的，是下面這三件我沒特別要求、它自己補上的事。
我沒有給它任何樣式指示，只說「套用現在網站的樣式」。它去把 hugo-coder 這個主題讀了一遍，就是 Day 20 我花了一些時間才搞懂的那個主題，然後產出的頁面，字體、配色、間距、標題階層，跟站上原本的文章風格一致。
這件事現在回頭看更有意思。那個主題的內容欄寬是 76.8rem、1rem 等於 10px 這些藏在細節裡的東西；做這兩頁的當下，只丟了一句「套用現在網站的樣式」，它讀一讀就對上了，融進去比我當時預期的省事得多。
這是最出乎意料的一個。Excel 那份原檔，我在每一項前面都手打了一個 [ ] 當作打勾框，本來只是視覺上的記號。Claude Code 把它變成了真的：網頁上每一項前面是一個能點的核取方塊，點下去打勾，而且這個勾的狀態會存在瀏覽者自己的裝置上（用 localStorage），關掉頁面再打開，勾過的還在。
對一份打包清單來說，這個功能剛好戳中要害。出發前一晚一項一項邊裝邊勾，裝到一半被打斷、手機鎖屏，回來打開勾過的都還在，不用從頭來。而且它是存在「看的人自己的裝置」上，不是存在我的伺服器。我也根本沒有伺服器，這頁是純靜態的，所以同梯打開這個連結，他勾他的、我勾我的，兩邊互不干擾，也沒有誰的資料上傳到哪裡，我很訝異原來一個純靜態頁面能有這種「記得我勾到哪」的行為！ 我原本以為要架後端才做得到 XD
打包清單最常打開的場合是站在行李箱前面滑手機，不是坐在電腦前。這頁在手機上排得整整齊齊，換到電腦寬螢幕也不會散掉，同一份內容自己會依螢幕寬度重排。
還有一個明暗模式的手動切換。這其實是主題本來就有的能力，但轉換過來的頁面完整繼承了：點一下就能在亮色、暗色之間切換，對於習慣用暗色模式的人來說很友善，這種東西有的時候不會特別注意到。
做完之後回頭看，有幾個當下沒多想、事後覺得值得講清楚的決定，用問答的方式記一下。
「為什麼要特地做成網頁？檔案直接傳給同梯不就好了。」
docx 跟 xlsx 當然也能傳，但就麻煩，而且試算表在手機上開起來欄位常常擠成一團，還得先下載才看得到內容。網頁不一樣，點連結就開，什麼裝置、什麼瀏覽器看到的都一樣，我改一次內容，所有人手上那條連結指到的就都是新版，不用重傳一輪。而且它是放在個人網站上的一個網址，不會像丟在群組裡的檔案那樣，訊息一多就沉下去再也找不到。這也是 Day 20 那篇提到的同一個道理，只是這次換成一份清單在套用。
「分類是 Claude Code 幫你分的嗎？」
一開始是。我讓它自動歸類，它分得也不算差，但那是它的邏輯，不是我的。我打包的時候，腦子裡想的不是「這東西算醫藥類還是清潔類」，是「這東西要塞進哪個袋子」，醫藥包一袋、洗澡用具一袋、隨身小包一袋，順序是照收納動線走的。它自動分出來的群組跟我實際伸手去拿的順序對不上，用起來反而卡，所以後來還是改回自己習慣的手動分類。它一秒就能分好，只是分完我自己用起來要多想一層。
「清單裡哪一項最不能漏？」
不是那些讓日子好過一點的用品，是最前面獨立出來的三樣：教召令正本、工作地證明正本、私章。備註寫得很白，「報到需要」、「領錢需要」。少了教召令跟工作地證明，人到了門口報不了到；少了印章，沒辦法領錢、跟軍營說再見（雖然其實也可以蓋指紋手章啦）。所以推薦那份特地把這三樣拉到最上面自成一區，全給 ★★★，其他的東西都排在它們後面。
「打勾的狀態，換一支手機是不是就不見了？」
會，這點得老實講。勾的紀錄存在看的人自己裝置的 localStorage 裡，換手機、換瀏覽器、清掉瀏覽資料都會消失，也不會跟別的裝置同步。但對打包清單來說這剛好不算缺點，因為它本來就是單次、單裝置的事：出發前一晚在自己手機上邊裝邊勾，這趟用完也就沒了。真要跨裝置同步就得架帳號、架後端。
這一天做的，就是把兩份躺在資料夾裡的檔案，變成兩個能傳給別人的網址。
但我更在意的是那兩份檔案本身的對照。同樣一件教召，第一份 Word 是出發前用猜的一張表；第二份 Excel 是回來後補的，多了推薦指數跟一整欄「為什麼」。Word 也好 Excel 也好，Claude Code 都把它們搬成了網頁該有的樣子，還順手加上打勾、明暗模式這些我沒開口要的東西。
格式轉換在現在的情境中，比較像是「告訴它我想呈現成什麼樣子，它連我沒想到的呈現方式都補上」。而且做完之後，下一個被抽到教召的朋友，點一個連結就能拿到一份會打勾的清單，而放在硬碟裡的檔案做不到這件事。 祝福大家中教召然後我不用 (誤)
網頁技術
其他參考
註一：本篇提到的兩份原始檔（
攜帶物品.docx、攜帶物品推薦與說明.xlsx）與轉換後的頁面，都是單次操作的實際紀錄，不是可重現的評測；換一份檔案、換一次對話，Claude Code 補上的東西不會完全一樣。
註二：文中的教召攜帶建議來自個人一次教召（空軍基地）的經驗，各單位、各梯次的規定與環境不同，僅供參考，出發前仍以自己收到的教召令與單位通知為準。
註三：本篇描述的 Claude Code 行為以 2026-09 這段期間的實際操作為準，產品行為會隨版本改變，屬於當下的定性觀察。
iThome鐵人賽
看影片追技術