Communitygithub.com

brandvm/webflow-audit

在已上線的 Webflow 網站上工作，而不破壞它：先進行唯讀稽核（視覺基線、多次執行的中間速度、可及性、連結、SEO 與結構化資料、CMS、自訂程式碼與互動），根據客戶自己的檢查清單建立狀態追蹤器、回滾點，然後以小批次方式將變更推送至暫存環境驗證，只有在有人輸入「publish」時才觸及正式網域。

webflow-audit 是什麼？

此技能旨在安全地對現有已上線的 Webflow 網站進行稽核與改進，防止任何未經檢查的變更破壞網站。它強制執行一個嚴格的工作流程：首先進行全面的唯讀稽核，涵蓋視覺基線、速度、可及性、連結、SEO、結構化資料、CMS 庫存、自訂程式碼和互動。然後，它建立一個客戶原始措辭的請求追蹤器，記錄所有決策，並在進行任何寫入操作之前建立一個明確的回滾點。變更以單一、可描述的批次進行，先發布到暫存環境進行自動化驗證（包括與基線的差異比較），並且只有當人員明確輸入「publish」一詞後，才能發布到正式網域。這確保了團隊的其他待處理編輯不會被意外推送。該技能支援 Claude Code、Webflow CMS，並要求使用特定的 pnpm 腳本（pnpm wf:*）進行測量。它特別適用於網站速度、SEO、可及性的改進、清理自訂程式碼，或修正已上線網站上的單一問題（如死連結），而對於全新網站則應使用 webflow-build 技能。

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

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Webflow 稽核：以小型驗證步驟修改已上線的網站

一個已上線的網站包含訪客、排名以及其他人的未發布工作。 這裡不會從頭建立任何東西：每個變更都從測量開始， 獨立發布，並且可以回復。

共用規則適用（webflow-build › rules.md：未經明確同意不得提交、推送、發布或變更 DNS；聊天中不得包含憑證；Designer 優先；腳本應保存在儲存庫中）。其檢查腳本（pnpm wf:*）負責測量；將 webflow-build.config.json 中的 stagingUrl 指向暫存網域，並使用 --live 標記來針對訪客所看到的內容。

標籤：[Claude] Claude 執行 · [Claude checks] Claude 驗證並報告 · [Person] 由人員執行；Claude 可以追蹤，但從不聲稱。

兩條凌駕於其他規則之上的規則：

  • 發布是全域性的。 發布會將網站上所有待處理的內容（包括其他人未完成的編輯）全部送出。切勿發布到正式網域，除非人員已為該批次輸入了 publish 這個詞。一個「publish」僅涵蓋一個批次，絕不涵蓋下一個。
  • 先讀後寫。 稽核不會對 Webflow 進行任何寫入。

文件

在儲存庫的 docs/handoff/ 目錄中，並隨著工作進展保持更新：

檔案內容
AUDIT.md稽核報告：測量了哪些項目，附有數字和日期
STATUS.md追蹤器：每個請求，使用客戶自己的措辭，以及其狀態
DECISIONS.md每個決策、決策者、時間及其意義
ROLLBACK.md回滾點，以及所有自訂程式碼的逐字記錄
MANUAL-TODO.md僅能在 Designer 中由人員執行的步驟

1. 唯讀稽核

此步驟中不會對 Webflow 進行任何寫入。請依序執行：前兩項是最容易被跳過且無法事後補做的，因為它們描述的是在任何變更之前的網站狀態。

  • [Claude] 視覺基線，包含雜訊底層。 在每個關鍵頁面上以四種寬度執行 pnpm wf:baseline save --live，然後在未做任何變更的情況下立即執行 compare。兩個未經觸碰的執行之間的差異（影片影格、滑塊、懶加載圖片）即為雜訊底層；請為每個頁面記錄下來。將基線圖片保留在 git 之外（它們體積很大）：.webflow-build/ 因這個原因被忽略。
  • [Claude] 每個關鍵頁面的標題大綱（pnpm wf:outline --live）， 儲存在 AUDIT.md 中。
  • [Claude] 速度： pnpm wf:perf --live，行動裝置和桌面裝置，每個關鍵頁面（不僅是首頁）5 次執行的中位數及其範圍。
  • [Claude] 可及性： pnpm wf:a11y --live --all-widths。
  • [Claude] 連結與重新導向： pnpm wf:links --live --external；來自網站設定的重新導向清單（匯出為 CSV）；sitemap。針對 Search Console 報告為找不到的網址，執行 pnpm wf:redirects test --live --file <export>：哪些舊網址產生 404、形成循環、鏈條或導向首頁。
  • [Claude] 已發布的 HTML： pnpm wf:html --live（預設欄位名稱、用作按鈕的連結、未在樣式表中定義的類別）。
  • [Claude] SEO 與結構化資料： pnpm wf:seo --live --canonical：每個頁面的標題、描述、標準網址、Open Graph 圖片、索引狀態以及任何 JSON-LD（能否解析；CMS 欄位中的引號是否會破壞它）；以及全站範圍內的重複標題和描述、404 頁面、robots.txt。將標題大綱與 webflow-launch › headings.md 進行比對。
  • [Claude] 追蹤： pnpm wf:tracking --live：哪些標籤在哪裡載入、頁面瀏覽次數被重複計算、哪些在 Cookie 選擇之前以及拒絕之後執行、gclid 和 UTM 在重新導向中的傳遞。資料請求被封鎖，因此稽核不會向客戶的帳戶發送任何資料。
  • [Claude] 網域： pnpm wf:domain：憑證、網域續約日期、註冊商和 DNS 主機、http 和 www 重新導向。
  • [Claude] 庫存清單，透過連接器讀取：頁面和資料夾； CMS 集合及其欄位類型和項目計數；元件；字型及其載入方式； 每一段自訂程式碼（網站 head 和 footer、每個頁面的、每個 Embed） 以及每個第三方腳本，並說明其用途（wf:tracking 列出頁面載入的服務）；互動，以及哪些頁面依賴它們；表單及其提交目標。
  • [Claude] 報告 在 AUDIT.md 中：以簡短要點和數字呈現發現結果，每個都標記為測量所得或從程式碼讀取，並按其可能帶來的收益和可能破壞的風險排序。任何未經測量的聲明都應予以說明。閘門： 人員已收到報告。

2. 追蹤器，從第一天開始

  • [Claude] 根據簡報和客戶自己的檢查清單，使用其原文措辭撰寫 STATUS.md，每個請求一行：請求、狀態（未開始、進行中、在暫存環境、已上線、已放棄及原因）、批次、日期。在早期的網站上，請求因為追蹤器太晚建立且措辭與客戶清單不同而遺失。
  • [Person] 確認沒有遺漏任何項目。閘門。
  • [Claude] 之後的每個報告都更新追蹤器並提供計數：「14 項中 9 項已上線，2 項在暫存環境，3 項等待決策」。

3. 決策，一次一項

  • [Claude] 一次提出一項決策，每項都用平實的語言說明其意義：訪客會看到什麼變化、成本為何、可能出錯的地方，以及建議。
  • [Claude] 一旦做出決定，就記錄在 DECISIONS.md 中。
  • 只有新的面向客戶的內容（文案、圖片、更改過的版面）才需要提交客戶審批。底層技術（腳本如何載入、CSS 放在哪裡）由團隊決定。

4. 回滾點，在第一次寫入之前

  • [Claude] 為與當前線上內容相符的提交建立一個 git 標籤。
  • [Claude] ROLLBACK.md 逐字記錄所有自訂程式碼的當前狀態：網站 head 和 footer 程式碼、每個頁面的程式碼、每個 Embed。
  • [Person] 一個 Webflow 備份（網站設定 › 備份），以日期命名；並對儲存庫的預設分支設定分支保護。
  • [Claude checks] 撰寫回滾步驟，並確認每一步都可行：還原程式碼區塊、將載入器指回舊版本、還原備份。閘門： 由人員確認。

5. 一致性發布（當底層架構變更時）

將網站遷移到模板會改變其程式碼的交付方式。這個變更應先獨立發布，且訪客看不到任何變化。

  • [Claude] 按原樣移植現有行為。此步驟中不進行重寫或改進：這些將是後續的批次，每個都會被測量。
  • [Claude checks] 在四種寬度下檢查每個關鍵頁面的一致性：計算後的樣式和幾何形狀與基線進行比對（pnpm wf:baseline compare，差異必須在雜訊底層內）。
  • [Claude checks] 同時檢查載入時間的一致性（pnpm wf:film）：一個完全載入的頁面可能匹配，但第一秒的跳動可能不同。比較的是整個載入過程，而不僅僅是最終狀態。
  • 然後按照下面的批次步驟進行，如同任何其他批次。

6. 批次，風險最低的先做

對工作進行排序，以便最安全、確定性最高的收益優先進行，並且每個批次都可以獨立評估。一個批次 = 一個人員可以用一句話描述的變更。對於每個批次：

  1. 準備 在儲存庫中（pnpm check && pnpm build && pnpm test）；說明 Webflow 中將更改什麼以及訪客會注意到什麼。
  2. 應用 在獲得批准後於 Webflow 中進行。然後說：「重新載入 Designer」，並說明什麼尚未發布。
  3. 僅發布到暫存環境。
  4. 在暫存環境驗證： 該批次自身的檢查，加上 baseline compare、html 以及在其所觸及頁面上的主控台檢查，並在四種寬度下進行。
  5. 詢問還有哪些內容會一起上線。 [Person] 檢查網站是否有其他待處理的變更（他們自己的或同事的）。Claude 無法看到誰更改了什麼；說明情況並等待。
  6. 人員輸入「publish」。 然後發布到正式網域。
  7. 驗證正式環境 使用 --live：相同的檢查，並重新測量該批次的指標（速度、錯誤、連結）。
  8. 更新追蹤器 和客戶的檢查清單；將結果記錄在 AUDIT.md 中發現結果的旁邊。
  • CMS 項目編輯（錯字、新項目）可以直接上線：發布一個項目不會發布整個網站。頁面和網站變更始終需要遵循這八個步驟。
  • Webflow 限制了網站發佈的頻率：請將檢查分組，以便一個批次只需要一次暫存發布和一次正式發布。

7. 只保留經過測量的成果

  • [Claude checks] 前後數據都應是相同執行次數的中位數。在範圍內的差異屬於雜訊。
  • [Claude] 一個沒有改善其指標，或使其他指標惡化的變更，應被還原，並且追蹤器中會記錄此情況。不應因為某個變更「理論上應該」有用而將其保留。

8. 結案

  • [Claude] 前/後報告：追蹤器中的每個請求及其數字結果；什麼被放棄了以及原因；還剩下什麼。
  • [Claude] 更新 ROLLBACK.md 以反映新狀態；保留舊的標籤。
  • [Claude] 將經驗教訓提供給模板（webflow-build › rules.md › Contributing）。

小型任務（對已上線網站進行單一修復）

一個壞掉的連結、一個停止運轉的輪播、一個無法發送的表單。採用相同的謹慎態度，分五個步驟：

  1. 重現 問題，在正式網站上，並確切說明其發生時機（頁面、寬度、瀏覽器、步驟）。
  2. 修復 在可能的最小範圍內進行修復。先閱讀 GOTCHAS.md 和經驗教訓：這個問題通常以前發生過。
  3. 執行回歸測試，如果儲存庫中有該區域的測試，以確保問題不會再次悄無聲息地出現。
  4. 暫存環境測試，在桌面和手機寬度下進行；對頁面執行 pnpm wf:html 和主控台檢查。
  5. 停止。 報告問題、變更內容以及如何驗證，並等待批准後再進行任何推送、標籤或發布。保留先前的發布標籤，以便可以將載入器指回它。正式發布仍然需要輸入「publish」這個詞，且必須在人員檢查過其他待處理項目之後。

Individual skills in this repo

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

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-launch

Take a finished Webflow build live and through its first month: the SEO plan and schema, pre-launch QA (content, function, devices, accessibility, speed, SEO and tracking), launch day (publish, release, redirects, noindex off), handoff to the client and the 30-day follow-up. Use when a Webflow site built with wf-template is signed off and heading for launch, on launch day, when handing the site to the client, or for after-launch checks.

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