新手教學 · 個人品牌容器 step-by-step · 最後更新：2026-05-15

你正在看的這個 Lab：我把所有東西串起來的個人品牌宇宙

你正在看的這個網站就是我做的第 8 個專案。前面做了交易日誌、Threads bot、IG bot、產品網站、SEO 陪跑、LINE Bot 之後，最後做了一個容器把以上全部裝進來，這個容器就是這個 Lab。

做容器之前我做了一年散裝專案，每個都跑得不錯但沒有一個「家」。交易筆記在 Notion、貼文在 Threads、工具在 GitHub、Lab 文章想寫但不知道丟哪。每次有人問「你的東西都在哪？」我都答不出來。

這篇是 step-by-step 教學，讀完你會做出：1) 一份「個人品牌容器」需求清單；2) 一個跟你靈魂對上的視覺世界觀；3) 一個能在前台直接編輯的「活網站」架構；4) SEO/視覺/內容三軸協同的長期經營節奏。範例是 AI workflow + 交易，但任何「想把散裝作品串成個人品牌」的人都套得上。4-6 週可上線 v1。

為什麼需要個人品牌容器？（散裝專案的致命問題）

散裝專案最大的問題不是「不夠多」，是「找不到自己」。你做了 5 個專案散在 5 個平台，自己都很難跟別人講「想多認識我，去哪裡看？」。這個問題對個人品牌是致命的。如果連入口都給不出來，演算法給你的觸及就是消耗品，今天發明天就沒了。

個人品牌容器解決 4 個問題：

1. 問題 1（入口）：陌生人想了解你，有一個固定網址可以去，不用在 5 個平台找。
2. 問題 2（樞紐）：所有外部觸及（Threads / IG / GitHub / 講座）最後導到這裡，把流量留下來變 email / 訂閱 / 付費。
3. 問題 3（證明）：客戶問「你有什麼能證明會做」，給網址不用講半天，整個容器就是長期可驗證的證明。
4. 問題 4（下一階段）：要做電子報、課程、社群、付費內容，都有地方可以接。沒有容器這些都會變成散落碎片。

做容器之前你會覺得它沒必要（反正散裝也能用），做之後你會發現以前所有東西都是它的拼圖。容器本身比裡面的東西更能定義一個人。

為什麼模板和 Notion 公開頁不夠？（個人品牌的差異化）

想偷懶用模板的話通常會撞到 3 個牆。下面 3 個常見方案的問題：

1. 方案 1 — Wix / Squarespace 模板：模板長得像「設計師作品集」「軟體工程師履歷」「行銷顧問頁面」3 種類型，但你可能都不是。沒有對應你身份的模板。
2. 方案 2 — Notion 公開頁：乾淨好寫，但每個用 Notion 的網站都長得一樣。觀眾打開沒有「這個人不一樣」的感覺。長得跟別人一樣就等於不存在。
3. 方案 3 — Substack / Medium：寫作體驗好，但你只租了平台一個帳號，平台收掉或改演算法你就完了。沒有自己的網域跟資料控制權。

個人品牌容器的關鍵需求是「跟靈魂對上的視覺世界觀」+「自己網域 + 資料控制權」+「能持續長大不被框死」。3 個都要，模板做不到全部。

正解：用 Claude Code + Vercel + GitHub 自己蓋一個。技術門檻沒想像中高（前面文章都教過），自由度 100%，視覺風格跟你的審美對齊，下一階段要長什麼都加得上。

怎麼定義跟靈魂對上的視覺世界觀？（4 步驟）

視覺風格不是裝飾，是個人品牌的「過濾器」。對的觀眾看一眼就會留下，不對的觀眾看一眼就會走。比 SEO 標題還直接。下面是定義視覺世界觀的 4 步驟：

1. Step 1 — 列你長期被吸引的 3-5 樣東西。不是「我覺得好看」的，是「我會反覆看」的。例如我自己：8-bit 像素遊戲、復古 RPG、藍圖手稿、占卜牌組、深宇宙星圖。這些是你審美的 DNA。
2. Step 2 — 找出共同特徵。我的清單共同特徵：有時間感、深色為主、有神祕學符號、收藏感、不是流行的東西。寫成一句話：「深宇宙感 + 像素遊戲風 + 神祕學收藏感」。這就是世界觀。
3. Step 3 — 翻譯成 5 個視覺要素：配色（3-4 色）、字體（中英各 1 套）、形狀語言、留白密度、特殊紋理。我的 Lab：深紫 + 米色 + 螢光綠 / 像素字 + 工程體 / 銳利直角 / 寬鬆留白 / 8-bit 像素紋理。寫成 design_system.md。
4. Step 4 — 第一頁鎖定當基準頁，後面所有頁參考它。視覺風格 lock 之後每加新元件都不用再想（hover 怎麼動、按鈕怎麼長、卡片怎麼排都有預設答案）。網站像有 DNA 的東西在自己長。

視覺世界觀做對之後，這個 Lab 一打開就不像「另一個 portfolio」。對的觀眾（喜歡深宇宙 / 像素 / 神祕學的人）會留下，不對的會走。對個人品牌是好事不是壞事。

什麼是「活網站」？怎麼做前台直接編輯架構？

靜態網站的代價：每改一個字都要回去動原始檔案、重新發佈、等 1 分鐘才看得到。對寫文章常常邊寫邊改的人來說，這個流程慢到懶得改，最後變成「網站文案爛但懶得動」。

解法是把網站做成「活的」 = 前台直接編輯。登入之後網站上每段文字、按鈕、連結都會浮出一個編輯框，按下去就能改、存了就生效，不用回去動原始檔案。改網站速度從「每次 5 分鐘」變成「每次 5 秒」。

前台直接編輯架構 4 個元件：

1. 元件 1 — 預設內容寫在 build script 裡（hardcoded fallback），任何狀況下都有東西顯示。
2. 元件 2 — Supabase 存「override」表，admin 改的字存進這張表。每次 page render 時 merge defaults + overrides。
3. 元件 3 — 前端 edit overlay：admin 登入後每段文字旁邊出現一個鉛筆 icon，按下去打開 inline editor，存進 Supabase。
4. 元件 4 — Auth 保護：用 Supabase Auth 鎖 admin。一般訪客看不到 edit icon，只看到合併後的最終文字。

技術上有點複雜（要處理權限、儲存、安全性），但做完一勞永逸。網站從「蓋出來放著的作品」變成「每天還在裡面活著的地方」。可以一邊跟人聊天一邊調文案、看到不順眼的字當場改、寫文章直接在前台寫。詳細實作看 inline-edit-overlay 那篇 skill。

怎麼讓 SEO / 視覺 / 內容三條線不打架？（協同節奏）

做容器最麻煩的不是技術，是 SEO / 視覺 / 內容三條線同時要前進，每條都會撞到別條。下面是 3 條線常見的衝突：

1. SEO vs 視覺：SEO 想加結構化資料、想加更多文字密度。視覺想留白、想視覺優先。沒節制的話文字密度太高網頁變成 SEO 文工廠醜炸。
2. 視覺 vs 內容速度：複雜視覺效果（動畫 / 漸層 / 字型）會降 PageSpeed，影響 SEO 也影響使用者體驗。沒節制的話 LCP 從 1.2 秒變 8 秒被 Google 懲罰。
3. 內容 vs 品質：想衝量一週寫 5 篇，但寫太快品質掉，反而被 Google 判定 thin content 全部不收。

解法不是追求三條同時最佳，是追求三條互相不打架。先把架構鎖好（design system / 內容範本 / SEO checklist），再每週各推進一點點。下面是我的協同節奏：

1. 週節奏：寫 2 篇文章 + 修 1 個視覺細節 + 改 1 個 SEO 設定。比一次想做完美健康很多。
2. 月節奏：每月底跑一次 audit（PageSpeed / GSC / GA4 / 視覺一致性），看哪條線拖後腿就那個月補。
3. 季節奏：每季重新看 design system 跟內容主題清單，需要的話 refactor。容器在長，方向也會調。

個人品牌 Lab 怎麼從 0 做到 100？（5 步 step-by-step）

把上面方法論濃縮成 5 步驟，4-6 週可上線 v1：

1. Step 1（第 1 週）— 寫需求 + 視覺世界觀。列容器的 4 個問題（入口 / 樞紐 / 證明 / 下一階段）需求，定義視覺世界觀（看本文第 3 節 4 步驟），產出 design_system.md 跟 14 頁清單。
2. Step 2（第 2 週）— Claude Code 一次性 mock 14 頁。指令範本：「請建一個個人品牌 Lab 網站，14 頁清單 [列出]，視覺風格參考 design_system.md，技術 Next.js + Tailwind 或純 HTML。所有頁面 mock 內容，導覽連起來，部署到 Vercel。」
3. Step 3（第 3 週）— 加前台直接編輯架構。看本文第 4 節 4 個元件，接 Supabase Auth + overrides 表 + 前端 edit overlay。這步技術門檻最高，但做完之後寫文章門檻趨近於 0。
4. Step 4（第 4 週）— 上 SEO 結構（看「我用 AI 從 0 開始學 SEO」那篇 4 個必做動作:sitemap / PageSpeed / 內鏈 / E-E-A-T）。完成 v1 上線。
5. Step 5（第 5-6 週起）— 開始長期經營（每週 2 篇文章 + 1 個視覺細節 + 1 個 SEO 設定）。3 個月後容器有 30+ 篇內容、100+ 內鏈、SEO 數據開始長。

跑完 5 步你的個人品牌容器 v1 上線。容器這東西沒有「完成」的一天，只有今天的它。下次你再回來看，它應該會不一樣 — 這就是個人品牌宇宙的好處。

不想自己 setup 怎麼辦？

上面這套自己跑大概 4-6 週（每天 2-3 小時）。如果符合下面任一條，可能不適合自己跑：

• 想要全套品牌設計（logo / 配色 / VI / 名片）不只是網站
• 前台直接編輯架構技術門檻太高（要處理 Auth + Supabase + edit overlay）
• 想 1-on-1 帶你定義視覺世界觀（這步驟需要對自己審美有意識）

可以找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、視覺世界觀、14 頁 mock、前台編輯、SEO 上線整套跑完。Pro：有人幫設計世界觀、卡關 5 分鐘解決、4-6 週一次到位。Con：要付費。適合：想做真正個人品牌容器、不想自己 debug 的人。

看完這篇之前先確認:

← 回新手教學