2026-09-08· 約 2 分鐘 AI 工具Claude Code

本網站升級拉：全免費、視覺化

文章目錄（4 節）

我的個人網站改版了。兩天後（9 月 10 日）我要在生成式 AI 小聚分享三部曲的第三集〈好設計反饋優質上下文〉，這篇算是預熱：先讓你看看，我怎麼用那場要講的 Skill，順手把自己的部落格重做了一遍 XD

那場分享的主角是我平常很常用的 html-visualizer Skill。它是一套給 AI 的工作指引，讓 AI 把長篇文字整理成好讀的 HTML：

有先後、有分支的事情，用圖看一眼就知道誰接誰。

幾個東西怎麼互相連結，畫成一張網比讀三段文字快。

要我拍板的地方放選項，看完按一按、複製回去，AI 就拿到我的回饋。

這個 Skill 原本是拿來解決我自己的問題。AI 一次回覆太多文字，看完很累，有些東西明明畫個圖就能理解，卻要讀好幾段才知道它在講什麼。後來我也把這套做法用在公司，讓同事看會議記錄、討論需求，大家看得懂，才比較願意給回饋。

準備分享的時候，我突然想到，我自己的網站不也是一樣嗎？

裡面很多文章都在講 AI 工具和工作流，但呈現方式幾乎都是文字。哪個模型負責什麼、做一件事要經過哪些步驟，都要讀者看完之後，自己在腦裡整理。如果把這些內容也用同一個 Skill 圖像化，閱讀體驗會不會好一點？

先拿一兩篇試試看

所以我先挑了一兩篇舊文章，讓 AI 用 html-visualizer 重新整理。看完之後，我覺得好像真的不錯，原本要讀一段才能理解的關係，畫出來之後就容易掌握很多。

拿〈無為而治：把整間公司變成上下文的產品哲學〉來說，裡面有一段在講公司的資訊怎麼互相連結：

會議結論產生後續任務，執行結果連回專案，專案再連到公司目標⋯⋯讀者要自己在腦裡把這幾條線接起來。

後面講知識如何透過 PDCA 累積，是一段 ASCII 文字圖。

會議、任務、專案、目標各是一個節點，可以直接順著連線看它們怎麼串起來。

PDCA 換成循環圖，文字版本保留在可展開的區塊裡。讀者先看圖掌握整體，再往下讀每個環節的說明。

既然試出來的效果不錯，我就想乾脆把其他文章也一起整理。而且做到這裡，我發現連網站原本的架構都可以省下來。

以前發文要進後台貼內容，調整版面要改 Vue 元件，讀者點進來，有時還得等服務冷啟動。但現在 AI 可以直接把文章做成完整的 HTML，我只要把做好的頁面放上去，讀者就能看了。這樣一來，原本那套前後端服務就沒有繼續留著的必要。

原本的留言系統靠網址對應文章，所以所有文章的網址都保留下來，讓舊連結和留言可以繼續用。

最後，站上的 26 篇舊文章都用這個方式重新整理了。原本用在公司、幫我看懂 AI 回覆的 Skill，就這樣順便把自己的部落格改了一輪。

這次改完之後，我覺得最方便的是，平常整理知識和寫文章可以接在一起了。

原本只是想試試看文章畫成圖會不會比較好讀，結果連維護網站和發文的方式都一起簡化了。這也是我覺得這次改版很值得的地方，平常已經在用的工具，換個地方又用上了。

不過目前是我自己看完覺得不錯，讀者的感受還是要問讀者。所以我把改版前的內文也保留下來。

「改版前」裡面也有連結，能打開舊網站原本的樣子。

你可以找一篇有興趣的文章試試看。哪些圖真的有幫助、哪裡反而更難讀，或是覺得原本的文字就很好，都歡迎留言或私訊我。我會拿這些回饋繼續調整 Skill，之後整理文章也能一起用上。