SEO 菜鳥成長史 · #13

發布：2026-05-26 · 最後更新：2026-06-11

用 AI 兩天大改網站視覺:7 個踩坑 + 雙 AI workflow(GPT 出 vision / Claude 實作)

上一集 SEO #12 分析完「ChatGPT 第一次把人引到我網站」之後 我本來預期接著寫 #13 把文章分主題歸類。結果先打開網站滑一下發現問題比 SEO 還急 — 整個網站太復古掌機風了。整片 GameBoy 螢幕綠 + 老電視那種橫紋加全站用一格一格的像素字 視覺是有風格 但中文長文用這種像素字檔 讀 5 行眼睛就超累。我自己寫的品牌定位筆記說網站要「像 RPG 遊戲的入口 + 舒服的閱讀器」現在這版只做到前半 — 入口有 RPG 感 但讀文章一點都不舒服。

兩天用 Claude Code 跑了 8 個階段 + 11 次微調 把視覺打掉重做:首頁加 NPC 對話框 + 5 個 RPG 選項 / 文章頁背景改米白紙感 + 翻頁動畫 / 全站改兩套字體(短文用像素字 長文用一般中文字) / 白天模式整站改米色奶茶色。期間大概微調了上百次 其中幾個比較嚴重的是上線之後請 AI 再幫我看一遍才抓到的。

今天這篇雖然也是公開實驗紀錄 但跟 SEO 不太相關 主要是改網站視覺。我不是設計師沒學過視覺設計 整段過程是我讓 GPT 生出我想像中的樣子 然後跟 Claude 討論最終妥協的過程。讀完你會知道:7 個常踩的雷怎麼避 / 為什麼一次全部改完會爆炸 / AI 改網站視覺這條路上 能幫到哪 幫不到哪。

1. 卡點:讀 5 行眼睛超累

前面 12 篇 SEO 連載我都在追跑分、追結構、追 AI 引用。內容是有東西了 但網站本身的閱讀體驗一直被擱著。

上一集 #12 拿到 ChatGPT 第一筆 referral 之後 我終於有時間打開自己的網站好好滑一遍。結果讀不到 5 行 眼睛就超累。問題 3 個:

1. 全站 8-bit 像素字 — 中文部分根本沒有像素字檔 電腦自動跳回 Windows 預設字 結果一行裡英文跟中文大小完全對不起來
2. GameBoy 螢幕綠 + 老電視那種橫紋 — 短文章還行 長文章背景一直在閃
3. 段落寬度沒控 — 一行 80 個中文字 眼睛追完不知道下一行在哪

文章寫得再好 讀者撐不過第一段就會關掉。閱讀體驗是內容能不能傳到讀者腦袋的瓶頸 不是 SEO 的延伸 是 SEO 的前提。

2. 不是設計師,怎麼跟 AI 講清楚「我要什麼風格」?(GPT 出 vision + Claude 實作)

我不是設計師。沒受過視覺訓練 講不出「對比度 5%」「字距 letter-spacing 0.02em」這種術語。但這兩天的改造能跑下來 是因為我撞出一個對非設計師很有用的 workflow:

GPT 出 vision + Claude 實作妥協

具體流程是這樣:

1. 我把腦中模糊的感覺丟給 GPT — 「我想要看起來像翻一本舊魔法書的感覺」「但首頁要有 RPG 入口那種神秘感」
2. GPT 幫我把感覺翻譯成具體視覺描述 — 紙張米白色 #FBF7EE / drop cap 首字下沉 / 章節之間翻頁動畫 / NPC 對話框像 8-bit 遊戲
3. 我把 GPT 的描述丟給 Claude Code 讓它寫 CSS
4. Claude 跑完 我打開預覽 — 通常會有一兩個地方跟我腦中想的不一樣
5. 我跟 Claude 來回討論「這邊太亮」「字太小」「翻頁太慢」 它就改
6. 改到我覺得「夠像」就停。永遠不會 100% 對齊我腦中那個版本 — 妥協是必然的 接受這件事很重要

兩個 AI 分工很清楚:GPT 負責看見(把感覺變字)、Claude 負責落地(把字變 code)、我負責決定何時停手。最後一個其實最難 — 因為我會一直想再改一點 但每改一次就有可能拖慢網站、撞到舊版的某個雷。

這也是為什麼我下面要花 3 個 section 講「踩坑」 — 因為踩坑就是「想再改一點」的後果。

3. 為什麼要分 8 個階段、11 次微調,不一次重做?

我一開始想一次 redesign(全部改完)。Claude 直接告訴我不行 — 一次改太多 撞到 bug 你不知道是哪一塊壞的。所以拆成階段:

1. 階段 1 — 文章頁背景改米白紙感 + 字體系統 + 章節翻頁動畫
2. 階段 2 — 首頁 NPC + 5 個 RPG 選項 + 進場演出
3. 階段 3 — 分類頁進場彈框
4. 階段 4 — 全站用詞統一(FILE / CHAPTER / 等等世界觀詞)

每跑完一階段我就 commit 一次。commit 就是 git 紀錄一個檔案版本 — 如果下一階段改壞了 我可以 git revert 回到上一階段的狀態。

11 次微調是階段做完之後的調整。例如「米色奶茶色的對比度不夠」「NPC 對話框箭頭歪掉」「文章 drop cap 第一個字太大」這種 — 每個都是 5 分鐘小改 但累積起來就 11 次。

關鍵教訓:不是設計師更要分階段。因為你沒辦法一次想清楚全部細節 邊做邊調 才不會做到一半發現方向錯了又得重來。

4. 踩坑 #1:動畫做太狠把網站開啟速度拖慢

首頁本來想做一個進場演出 — NPC 從透明慢慢淡入 + 對話框打字機效果 + 5 個選項一個接一個浮現。我跟 Claude 講「越華麗越好」結果跑 PageSpeed 跑分掉了 10 分。

原因:NPC 圖片初始 opacity 是 0(完全透明) 等動畫播完才變成 1(完全可見)。但 Google 的網站開啟速度檢測(LCP)會等到 NPC 圖完全可見才算「載入完成」。我的動畫多撐 2 秒 LCP 就多 2 秒 跑分就掉。

修法:把初始 opacity 改成 0.4(微透明) 動畫從 0.4 淡到 1。LCP 看到圖片就算 paint 不再等動畫播完。跑分當下回來。

通則:動畫不要碰會影響 LCP 的元素(就是首屏最大的那塊圖或標題)。要做動畫就做在小元素上 不要做在主視覺上。

5. 踩坑 #2:打開過的舊頁面看不到新版

我自己測試遇過 — 改完 push 上去 但打開瀏覽器舊分頁 還是看到舊版。重新整理才看到新版。對訪客來說這就是「我已經訪問過你網站 之後再進來看到的還是舊版」。

問題出在兩個地方:

1. 瀏覽器本身會快取(暫存)CSS/JS 檔。檔名沒變 瀏覽器就直接用快取版
2. 我網站用 localStorage(瀏覽器裡的小紀錄)記得「這個訪客看過首頁動畫」 即使我改了動畫 localStorage 還記著舊狀態 直接 skip 新版動畫

解法三層:

1. 給 CSS/JS 加版本號 — 每次改完 build.py 自動算 hash 放在 URL 後面(例如 site.css?v=916c604530)。檔名變了 瀏覽器就必須重抓
2. 用 DESIGN_VERSION 標記。如果版本不對 自動清掉 ck_ 開頭的 localStorage 旗標。下次打開就會看到新版動畫
3. 加 version watch — 打開的舊分頁切回來時 自動 fetch 一下 /version.json 對比。版本變了 跳出小提示「新版本已上線 → 重新整理」

第 3 個是最重要的。沒這個 你 deploy 之後沒人知道有新版 流量就漏掉了。

6. 踩坑 #3:中英字混排不齊

這是我撞最久的雷。長文章用 8-bit 像素字 在英文沒問題 但中文 fallback 跳到系統字 兩種字 baseline(底線高度)完全對不起來。一行裡「SEO 第 1 篇」英文「SEO」是像素字 中文「第 1 篇」是 Windows 預設字 視覺看起來就是 一行字在跳。

第一個想法:乾脆全部用像素字 包括中文。但根本沒有中文像素字 — Press Start 2P 只有英文跟符號。

第二個想法:全部用中文系統字 不用像素字。但這樣 RPG 入口的世界觀就沒了 — 像素字是 brand 的識別點。

最後 GPT 幫我看見的方案:雙字體系統。短 UI 元素(button / FILE 標籤 / 按鈕)繼續用像素字 — 反正都是英文。長文章正文用 Noto Sans TC(中文閱讀專用字體)。Claude 把這寫成 CSS 變數:

--font-pixel: "Pixelify Sans", "Press Start 2P", monospace;
--font-reading: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;

每個元素都用 var(--font-pixel) 或 var(--font-reading) 不再寫死字體名稱。之後改字體 改 vars 一行就全站換。

教訓:中英混排不要硬塞一種字體。分開兩套 各自負責 各自最好看。

7. 3 個拿走的東西

做完兩天 12 個雷之後 我留 3 個給之後想做這件事的人:

1. 不是設計師就一定要分階段
   一次改完聽起來省事 但出問題的時候你不知道哪塊壞的。分階段 + 每階段 commit 一次 才能撐到第三天還在做不是在還債。
2. AI 改視覺 不要追完美 追「夠像」
   我腦中那個版本 GPT 翻成字 Claude 變 code 中間至少掉 30% 細節。接受妥協 設一個「夠像了」的閾值。每多改一次都會增加破壞前面成果的風險。
3. 追跑分 ≠ 追真實閱讀體驗
   PageSpeed 跑分是給 Google 算法看的 不是給人看的。米色奶茶色 + 兩套字體 + 紙感背景 對 PageSpeed 完全沒貢獻 但對「讀者撐得了 5 段不關掉」很有貢獻。SEO 是入口 內容是身體 — 入口再強 身體擋不住人 都是白做。

不是設計師也能用 AI 把品牌定位落地進視覺。但兩天踩了 12 個雷 — 動畫拖慢速度 / 舊版看不到新版 / 中英字混排不齊 都是「我本來以為改改就好」的事。分階段 + commit by commit + 雙 AI 分工(GPT 出 vision / Claude 實作)是這趟能跑完的核心。下一集回到 SEO 主線 — #14 把散落 13 篇收編成 Pillar + Cluster 給 AI 一張主題地圖。

名詞解釋

SEO（搜尋引擎優化）

讓網站在 Google 搜尋結果排得更前面的一整套方法，涵蓋技術體質、內容品質、連結結構三層。

提交（commit）

Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。

CSS

網頁的造型語言，管顏色、字體、排版跟動畫。

最大內容繪製（LCP, Largest Contentful Paint）

頁面上「最大那塊內容」（通常是首圖或大標題）出現所需的秒數。Google 標準 ≤ 2.5 秒。

PageSpeed Insights

Google 提供的免費網站速度體檢工具，輸入網址就給 0-100 分跟逐項改善建議。

快取（cache）

把載過的資源暫存起來，下次直接用、不重新下載。網站變快的最便宜手段之一。

Claude Code

Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。

引薦流量（referral）

從其他網站的連結點進來的流量。ChatGPT 引用你的內容帶來的點擊就屬於這一類。

看完這篇之前先確認:

這篇是收斂後寫的版本。
我每兩週寄一封電子報，講「正在做但還沒寫成文章」的東西——
包含每月幫你過濾值得花時間的新 AI 工具，
以及 Lab 新文的個人版（你會比公開版早一週收到）。

→ 訂閱（雙週一封，第一封自動寄起步清單）

跳轉 Substack、隨時取消、不轉賣 email。

如果內容對你有用就太好了
隨喜斗內

相關閱讀

• #11 PageSpeed mobile 79 → 89:7 個 critical path 動作 + 3 個踩坑
• PageSpeed 93 → 83 又修回:typewriter 動畫遇到 LCP 元素的真實 debug(踩坑 #1 同主題)
• #10 對齊 Google AIO 5 原則 全站結構大改造

← 回 SEO 菜鳥成長史