# 驗收

> 上線前的機器檢查與人眼確認，然後才部署

- Skill: `yazelin/skill-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yazelin/skill-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yazelin/skill-2/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-2

---


# 階段四：驗收

## 先跑機器檢查

```bash
node tools/check.mjs site/index.html
```

回傳 0 才算過。這支擋的是幾種一定會被抓包的錯：

- 模板的示範內容忘了換
- 搜尋引擎與社群分享需要的標籤沒寫
- 會動的東西沒有辦法關掉
- `<img>` 指到不存在的檔案（選了要圖的版面卻沒放圖）
- 正體中文的頁面混進簡體字
- 內文與背景、按鈕的字與底色，對比低於 4.5:1

**最後三條是實測出來的。** 用非 Claude 的模型跑這條流程，
它會把「根據」「必須」寫成簡體，使用者看不出來就上線了；
換上自己的品牌色之後按鈕的字看不見，也是常見的翻車方式。

對比是從 `tokens.css` 的變數直接算的，不是從截圖判斷，
**所以它抓不到版面問題**：留白不對、字級沒有階層、圖片比例怪，
這些機器看不出來，要靠下面那五件事跟 Lighthouse。

**而且對比過關不等於看得下去。** 實測過一個算出來 5.16:1、
通過 4.5:1 門檻的頁面，受眾審查裡三個模型都說讀不下去，
因為字小、背後有格線、整片深色疊在一起。
那一層在階段五處理，看 `skills/05-optimise/SKILL.md`。

檢查沒過就修到過，不要在報告裡寫「這幾項可以之後再處理」。

## 然後你自己看這五件事

機器看不出來，但是使用者一定會遇到：

1. **手機開一次。** 拉窄瀏覽器視窗不算，要拿真的手機開。
   最常出事的是首屏文字被動效壓住，還有按鈕在拇指構不到的位置。

   **另外一定要用程式量一次橫向溢出**，因為它在縮圖上看不出來，
   在桌機也不會發作，而使用者一滑就會看到整頁歪掉：

   ```js
   // 在 1440 與 390 兩個寬度各跑一次
   document.documentElement.scrollWidth - document.documentElement.clientWidth
   ```

   大於 1 就是有東西超出去了。找兇手用這一段，它會列出右緣跑掉的元素：

   ```js
   const lim = document.documentElement.clientWidth;
   [...document.querySelectorAll('*')]
     .filter((el) => el.getBoundingClientRect().right > lim + 1)
     .map((el) => el.tagName + '.' + el.className);
   ```

   **列不出來就是偽元素幹的**，去 CSS 找 `::before` / `::after` 裡面的
   負 `inset`、負 `right`、負 `left`。這個 repo 自己的範例就中過三次，
   三次都是刻意外擴的裝飾（頁緣直排標籤、文字底下的暗罩、圈起來的紅筆圈），
   在桌機有版心外的空白可以站，到窄螢幕就沒有了。
   修法是在窄螢幕把外擴量收掉，或在外層加 `overflow: clip`
   （**不要用 `hidden`**，那會產生捲動容器把 `position: sticky` 弄壞）。
2. **把網路調到慢速開一次。** 開發者工具裡把網路設成 Slow 4G，
   看第一眼出現的是不是白畫面。首屏動效在還沒載完的時候不能讓畫面空著。
3. **關掉動畫再開一次。** 作業系統的「減少動態效果」打開，重新載入，
   確認畫面是一張靜止但完整的圖，不是空白。
4. **整頁唸出來。** 唸得卡住的句子就是寫壞的句子。
   這一條抓到的問題比前面三條加起來還多。
5. **找一個不認識使用者的人看五秒鐘**，然後問他：這個人是做什麼的、
   他要你做什麼。兩個都答不出來就是首屏寫壞了，回去改標題，不要改設計。

## 想要更嚴的檢查

完整清單在 `docs/external-skills.md`。**都是選配，使用者自己裝好了你才用得到，
不要替他安裝。** 他沒裝就照上面的做完，在交付那段提一句「想要更嚴的檢查可以另外裝」。

最常派上用場的三個：

- [marketing-page-checker](https://github.com/yazelin/marketing-page-checker) 行銷頁健檢，看轉換路徑有沒有斷。
- [landing-page-checker](https://github.com/jonathanposovatz/landing-page-checker) 十個類別的 CRO 稽核。
- Lighthouse，瀏覽器內建，看效能與無障礙分數。這支補得到 `check.mjs` 算不到的那些。

## 部署

照 `spec/site.yaml` 的 `hosting` 決定，步驟看 `docs/deploy.md`。

上線之後**一定要再跑一次檢查，這次餵線上網址**，確認 CSS 與 hero.js
的相對路徑在正式環境沒有壞掉。子目錄部署最容易在這裡出事。

## 最後交給使用者的東西

一段話寫清楚三件事：網址、之後要改字的話改哪個檔案的哪一段、
之後要換首屏動效的話改哪一行。**不要假設他記得住這次對話。**
把這段話寫進 `site/README.md` 留在專案裡。