SEO 菜鳥成長史 · #13

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

文 / Coolkid發布：2026-05-26 · 最後更新：2026-06-11閱讀約 10 分鐘

上一集 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 訪客之後，我終於有時間打開自己的網站好好滑一遍。

結果讀不到 5 行，眼睛就超累。問題有 3 個：

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

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

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

我不是設計師，沒受過視覺訓練，講不出「對比度 5%」「字距 0.02em」這種術語。

但這兩天的改造能跑下來，是因為我試出一套對非設計師很有用的流程：

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 負責落地，把文字變成程式碼。我負責決定什麼時候停手。

最後一個其實最難。因為我會一直想再改一點，但每改一次，就有可能拖慢網站，或撞到舊版的某個問題。

這也是為什麼我下面要花 3 個章節講踩到的問題。

踩坑就是想再改一點的後果。

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

我一開始想一次全部改完。Claude 直接告訴我不行，一次改太多，撞到問題你不知道是哪一塊壞的。所以拆成階段：

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

每跑完一個階段我就 commit 一次。commit 就是 git 幫你記下一個檔案版本。

如果下一階段改壞了，我可以 git revert 回到上一階段的狀態。

11 次微調是每個階段做完之後的調整。

例如「米色奶茶的對比度不夠」「NPC 對話框箭頭歪掉」「文章首字太大」這種。每個都是 5 分鐘小改，但累積起來就 11 次。

關鍵教訓是這個。

不是設計師的人更要分階段。

因為你沒辦法一次想清楚全部細節。邊做邊調，才不會做到一半發現方向錯了又得重來。

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

首頁本來想做一個進場演出，NPC 從透明慢慢淡入，對話框有打字機效果，5 個選項一個接一個浮現。

我跟 Claude 講「越華麗越好」，結果 PageSpeed 跑分掉了 10 分。

原因是這樣。NPC 圖片的初始透明度是 0，完全看不見，等動畫播完才變成 1。

但 Google 的開啟速度檢測會等到 NPC 圖完全可見，才算「載入完成」。我的動畫多撐 2 秒，LCP 就多 2 秒，跑分自然掉。

修法是把初始透明度改成 0.4，讓動畫從 0.4 淡到 1。

LCP 看到圖片就算畫出來了，不再等動畫播完。跑分當下就回來。

通則是，動畫不要碰會影響 LCP 的元素，也就是首屏最大的那塊圖或標題。

要做動畫就做在小元素上，不要做在主視覺上。

這條通則我後來一直守著。

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

我自己測試就遇過。改完推上去，但打開瀏覽器的舊分頁，看到的還是舊版，重新整理才會變新版。

對訪客來說，這就是「我已經逛過你網站，之後再進來看到的還是舊版」。

問題出在兩個地方：

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 個是最重要的。

沒有它，你部署之後沒人知道有新版，流量就這樣漏掉了。

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

這是我卡最久的一個。長文章用 8-bit 像素字，英文沒問題，但中文沒有對應字檔，會跳回系統字。

兩種字的底線高度完全對不起來。一行裡「SEO 第 1 篇」，英文那段是像素字，中文那段是系統預設字，看起來就是一行字在跳。

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

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

最後 GPT 幫我看見的方案是雙字體系統。

短的介面元素像按鈕、標籤繼續用像素字，反正都是英文。長文章正文改用 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)，不再寫死字體名稱。

之後要改字體，改變數那一行就全站換完。

教訓很簡單。

中英混排不要硬塞同一種字體。

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 引用你的內容帶來的點擊就屬於這一類。

看完這篇之前先確認:

不想錯過 Lab 的新文章?
訂閱後有新文章上線,就寄信通知你,
點有興趣的進來看就好。

填 email 就完成訂閱(信由 Substack 代寄)、隨時取消、不轉賣 email。

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

相關閱讀

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

← 回 SEO 菜鳥成長史