AIPOST · 模型實測 2026.07.16
AIPost Field Test — LLM × Landing Page

Fable 5 值得用嗎三個真實任務後的實測結論

同一份需求、同一套修改指令,讓 Fable 5、Claude Opus、GPT 5.5、Gemini 3.1 Pro 各自做出一個 Three.js 互動 Landing Page。兩輪迭代之後,名次跟第一眼看到的不一樣。

4 個模型 1 道題目 3 段指令 2 輪迭代 6 個公開站點可自驗
我的首選

Fable 5

4.5
6580 +15

第二版「非常驚艷」——玻璃擬態恰到好處、滑鼠跟隨星空、Dashboard 帶微動態。

進步最大

Claude Opus

4.0
4570 +25

初版意外墊底,但聽得懂批評、能舉一反三,單輪拉出全場最大進步幅度。

第二輪走鐘

GPT 5.5

3.5
6050 −10

初版文案與美感俱佳,第二輪卻不升反降,桌機直接破版。

一輪淘汰

Gemini 3.1 Pro

未晉級

初版 AI 味重到我不太想修改,未進入第二輪。

The Verdict — 我的選用建議
  • 若無 token 成本考量,首選 Fable 5——能夠舉一反三,且美感一次到位。
  • GPT 5.5 的初版美感優於 Opus、文案自然度為全場最佳;但第二輪修改品質明顯下滑。
  • Opus 的自我迭代能力突出,為第二選擇。
  • GPT 5.5 列為第三選擇。
  • Gemini 初版 AI 味過重、低於願意投入修改的門檻,第一輪即淘汰。
01 — Positioning 工具定位

這次驗的不是跑分,
是一條設計協作鏈。

Fable 5 是 Anthropic 在 2026 年推出的 Claude 5 家族首發模型,官方把它放在 Opus 之上的新級距(Mythos-class),是目前一般用戶能用到的最高階 Claude。它比 Opus 貴、也比 Opus 新——「值不值得為它多付錢」是這篇實測想回答的問題。

對手三位:Claude Opus(Anthropic 前旗艦,同家族對照組)、GPT 5.5(OpenAI 旗艦)、Gemini 3.1 Pro(Google 旗艦)。

測的東西很具體:把一段「一般人寫得出來」的模糊需求丟給模型,看它能不能產出高質感的互動網頁;再看它聽不聽得懂修改——這條「模糊需求 → 成品 → 聽懂批評再進化」的協作鏈,才是設計與行銷工作者每天真實的使用場景。

02 — Method 實測方法

一道題、三個任務、兩輪迭代。

The Brief · 實測題目
題目
一個虛構的 AI 客服 SaaS「ReplyPilot」官網 Landing Page。
必備區塊
Hero、三個功能亮點、定價三方案、FAQ 四題、頁尾;並開放自由發揮,鼓勵自行新增區塊。
風格指定
Three.js WebGL 打造互動效果,深色系高科技感,文案使用繁體中文。
參考網站
oryzo.ai、MetaMask、Slush——隨初版指令一併附上。
每個模型收到的需求內容,一字不差
Generate · 初版生成

同一份需求,各自交卷

四個模型收到相同的需求與參考連結,產出第一版。這一輪看的是:拿到模糊需求時,模型自己能把品質撐到哪裡。

Revise · 統一修改

六點方向,全場同卷

文案更像人話、UI 降 AI 味、加互動細節(Hover/Parallax/進場動態)、帶入 Dashboard 產品畫面、整體更有魅力、續用 Three.js——四個模型收到同一份修改單。

Targeted Fix · 個別修改

哪裡最弱,就改哪裡

針對每個模型第一版最弱的一點下指令:Fable 保留對話框、換掉背景;GPT 換掉球體、標題勿用簍空字;Opus 的 Hero 整個重做。

任務一:初版指令全文
幫我做一個 AI 客服 SaaS 產品「ReplyPilot」的 landing page
網站架構:
Hero 區(主標語+副標+CTA 按鈕)
三個功能亮點
定價三方案
FAQ 四題
頁尾(上述為必須,同時可另外自行發揮創意新增所需內容與區塊)
風格:使用 Three.js WebGL,設計出高質感互動網站
高科技感、深色系、專業感又帶點活潑質感
文案用繁體中文
參考互動感風格:
https://oryzo.ai/
https://metamask.io/zh-TW
https://slush.app/
任務二:統一修改指令全文(四模型同卷)
幫我調整以下:
- 整體網站文案內容,請更貼近人類說話的語氣
- UI 請調整降低 AI 味風格,維持科技感
- 增加維護互動細節,例如:卡片 Hover、Parallax Scrolling、元件進場動態、數字&Icon 動態等等
- 可以多帶入 Dashboard 產品介面,或是產品局部特徵,進入特色說明區塊
- 網站整體還不夠有魅力或吸引力讓身為企業端的我會想使用,請你發揮調整
- 繼續使用 Three.js WebGL 的方式做整體網站的互動
任務三:個別修改指令(各自一條)
Fable 5 — Hero Section 右邊的對話匡區塊動態很好請保留,但 Hero 的背景動態覺得不好看請換一個
GPT 5.5 — Hero Section 右邊的球體動態覺得不搭產品主題,請換一個,大標題字體勿用簍空風格
Opus — Hero Section 的設計完全不行,過於凌亂,請換一個

指令為實測當下的原文照錄(含錯字),確保實驗紀錄可信。

評分方式:由我以 Product Designer 的視角,對每個版本打 0–100 的主觀分數,標準只有一個:「身為企業端,我會不會想用這個網站」,最後給出總體星等(滿分 5 星)。生成速度與 token 消耗本輪未納入計分,列為方法限制。

03 — Results 成果

兩輪過後,三種命運。

實測筆記 — 我的第一手評語,經編輯潤飾、語意未變 技術側註記 — Claude 讀六個站點原始碼後的補充,僅陳述可驗證事實

Fable 5

Anthropic · 我的評分 4.5 / 5 · 首選
第一版
65
第二版
80
實測筆記

第一次 · 65 分

  • Hero 右側對話框的動態第一眼即令人驚艷;背景雖有動態,但風格與整體違和。
  • 卡片 UI 的光暈與微 3D 質感表現出色。
  • 文案仍有約七成的 AI 感。
  • 主色採保守的漸層色系,同樣帶有淡淡的 AI 味。

第二次 · 80 分

  • 整體表現令人驚艷,明顯超出預期。
  • 文案自然度進步至 80 分。
  • 自主將玻璃擬態風格運用得更恰到好處。
  • 星空背景會隨滑鼠移動,Hero 的星球設計具巧思。
  • Dashboard 畫面帶有微動態。
技術側註記 — Claude
  • 兩版都是單一 HTML 檔(44.9KB → 74.7KB),唯一外部依賴是 three.js CDN——丟上任何靜態空間就能上線。
  • 區塊從 4 個長到 6 個:指令要求的 Dashboard 之外,自己加了「客戶見證」區——「舉一反三」在 DOM 結構上有實據。
  • 玻璃擬態(backdrop-filter)從 5 處增加到 20 處、星空粒子相關程式碼 8 → 24 處、滾動監聽 5 → 10 處:筆記裡說的「用得更恰到好處」,量化起來是用量與分寸一起上去。
  • 個別指令執行精準:v2 整檔重新生成,對話框元素完整保留(還多了 tilt 微互動),背景確實換成滑鼠跟隨的星空+星球場景。
  • 無障礙沒有因為加料而犧牲:aria 屬性維持 14 處、三處 prefers-reduced-motion 降級,動態全關仍可完整閱讀。
V1 標題 — 產品口號腔
訊息一進來,答案已經在路上。
三步驟,進入自動駕駛。
準備好讓客服進入自動駕駛了嗎?
V2 標題 — 場景敘事
半夜三點的訊息,也有人好好回。
不是又一個罐頭機器人。
他們也曾經不太相信 AI。
價格很簡單,沒有星號。

文案轉向一句話:從「說產品有多強」變成「說你半夜的收件匣發生了什麼事」。把口號換成場景,是我感受到 AI 味下降的主要來源。

維度V1V2依據
正確性44.5兩版單檔直開、結構乾淨;v2 加量不加亂,aria 與動態降級全數保留
完整性3.55v1 按單交付必備區塊;v2 自主補上見證與 Dashboard 深度區塊,文案完成度大幅上升
可執行性44.5單檔+單一 CDN 依賴,即放即上線;RWD media query 7 → 9 組
速度未計時本輪未記錄生成時間,不評分
修改成本一輪統一修改+一條個別指令即 +15 分;以整檔重生成而非補丁,指定保留的元素零失誤

五維度為 Claude 依程式碼與成品的技術側評分(滿分 5),與我的星等分開計,供交叉參考。

Claude Opus

Anthropic · 我的評分 4 / 5 · 第二選擇
第一版
45
第二版
70
實測筆記

第一次 · 45 分

  • 三個模型的初版中,Opus 意外表現最差——UI 與文案皆然。
  • Hero 設計不合格:文字與動態重疊,視覺過於凌亂。
  • 文案仍有約七成的 AI 感。
  • 整體設計保守,用色與動態幾乎沒有記憶點。

第二次 · 70 分

  • 表現顯著回升,且能舉一反三。
  • 文案自然度進步至 80 分。
  • 聽得懂指示並發揮創意,自行新增產品特色區塊。
  • 因初版風格不佳,自行改走另一種更合適的 UI 風格。
技術側註記 — Claude
  • 「幾乎無特色」在程式碼層完全對得上:v1 整份檔案 0 個 @keyframes——連一支 CSS 動畫都沒有,所有動態壓在 three.js 場景上;media query 只有 3 組、aria 僅 4 處。
  • 同樣是單檔交付(41KB),以 importmap 載入 three.js,工程寫法其實比 Fable 更講究——輸的不是工程,是設計判斷
  • +25 分是全場最大單輪進步,而且在程式碼上看得到力道:檔案 41KB → 81.2KB 幾乎翻倍,CSS 動畫從 0 支補到 4 支、hover 態 11 → 20 處,並新增 Dashboard 區塊與「上線第一個月」成效區——收到「完全不行、重做」等級的負評後整組換方向而不是小修,跟最終「第二選擇」的結論一致。
  • 文案同步轉向場景敘事:「顧客來訊的每一刻,總算有人立刻接住」「先免費試,覺得好用再付錢」。有趣的是 v2 標題「不是又一個罐頭機器人」與 Fable v2 幾乎一字不差——兄弟模型在同一句修改指令下口吻收斂。
  • 沒跟上的部分:aria 屬性維持 4 處未增加,無障礙仍是它與 Fable(14 處)最明顯的差距。

GPT 5.5

OpenAI · 我的評分 3.5 / 5 · 第三選擇
第一版
60
第二版
50
實測筆記

第一次 · 60 分

  • 初版文案表現勝過 Fable 與 Opus。
  • 初版 UI 美感表現力優於 Opus。
  • 元件與卡片的微互動遜於 Fable 與 Opus。

第二次 · 50 分

  • 第二輪表現意外不佳,輸出品質明顯退步。
  • 缺乏延伸發揮創意的能力。
  • 桌機版面直接破版。
技術側註記 — Claude
  • 交付形態與 Claude 系完全不同:v1 是 Vite + React 編譯後的 SPA,主 bundle 736KB(three.js 打包在內),另掛 Google Fonts。工程架構最重,也最不像「一頁交付」。
  • v1 文案好是真的好——連 meta description 都寫出「讓 AI 接住每一次對話,把客服變成成長引擎」這種等級的句子。
  • v2 的真相在原始碼裡:它不是重新生成的網站。v2 是一個不到 1KB 的殼,跨站引用 v1 的編譯 bundle,再疊上 enhance.css / enhance.js 兩支補丁——用 setInterval 每 30ms 輪詢等 React 掛載完成,然後直接對渲染出來的 DOM 動手術:刪節點、改寫標題、塞入一整段 Dashboard。
  • 在編譯產物上疊補丁,跟框架的渲染機制天生互相打架——筆記中的桌機破版與「降智感」,在架構層有一個合理解釋:第二輪它改的不是自己的原始碼,而是第一輪的編譯屍體
  • 附註:交付形態可能受工具鏈輸出方式影響,不純粹是模型能力;但「選擇疊補丁而非重建」本身,就是修改成本最真實的樣貌。

Gemini 3.1 Pro

Google · 未評分 · 一輪淘汰
實測筆記
  • 曾以第一版指令嘗試生成設計。
  • 成品 AI 味過重,低到不想投入修改的程度。
  • 第一輪即優先淘汰。
技術側註記 — Claude
  • 初版未部署留存,無原始碼可考,本節不做技術分析。
  • 公平起見需註明:淘汰判定僅基於單次生成的第一印象,Gemini 未獲得第二輪修改的機會——這在「限制」一節有完整說明。

五維度總結

維度Fable 5Claude OpusGPT 5.5Gemini 3.1 Pro
正確性——兩版直開零破版中高——v1 文字與動態重疊v1 高、v2 低——桌機破版未完測
完整性——自主加區塊、文案補到位中——v1 按單交付、無亮點;v2 自增特色v1 高(文案最佳)、v2 低低——AI 味過重
可執行性——單檔即上線——單檔即上線中——需 build pipeline,部署最重
速度本輪未計時,四家皆不評——列入方法限制
修改成本——整檔重生成、一輪到位(+15)——聽懂重做、進步最大(+25)——補丁式修改、越改越壞(−10)未修改

定性整理由 Claude 依實測筆記+原始碼分析彙整;最終名次以我的星等為準(4.5 / 4 / 3.5 / 淘汰)。

04 — Limits 成果與限制

這份實測能說明什麼、
不能說明什麼。

  1. 01
    單一題型只測了「深色高互動 SaaS Landing Page」。結論不能外推到長文寫作、程式重構、資料分析等其他任務。
  2. 02
    單次取樣每個模型每輪只生成一次,沒有重抽取平均。模型輸出有隨機性,分數存在波動空間。
  3. 03
    速度未計時五維度中的「速度」本輪沒有留下數據,是方法上最明確的缺口,留待下一輪補測。
  4. 04
    單一視角分數是我以產品設計視角做出的主觀判斷。所有留存站點連結公開,歡迎讀者自行點開驗證。
  5. 05
    個別修改指令不同任務三是針對各自最弱的一點下指令,每家收到的內容不同;跨模型公平性以任務二的統一修改為準。
05 — Who It's For 適合對象

看完,你應該選誰。

首選 · Fable 5

要美感一次到位的人

你希望模型不只交作業,還會自己補上你沒想到的區塊(見證區、Dashboard 微動態);你在乎質感、且 token 成本不是主要考量。我的一句話結論:能夠舉一反三,且美感到位。

次選 · Claude Opus

打算來回迭代磨作品的人

第一版可能平庸甚至難看,但它聽得懂重話、能整組換方向,單輪進步幅度全場最大(+25)。預算相對敏感、願意花兩三輪對話換品質的人選它。

情境用 · GPT 5.5

要快速看方向與文案手感的人

初版文案自然度全場最佳、美感勝過 Opus 初版——拿它快速產出第一版確認方向很好用。但避免請它在既有成品上深度改版:本次第二輪不升反降。

本輪不推 · Gemini 3.1 Pro

這類題型先跳過

在「深色高互動 SaaS 頁」這個題型上,初版 AI 味重到我不想給第二輪。其他任務類型的表現,本次實測無法代言。

06 — Playbook 使用建議

不管你選哪個模型,
這三招都帶得走。

  1. 01
    給參考網站,別只給形容詞「高科技感」每個模型解讀都不同;附上 oryzo、MetaMask、Slush 三個連結,等於直接把美感地板拉高。
  2. 02
    修改用兩段式:統一方向+個別點名先給六點大方向,再針對最痛的一點單獨下指令。Fable 與 Opus 都吃這套,一輪各進步 15 與 25 分。
  3. 03
    把「可以自行發揮」寫進指令Fable 的見證區、Opus 的自創風格,都是「可另外自行發揮創意」這句話換來的。不給空間,就只會拿到剛好及格的交付。
07 — Sources 來源連結

所有模型產出的 Landing Page 成品

網站成品

風格參考(隨初版指令附給所有模型)