Communitygithub.com

gergobalogh/launch-check

在發布任何新公開頁面或網頁應用程式之前,檢查其鉤子、內容、在不同裝置上的呈現效果、後續步驟、分享與衡量機制。適用於建構或即將發布頁面,或規劃其版面與首屏時。若頁面已公開,請改用 live-page-review。

launch-check 是什麼?

這是一個專為 AI 代理(如 Claude Code、Cursor、Codex)設計的詳細發布前檢查技能。它提供了一份結構化的通用清單,涵蓋鉤子、內容主體、螢幕適配、使用者互動、後續步驟、搜尋引擎最佳化與衡量機制等七大面向,共 29 項檢查。此技能要求代理在本地建置環境(`dist/` 或開發伺服器)中執行,並封鎖分析請求,以避免影響真實流量。檢查需在四種螢幕尺寸(手機 390×844、平板 820×1180、筆電 1366×768、大桌面 1920×1080)下逐一驗證,並區分「封鎖問題」(必須修復或獲得明確豁免)與「建議事項」。最終結果需以標準化格式記錄,如 `Launch check: 25 pass, 1 fail, 1 unverified, 2 N/A; blocker: U1 fail; recommendation: S3 unverified; N/A: U2 (no input), U3 (no waits)`。此技能對於確保新頁面在發布日獲得最大受眾至關重要,因為第二天的修復將無法挽回大部分損失。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/gergobalogh/claude-skills/tree/HEAD/skills/launch-check

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

發布檢查:此頁面準備好了嗎?

發布日會帶來頁面的大部分受眾,而第二天才修復會錯過他們中的大多數。在貼文發布前把它做好。

此清單適用於任何頁面。請保持不包含頁面名稱和頁面資料: 在此撰寫一個新的通用規則,並將頁面及其數字保留在專案自己的筆記中。

如何執行

  1. 命名頁面。 其類型(文章或故事、工具或遊戲、中心),一句話描述其工作,以及其步驟: 到達 → 可用 → 首次使用 → 主要動作 → 它起作用了 → 下一步。合併不適用的步驟。不要為了滿足檢查而添加輸入、數字或動作。
  2. 提供一個封鎖了分析的本地建置(dist/ 或開發伺服器)。絕不要打開線上頁面。
  3. 在以下四個螢幕上逐一檢查所有項目。 標記每個項目的通過、失敗、未驗證或不適用,並附上原因。對於需要判斷的檢查,寫下你所看到的(你複述的句子、你查看的螢幕截圖),而不僅僅是「通過」。
  4. 封鎖問題: 修復它或獲得用戶的明確豁免,如果未驗證則需驗證。建議事項: 報告它;它不會阻止發布。
  5. 將結果寫在專案的筆記或任務板上, 計算全部 29 項檢查: Launch check: 25 pass, 1 fail, 1 unverified, 2 N/A; blocker: U1 fail; recommendation: S3 unverified; N/A: U2 (no input), U3 (no waits)。

螢幕: 手機 390×844、平板 820×1180、筆電 1366×768、大桌面 1920×1080。逐一檢查每個螢幕;寬版面造成的移動不亞於窄版面。透過螢幕截圖確認版面失敗,因為僅靠原始碼無法顯示它們。

瀏覽器: 無頭 Chromium(Playwright)就足夠了,因為本地建置無需登入。在載入頁面之前,在該分頁上封鎖你的分析主機(page.route(/your-analytics-host/, r => r.abort())),這樣檢查就不會計入訪問次數。

依頁面類型:

  • 文章或故事: 繼續滾動是下一步,因此 U2 為不適用,如果沒有等待內容則 U3 為不適用。
  • 工具或遊戲: T2 涵蓋頁面上任何文字;首次使用必須給出真實結果。
  • 中心: 回報是找到正確的東西,因此 T1 意味著每個連結都能實現其承諾。

鉤子

  • H1 · 封鎖問題。僅憑每個尺寸下的第一個螢幕,你就能用一句話說出訪客能得到什麼。 回報,而不是主題。寫下那句話。如果你寫不出來,或者它只命名了主題,則此項失敗。
  • H2 · 建議事項。第一個螢幕為陌生人提供了一個繼續的理由: 一個具體的發現、數字、結果或問題,並且是真實的。它對於從沒有上下文的貼文到達的人來說也應該有效。
  • H3 · 建議事項。連結預覽做出同樣的承諾。 og:image、標題和描述說明回報。在建置中檢查標籤和圖片。
  • H4 · 封鎖問題。第一個動作在每個尺寸下無需滾動即可見,並且看起來明顯是一個動作, 具有足夠的對比度。在滾動故事中,第一個動作是滾動:可見的滾動提示即算通過。

內容主體

  • T1 · 封鎖問題。內容主體及時兌現了鉤子的承諾。 回報不會等到最後。如果頁面很長,應先提供簡短版本,其餘部分由訪客選擇。
  • T2 · 封鎖問題。從頭到尾閱讀順暢。 像陌生人一樣按順序閱讀全部內容。每個部分都承接前一部分並有所補充,沒有冗餘內容,你可以用一句話複述整個內容。
  • T3 · 建議事項。每個螢幕一個主要觀點或數字。 其餘部分放在表格或「更多」後面。如果頁面不呈現數字或發現,則為不適用。
  • T4 · 封鎖問題。每個數字和主張都有來源,所有隱藏內容都能正常運作。 打開每個抽屜、分頁和摺疊面板,並跟隨每個來源連結。關閉的部分仍然是頁面的一部分。
  • T5 · 建議事項。文案通過作者的風格規則和 AI 寫作檢測, 沒有留下任何佔位符、草稿或除錯文字。頁面文案以用戶的名義發布,因此請報告問題並詢問;不要獨自改寫。

螢幕

  • S1 · 封鎖問題。在所有四個螢幕上、每個步驟下,它都看起來正常。 在每個步驟後截圖,並檢查每一張:沒有裁切、重疊或未設定樣式(腳本生成的元素可能遺漏範圍 CSS),沒有橫向滾動。在執行移動地圖的搜尋或選擇後,檢查結果是否落在未被面板覆蓋的部分,且在所有尺寸下都如此。
  • S2 · 封鎖問題。所有文字在其渲染大小下都可讀。 測量它,不要用眼睛判斷,目標是 12 px 或更大。對於 SVG 圖表:字型大小 × 渲染寬度 ÷ viewBox 寬度。
  • S3 · 建議事項。在手機上 2 秒內可用。 可用意味著第一個動作能夠工作的最早時間點。從載入開始計時,使用冷快取和指定的手機 CPU 與網路設定檔。未經限制的桌面運行無法證明手機通過。
  • S4 · 封鎖問題。慢速載入和載入失敗都應看起來正常。 測試網路減速(CDP Network.emulateNetworkConditions,9 / 1.6 / 0.75 / 0.4 Mbps)和載入失敗。為獲得準確時間,請使用像 CDN 那樣的壓縮方式提供服務;未壓縮的本地伺服器會誇大每次等待。從冷啟動開始,在每次載入移交過程中每 0.5 秒截圖一次,並檢查這些影格。用載入標籤保留最後一張好的圖片;回退僅用於失敗情況。標籤在載入期間和失敗後必須正確。如果沒有後期載入的內容,則為不適用。

使用

  • U1 · 封鎖問題。在每個步驟之後,下一個控制項在頁面留下訪客的位置,於每個尺寸下都顯示在螢幕上。 分別測試進入每個步驟的每種方式(例如、輸入、點擊)。檢查每個滾動目標、固定標題和折疊處。
  • U2 · 建議事項。在任何自由格式輸入旁,都有一個單擊的進入方式(範例或預設),並且事件會記錄使用了哪一種。如果沒有自由格式輸入,則為不適用。
  • U3 · 封鎖問題。任何超過 2 秒的等待都應顯示進度,並以清晰的結果或清晰的錯誤結束。 在本地驅動延遲和失敗的回應。永不結束的旋轉器即為失敗。如果沒有動作需要等待,則為不適用。 在其腳本載入完成前顯示的控制項(例如用於惰性載入地圖的表單)必須能正常工作或排入佇列:在載入期間和載入失敗後使用它。未處理的表單提交會重新載入頁面。

下一步

  • N1 · 建議事項。在成功的那一刻,有一個明確的下一步要做的事: 相關頁面、嘗試另一個、再玩一次。把它放在成功發生的地方,而不是頁尾。
  • N2 · 建議事項。分享按鈕應傳送發現結果: WhatsApp、Facebook、X 和複製連結,每個都攜帶一個包含發現結果的書面句子,而不僅僅是標題,放置在結果出現的位置。該句子是公開文案,因此由用戶措辭:詢問。沒有發現結果的中心仍然需要用戶提供一個句子。不要獨自發明一個或將其標記為不適用。share 事件僅發送網路,從不發送文字或 URL。

搜尋

Google 的 AI 答案(AI Overviews、AI Mode)從普通的搜尋索引中獲取頁面:帶有摘要排名的頁面可能被引用,無需 AI 專用檔案或標記。結構化資料必須與頁面顯示的內容相符。

  • F1 · 封鎖問題。頁面可以被索引: 一個標準網址,沒有遺留的 noindex,列在網站地圖中。內容過於單薄而無法排名的頁面(僅連結到其他地方的存根、空列表)應被排除在搜尋之外:使用 noindex 並從網站地圖中排除,且沒有其他語言版本指向它。
  • F2 · 建議事項。標題說明頁面的內容, 而不僅僅是網站名稱,網站名稱放在結尾;描述是頁面自身的,不出現在其他頁面上。
  • F3 · 建議事項。有一行可見文字說明誰製作了它、何時發布以及其資料的新鮮程度, 結構化資料中的發布日期與之相同。僅在內容真正變更時才更改修改日期。中心頁面為不適用。
  • F4 · 封鎖問題。HTML 中的每個圖片都有來源和真實的 alt 文字, 包括僅在沒有 JavaScript 時顯示的圖片。空的 <img> 即為失敗。
  • F5 · 建議事項。基於資料建構的頁面應提供資料: 經過隱私檢查後的 CSV(僅包含頁面已顯示的欄位)、下載旁的授權條款行,以及 Dataset 標記。影片應獲得帶有海報的 VideoObject 標記。如果頁面兩者都沒有,則為不適用。

發布後:在 Search Console 中為頁面請求索引(使用用戶的帳戶,因此請詢問),如果專案維護一個 AI 答案問題列表,則將頁面回答的問題添加到該列表中。

衡量

檢查假設使用注重隱私的事件追蹤器(Umami、Plausible 或類似工具)並搭配自訂事件。

  • M1 · 封鎖問題。事件存在於要發布的建置中。 每個適用步驟一個事件,每個動作一個事件,成功是效果而不是點擊,*-leave 事件提供最遠的步驟和停留時間。
  • M2 · 封鎖問題。事件透過真實的追蹤器觸發。 樁化的追蹤器函數可能隱藏遺失的事件。在正式主機名稱上執行真實的追蹤器,使用 context.route 提供本地建置並攔截追蹤器的發送端點,以便沒有任何東西離開機器。驅動每個控制項,包括跳轉連結:每個事件描述其動作,失敗時不發送成功,跳過內容的跳轉不發送閱讀事件。在同一個分頁中跟蹤一個已追蹤的站外連結,並檢查 *-leave 事件仍然到達:在頁面卸載時啟動的請求可能會丟失,因此此類連結應在新分頁中開啟。
  • M3 · 封鎖問題。事件列在專案的 docs/analytics.md 中,包含上線時間,且漏斗規格位於 docs/funnels/ 中(將其儲存在分析工具中需要用戶同意)。
  • M4 · 封鎖問題。訪客輸入或選擇的任何內容都不會發送給分析工具: 頁面瀏覽中沒有哈希(排除哈希)、沒有查詢文字、沒有地點。僅傳送固定標籤和分桶。
  • M5 · 封鎖問題。目標在發布前就已寫下(每個步驟預期達到的數字),以便發布後的審查有可比較的基準。
  • M6 · 封鎖問題。代理程式保持離線, 因為它們的訪問計入真實流量。一個可以指向線上頁面的檢查腳本必須自己封鎖分析。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能