做到前面第 14 篇，我的 Tina-Sales-Page-Generator 已經可以完成很多以前我覺得很困難的事情。

它可以讀產品資料、可以理解 Brand DNA、可以依照不同 Strategy 做 V01、V02、V03……不同版本。

可以把圖片放進 assets、可以輸出 HTML、CSS、甚至可以直接打包成 ZIP，丟進 cPanel 上線。

照理說，做到這裡應該已經完成了。

但真正把頁面打開之後，我又開始覺得：「奇怪，明明什麼都有了，為什麼還是覺得少了一點『專業網站』的感覺？」

這個問題，我後來越看越清楚，不是功能壞掉，不是 HTML 寫錯，也不是內容不足。

而是：細節還沒有被整理到位。

例如品牌名稱太小，標題很大，但副標層級不夠清楚，Section 每一段距離差不多，整頁沒有呼吸感。

圖片雖然都有放，但比例和裁切方式不一致，桌機看起來不錯，手機打開卻突然全部擠在一起。

按鈕每一區都有，反而讓人不知道真正重要的 CTA 在哪裡。

做到這時候，我才發現：「能正常顯示」只是第一關，「看起來像專業網站」其實還有最後一段路。

這一篇，就來整理我這次從「頁面能用」一路修到「比較像真正品牌網站」的最後精緻化流程。

第一個觀念：功能完成，不代表設計完成

這件事是我這次感受最深的地方，Codex 很容易先把功能做出來。

例如：

• • Hero 有了
  • 標題有了
  • 產品圖有了
  • FAQ 有了
  • CTA 有了
  • 手機版基本上也能縮放

從工程角度看，這張頁面其實已經「可以用」，但是從品牌網站角度看，可能還只是：一張結構完整的草稿。

這有點像一間新房子，水電都有、門窗都有、燈也會亮，但是家具比例、燈光、牆面、收納和裝飾還沒整理，所以可以住，卻還不像真正完成的家，網站也是一樣。

我第一個注意到的，就是品牌標頭

這次在做新的品牌頁面時，我就遇到一個很典型的問題，品牌標頭本身有做，文字也沒錯，但是放到整張頁面裡一看，就是覺得：太小。

而且不是「字體小一點」這麼簡單。真正的問題是：品牌在整張頁面的存在感不夠。

例如頁面上方明明應該是品牌身份的重要位置，但品牌名稱卻像一般導覽列的小字。

結果第一眼看到的是：Hero 圖、促銷標題、CTA、品牌反而縮在角落。

這種頁面即使漂亮，也容易像：活動頁，而不像品牌官網。

品牌標頭不是「把 Logo 放上去」而已

以前我很容易覺得：有 LOGO、有品牌名稱、Navigation 有放，那 Header 就完成了。

但真正開始看不同版本後，我才發現 Header 至少還要思考：

• • 品牌名稱有沒有足夠辨識度？
  • Logo 與文字比例是否平衡？
  • Header 高度會不會太薄？
  • Navigation 字是不是搶過品牌？
  • 手機版縮小後還看不看得出品牌？
  • 品牌標頭和 Hero 是否接得自然？

所以 Header 其實是整個頁面的：品牌身份區，不是只是一條選單。

品牌名稱要多大，不能只看 px

這也是我後來慢慢學到的。

不能只跟 Codex 說：「品牌名稱放大一點。」

因為大一點是多少？38px？42px？手機又是多少？

真正比較實用的是看：視覺比例。

例如桌機版 Header 裡：品牌名稱應該比 Navigation 明顯，但又不應該搶過 Hero H1，手機版則要保持可辨識，不能縮到只剩一個很小的字標。

我現在反而會用：品牌 ＞ Navigation，但品牌 ＜ Hero 主標 這種層級來判斷。

第二個精緻化關鍵：Typography Hierarchy

我以前做網頁時，很容易覺得：H1 大、H2 中、正文小，這樣就叫有字級層級。

但真正的 Typography Hierarchy 還包括：粗細、行高、字距、段落寬度、標題上下留白，甚至字體本身的個性。

例如同樣 48px、如果 H1 行高太擠，看起來會很廉價；如果行距過大，又會像投影片。

所以我現在會特別檢查：

• • H1 是否第一眼最清楚？
  • H2 能不能快速掃描？
  • Supporting Copy 有沒有和正文分開？
  • 正文一行是不是太長？
  • 手機版標題是不是斷成很難看的五、六行？

尤其是手機版，H1 最容易出問題

桌機螢幕很寬。

一句：「每天出門前，留一點時間給日常防曬。」桌機可能兩行就結束。

但是到了 375px 手機版，可能突然變成四行甚至五行。如果字級、行高、寬度沒調整，Hero 會一下變得很高，圖片被推到下面、CTA 也被推到首屏之外，整個第一印象就改變了。

所以 Responsive Design 不只是：「畫面縮小不要爆版。」

還包括：「縮小之後，原本的閱讀邏輯還在不在。」

第三個關鍵：Spacing 與留白

這個也是最容易讓「AI 網站感」跑出來的地方。

很多自動生成頁面會有一個特徵：每個 Section 都差不多高、上面 60px、下面 60px，每一區都是卡片，每一區都是同樣圓角、排得很整齊。

但是整張頁面看起來會非常機械。

真正比較成熟的網站，通常不會所有地方都使用完全相同的節奏。

有些 Section 應該大留白

例如 Premium Brand 的核心主張，可以只有一句話、一張圖，上下留白很大，讓人停一下。

有些 Section 可以密一點

例如 FAQ、教育內容、規格資訊，本來就可以資訊密度高一些。

所以精緻化不是：每一區都做得更華麗。反而是：知道哪裡應該滿，哪裡應該空。

第四個關鍵：圖片不要只是「有放進去」

第 10 篇我們已經談過圖片素材怎麼放。

但那一篇處理的是：圖片有沒有正確出現在頁面裡。

到了精緻化階段，問題變成：圖片出現得好不好看。

例如：人物被裁掉頭、產品太小、背景太亂，五張情境圖色溫完全不同。

有的 1:1、有的 16:9、有的突然很直，這些都會讓頁面失去一致性。

同一個 Variant 裡，圖片應該有自己的規則

例如 V02 Premium Brand 可以規定：大圖、低數量、色彩乾淨、產品照優先、不要大量拼貼。

但是 V05 Scenario Switch 可以剛好相反：圖片多、畫面切換快、生活場景為主，可以採多圖 Grid，這樣圖片不只是內容素材，而是整個 Variant 個性的一部分。

第五個關鍵：卡片不要用到整站都是

這個問題我覺得 AI 生成頁面很常見。

因為 Card 很安全。三個重點？三張卡。四個優點？四張卡。FAQ？又是一張一張卡。產品資訊？還是卡。

最後整張網頁就像：很多方塊疊在一起，看起來很整齊，但是也很像模板。

所以我現在會刻意問：這一區一定需要卡片嗎？能不能直接用大字＋留白？能不能用滿版圖片？能不能改成 Timeline？能不能用 Editorial 排版？能不能直接做左右錯位？

有時候少一點框框，反而會更專業。

第六個關鍵：CTA 不是越多越專業

我以前會擔心：CTA 太少，消費者沒地方點。

所以很容易：Hero 一個、第二段一個、第三段一個、產品區一個、最底下再一個，結果整頁都是按鈕。

這對某些促銷頁可能合理，但如果是 Premium、Editorial 或品牌型頁面，就會很破壞質感。

所以 CTA 要看 Strategy。

例如：

• • V02 Premium Minimal，可以少。
  • V03 Education，可以先讓人繼續了解。
  • V09 Diagnostic，可以先「開始測驗」，最後才購買。

真正的 CTA 不是：按鈕越多越好。

而是：在使用者準備好的時候，出現正確的下一步。

第七個關鍵：微小的 UI 細節，很容易決定「像不像專業網站」

做到最後，我開始注意一些以前完全不會在意的東西。

例如：

• • 按鈕高度是不是一致
  • 圓角是不是每一區都不同
  • Icon 線條粗細是否一致
  • 圖片圓角是不是統一
  • Border 有的深、有的淺
  • Shadow 是否太重
  • Hover 有沒有突然跳很大
  • 文字和按鈕是否真的對齊

單獨看每一個問題都很小。但十個小問題放在一起，就會產生：「這張網站好像哪裡怪怪的。」

反過來也是。

你可能說不出一個真正成熟網站到底哪裡比較厲害。

很多時候就是：幾十個小地方都沒有出錯。

所以最後一定要做 Final QA

我現在會把 Final QA 分成兩大類。

功能 QA 以及 視覺 QA。

功能 QA：網站能不能正常工作？

這一層先檢查最基本的。

• • index.html 是否正常開啟
  • CSS 是否正確載入
  • 所有圖片是否正常顯示
  • CTA 是否有正確網址
  • FAQ 是否正常展開
  • Anchor 是否正常跳轉
  • 是否還留有 IMAGE PLACEHOLDER
  • 是否存在測試文字或假連結

如果這些有問題，先別管美感，先把網站修到真的能使用。

視覺 QA：網站看起來像不像完成品？

功能過關之後，我才會看：

• • Header 是否有品牌存在感
  • Hero 是否第一眼清楚
  • H1 是否過長
  • Section 之間是否有節奏
  • 圖片裁切是否合理
  • 字體層級是否清楚
  • 按鈕是否太多
  • 卡片是否使用過度
  • 整體是否符合這個 Variant 的 Strategy

這才是把「草稿」推向「成品」的過程。

我現在一定會測四個尺寸

我們這次做 Final QA 時，特別檢查：375px、768px、1024px、1440px。

尺寸	主要檢查
375px	一般手機版，標題、CTA、圖片是否擠壓
768px	平板／大手機，兩欄何時切成單欄
1024px	小型筆電／平板橫向，版面是否尷尬
1440px	一般桌機，內容有沒有被拉得太散

我覺得 1024px 特別容易被忽略。

因為手機有特別做，大桌機也漂亮，偏偏中間尺寸最容易出現：文字擠、圖片過大、左右欄剛好卡在一個很尷尬的比例。

375px 手機版，我現在會特別看這些地方

第一個一定看 H1，有沒有一個字一行、再看 CTA 有沒有被擠到很下面、圖片是不是太高、三欄卡片有沒有正確變成一欄、左右 Padding 是否足夠、FAQ 文字是不是貼到邊、按鈕高度夠不夠手機點。

這些其實比：「手機有沒有顯示。」更重要。

1440px 桌機版，也不是越寬越好

有些頁面做到大螢幕後，文字會被拉得非常寬，一行七、八十個中文字，閱讀起來很累。

所以專業網站通常會替內容設定：Max Width。

例如整個 Section 可以很寬、但正文不要跟著無限延伸，圖片可以撐大、文字區還是維持一個好讀的寬度。

這些細節一加上去，網站的成熟度會差很多。

第八個關鍵：不要只看單一 Section，要從頭滑到尾

這也是我以前很容易忽略的。某一區單獨截圖，非常漂亮。下一區也漂亮。

但是把兩區接起來，可能非常怪。

例如：上一區大留白、下一區又大留白、整頁突然太空，或者連續三區都是三欄卡片，單看都正常，滑起來卻非常無聊。

所以 Final QA 一定要：從 Header 一路滑到底，感受完整的閱讀節奏。

第九個關鍵：品牌一致，但不要每一區都一模一樣

這和前一篇「避免撞版」其實是同一個觀念。

品牌一致不代表：每一區同一個紫色、每一區同一個圓角、每一區同一個陰影。

真正的品牌一致應該是：字體、核心顏色、圖片調性、語氣、視覺價值觀是一致的。

但 Section 還是可以有變化。這樣才不會像：套了一個元件模板一直複製。

第十個關鍵：最後要刪東西

這是我覺得精緻化很重要、但最容易捨不得做的一件事情。

前面做頁面時，一直在加！加圖片、加 Feature、加說明、加 CTA、加 FAQ。

到了最後反而要問：「有什麼其實可以刪？」

如果兩段在講同一件事，刪一段。如果一張圖片沒有增加資訊，刪掉。如果一個 CTA 沒有必要，拿掉。如果卡片只是為了填版面，也可以刪。

很多時候專業感不是：更多。而是：留下真正重要的東西。

我現在會用三輪 QA，而不是只做一次

第一輪：內容 QA

確認：產品名稱、產品事實、Truth Lock、錯字、FAQ、CTA。

這一輪只管內容正不正確。

第二輪：視覺 QA

確認：字級、圖片、留白、卡片、Header、Hero、整體節奏。

第三輪：Responsive 與部署 QA

確認：375、768、1024、1440。

再確認 ZIP、assets、相對路徑、cPanel 上線後的實際結果。

這三輪分開做，我覺得比一次看全部有效很多。

我現在的 Final QA 清單

如果之後每一版 V01～V10 都要正式交付，我會至少檢查下面這些項目：

分類	檢查內容
Brand	品牌名稱、Logo、Header、語氣一致
Hero	主標清楚、圖片正確、第一屏有重點
Typography	H1/H2/正文層級、行高、手機斷行
Spacing	Section 留白、內容間距、閱讀節奏
Images	產品圖真實、比例一致、裁切正常
Components	卡片、Icon、Border、Shadow 一致
CTA	數量合理、文字自然、連結可用
Responsive	375／768／1024／1440 都正常
Assets	圖片、CSS、JS、相對路徑正常
Deploy	ZIP 第一層有 index.html、cPanel 上線正常

我覺得最有意思的是：最後這 20%，反而很像人的工作

前面 80%，AI 可以做得非常快。

建立結構、寫文案、排版、產生 HTML、整理 assets。

但最後 20% 常常是：這個品牌字再大一點比較好。

這一區太擠、這一張圖情緒不對、這顆按鈕太搶、這段應該刪、手機這裡看起來怪。

這些判斷其實很難只靠一條規則完全取代。

它比較像：人對品牌、內容與使用感受的綜合判斷。

所以我現在不會要求 Codex「第一次就完美」

這也是我這段時間最大的心態改變。

以前 AI 一做出來不好看，我會覺得：是不是 Prompt 下錯？是不是工具不行？

現在我反而覺得：第一版先完成、第二版修結構、第三版修視覺、最後再做 QA。

這比較像真正的網站製作。

因為設計本來就是：反覆修出來的。不是一鍵生成之後，就永遠不碰。

Tina學姐這次最大的體會：專業感不是一個功能，而是很多小細節的總和

如果有人問我：「怎麼讓 AI 做的網站，看起來不像 AI 做的？」

我現在可能不會回答：換漂亮一點的模板，或者換更好的模型。

我會說：把細節修乾淨。Header 比例、字級、留白、圖片、節奏、CTA、Responsive，每一個只改善 5%。全部疊起來，整張網站可能就完全不一樣。

「專業感」通常不是突然多了一個厲害功能，而是讓使用者幾乎找不到明顯的不舒服。

寫在最後：從「能用」到「可以放心上線」

做到第 15 篇，我覺得 Tina-Sales-Page-Generator 第一階段終於比較完整了。

一開始只是：讓 Codex 做一張銷售頁。

後來開始有：Product Input、Brand DNA、Page Plan、Strategy、Variant、input/images、Customer-facing Copy、Internal Notes、LOCKED、ZIP、cPanel、Final QA。

一路做到現在，我才真正感覺：網站不是「被 AI 生出來」就完成了。

真正完成，應該是：內容正確、品牌一致、圖片正確、視覺舒服、手機正常、連結正常、部署正常。

最後我自己打開網址時，可以覺得：「好，這一版我敢真的給客人看了。」

我覺得這才叫：FINAL READY。