利用 Claude 建置自己各種興趣的 Side Project

手機看行前指南時，頂部疊了三層固定列、約 190px。記錄為什麼選「往下滑收起」而不是壓縮高度、往上滑時再分兩段（滑一點只露出日期列，滑多才全部回來），為此破例改了說好原樣保留的指南樣式，以及讓收起不惱人的幾條規則：靠近頂端一定顯示、小於 8px 不判斷、捲到底的回彈不算往上滑、看不見的列鍵盤也碰不到。另一條線是地點總表的「吃」加上子分類與篩選按鈕：選項太少時 AI 可以上網補，但來源不明是隱憂，所以我改成自己丟資料給 Claude、由它查證與統整。

旅行頁原本以「回來後的紀錄」為主，行前指南只是一個原樣保留的內嵌分頁；實際用下來我只看指南。這次的目標是四件事：少切頁面、打開就是當天的建議行程、旅途中記下去了哪就同步回指南（之後找店先列還沒去的，回來後的整理也直接在上面做）、頁首講清楚還剩幾天。記錄的取捨有：指南的分項攤平成頁首導覽、手機用漢堡選單（下拉選單被我否決），地點總表併進指南、新店只能加在清單尾端，頁首日期併進原本那一列、改成時間軸；另外用地址補座標的腳本把每家店畫進示意圖，太遠或沒座標的用虛線圈。踩到的坑有：合併時一刀切掉一個函式導致整頁空白、記住的舊分頁讓預設頁失效、平滑捲動讓切分項看起來沒反應、手機上一列塞不下日期、只靠店名幾乎查不到座標。

指南升成主角之後，我拿手機實際用了一輪，丟給 Claude 一串體驗問題，第一條就是收回 Day21 做的「往下收、往上露」：「那個好卡，用一層就好了」。記錄這輪 UI 調整的取捨：固定哪一層（Claude 建議只固定頁首，我選頁首加日期列）、「← 總覽」收進選單還是整個拿掉、地區篩選要不要改下拉選單（地區要、類別不要），以及計畫被我退回六次、每次補了什麼。踩到的坑是為了壓低日期列把日期排成一行，最後一顆按鈕超出畫面 13px、整頁可以左右滑；之後「手機不能左右滑」寫成專案的硬規定，改版面前要在四種寬度量過。另外自動部署停住，改成手動部署。

Day19 定下的「每趟旅行是一個單一的 HTML」，用起來最困擾的是按上一頁就直接回總覽。這篇記錄把它翻掉的過程：為什麼光拆檔案沒用、要每個畫面都有網址；單一外殼加

原本只想把 Projects 收進 /blogs/ 變成一個小方塊、順便讓它有趣一點，結果 /blogs/ 的方塊排版前後改了四版：原本的卡片、貼紙牆、改成三欄放描述，最後在 Claude Design 跑了三輪定稿成「走去哪裡？」的奇異鳥徽章，描述改成 hover 才出現。記錄每一版為什麼被換掉、Projects 怎麼在不搬目錄的情況下出現在 /blogs/、新畫的工程師 kiwi，以及幾個坑：worktree 沒拉主題時 Hugo 照樣 build 出空白頁、hover 不會晃是因為 Windows 關了動畫效果、設計稿在 claude.ai 上讀不到、寫這篇截圖時才發現徽章在寬螢幕排成 5＋3、字體跟全站不一樣。

Claude Code 新推出了 mod，我試著導入 llm-wiki。主軸是為什麼要用 mod：先分清 skill、hook、MCP、plugin、mod 各管什麼，再從最直觀的介面開始，在 session 裡畫出 vault 儀表板：側邊面板列出 TODO.md 未完成項與近期新增 wiki，點項目就把對應 skill 指令填進輸入框、點 wiki 頁直接在 Obsidian 開；面板下半部畫各域 wiki 數與 raw 堆積；輸入框上方的橫條放今日隨機三頁，狀態列放待辦／Inbox／本週新增數。接著往下看 mod 的 hook：旁觀、改寫、接手三種行為，以及它排在既有守門 hook 前面這件事。也記錄怎麼算「近期新增」、怎麼打開 Obsidian、mod 放在哪、raw 堆積的第一版為什麼不能用，以及幾個驗證錯誤。

接續 Day26，這篇寫 navi 這個 mod 的畫面設計：橫條、狀態列、輸入框、側邊面板各自負責一種注意力；統計分頁以「哪裡還沒連起來、哪裡值得再寫、書的概念流到哪些域」三個問題分區，每個數字旁邊都附一個只填不送的動作；趣味分頁放單篇事實。記錄每個畫面要我關注什麼、門檻怎麼定、以及看到畫面之後改掉的地方。

再寫一個 mod：thinking-line 在 Claude 執行中接管 spinner 那一列，顯示細分的階段、step 序號、平行工具合併、每個 subagent 在跑什麼，以及輸出 token 與每秒速度。記錄 Spinner 能改哪些欄位、token 為什麼一半是實值一半是估算、chunk 太密怎麼節流，以及桌面版畫不出多行時改走的路。

note-enrich 跑完的 raw 常常已經夠格當 wiki 頁，但要升格時卡在一件事：原本「就近融入」的規則讓我寫的句子和網路查來的句子混在一起，升格只能動 LLM 寫的部分，卻分不出是哪幾句。這篇記錄把輸出改成「原文一塊、## 補充一塊、## 來源清單」的取捨，為什麼不從 raw 全面改、已經 enrich 過的 20 幾篇為什麼不回頭拆，以及 enrich 結束時怎麼判斷該不該提議 wiki-build –promote。也記錄兩份規格各寫各的 frontmatter，悄悄分歧出 kebab tag 和被挪用的 source 欄位。

系列最後一天，不照前面的五段模板。先說寫這 30 篇的收穫：逼 AI 回顧 session、我再爬一遍，補上 vibe-coding 時「看過 plan、結果對了就 go」留下的理解落差。再說為什麼我接受「vibe-coding 就是一直造輪子」：造輪子是養品味的過程。接著整理這個月在資安、成本、UIUX、功能開發四塊的心得，最後是之後要繼續做的事。