# 對著目的優化

> 兩邊都要過關才算完成:受眾覺得這個網站對他有用,使用者覺得這個網站是他的。用受眾角度審一輪、用使用者角度驗一輪,改完對齊,需要就再跑一圈

- Skill: `yazelin/skill-3` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yazelin/skill-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yazelin/skill-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yazelin (https://skillmd.com/u/yazelin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yazelin/skill-3

---


# 階段五：對著目的優化

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

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

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

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

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

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

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

## 為什麼要多這一階段

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

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

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

## 一圈怎麼跑

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

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

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

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

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

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

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

## 提示詞

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

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

整頁縮圖接這一段：

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

每一段截圖接這一段：

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

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

## 跑之前先確認這三件事

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

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

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

### 擷圖腳本

```js
// 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` 就能跑，瀏覽器它會自己抓。

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

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

| 目的 | 角色 | 必要證據 |
|---|---|---|
| A 賣東西 | 第一次看到這個東西的人 | 價格、買了之後怎麼拿到、退款怎麼算、有人買過的痕跡 |
| B 接案 | 正在同時比三五個人的窗口 | 價格區間、合作流程、不接什麼、現在的檔期 |
| C 作品集 | 同行或正在選人的人 | 作品本身、每件你負責哪一段 |
| D 求職 | 招募方或未來的主管 | 可以驗證的結果、現在能不能談 |
| E 名片 | 剛認識你、想確認你是誰的人 | 你是誰、怎麼找你、一個記得住的東西 |

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

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

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

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

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

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

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

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

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

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

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

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

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

| 評審 | 改版前 | 改版後 | 差 |
|---|---|---|---|
| `qwen3.5:397b` | 17 | 24 | **+7** |
| `kimi-k2.6` | 16 | 22 | **+6** |
| `glm-5.3-flash` | 17 | 22 | **+5** |
| `kimi-k3` | 19 | 22 | +3 |
| `minimax-m3` | 16 | 18 | +2 |
| `gemma4:31b` | 15 | 17 | +2 |
| `kimi-k2.7-code` | 21 | 22 | +1 |

**七個方向全對。** 而且我原本以為「壞掉」的那幾個，動態範圍反而最大。
`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`

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

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

| 總分 | 意思 |
|---|---|
| 20 以上 | 高分。但要跟上一版比才算數，單看數字沒有意義 |
| 15 到 19 | 還有一到兩個明確的洞，看哪一項最低就改哪一項 |
| 10 到 14 | 通常是缺必要證據（價格、作品、聯絡方式），回去跟使用者要 |
| 10 以下 | 型態或族選錯了，不要調參數，回階段一 |

**單項低於 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
```

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

### 實際跑過的一組數字

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

| 版本 | 懂 | 下一步 | 信任 | 完整 | 會聯絡 | 總分 |
|---|---|---|---|---|---|---|
| 只有文案，沒有價格也沒有作品 | 4 | 3 | **2** | **1** | **1** | **11** |
| 加了方案與價格、相簿連結、調亮文字、整頁重做成印樣 | 5 | 4 | 4 | 3 | 3 | **19** |

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

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

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

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

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

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

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

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

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

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

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

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

### 一個防這種錯的問法

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

> **這個站「不」服務誰？**
>
> 有沒有哪一種人來了，你其實不想接？或是你會請他去別的地方？

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

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

### 真的有兩種受眾的時候

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

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

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

## 使用者那一邊怎麼驗

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

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

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

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

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

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

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

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

### 兩邊衝突的時候

| 受眾說 | 不要這樣做 | 要這樣做 |
|---|---|---|
| 這句太抽象，看不懂對我有什麼好處 | 把那句刪掉換成賣點 | 那句留著，旁邊補一塊具體的（價格、交件、流程） |
| 缺價格、缺照片、缺聯絡方式 | 自己編一個上去 | 回去跟使用者要。沒有就照實說沒有 |
| 這一段對我沒幫助 | 直接刪掉 | 先問使用者這一段對他重不重要，再決定 |
| 想要更明顯的行動按鈕 | 做成到處都是的彈窗 | 加一個直接的聯絡方式就好，形式要他同意 |
| 的建議剛好踩到 `avoid` | 照受眾的做 | **以 `avoid` 為準。** 那是他明講過絕對不要的，回去跟他確認才准動 |

## 停在哪裡

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

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

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

使用者這一邊：

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

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

## 三條紀律

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

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

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

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

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