yazelin 階段四：驗收
先跑機器檢查
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。
檢查沒過就修到過，不要在報告裡寫「這幾項可以之後再處理」。
然後你自己看這五件事
機器看不出來，但是使用者一定會遇到：
手機開一次。 拉窄瀏覽器視窗不算，要拿真的手機開。 最常出事的是首屏文字被動效壓住，還有按鈕在拇指構不到的位置。
另外一定要用程式量一次橫向溢出，因為它在縮圖上看不出來， 在桌機也不會發作，而使用者一滑就會看到整頁歪掉：
// 在 1440 與 390 兩個寬度各跑一次 document.documentElement.scrollWidth - document.documentElement.clientWidth大於 1 就是有東西超出去了。找兇手用這一段，它會列出右緣跑掉的元素：
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弄壞）。把網路調到慢速開一次。 開發者工具裡把網路設成 Slow 4G， 看第一眼出現的是不是白畫面。首屏動效在還沒載完的時候不能讓畫面空著。
關掉動畫再開一次。 作業系統的「減少動態效果」打開，重新載入， 確認畫面是一張靜止但完整的圖，不是空白。
整頁唸出來。 唸得卡住的句子就是寫壞的句子。 這一條抓到的問題比前面三條加起來還多。
找一個不認識使用者的人看五秒鐘，然後問他：這個人是做什麼的、 他要你做什麼。兩個都答不出來就是首屏寫壞了，回去改標題，不要改設計。
想要更嚴的檢查
完整清單在 docs/external-skills.md。都是選配，使用者自己裝好了你才用得到，
不要替他安裝。 他沒裝就照上面的做完，在交付那段提一句「想要更嚴的檢查可以另外裝」。
最常派上用場的三個：
- marketing-page-checker 行銷頁健檢，看轉換路徑有沒有斷。
- landing-page-checker 十個類別的 CRO 稽核。
- Lighthouse，瀏覽器內建，看效能與無障礙分數。這支補得到
check.mjs算不到的那些。
部署
照 spec/site.yaml 的 hosting 決定，步驟看 docs/deploy.md。
上線之後一定要再跑一次檢查，這次餵線上網址，確認 CSS 與 hero.js 的相對路徑在正式環境沒有壞掉。子目錄部署最容易在這裡出事。
最後交給使用者的東西
一段話寫清楚三件事：網址、之後要改字的話改哪個檔案的哪一段、
之後要換首屏動效的話改哪一行。不要假設他記得住這次對話。
把這段話寫進 site/README.md 留在專案裡。