用 Claude Code 把個人知識庫做成網站，筆記按主題找、點開就能讀

為什麼要做這個

我原本有維護一個個人知識庫 D:\llm-wiki：把各種來源（PDF、docx、md、截圖）丟進 raw/，再靠 AI 讀完消化，寫成 wiki/ 底下的摘要頁、實體頁、概念頁。這套做法已經萃取成一個可重複使用的 Skill（wiki-readlist-page）。

隨著資料越多，遇到的問題是：知識庫本身沒有一個「總覽」的入口，要回頭找某一篇只能直接開資料夾瀏覽。

想解決的目標很單純：做一個閱讀清單頁面，可以按主題分類、一眼看到整個知識庫收錄了什麼，而且點進去要能看到真實內容，不是一堆原始的 markdown 檔。

怎麼用 AI Agent 做出來的

我用 Claude Code 在知識庫資料夾裡直接工作，整個過程是一輪一輪加需求，不是一次到位：

• 先給視覺參考，讓 AI 做出第一版：白色卡片、左側強調色條分組、頂部三個統計數字可以當分頁籤切換。
• 點連結原本是連到 .md 原始檔（純文字很難讀）→ 要求改成連到「人看得懂」的排版頁，AI 寫了一支轉換腳本，把全部 67 篇 wiki markdown 轉成真正的 HTML 頁面。
• 加一個固定在左側、可以收合展開的分類選單（TOC），手機寬度自動收成浮動按鈕。
• 點項目連結不再另開新視窗，改成在同一頁右側用 iframe 內嵌顯示，並加一個「回首頁」按鈕。
• 最關鍵的一步：把這一整套版面邏輯與產生流程抽出來，變成一個全域可重複使用的 Skill（wiki-readlist-page），之後任何知識庫想做同樣的總覽頁，直接呼叫就好，不用重新手刻。

印象深刻的卡關與修改

• 斜線把檔名變資料夾：檔案名稱寫了斜線 /（如「多路徑 I/O」），電腦誤以為那是目錄層級，結果變成建立了空資料夾、原本的連結全部找不到頁面。改掉斜線、清理廢棄資料夾後才恢復正常。
• 特殊符號被「二次亂碼」：標題有 & 符號時，系統太早把符號轉成網頁碼，導致比對失敗，還被重複編碼變成一串亂碼（&）。後來調整順序，先比對文章標題、確認成功後才做轉換，就順利解決了。
• 範例標籤被誤認成真的超連結：在說明文件裡寫了 [[頁面名稱]] 當作示範語法，系統卻誤以為是真的超連結，跑去尋找這頁面。後來先把程式碼與範例文字「隔離」開來，才處理超連結，兩者就不會互相干擾。
• 內嵌視窗點連結，畫面疊兩層選單：在網頁右側的預覽小視窗點擊「返回」連結時，因為沒有指定跳出小視窗，導致整個網站首頁直接被塞進那個小視窗裡，畫面看起來就像左邊選單重複出現兩次。補上「跳出外層視窗（target="_top"）」的設定後才正常。

這幾次卡關讓我體會到：AI 寫程式碼很快，但「這段修改到底有沒有真的生效」這件事，還是要靠實際跑起來驗證，不能只看程式碼寫得對不對。

成果改變與應用情境

現在打開 proposals/overview.html，就是我整個 D:\llm-wiki 知識庫的入口首頁：

• 一眼看到規模：31 篇來源筆記、36 張實體／概念頁、11 個主題分組。

• 想找某個主題（例如 Network 工具），直接在左側選單點開分類，細項直接跳轉，不用再自己開檔案總管找檔名。

更重要的是，「做一次閱讀清單頁」這件事能延伸成 FAQ，變成用 AI 整理產品售後服務可行性的工作方法。