對著目的優化

階段五：對著目的優化

這一階段要同時滿足兩個人

一、受眾要覺得有用。 他看完知道你是做什麼的、敢聯絡你、 想知道的事你都寫了。

二、使用者要覺得這是他的。 他敢把網址貼給客戶、唸出來不會卡、 上面的話是他會講的話。

兩個都過才算完成，缺一個都不算。 這是這一階段唯一的驗收標準。

只顧受眾，會做出一個轉換率不錯但不像他的網站，他不敢拿出去發， 或是發了之後被問到答不出來。只顧使用者，會做出一個他很滿意但沒有人聯絡的網站。

這兩件事會互相拉扯，而且拉扯的地方就是要拿去問他的地方。 實際遇過：受眾審查明確要求把「站在會發生事情的那個位置等」改成具體的價格說明， 理由是太抽象。但那句話正是這個攝影師之所以是她的地方。 正確的處理是兩個都要：那句話留著，價格另外補一塊， 而不是拿她的話去換資訊。

評審不用設計師的角度，好不好看在這一階段不問。

為什麼要多這一階段

實測過同一個攝影師的頁面，兩種評法給出相反的結論：

• 用設計角度問「哪一邊比較像親手做的」，它拿到五比一的好成績。
• 用潛在客戶角度問「這個網站對我有沒有用」，三個模型一致說它做不到它的工作： 沒有價格所以不敢問、沒有照片所以不敢聯絡。

兩種評法量的是不同的東西。 只做設計評分，會得到一個好看但沒有人聯絡的網站。

一圈怎麼跑

一、從 spec 建角色。 用 goal 與 audience 寫成一個具體的人， 要有處境跟顧慮，不要寫成「目標客群」。

你是一位正在籌備婚禮的準新娘，你和未婚夫預算有限， 正在同時比較五、六位攝影師。你不是設計師，也不懂網頁技術。

二、截整頁，切成一屏一屏。 只看首屏會漏掉真正擋住的地方， 上面那個案例的問題全部在首屏以下。

三、問三題（整頁）加兩題（每一段）。 提示詞在下面，照抄。

四、至少三個不同家族的模型。 一個模型的意見是意見，三個家族收斂的是問題。

五、分級： 三個都提到就一定改，過半就建議改，只有一個提到就記下來問使用者。

六、改完停下來，把這一圈的發現與改動講給使用者聽，再問要不要跑下一圈。 不要自己連跑五圈，那會把他的網站改成你的網站。

提示詞

角色那段每次都要放在最前面：

你是<角色與處境>。你不是設計師，也不懂網頁技術。
你剛剛在找<他在找的東西>，有人把這個網站傳給你。
這個網站的主人想達成的是：<goal>
請完全站在你自己的立場看，不要評論美感，只回答「這個網站對我有沒有用」。

整頁縮圖接這一段：

這是整頁縮圖。回三段，不要其他文字：
【五秒】看五秒之後，你認為這個人是做什麼的？你接下來會做什麼？（各一句）
【卡住】有沒有哪一件事讓你不想再看下去、或不敢聯絡他？沒有就寫「沒有」。
【缺什麼】以你的立場，你想知道但這頁沒告訴你的三件事，一行一件。

每一段截圖接這一段：

這是這個網站的其中一段。回兩段，不要其他文字：
【對我有沒有用】這一段對你的決定有沒有幫助？沒有幫助就直說。
【要改什麼】以你的立場，這一段最該改的一件事，講具體要改成什麼。沒有就寫「沒有」。

【五秒】那一題最重要。 它會告訴你首屏有沒有寫對， 也會告訴你受眾接下來想做什麼。上面那個案例三個模型都答對「婚禮攝影師」、 都說下一步要「看作品」，然後作品區沒有作品。五秒過了，下一步走不通。

跑之前先確認這三件事

這三個坑我實際都踩過，每一個都會讓整輪的結論失效：

1. 視窗寬度固定，而且用腳本截。 手動操作瀏覽器截圖，寬度會在你不注意的時候跑掉 （我實際跑成 2560，版面整個重排，評的就不是使用者會看到的東西）。 用下面那支 shoot.mjs，寬度寫死 1440。
2. 改完一定要重新載入再截。 我踩過一次：改完直接截，截到瀏覽器快取的舊頁面， 然後拿到「你都沒改」的假結論，白跑一輪。截完先確認畫面上真的有你剛加的東西。
3. 整頁縮圖不能縮太小。 縮到寬 760 的時候文字讀不到，模型會回報「缺價格」， 其實有，只是它看不見。寬度留到 1100 以上， 而且每一屏都要送給至少兩個模型，不要只送前面幾屏。

順帶一提：瀏覽器的整頁截圖在長頁面上會卡住（我連續失敗四次）， 所以下面那支是逐屏捲動截，比較穩，而且逐屏本來就是這一階段要的東西。

擷圖腳本

// shoot.mjs — node shoot.mjs <url> <輸出前綴>
import { chromium } from 'playwright';
const [url, prefix] = process.argv.slice(2);
const b = await chromium.launch();
const p = await b.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
await p.goto(url, { waitUntil: 'networkidle' });
await p.addStyleTag({ content: 'html{scroll-behavior:auto !important}' });
const h = await p.evaluate(() => document.documentElement.scrollHeight);
for (let i = 0; i < Math.ceil(h / 900); i++) {
  await p.evaluate(y => scrollTo(0, y), i * 900);
  await p.waitForTimeout(250);
  await p.screenshot({ path: `${prefix}-tile${i + 1}.png` });
}
await p.evaluate(() => scrollTo(0, 0));
await p.screenshot({ path: `${prefix}-whole.png`, fullPage: true });
await b.close();

npm i playwright 就能跑，瀏覽器它會自己抓。

各種目的的角色與必要證據

必要證據缺了就回去跟使用者要，不要硬做。 缺了這些，版面再好都沒用。

價格是最常擋住人的那一項。 實測的原話是 「我預算有限，怕太貴不敢問，浪費彼此時間」。 不想公開報價的人，至少給一個區間或起跳價。

這一階段抓得到機械檢查抓不到的東西

實測案例：攝影師那頁的次要文字是深灰配深黑，tools/check.mjs 算出來是 5.16:1， 通過 WCAG 的 4.5:1。但受眾審查連續三屏、三個模型都抱怨看不清楚， 原話是「深灰字配深黑底讓我的眼睛很吃力」「跟背景幾乎融為一體」。

對比值算的是兩個色碼，算不到字級小、背後有格線、整片深色這些疊在一起的效果。 機械檢查過了不代表看得下去。 這是這一階段存在的理由之一。

受眾要打分數，不能只給文字

文字發現告訴你「哪裡壞了」，分數告訴你「有沒有進步、什麼時候算好」。 兩個都要，分數是「改到好」的那個好字的定義。

每個模型除了三段文字，再給一組分數。問法：

最後給分。你是這個網站的受眾，照你自己的感受打，不要客氣。
每一項 0 到 5 分，只回五個數字，用斜線分隔，不要其他文字。

1 我看得懂他是做什麼的
2 我知道下一步要做什麼
3 我信得過他
4 我想知道的事情這頁都寫了
5 我真的會聯絡他（或回來看）

三個不同家族的模型各打一次，每一項取中位數，滿分 25。 方向都對，取中位數沒問題。但這個分數只能拿來跟同一頁的上一版比。

分數只能比同一頁的不同版本，不能跨頁比

這是我踩過的坑，寫在最前面。 我一度拿四個不同頁面、四種不同受眾的絕對分數 放在一起看分佈範圍，得出「只有一個模型會區分，其餘頂到天花板」的結論。那是錯的。 四個頁面各自的受眾不同、內容不同，本來就不能比；四個都做得不錯所以都拿高分， 那是正常，不是天花板。

用對的方法量一次就翻案了。同一頁、同一受眾、改版前後：

七個方向全對。 而且我原本以為「壞掉」的那幾個，動態範圍反而最大。 gemma4 只是整體給分偏低，那是嚴格，不是準。

所以規則是：

一、分數拿來比同一頁的前後版本，不要拿來比不同的站。 「這一版 22 分、上一版 17 分」有意義；「花店 24 分、房仲 20 分」沒有意義。

二、多個模型取中位數沒問題，方向都對。三個不同家族即可。

三、絕對分數的高低不代表好壞，同一個評審的前後差才代表。

換掉量表救不了天花板

順帶記一個失敗的嘗試：我把 0 到 5 的量表換成七項是非題 （「哪幾件這個網站真的做到了」），想逼模型判斷。結果全部給 6 到 7 分， 一樣貼在上緣。問題不在量表的形式，在我一開始就用錯了比較的對象。### 看得懂圖的模型（2026-08-28 實測）

用一張左紅右藍的圖去問，答對才算：

• 看得懂：gemma4:31b、glm-5.3-flash、kimi-k3、kimi-k2.7-code、 minimax-m3、kimi-k2.6、qwen3.5:397b
• 明確拒絕（回 400）：deepseek-v4-pro、glm-5.2、nemotron-5、gpt-oss-3

這個清單會變。 用之前一定要拿已知答案的圖驗一次， 不要相信任何寫死的名單，包括這一份。

分數怎麼讀### 分數怎麼讀

單項低於 3 的那一項優先改，不要看總分。總分會被高分項拉起來， 掩蓋掉那個讓人不敢聯絡的地方。

第 1 項低 → 首屏標題寫壞了。 第 2 項低 → 沒有明確的下一步，或按鈕看起來不知道會發生什麼。 第 3 項低 → 缺可驗證的東西：數字、案例、他負責哪一段。 第 4 項低 → 缺必要證據，看下面那張表。 第 5 項低 → 前面四項都對但還是不敢，通常是門檻太高（要填長表單、怕太貴）。

每一輪都記下來

輪次  懂  下一步  信任  完整  會聯絡  總分  這一輪改了什麼
1     4    3      3     1     2      13    無（基準）
2     4    4      3     3     3      17    加了方案與價格區間
3     4    4      4     3     3      18    調亮次要文字、加 LINE

分數沒動就不要再調同一個地方。 換一項改，或是回去看是不是缺證據。 「沒動」的定義是差三分以內，那在雜訊範圍內。

實際跑過的一組數字

攝影師那個範例（角色：預算有限、同時比五六家的準新娘）：

低分項指的方向跟質性發現完全一致：信任與完整偏低， 文字回饋是「整頁沒有一張照片，我不知道你拍出來什麼樣子，不敢點聯絡」。

同一組頁面拿去跑比對題是 9 比 0，五個模型兩種順序全部說新版比較有用。 分數告訴你「哪一項壞了」，比對題告訴你「有沒有真的變好」，兩個一起用。

受眾必須來自使用者，不可以由你發明

這是這一階段最容易犯、而且最難發現的錯。 代理人自己編一個聽起來合理的受眾， 跑出來的分數會很有說服力，三個模型也會高度一致——但量的是一個假問題。

實際踩過：拿一個刻意做成趣味感的個人站，我自己編了一個「製造業資訊主管想找人導入 AI」 的受眾去審。結果三個模型完全一致：

「我會直接關掉分頁，這看起來像在賣網站設計而非工業 AI 解決方案。」 「七成是漫畫、貼圖、遊戲，瞬間覺得他是沒碰過機台的簡報型顧問。」

分數 12/25，講得斬釘截鐵。但那個站從來沒想服務企業窗口， 產線案例放在公司的另一個站。 整輪的結論全部作廢。

規則：spec 的 audience 只能是使用者自己講出來的人。 他沒講，就回去問， 不要從行業推一個。行業推出來的受眾看起來很合理，錯起來也很有說服力。

受眾錯的時候，分數作廢，觀察不一定作廢

這兩件事要分開處理。 分數是對著一個他沒有的目標打的，直接丟掉。 但逐條觀察是模型真的在畫面上看到的東西，其中有些會誤打誤撞講中。

上面那個例子，使用者後來說「也不完全錯，我的確很久沒在個人站寫產品線的內容了」。 受眾是錯的，但「看不到嚴肅那一面」這個觀察是真的。

做法：把每一條觀察單獨念給使用者聽，問他「這一條是不是你真的想要的」。 他說是的那幾條留下來，其餘連同分數一起丟掉。 不要因為受眾設錯就把整輪的文字也扔了。

一個防這種錯的問法

問「這個站服務誰」不夠，還要問：

這個站「不」服務誰？

有沒有哪一種人來了，你其實不想接？或是你會請他去別的地方？

那一題會直接問出他有沒有別的站、別的身分、別的入口。 上面那個站的答案就是「企業客戶去公司的案例站」——問了就不會白跑一輪。

使用者有多個身分或多個站的時候，把每個站服務誰寫進 spec 的 avoid 旁邊。

真的有兩種受眾的時候

確認過兩種都是他要的，才分別跑，分數會差很多， 而且失敗的方式往往相反：一邊嫌太專業，另一邊嫌不夠專業。 這時候不要靠加東西解，加了兩邊都更長更雜。三個做法選一個，由使用者拍板：

1. 選一個主受眾，另一種放到子頁。
2. 第一屏就分流：兩個入口。代價是首屏多一次選擇。
3. 同一批內容換講法：同樣的作品，對不同的人講不同的重點。

不要問使用者「你想服務誰」，他會說都要。 把兩份分數與兩段原話念給他聽，再問「哪一邊你比較捨得放掉」。

使用者那一邊怎麼驗

每一圈把改動給他看的時候，問這四題，不要問「你覺得如何」。 那個問法只會拿到「還不錯」。

1. 這一頁上面有沒有哪一句，你唸出來會卡？ 卡住的句子就是寫壞的句子， 也常常是我替他發明的句子。
2. 有沒有哪一句是我寫的，不是你講過的？ 有就換回他原本的說法， 哪怕比較不漂亮。他之後要對著客戶講的是那句。
3. 你現在敢不敢把這個網址貼給客戶？ 不敢的話，是哪一個地方讓你不敢。
4. 這一圈我改的東西裡，有沒有哪一項你其實不想要？ 受眾說缺的東西，他可能是刻意不放的。
5. 把 spec 的 avoid 唸給他聽，問還有沒有要加的。 跑了幾圈之後他會想到新的。而且這一題也是在確認你沒有違反前面幾條。

第四題最重要。受眾的意見是資訊，不是命令。

每一圈都要檢查他的話還在不在

改到第三圈的時候很容易發現，訪談逐字稿裡他講得最好的那幾句已經被改光了。 這件事有工具擋，不要靠記性：

node tools/voice.mjs site/index.html site/voice.txt

site/voice.txt 是訪談階段抄下來的，一行一句他自己講過的話。 少了哪一句就回傳 1，要嘛加回去，要嘛跟他確認過才准拿掉。

實測會被抓到的是這種替換：把 「不擺拍，不喊口號，站在會發生事情的那個位置等」 改成「在最佳位置捕捉每個動人瞬間」。 第二句什麼都對，就是誰都可以講。

兩邊衝突的時候

停在哪裡

兩邊各三件事，全部成立才停。

受眾這一邊（加上跟前一版的比對題，新版要贏過八成）：

1. 五秒測試裡，受眾答對他是做什麼的，而且說得出下一步要做什麼。
2. 【卡住】三個模型都回「沒有」。
3. 【缺什麼】剩下的都是使用者刻意不放的東西。

使用者這一邊：

4. 上面沒有一句他唸出來會卡。
5. 上面沒有一句是替他發明的。
6. 他說他敢把網址貼給客戶。

受眾那三條過了、使用者這三條沒過，不算完成。 反過來也一樣。

三條紀律

一、不要把「好不好看」混進來問。 混了就會拿到設計評語， 那些在 docs/craft.md 那條線處理，跟這一階段是兩件事。

二、一次只改被指名的東西。 不要順手重排版， 不然下一圈的比較就失去意義，也分不出是哪個改動有效。

三、每一圈結束一定回去問使用者，而且用上面那四題問。 這是他的網站。 模型說缺的東西，他可能是刻意不放的。

四、每一圈跑完先跑 tools/voice.mjs。 過不了就先處理，再談別的。

五、受眾的意見用來補，不要用來換。 缺什麼就補什麼， 不要拿他的話去換受眾要的資訊。版面裝不下就是版面的問題，不是他的話的問題。