Communitygithub.com

brandvm/webflow-launch

將完成的 Webflow 建置上線並順利度過第一個月：包含 SEO 規劃與結構化資料、上線前 QA（內容、功能、裝置、無障礙、速度、SEO 與追蹤）、上線日（發布、釋出、重新導向、關閉 noindex）、移交給客戶以及 30 天的後續追蹤。

webflow-launch 是什麼？

此技能專為使用 wf-template 建置的 Webflow 網站從簽核完畢到正式上線及後續一個月的營運所設計。它涵蓋了完整的上線流程：從 SEO 計畫與結構化資料的建立、詳細的上線前品質確認（包括內容校對、功能測試、裝置相容性、無障礙檢測、效能最佳化與追蹤碼驗證），到正式上線日的網域設定、發布、301 重新導向與 noindex 移除，最後將網站移交給客戶並提供 30 天的營運監控。它透過一系列 pnpm wf:* 腳本自動化檢查流程，並與 Webflow 的 page settings、snippet 及 CMS 模板深度整合。支援 Claude 與人類協作模式，Claude 負責執行可自動化的檢查與報告，人類則負責需要實際操作或主觀判斷的項目。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brandvm/wf-mgt/tree/HEAD/.claude/skills/webflow-launch
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Webflow 上線：簽核完成的建置 → 正式網站 → 前 30 天

從 webflow-build 技能的 建置移交 結束的地方開始：每個頁面在測試站上完成，並經由設計簽核。webflow-build 的既有規則仍然適用（未經明確許可，不得提交、推送、發布到自訂網域、釋出或變更 DNS；聊天中不得出現憑證）。

標籤：[Claude] Claude 執行 · [Claude 檢查] Claude 驗證並回報 · [人員] 由人員執行；Claude 可以追蹤，但不得聲稱已執行。指令是 webflow-build 的檢查腳本（pnpm wf:*，來自儲存庫；加上 --live 可檢查訪客看到的內容）。如果列表中提到其他技能（webflow-performance-optimizer、asset-audit、safe-publish），如果當前對話中有該技能則使用它；否則手動執行檢查並說明。

執行方式：

  1. 每完成一個項目，使用 pnpm progress tick "<checklist>" "<該項目的起始文字>" 記錄進度（當 pnpm wf:* 腳本決定該項目時使用 --by check），如同 webflow-build › checklists.md › 如何記錄進度。Bench 的 Tasks 面板會顯示相同的列表；pnpm progress show 會將其印出，並包含人員自己的待辦事項。
  2. 從上到下依序進行；在繼續之前回報每個部分的結果。
  3. 任何失敗的項目都應列入已知問題清單，標記為「上線前修復」或「上線後修復」，並指定負責人。
  4. webflow-build 的檢查腳本仍然適用於正式網域：加上 --live，並在檢查時將 stagingUrl 指向該網域。

SEO 計畫（審閱期間，上線前 QA 之前）

SEO 是規劃和建置出來的，而不僅僅是在最後檢查。計畫存放在儲存庫的 docs/handoff/SEO-PLAN.md（模板已有骨架）：包含測試站目前的輸出內容、步驟、每個頁面的結構化資料，以及需要客戶提供的資訊。

  • [Claude] 盤點每個頁面和模板：標題與描述（含長度）、Open Graph 欄位與圖片、noindex、JSON-LD。讀取已發布的 HTML（pnpm wf:seo），而非頁面設定。
  • [Claude] 草擬遺漏或較弱的標題與描述；[人員] 核准；[Claude] 在頁面設定中寫入（模板會綁定 Meta Title 與 Meta Description 欄位）。
  • [Claude] Open Graph「與 SEO 相同」設定在每個地方；[人員] 核准一個預設的 1200×630 分享圖片；模板會綁定圖片欄位。
  • [Claude] Webflow 未寫入的全站標籤（og:site_name、og:locale）放在 loader.html 的 head snippet 中：重新貼上並發布，然後執行 pnpm wf:install。
  • [Claude] 結構化資料以 JSON-LD 檔案形式存放在儲存庫中，每個頁面一個檔案（docs/seo/schema/<page>.jsonld），以及為 CMS 模板準備的 docs/seo/schema/templates.md，其中包含它們的 {Field} 綁定。每個項目都透過 @id 指向生產網域上的一個 Organization 實體。檔案是唯一的真相來源；頁面的 head 程式碼（或透過頁面工具的 jsonLdSchema，如果連接器有提供的話）是副本。僅綁定單行欄位：引號或換行會破壞 JSON，而撇號會變成 &#39;。
  • [Claude] 標題計畫：在每個頁面和模板上執行 pnpm wf:outline，並根據 headings.md 進行檢查。標籤修正納入建置中；[人員] 核准任何 H1 或 H2 文字的變更（這是文案）。
  • [Claude] 重新導向對應表，當新網站取代舊網站時：pnpm wf:redirects map（來自 liveUrl 的舊網站，或使用 --from）會以 Webflow 的匯入格式寫入 docs/seo/redirects.csv；印在「需要檢查」下方的每一列都需要在檔案中檢查並編輯。[人員] 核准對應表，並匯出網站現有的 301 重新導向（如果有的話）（一次匯入會取代所有現有重新導向；使用 --existing 重新執行）。
  • [Claude 檢查] 網站地圖中的每個頁面在測試站上都有其標題、描述、標準網址和一個 H1（pnpm wf:seo）。
  • [Claude 檢查] 沒有重複的標題或描述，以及一個真實的 404 頁面；過長的標題和過短的描述已修正或接受；沒有結構化資料的頁面已列在 seo.noSchemaOk 中。然後對每種類型的一個頁面執行 Google 的 Rich Results Test。
  • [人員] 提供官方名稱、地址、電話、營業時間、社群檔案以及生產網域（www 或 apex）。

上線前 QA

內容

  • [Claude 檢查] 沒有佔位文字或 # 連結（pnpm wf:links，它也會標記 lorem ipsum）；暫代圖片已根據已知問題清單進行檢查。
  • [人員] 校對每個頁面。
  • [Claude 檢查] 已發布的 HTML 中沒有遺留 data-manual-todo 標記（表示所有手動步驟已完成）；docs/handoff/REVIEW.md › 上線前所有項目都已勾選。
  • [Claude 檢查] 聯絡資料：電話為 tel: 連結、地址、電子郵件、營業時間；[人員] 確認這些資料無誤。
  • [Claude 檢查] 法律頁面存在並在頁尾提供連結；版權年份和社群連結。

功能

  • [人員] 每個表單實際提交一次：郵件送達正確的收件匣或 CRM、確認訊息顯示、自動回覆寄出。（Claude 無法通過垃圾郵件防護；無頭瀏覽器會被其封鎖。）
  • [Claude 檢查] 所有連結和按鈕都能運作（pnpm wf:links --external；外部失敗需手動確認，有些網站會封鎖機器人）。
  • [Claude 檢查] 404 頁面、載入中、空白、成功和錯誤狀態。
  • [Claude 檢查] 搜尋、篩選、排序和分頁（如果有的話）。
  • [人員] 付款：進行測試購買和退款（如果有的話）。

裝置、無障礙、速度

  • [人員] 實際裝置：iPhone Safari、Android Chrome；桌面版 Chrome、Safari、Firefox、Edge。
  • [Claude 檢查] 在每個頁面模板上執行 pnpm wf:overflow：在從 2560 到 360 的每個寬度下（包含中斷點之間的筆電寬度），沒有內容超出右邊緣，也沒有水平捲動。
  • [Claude 檢查] 在任何頁面的每個寬度下，沒有嚴重或關鍵的無障礙失敗（pnpm wf:a11y --all-widths）。目標：WCAG 2.2 AA。
  • [Claude] 對每個頁面進行僅鍵盤操作逐步測試：焦點可見性、順序、選單、對話框、Escape 鍵。
  • [人員] 螢幕閱讀器抽樣檢查。
  • [Claude 檢查] 在手機設定檔上的效能：目標為 CLS < 0.1、INP < 200 毫秒、LCP < 2.5 秒（webflow-performance-optimizer）；記錄設計取捨的項目。

SEO 與追蹤

  • [Claude 檢查] 網站地圖中的每個頁面都有其標題、描述、標準網址和一個 H1（pnpm wf:seo）。
  • [Claude 檢查] OG 標籤和 JSON-LD 在每個頁面上解析時沒有 HTML 實體，並且僅在 seo.noindexOk 中的頁面上有 noindex：其餘的 SEO 報告。替代文字（asset-audit）、favicon、SEO-PLAN.md 中規劃的結構化資料。
  • [Claude 檢查] 標準網址指向正式網域（在網域附加之後：設定檔中的 liveUrl，然後執行 pnpm wf:seo --live --canonical）。
  • [Claude 檢查] 在標籤放到網域上之後執行 pnpm wf:tracking --live（先在測試站上執行，如果標籤能在測試站載入）：哪些標籤載入在哪個頁面上、沒有頁面瀏覽被重複計算、在 Cookie 選擇之前或拒絕之後沒有追蹤、gclid 和 UTM 在主機重新導向後仍然保留。每個發送資料的請求都會被封鎖，因此此檢查不會增加客戶報表的數據。它無法判斷帳戶是否收到了任何資料。
  • [人員] GA4 和轉換數據到達（即時報表），在正式網站上接受 Cookie 後。

上線日

  • [人員] 內容凍結已同意；來自客戶的上線核准與日期。
  • [人員] DNS：提前一天降低 TTL；保留郵件記錄（MX、SPF、DKIM）。Claude 不變更 DNS 或域名註冊商設定。
  • [Claude] 在獲得明確許可後：發布到正式網域（如果 safe-publish 可用：顯示變更內容、確認、發布）；建立儲存庫釋出並在 head snippet 中設定 RELEASE（README › 釋出）。
  • [Claude 檢查] pnpm wf:domain：證書受信任且未接近到期日、http 和另一個 www 主機永久重新導向到 liveUrl 主機、網域不會在 45 天內到期。
  • [Claude 檢查] pnpm wf:install --live：已發布的 snippet 與 loader.html 相符（包含新的 RELEASE）、一個 viewport meta、沒有向 localhost 發出的請求。
  • [Claude 檢查] pnpm wf:seo --live --canonical：seo.noindexOk 之外沒有遺留 noindex、每個標準網址都在正式網域上。
  • [Claude] 移除 noindex 和測試站密碼；robots.txt 允許索引。
  • [Claude] 儲存正式網站的視覺基準線（pnpm wf:baseline save --live，pages 中的每個頁面）並提交它們。
  • [Claude] 套用 301 重新導向：[人員] 匯入 docs/seo/redirects.csv（網站設定 › 發布 › 301 重新導向 › 匯入）並發布；[Claude 檢查] pnpm wf:redirects test --live：每一列在一個永久跳轉內到達其目標頁面。
  • [Claude 檢查] sitemap.xml 存在（網站設定 › SEO › 自動產生網站地圖）並且 沒有 列出 /design/style-guide 或 /design/media：一旦網站方案啟用後，透過網站地圖工具將兩者排除（在此之前它會回應 403）。
  • [人員] 在 Search Console 中提交 sitemap.xml。
  • [人員] 在正式網站上提交一個表單，並在分析工具中看到該次造訪。

移交給客戶（上線已核准）

全部由 [人員] 執行，Claude 可以準備文件：

  • 正式網站；所有權轉移（Webflow 網站、託管帳單、網域、設計檔案、字型和圖片授權）。[Claude] 列出需要轉移的項目：域名註冊商、DNS 主機和續約日期（pnpm wf:domain）、標籤及其 ID、頁面載入的第三方服務（pnpm wf:tracking --live）。
  • CMS 培訓（錄影）和培訓筆記（[Claude] 根據 CMS 筆記草擬）。
  • Analytics、Tag Manager 和 Search Console 的存取權限。
  • 憑證歸還；移除或根據支援協議保留代理商存取權限。
  • 支援條款與第一個改善路線圖。

上線後（前 30 天）

  • [Claude 檢查] 第 1 到 3 天：爬取 404 和重新導向鏈（pnpm wf:links --live --external）；[人員] 檢查 Search Console 涵蓋範圍並匯出其中的「找不到 (404)」網址；[Claude 檢查] pnpm wf:redirects test --live --file <export> 並將任何失敗的項目新增到對應表中。
  • [人員] 第 1 週：潛在客戶開始到達，分析數據看起來正確。
  • [人員] 第 2 到 4 週：與基準線比較索引和流量。
  • [Claude] 修復已知問題清單中的上線後項目。
  • [人員] 30 天檢查、回顧、推薦信或案例研究。
  • [Claude 檢查] 在檢查時（以及之後的任何支援訪問時）執行 pnpm wf:domain：即將到來的續約通知應發送給付款方。
  • [Claude] 在每次後續釋出前：在發布到測試站後執行 pnpm wf:baseline compare --live；每個變更都是預期的或被修正。
  • [Claude] 將專案新的 template-candidate GOTCHAS 貢獻給模板（webflow-build › rules.md › 貢獻）；模板使用 pnpm harvest 收集它們。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

brandvm/webflow-audit

Work on a Webflow site that is already live, without breaking it: a read-only audit first (visual baselines, speed as the median of several runs, accessibility, links, SEO and schema, CMS, custom code and interactions), a status tracker from the client's own checklist, a rollback point, then small batches that go to staging, are verified, and reach the live domain only when the person types "publish". Use when auditing or improving an existing live Webflow site (speed, SEO, accessibility, cleanup), moving a live site's custom code onto wf-template, or doing a one-off fix on a live site (a broken link, a carousel, a form). For a new site, use webflow-build.

brandvm/webflow-build

Build a Webflow site in Webflow from its approved localhost prototype (built first from the Figma design, in Bench or by Claude), with the Webflow MCP and this wf-template repo: variables, tag styles, classes and CMS, the repo port and loader, the style guide page, the media page, components, then pages section by section, each verified against the prototype at four widths, up to the build handoff. Use when building prototype pages from Figma frames, starting or continuing a Webflow build (Designer through the MCP plus JS/CSS in the repo), building components or pages, comparing Webflow staging with the prototype, checking anchors, page transitions, load flicker or the published HTML, or wrapping up a build session. For project setup, the inputs and the Webflow snapshot, use webflow-prototype; for launch, webflow-launch; for a site that is already live, webflow-audit.

brandvm/webflow-prototype

Start a Webflow project and build its Figma design as a localhost prototype that mirrors Webflow, before anything is written to Webflow. Covers setting up the repo and workspace from wf-template (pnpm new-project, or Bench's Add client from a Figma design), collecting the inputs, reading the Figma file, taking the Webflow snapshot, building the style guide and then each page with the site's own variables and class names, and the handoff pack for the Webflow build. Use for "New project: Webflow site <name>, Figma <link>", setting up a repo and workspace, reading a Figma file, starting or continuing a localhost prototype, proposing variables and classes, or preparing the handoff to the Webflow build. For building in Webflow, use webflow-build.

brandvm/webflow-style-guide

Make or update a Webflow site's style guide page in the one fixed layout every site uses (a sidebar of sections, each section a list of rows with the name on the left and the live specimen on the right), first in the localhost prototype and then in Webflow at /design/style-guide. Use when starting a project's style guide, when the style guide is the first page of a prototype or of a Webflow build, when a new class or component needs its row, when checking that every class is on the page before running Webflow's "Clean up unused styles", or when adding a style guide to an existing site.

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community