前一篇我整理了換產品、換品牌時，到底哪些 DNA 要換、哪些底層方法可以繼續沿用。

但是回到我目前正在做的 Tina-Sales-Page-Generator，還有另外一個問題，一直讓我很在意。

同一支產品，要怎麼真的做出 10 種不同的銷售頁？

不是十種顏色、不是十張不同 Hero 圖、也不是同一個版型，文字重新排列十次。

而是真的讓使用者一打開 V01、V02、V03……V10，就能明顯感覺：「這十張是在用十種不同的方法賣同一支產品。」

這件事其實比我原本想像得難很多，因為 AI 很容易產生變化，但是「有變化」和「真正不同」，是兩件事。

例如：

• V01 左邊文字、右邊產品。
• V02 還是左邊文字、右邊產品，只是背景換成米白色。
• V03 還是同樣結構，只是按鈕從紫色變成藍色。

看起來好像生成了三版，但實際上只是：同一張頁面換了三套皮膚。

所以做到第 14 篇，我開始真正整理一套：「避免撞版」的方法。

這套方法後來慢慢變成幾個核心：Strategy Matrix、Hero、Component、Page Rhythm、Visual Direction。

先講結論：10 種頁面，必須先有 10 種「理由」

如果我只是對 Codex 說：「請幫我再做一個不同風格的版本。」

它其實很難知道：「不同」到底要不同在哪裡？不同顏色？不同字體？不同文案？不同圖片？不同內容？還是不同說服策略？

所以我現在會先做一件事情：先替每一版找出存在的理由。

也就是：V01 為什麼存在？V02 要測什麼？V03 跟 V01 到底差在哪？

如果我自己都回答不出來，那頁面最後很容易撞在一起。

什麼是 Strategy Matrix？

我現在會把 Strategy Matrix 理解成：先把 10 個版本的銷售策略分配好，再開始生成頁面。

不是做完 V01，再臨時想 V02。

也不是 V02 做完，才問：「第三版還能變什麼？」

而是在一開始就把十版攤開來看。

例如我們現在替 Dosha 防曬規劃的 V01～V10：

版本	主要 Strategy	核心任務	Hero 方向
V01	Scenario Story＋Single Big Idea	先建立生活共鳴	Story Opening
V02	Premium Brand＋Single Big Idea	建立品牌價值與質感	Premium Minimal
V03	Education	先教懂，再帶產品	Product Focus / Knowledge Entry
V04	Problem Solution＋Single Big Idea	先說出困擾，再給解法	Problem Question
V05	Scenario Switch＋Scenario Story	用多情境增加代入感	Multi Scenario
V06	Single Big Idea＋Premium Brand	只讓人記住一件事	Single Big Idea Hero
V07	Editorial＋Premium Brand	打造雜誌式品牌內容	Editorial Magazine
V08	Process＋Education	把產品放進使用流程	Lifestyle Scene / Process Entry
V09	Diagnostic＋Problem Solution	先讓讀者自我判斷	Split Product / Diagnostic
V10	Seasonal Event＋Scenario Switch	用季節與活動創造入口	Full Bleed Image

這張矩陣其實非常重要。

因為當每一版的「任務」不同，後面的 Hero、Component、文案、圖片節奏，自然比較容易分開。

不要先問「這版要長什麼樣」，要先問「這版要解決什麼問題」

這是我做到後來的一個很大改變。

以前我看到網頁，第一個問題常常是：這版要什麼風格？高級？可愛？極簡？科技？

但是現在我反而會先問：「這一版是要說服哪一種人？」

例如 V03 Education，它的任務不是「做成知識感風格」。

真正任務是：讓還不了解日常防曬的人，先理解，再接受產品。

那頁面自然就需要：說明、比較、小知識、FAQ、使用步驟、而不是滿版品牌大圖，這時候「風格」其實是策略的結果。

Hero 是避免撞版的第一道關卡

如果十個版本的第一屏都長一樣，後面再怎麼變，第一印象還是會覺得撞版。

所以 Hero 是我現在會最先拆開的地方。

Hero 不是單純的：一張圖片＋一個 H1＋一個按鈕；不同 Hero，本身就代表不同的閱讀入口。

V01：Story Opening

V01 是 Scenario Story。

所以 Hero 應該像：一個生活片段、一句有情境感的話、產品不需要搶著站到最前面。

例如：每天出門前，留一點時間給日常防曬。

這一版 Hero 的任務是：先讓人進入生活。

V02：Premium Minimal

到了 V02，則應該故意反過來；大產品圖、大片留白、短標題、資訊少、讓視覺自己說話。

這時 Hero 的任務是：讓產品看起來有品牌價值。

V04：Problem Question

Problem Solution 版則可以直接用一個問題當入口。

例如：「防曬買了很多，卻總是因為太黏而懶得擦？」

這時 Hero 不一定需要大產品圖，甚至可以先讓問題本身成為主角。

V05：Multi Scenario

這一版 Hero 可以一開始就不是一張圖。

而是三到四張：通勤、旅行、戶外、日常外出。

讓人第一眼就看到：「原來這支產品跟很多生活場景都有關係。」

V07：Editorial Magazine

Editorial 版甚至可以完全不像傳統電商，滿版影像、雜誌式大標、小字 Editorial Caption、產品可能只安靜放在角落。

這一版的目的就是：看起來像內容，而不是廣告。

所以 Hero Library 很值得做

做到這裡之後，我開始覺得 Hero 不應該每次從零想。

可以慢慢整理成自己的 Hero Library。

例如：

• • Story Opening。
  • Premium Minimal。
  • Problem Question。
  • Multi Scenario。
  • Single Big Idea。
  • Editorial Magazine。
  • Split Diagnostic。
  • Full Bleed Seasonal。

以後換產品時，不是重新發明 Hero。

而是：先選適合的 Hero 類型，再換裡面的內容。

第二道關卡：Component 組合不能一樣

就算 Hero 不一樣，如果後面 Section 全都一模一樣，還是會撞版。

例如十版都固定：Hero、三個產品亮點、四張情境卡、產品事實、FAQ、CTA。

這樣很快就會露出「同模板」的味道。

所以第二個要變的是：Component 組合。

不同 Strategy，本來就應該選不同 Component

例如 V03 Education。

可能適合：知識卡、Q&A、比較表、步驟說明、FAQ、再接產品。

但 V02 Premium Brand 如果也塞滿知識卡，就會失去 Premium Minimal 的意義。

所以 V02 可能只需要：大產品視覺、一段品牌文字、一個核心利益、一個產品事實區、一個乾淨 CTA，這就是 Component Selection。

我現在會先建立 Component Library，再限制每一版只能挑部分元件

例如整個生成器可以有：

• • Hero。
  • Story Block。
  • Feature Cards。
  • Problem Cards。
  • Education Cards。
  • Comparison Table。
  • Scenario Gallery。
  • Process Timeline。
  • Diagnostic Quiz。
  • Product Facts。
  • FAQ。
  • CTA。
  • Brand Quote。
  • Editorial Image Block。

但是每一版不應該全部使用。

反而要讓 Strategy 決定：哪些 Component 出場，哪些不要出場。

一個很重要的規則：不要每版都「五區固定」

我們前面原本有五區架構。

那個五區非常適合拿來當：基礎骨架。

但如果 V01～V10 每一版都嚴格：

• • Section 1 Hero。
  • Section 2 情境。
  • Section 3 Big Idea。
  • Section 4 Facts。
  • Section 5 FAQ。

最後一定會越來越像。

所以做多 Variant 時，我後來會區分：功能角色可以存在，但畫面與排序不一定固定。

例如 Product Facts：

• • V01 可以出現在後段。
  • V03 Education 可以拆散到不同知識區塊。
  • V02 Premium 可以濃縮成三行。
  • V09 Diagnostic 可以等讀者選完需求才出現。

功能一樣，呈現完全不同。

第三道關卡：Page Rhythm 一定要改

這一點是我覺得最容易被忽略的，兩張頁面的顏色不同、Hero 不同、Component 甚至也稍微不一樣。

但如果滑起來的感覺還是一模一樣，使用者仍然會覺得：「這不是同一個模板嗎？」

Page Rhythm 就是：

• • 閱讀速度。
  • Section 長短。
  • 圖片密度。
  • 文字密度。
  • 留白。
  • CTA 間隔。
  • 畫面變化頻率。

例如 Premium Brand 和 Scenario Switch，節奏應該完全相反

Premium Brand 可以：一屏只有一句話、一張大圖、很多留白、滑得慢。

Scenario Switch 則可以：短句、多圖片、快速切換、一屏一個情境、滑得快。

如果兩者節奏一樣，那 Strategy 名稱再不同也沒有用。

我現在會替 Variant 設定「節奏標籤」

例如：

版本	Page Rhythm	文字密度	圖片密度
V01 Scenario Story	中慢	中	中
V02 Premium Brand	慢	低	低但大
V03 Education	中	高	中
V05 Scenario Switch	快	低	高
V07 Editorial	慢	中低	大圖為主
V09 Diagnostic	互動式	中	低至中
V10 Seasonal Event	快	低	高

這樣 Codex 在生成時，就不只是知道：「我要做 Premium。」

而是知道：Premium 連閱讀節奏都要跟其他版本不同。

第四道關卡：Visual Direction 不能只是換配色

這是我原本最容易犯的錯。

例如：V01 紫色、V02 白金、V03 藍色，看起來好像三版，其實只是 Color Theme 不同，Visual Direction 應該包含的東西更多。

例如：圖片是滿版還是卡片？是生活攝影還是產品攝影？圓角很多還是幾乎沒有？是雜誌排版還是電商卡片？是視覺先還是文字先？產品圖是主角還是輔助？留白多還是資訊多？

同一支產品，圖片使用方式也應該變

這也是為什麼前面第 10 篇整理圖片資料夾很重要。

因為同一批素材，可以在不同 Variant 裡扮演不同角色。

例如同一張真實產品主圖：

• • V02 可以做滿版主角。
  • V03 可以只是教育內容後面的產品卡。
  • V05 可以只出現在最後一個 Scenario。
  • V07 可以像雜誌商品 Still Life。
  • V09 可以放在診斷結果頁。

同一張素材，不是每版都放在同一個位置。

第五道關卡：CTA 也不要每版都一樣

這個很容易被忽略。

如果十張頁面都固定：Hero 一個「立即購買」、中間一個「立即購買」、最底一個「立即購買」。

其實還是會有非常強的模板感！

CTA 應該配合 Strategy，例如 Education 版，可以先用：「繼續了解日常防曬」

Premium Brand 版，可以乾淨地只留一個：「認識 Dosha 防曬」

Diagnostic 版則可能先：「看看哪種情境比較像你」

最後才接產品。也就是：CTA 本身也是頁面策略的一部分。

真正避免撞版，要建立「禁止重複規則」

做到 V04、V05 之後，我覺得光告訴 Codex：「請做得不一樣。」還是不夠。

比較有效的方式反而是直接設定：哪些東西不能跟前一版一樣。

例如：

V02 不得沿用 V01 的：
- Hero layout
- Section order
- Main CTA placement
- Lifestyle storytelling structure
- Image-to-text ratio

至少改變：
- Hero type
- 主要 Component 組合
- Page Rhythm
- Visual Direction
- CTA timing

這樣比一句：「請做成不同風格。」明確太多。

我甚至會做 Variant Collision Check

也就是每一版完成後，不只看它自己好不好看。

而是把：V01、V02、V03　一起放著比較。

然後問：Hero 是否太像？第一屏產品位置是不是一樣？Section 數量是不是一樣？卡片樣式是不是重複太多？CTA 是否都在相同位置？Page Rhythm 是否一樣？圖片比例是否太接近？

如果三版並排看起來只是「兄弟版型」，就代表還不夠分開。

撞版最常出現的五種情況

我目前最常看到的撞版，其實不是顏色一樣。而是以下幾種。

1. Hero 結構撞版

全部都是左文字右產品。

2. Section 順序撞版

全部都是 Hero → 3 Cards → Big Image → FAQ → CTA。

3. 卡片系統撞版

每版都用三欄圓角卡片。

4. 圖片比例撞版

每個 Section 都固定 50/50 左右切。

5. CTA 節奏撞版

每版都是同樣三個按鈕、同一位置。只要這五個地方改開，頁面差異通常會大很多。

那是不是十個版本越不像越好？

也不是。

這裡又回到 Brand DNA。

十版應該：策略不同，但品牌還是同一個品牌。

不能 V01 是 Dosha，V02 突然像精品香水，V03 像醫院網站，V04 又像直播購物。

這樣雖然差異很大，但品牌已經消失。

所以真正的挑戰是：「同一個品牌，用不同方法說話。」

而不是：「十版做成十個不同品牌。」

哪些東西應該始終一致？

即使做十版，還是有一些東西應該維持。

例如：產品真實資料、Product Truth Lock、核心品牌語氣、品牌底層價值、Logo 使用原則、不能亂講的內容、最終商品本人。

這些就是第 13 篇講的 Brand DNA 與 Product DNA 底層。

它們反而是多 Variant 可以自由變化的前提。

我現在會怎麼產生 V01～V10？

如果現在重來一次，我不會叫 Codex：「一次幫我做 10 張不同銷售頁。」

我會先準備 Strategy Matrix。

把十版的：主要 Strategy、Hero、Component、Page Rhythm、Visual Direction、CTA Pattern　全部先定義，再一版一版做，每完成一版，就做 Collision Check。

如果跟前面太像，就先修。而不是十版全部生完，最後才發現：「怎麼每張都長差不多？」

一個實際的 Variant Spec，可以長這樣

例如 V07：

Variant: V07

Primary Strategy:Editorial + Premium Brand

Hero:Editorial Magazine Hero

Visual Direction:大圖、雜誌排版、低卡片密度、留白多

Page Rhythm:慢

Text Density:中低

Image Density:低，但單圖尺寸大

Components:
Editorial Hero
Brand Quote
Lifestyle Feature
Product Still Life
Product Facts
Soft CTA

Do Not Use:
三欄功能卡
Problem Question Hero
Multi Scenario Grid
高頻 CTA

Primary Goal:讓頁面看起來像品牌專題，而不是典型商品頁

這樣 Codex 才有真正可以執行的差異規則。

這也是為什麼 Variant Plan 很重要

以前我會覺得：先做出頁面再說。

現在我反而覺得：多版本最值錢的是「生成之前的規劃」。

如果 Variant Plan 沒有分清楚，後面 AI 再強，也只會一直在同一個舒適區內變化。

因為 AI 很容易找到一個「看起來不錯」的排版，然後一直沿用。

這對單一頁面是優點。

對十版本生成器，反而可能是問題。

所以需要 LOCKED，也需要刻意的 DIFFERENT

第 11 篇我們談過 LOCKED。

做多版本時，我覺得還需要另一個概念：Must Be Different。

LOCKED 告訴 Codex：這些不要變。

Must Be Different 則告訴它：這些一定要變。

例如：

保持一致 LOCKED	必須變化 MUST BE DIFFERENT
產品事實	Hero 類型
品牌核心語氣	Component 組合
Product Truth Lock	Section Rhythm
真實產品圖片	CTA Timing
品牌限制	Visual Direction

我覺得這張表幾乎就是多 Variant 的核心。

做十版真正的目的，不是展示 AI 很會變

這件事情我做到現在越來越確定。

十版不是為了證明：「你看，Codex 一次可以幫我做十個網站。」

真正有價值的是：同一支產品，原本我只有一種說法。

現在可以有：故事、教育、高級品牌、問題解決、多情境、雜誌內容、使用流程、自我診斷、季節活動。

這才代表：我開始有能力測試不同的銷售假設。

最後不是問「哪版最好看」，而是問「哪版最適合這個任務」

這個觀念我覺得很重要。

V02 Premium 可能最好看，但不代表一定最會轉換。

V03 Education 可能文字最多，但對完全不懂產品的人，也許反而最有幫助。

V05 Scenario Switch 可能手機最好滑。

V10 Seasonal Event 可能只適合夏天活動。

所以十版不是排名。而是十種不同用途。

Tina學姐這次最大的體會：風格不是顏色，而是一整套決策

以前我說：「這張網站換一個風格。」

其實很多時候只是：換背景、換字體、換圖片。

現在我比較會把「風格」拆成：它怎麼開場、怎麼說服、用哪些 Component、滑動節奏快還慢、產品什麼時候出現、圖片怎麼使用、CTA 什麼時候出現、資訊密度高還低。

這些一起決定，才是真正的一個 Variant。不是換色，而是換一套完整的說服方式。

寫在最後：十個版本要不同，但不能失去同一個靈魂

做到第 14 篇，我覺得 Tina-Sales-Page-Generator 已經不只是：「把產品資料變成 HTML。」

而是開始接近：「把同一份產品資料，轉換成不同銷售策略的系統。」

這裡面最重要的，不是讓 Codex 無限制自由發揮。

反而是：哪些要固定、哪些一定要變、哪些可以共用、哪些不能重複，把這些界線先畫清楚。

這樣 V01～V10 才可能做到：看起來不同、讀起來不同、說服方式不同。

但是：還是同一個品牌、同一支真實產品。我覺得這才是真正難、也真正有價值的地方。