你正在看的這個 Lab：串起個人品牌宇宙
文 / Coolkid發布：2026-05-10 · 最後更新：2026-06-11閱讀約 14 分鐘
短答給趕時間的人：個人品牌容器就是一個把散在各平台的作品全部裝進來的網站。我這個 Lab 就是那個容器，前面做過的專案全裝在裡面。問題不在做得不夠多。散裝最傷的是別人找不到你。容器要補的是入口、樞紐、證明、下一階段這 4 件事。做法分 5 步：先寫需求跟視覺世界觀，用 Claude Code 一次生出 14 頁假版，加上前台直接編輯的架構，再補 SEO，最後每週推進一點。每天 2 到 3 小時，4 到 6 週上線第一版。手上還沒有幾個做完的專案，就先去做小工具，容器晚一點再做。
你正在看的這個網站，就是我拿來裝前面所有專案的那一個。
在這之前我做了交易日誌、Threads 機器人、IG 機器人、產品網站、SEO 陪跑，還有 LINE 機器人。
最後我做了一個容器，把上面全部裝進來。那個容器就是這個 Lab。
做容器之前，這幾個專案各做各的，彼此不相通。每一個都跑得不錯，但沒有一個「家」。
交易筆記在 Notion、貼文在 Threads、工具在 GitHub，Lab 文章想寫，卻不知道要丟去哪。
每次有人問我「你的東西都放在哪？」，我都答不出來。
這篇是一步一步的教學，讀完你會做出四樣東西：1) 一份「個人品牌容器」需求清單，2) 一個跟你靈魂對上的視覺世界觀，3) 一個能在前台直接編輯的「活網站」架構，4) SEO、視覺、內容三條線一起前進的長期節奏。
我的例子是 AI workflow 加上交易，但只要你想把散裝的作品串成個人品牌，這一套都套得上。
4-6 週就能上線第一版。
為什麼需要個人品牌容器？（散裝專案的致命問題）
散裝專案最大的問題，很少是做得不夠多。真正的問題是別人找不到你這個人。
你做了 5 個專案，散在 5 個不同的平台上，連你自己都很難跟別人講清楚，想多認識你的話，到底應該去哪裡看？
這件事對個人品牌很傷。
如果連一個固定入口都給不出來，演算法給你的觸及就只是消耗品，今天發完明天就沒了，一年下來什麼都留不住。
個人品牌容器可以解決下面這 4 個問題：
- 問題 1（入口）：陌生人想了解你，有一個固定網址可以去，不用在 5 個平台之間亂找。
- 問題 2（樞紐）：所有外部來的觸及，不管是 Threads、IG、GitHub 還是講座，最後都導到這裡，把流量留下來變成訂閱、電子報名單或付費客戶。
- 問題 3（證明）：客戶問你「有什麼可以證明你會做」，直接給網址就好，不用講半天，整個容器就是長期可以查證的證明。
- 問題 4（下一階段）：以後要做電子報、課程、社群、付費內容，都有地方可以接上去。沒有容器，這些東西只會變成散落的碎片。
做容器之前，你會覺得這種東西沒什麼必要，反正散裝也用得下去。
做完之後你會發現，以前做過的每一樣東西，其實都是這個容器的拼圖。
容器本身比裡面裝的東西更能定義一個人。這句話我是做完才懂的。
為什麼模板和 Notion 公開頁不夠？（個人品牌的差異化）
想偷懶直接套模板的話，通常會撞到三道牆。
下面是 3 個常見方案的問題：
- 方案 1，Wix 或 Squarespace 模板：這些模板長得像設計師作品集、軟體工程師履歷、行銷顧問頁面這 3 種，但你可能哪一種都不是，找不到對應你身分的模板。
- 方案 2，Notion 公開頁：乾淨又好寫，但每個用 Notion 做的網站都長得一樣。觀眾打開之後不會有「這個人不一樣」的感覺，長得跟別人一樣，等於沒有被記住。
- 方案 3，Substack 或 Medium：寫作體驗很好，但你只是租了平台上的一個帳號。平台哪天收掉或改演算法，你就沒了，網域跟資料都不在自己手上。
個人品牌容器有三個關鍵需求：跟靈魂對上的視覺世界觀，自己的網域加上資料控制權，還有能一直長大而不被框死。
3 個都要，模板做不到全部。
我的做法是用 Claude Code、Vercel、GitHub 自己蓋一個。
技術門檻沒有想像中高，前面幾篇文章都教過，自由度是 100%，視覺風格可以跟你的審美對齊，之後想長成什麼樣子都加得上。
怎麼定義跟靈魂對上的視覺世界觀？（4 步驟）
視覺風格在個人品牌裡的作用，比較接近一道過濾器。
觀眾看一眼就會決定要不要留下來，篩選速度比 SEO 標題還要快。
那要怎麼把世界觀定義出來？
下面 4 個步驟是我自己走過一遍的順序：
- 步驟 1，列出你長期被吸引的 3 到 5 樣東西。判斷標準是你會不會反覆回去看，只是覺得好看的不算。我自己列的是 8-bit 像素遊戲、復古 RPG、藍圖手稿、占卜牌組、深宇宙星圖，這些就是你審美的底層材料。
- 步驟 2，找出這些東西的共同特徵。我那份清單的共同點是有時間感、以深色為主、帶神祕學符號、有收藏感，而且都不是當下流行的東西。寫成一句話就是「深宇宙感、像素遊戲風、神祕學收藏感」，這句話就是你的世界觀。
- 步驟 3，把世界觀翻成 5 個視覺要素：配色 3 到 4 色、中英各一套字體、形狀語言、留白密度、特殊紋理。我的 Lab 是深紫加米色加螢光綠、像素字加工程體、銳利直角、寬鬆留白、8-bit 像素紋理，全部寫進 design_system.md。
- 步驟 4，把第一頁鎖定成基準頁，後面每一頁都參考這一頁。視覺風格鎖定之後，每加一個新元件都不用再重想一次，滑鼠移上去怎麼動、按鈕長什麼樣、卡片怎麼排，都已經有預設答案。網站會像有自己基因的東西一樣長大。
視覺世界觀做對之後，這個 Lab 打開來就不像「又一個作品集」。
喜歡深宇宙、像素、神祕學的人會留下來，不對盤的人會直接離開。
會走掉的人本來就不會找你合作。所以這對個人品牌是好事。
什麼是「活網站」？怎麼做前台直接編輯架構？
靜態網站是有代價的。
每改一個字，都要回去動原始檔案，重新發佈，再等 1 分鐘才看得到。
對於寫文章常常邊寫邊改的人來說，這個流程慢到會讓人放棄，最後網站文案越看越爛，你卻連回頭修的力氣都沒有，這樣要怎麼長期經營？
解法是把網站做成「活的」，也就是可以在前台直接編輯。
登入之後，網站上每一段文字、每個按鈕、每條連結旁邊，都會浮出一個編輯框，按下去就能改，存檔就生效，完全不用回去動原始檔案。
改網站的速度，從每次 5 分鐘變成每次 5 秒。
前台直接編輯的架構拆開來看有 4 個元件：
- 元件 1，預設內容寫在建置腳本裡，等於一份寫死的備援文字，任何狀況下畫面上都有東西可以顯示。
- 元件 2，用 Supabase 存一張「覆寫」表，管理者改過的字都存進這張表。每次產生頁面的時候，再把預設內容跟覆寫的內容合併起來。
- 元件 3，前端的編輯浮層：管理者登入之後，每段文字旁邊會出現一個鉛筆圖示，按下去打開行內編輯框，改完存進 Supabase。
- 元件 4，用 Supabase Auth 鎖住管理者身分。一般訪客看不到鉛筆圖示，只會看到合併之後的最終文字。
技術上確實有點複雜，權限、儲存、安全性都要處理。但做完就一勞永逸。
網站會從一件蓋出來放著的作品，變成一個你每天還在裡面活動的地方。
可以一邊跟人聊天一邊調文案，看到不順眼的字當場改掉，寫文章也直接在前台寫。
詳細做法看 inline-edit-overlay 那一篇。
怎麼讓 SEO / 視覺 / 內容三條線不打架？（協同節奏）
做容器最麻煩的地方，真的是技術嗎？
真正麻煩的是 SEO、視覺、內容三條線要同時前進，而且每一條都會碰到另外兩條。
下面是這 3 條線常見的衝突：
- SEO 對上視覺：SEO 想加結構化資料，想加更多文字密度，視覺想留白，想把畫面放在第一位。沒有節制的話，文字密度一路衝高，整頁會變成內容農場那種樣子，很難看。
- 視覺對上內容速度：複雜的視覺效果，像是動畫、漸層、字型，都會拖慢 PageSpeed，也會影響使用者體驗跟頁面體驗那塊的評分。沒有節制的話，LCP 會從 1.2 秒變成 8 秒，讀者根本等不下去。
- 內容對上品質：想拚數量，一週寫 5 篇，但寫太快品質就會變差。這種單薄的內容通常排不上去，也幫不到整個網站，不如慢一點，把每一篇寫扎實。
我後來放棄讓三條線同時做到最好，改成只要三條線不打架。這樣每週反而都推得動。
先把架構鎖好，也就是設計系統、內容範本、還有一份 SEO 檢查清單，之後每週各推進一點點，不用每次都重新做決定。
下面是我自己實際在跑的三段節奏：
- 每週：寫 2 篇文章，修 1 個視覺細節，改 1 個 SEO 設定。比起一次想做到完美，這樣健康很多。
- 每月：月底跑一次盤點，看 PageSpeed、GSC、GA4 跟視覺一致性，哪一條線拖慢進度，那個月就補強哪一條。
- 每季：重新看一次設計系統跟內容主題清單，需要的話就整個重整。容器一直在長大，方向也會跟著調整。
個人品牌 Lab 怎麼從 0 做到 100？（5 個步驟）
把上面這些做法濃縮成 5 個步驟，4 到 6 週就能上線第一版：
- 步驟 1（第 1 週），寫需求加上視覺世界觀。先列出容器要解決的 4 個問題，也就是入口、樞紐、證明、下一階段，再照本文第 3 節的 4 個步驟定義視覺世界觀，最後產出 design_system.md 跟 14 頁清單。
- 步驟 2（第 2 週），用 Claude Code 一次做出 14 頁的假版。指令可以這樣寫：「請建一個個人品牌 Lab 網站，14 頁清單是［列出］，視覺風格參考 design_system.md，技術用 Next.js 加 Tailwind 或純 HTML。所有頁面先放假內容，導覽連起來，部署到 Vercel。」
- 步驟 3（第 3 週），加上前台直接編輯的架構。照本文第 4 節那 4 個元件，接上 Supabase Auth、覆寫表跟前端編輯浮層。這一步技術門檻最高，但做完之後，寫文章的門檻幾乎降到 0。
- 步驟 4（第 4 週），把 SEO 結構補上去。照「我用 AI 從 0 開始學 SEO」那篇的 4 個必做動作走：sitemap、PageSpeed、內部連結、E-E-A-T。做完就可以上線第一版。
- 步驟 5（第 5 到 6 週起），開始長期經營，每週 2 篇文章加 1 個視覺細節加 1 個 SEO 設定。3 個月之後，容器會有 30 篇以上的內容、100 條以上的內部連結，SEO 數據也開始長。
跑完這 5 步，你的個人品牌容器第一版就上線了。
容器這種東西沒有「完成」的一天。只有今天長成的樣子。
下次你再回來看，這個網站應該又不一樣了，這就是個人品牌宇宙好玩的地方。
不想自己從頭設定怎麼辦？
上面這一套自己跑，大概要 4 到 6 週，每天投入 2 到 3 小時。
如果你符合下面任何一條，可能不太適合自己來：
- 想要一整套品牌設計，包含 logo、配色、視覺識別、名片，不只是一個網站
- 前台直接編輯的技術門檻太高，Supabase、登入驗證、編輯浮層都得自己處理
- 想要有人一對一帶你定義視覺世界觀，因為這一步需要對自己的審美有意識
可以找「不想自己研究我教你」，這個服務還在規劃中。
一對一帶你從需求釐清開始，經過視覺世界觀、14 頁假版、前台編輯，一路做到 SEO 上線，整套流程一次走完。
好處是有人幫你設計世界觀，卡住 5 分鐘就解決，4 到 6 週一次到位。代價是要付費。
適合想做出一個真正的個人品牌容器，又不想自己一個人找問題的人。
個人品牌容器的完整步驟：1) 散裝專案的 4 個致命問題，入口、樞紐、證明、下一階段。2) 為什麼模板跟 Notion 不夠，差異化會死在這裡。3) 視覺世界觀 4 步驟，列出你反覆回去看的東西、找出共同特徵、翻成 5 個視覺要素、第一頁鎖定當基準。4) 活網站的前台編輯架構 4 元件，寫死的預設文字、Supabase 覆寫表、編輯浮層、登入驗證。5) SEO、視覺、內容三條線的協同節奏，分成每週、每月、每季。6) 5 個步驟，4 到 6 週上線第一版。容器本身比裡面的東西更能定義一個人。沒有設計背景的話，看上面的「不想自己研究我教你」。
名詞解釋
- SEO（搜尋引擎優化）
- 讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。
- Supabase
- 免費起步的雲端資料庫服務，提供資料庫＋登入驗證＋API，個人專案很夠用。
- Claude Code
- Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
- PageSpeed Insights
- Google 提供的免費網站速度體檢工具，輸入網址就給 0-100 分跟逐項改善建議。
- Threads
- Meta 旗下的文字社群平台。本站的社群引流主戰場之一，相關自動發文流程有整篇教學。
- Substack
- 電子報平台：免費起步，內建訂閱管理跟付費功能，寫了直接寄給訂閱者。
- 內部連結（internal link）
- 站內文章互相連的連結，幫讀者跟搜尋引擎理解「哪些內容相關、哪一頁重要」，是成本最低的 SEO 訊號。
- GitHub
- 放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- Vercel
- 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
如果內容對你有用就太好了
隨喜斗內
相關文章
▸ 常見問題
為什麼要做個人品牌容器？散裝在不同平台不行嗎？
散裝有 4 個致命問題。入口不存在，陌生人問你的東西在哪，你答不出來。樞紐不存在，外部流量留不下來，演算法給的觸及是消耗品。證明不可信，客戶問你會做什麼，你只能用講的，不能直接給網址。下一階段沒地方接，電子報、課程、付費內容都沒有歸屬。容器就是把這 4 個問題一次解決。詳細看本文第 1 節。
個人網站用 Wordpress / Wix 模板就好為什麼要自己蓋？
模板長得像設計師作品集、軟體工程師履歷、行銷顧問頁面這 3 種，但你可能哪一種都不是。Notion 公開頁每一個都長得一樣，沒有差異化。Substack 你只是租了一個帳號，網域不在你手上。個人品牌容器的關鍵是跟靈魂對上的視覺世界觀、自己的網域，還有能持續長大，模板做不到全部。詳細看本文第 2 節。
怎麼定義「跟靈魂對上」的視覺世界觀？
分成 4 個步驟。先列出你長期被吸引的 3 到 5 樣東西，判斷標準是你會不會反覆回去看。再找出共同特徵，寫成一句話的世界觀。接著翻成 5 個視覺要素，也就是配色、字體、形狀、留白、紋理，寫進 design_system.md。最後把第一頁鎖定成基準頁，後面每一頁都參考這一頁。我自己的世界觀是「深宇宙感、像素遊戲風、神祕學收藏感」，所有視覺決定都從這句話長出來。詳細看本文第 3 節。
什麼是「活網站」？跟一般靜態網站差在哪？
活網站就是可以在前台直接編輯的網站。管理者登入之後，每段文字旁邊會出現一個鉛筆圖示，按下去打開行內編輯框，改完存進資料庫，不用回去動原始檔案。改網站的速度從每次 5 分鐘變成每次 5 秒。架構有 4 個元件：寫死的預設文字、Supabase 覆寫表、前端編輯浮層、登入驗證保護。對寫文章常常邊寫邊改的人來說，差別非常大。詳細看本文第 4 節。
做個人品牌 Lab 要多久？
照本文的 5 個步驟走，4 到 6 週可以上線第一版，每天投入 2 到 3 小時。第 1 週寫需求跟視覺世界觀，第 2 週用 Claude Code 做出 14 頁假版，第 3 週加上前台編輯架構，第 4 週補 SEO 結構正式上線，第 5 週起進入長期經營的每週節奏。3 個月之後會有 30 篇以上的內容，SEO 數據開始長，第一個陪跑案件也可能成交。詳細看本文第 6 節。
SEO / 視覺 / 內容怎麼同時做不打架？
不要追求三條線同時最好，只要三條線不打架就好。先把架構鎖好，也就是設計系統、內容範本、SEO 檢查清單，再用每週、每月、每季的節奏推進。每週寫 2 篇文章加 1 個視覺細節加 1 個 SEO 設定，每月盤點 4 個指標看哪一條線拖慢進度，每季重看設計系統跟內容主題，需要的話就整個重整。詳細看本文第 5 節。
看完這篇之前先確認:
- 想做個人品牌宇宙網站
- 想把多個專案裝進同一個容器
- 想要前台可直接編輯的活網站
- 第一個專案就想做這麼大的人(先做小工具)
- 不在意品牌一致性的純 portfolio
- 完全用 Notion / no-code 的人
做到要給別人用的時候，註冊、登入、資料庫這些會一次冒出來。想有人陪你把這段做到能上線，可以看產品上線陪跑（試營運價 NT$ 16,800）。