網站升級 是做什麼的？
這是一套將看起來像拼湊而成的網站，轉變為其擁有者樂於展示的優質網站的方法。它源自真實的升級案例，這些案例已成功交付並獲得業主及其團隊的高度評價：一個行動應用程式的行銷網站、一個 B2B 雲端公司網站（經歷了兩種完整方向），以及一個從零建立的幫助中心。請重複使用其方法、配方和陷阱。切勿重複使用其外觀：每個網站都應從其自身的品牌、產品和受眾出發，決定其設計方向。
「完成」的定義
當所有以下條件都滿足時，升級才算完成，在此之前都不算：
- 網站上的每一項聲明都能追溯到一個你所能指出的來源：產品程式碼、法律文本、計費系統或業主的書面答覆。
- 設計來自品牌自身的素材，且其核心理念能通過競爭對手測試（請參閱 direction.md）。
- 訪客會看到或體驗到一兩個標誌性時刻；除此之外的所有部分都保持嚴謹與節制。
- 無需依賴動畫即可看見所有內容。在啟用減少動畫的設定下，應顯示最終狀態。
- 已在真實瀏覽器中以 1440、1920×710、390 和 320 px 的寬度、每個佈景主題、啟用減少動畫的設定下，針對生產環境建置進行檢查。
- 您的書面批判評分達到 9/10 或更高，或者您的報告清楚說明不足之處（請參閱 critique.md）。
- 它以團隊可審查的 PR 形式交付，並附上一份可供團隊直接貼上的簡短更新。
基本規則
- 真相優先於設計。 每一項功能、數字、價格、上市日期和任何形式的社交證明都必須有來源。產品的入門引導和付費牆文案常常過度承諾：請在程式碼中驗證。「未知」是有效答案：將該欄位設為可選並提問，切勿填入一個看似合理的數字。移除虛構的證明。
- 品牌決定外觀。 從品牌自身的素材（標誌、名稱、產品 UI、影片、地理位置）推導出調色板、字型和標誌性裝置。一個被認為是生成式 AI 產物的裝置（請參閱 tells.md），只有在品牌素材或業主將其置入，且方向合約明確命名時，才允許使用。
- 產品是主角。 真實的 UI 和真實的成品勝過圖示、庫存 3D 和抽象概念。示範應看起來像真實的東西：一張真實的 A4 發票、一個真實的渲染模板、一份真實的商品目錄。
- 一個網站，而非投影片。 避免堆疊一排排置中並帶有淡入動畫的標題加圖片區塊。應運用構圖、固定滾動敘事、分層深度、互動式示範和狀態驅動的動畫。
- 絕不將內容隱藏在動畫之後。 一個從未觸發的顯現效果會留下空白頁面。請尊重
prefers-reduced-motion設定，顯示最終狀態。 - 業主在流程中，而非障礙。 在全面建置之前，先展示設計方向。先完成首頁，待批准後再擴展到其他頁面。每個未決問題只問一次，並提供選項，同時持續圍繞它進行建置。
- 設定值由配置持有。 環境變數應承載 URL、ID 或令牌，而不是開關或硬編碼的常數。從環境變數推導出依賴值。僅提交
.env.example。 - 遵循目標儲存庫的規範。 閱讀其 README、CONTRIBUTING、AGENTS.md 和 commitlint 配置。使用其套件管理器。匹配其框架版本（Next 14 還是 16、Tailwind 3 還是 4、React 18 還是 19）。
- 避免洩漏機密和內部資訊。 絕不列印、提交或回顯業主貼上的令牌。公開的提交和 PR 不得包含客戶名稱、私人價格或未修補的安全漏洞。
- 評分低於 9/10 時，絕不宣告完成。 在報告之前，先根據螢幕截圖為自己的工作評分。在聲稱「完成」之後，若自我評分為 6 或 7 分，即是工作未完成的跡象。
首先，選擇模式
訪客來訪的目的決定了設計可以走多遠。一個專案可以包含不同模式的多個頁面；請為每個頁面指定其模式。
| 模式 | 適用頁面 | 訪客行為 | 主導設計 | 參考資料 |
|---|---|---|---|---|
| 說服 (Persuade) | 產品、行銷、公司、活動、價目 | 決定並採取行動 | 產品自我證明；首屏即呈現真實操作 | building-blocks.md |
| 閱讀 (Read) | 幫助中心、文件、更新日誌、部落格 | 理解某件事 | 讀者的問題；品牌擁有框架，但絕不佔據閱讀欄位 | read-mode.md |
| 體驗 (Experience) | 作品集、展示、畫廊 | 探索作品 | 作品本身，從第一個視口開始 | building-blocks.md § 體驗 |
即使產品行銷網站展示了應用程式，它仍然是「說服」模式。即使幫助中心設計精美，它仍然是「閱讀」模式。
工作流程
請按順序完成各個階段。僅在到達該階段時才閱讀對應的參考資料。
| 階段 | 執行事項 | 參考資料 |
|---|---|---|
| 0. 啟動 (Kickoff) | 從預設分支建立新分支，啟動開發伺服器（記下實際埠號），為報告擷取「改版前」的畫面 | verification.md § 1 |
| 1. 探索 (Discovery) | 審核網站，尋找真相來源，建立聲明日誌和主題清單，收集品牌素材，報告發現 | discovery.md |
| 2. 方向 (Direction) | 找出核心理念並通過競爭對手測試，設定調色板和字型，選擇標誌性時刻，撰寫方向合約，展示給業主 | direction.md, tells.md |
| 3. 靜態建構 (Build it still) | 設計令牌、英雄區、每個幕（使用真實內容）、內頁。在腦中關閉動畫 | building-blocks.md, media.md, read-mode.md |
| 4. 動態與標誌性時刻 (Motion and signature) | 一個編排過的入場動畫、狀態驅動的時刻、標誌性設計。僅在真正需要時才使用 3D | motion.md, three-d.md |
| 5. 聯絡與轉換 (Contact and conversion) | 共享驗證、表單、邊緣路由、設計過的通知郵件、預約或潛在客戶預填 | contact-email.md |
| 6. SEO 與標準 (SEO and standards) | 伺服器端渲染、後設資料、社交卡片、結構化資料、爬蟲檔案、HTTP 標頭。作為一個獨立的 PR 提交 | seo-standards.md |
| 7. 驗證與批判 (Verify and critique) | 在每個寬度和佈景主題下進行瀏覽器測試、執行腳本檢查、進行生產環境建置，然後進行評分批判，最多三輪 | verification.md, critique.md |
| 8. 交付 (Ship) | 提交、PR、團隊更新、改版前/後報告、DESIGN.md、記憶筆記 | delivery.md |
當遇到奇怪的行為時，請查閱 gotchas.md。每當業主提出反饋時，請閱讀 feedback.md：它能將業主說的話（「不夠刺激」、「顏色失衡」、「像廉價複製品」）轉化為需要修改的具體項目。
如果安裝了設計方向相關的技能（如 frontend-design、impeccable、taste-skill），請在第 2 階段載入它們以獲取額外的設計靈感。此技能在沒有它們的情況下也能獨立運作。
技術棧。 這些配方曾在 Next.js、React、Tailwind 和 GSAP 上交付，並託管於 Cloudflare Pages，而程式碼片段也展示了此技術棧。然而，其方法論、檢查項目和大多數腳本並不依賴於此：在 Astro、SvelteKit、Nuxt 或純 HTML 上工作時，請保留規則，並將配方轉換為目標專案自身的框架和版本。
腳本
從目標儲存庫的根目錄執行。<skill> 代表此技能所在的資料夾。
node <skill>/scripts/slop-scan.mjs [dir] [--json] [--strict] [--allow <rules>] [--list-rules]：掃描原始碼以查找生成式網站的痕跡、虛構的證明、通用文案、失效連結、機密和已知陷阱。在出現錯誤時（或使用--strict時出現警告）退出並返回代碼 1。可以透過site-upgrade-allow: <rule> <reason>註解（涵蓋其下方直到第一個空行的所有行）或在儲存庫根目錄的.site-upgrade-allow檔案中命名一個合理的例外。需要 Node 18+，無其他依賴。<skill>/scripts/ssr-audit.sh <base-url> [path]...：針對每個頁面（當未指定路徑時，為網站地圖中的每個頁面）檢查：狀態碼、<h1>數量、JSON-LD 區塊、標準連結、社交圖片、客戶端渲染的退出點以及標題；然後檢查安全標頭和爬蟲檔案。當任何頁面失敗時退出並返回代碼 1。請針對生產環境伺服器執行。<skill>/scripts/video-prep.sh <source> <out-dir> [name] [poster-second]：將場景切換點列印為章節候選，並在每個剪輯點寫入帶有關鍵影格的無聲網路編碼、一張海報圖片和一個方形預覽剪輯。若無imageio_ffmpeg二進位檔，則會降級使用。<skill>/scripts/playwright/*.js：用於 Playwright MCP 的browser_run_code_unsafe工具。MCP 只能讀取工作區內的檔案，因此請先複製它們（mkdir -p .playwright-mcp && cp <skill>/scripts/playwright/*.js .playwright-mcp/），然後傳遞filename: ".playwright-mcp/<name>.js"。請確保.playwright-mcp/不包含在 Git 追蹤中。reveal-scroll.js會進行滾動，以便在截圖前觸發所有顯現效果，並列出之後仍隱藏的文字。page-audit.js測量框架：一個<h1>、超過兩行的標題、小字型、小的點擊目標、未命名的控制項、缺少alt屬性的圖片、未命名的區段以及未設定主題的瀏覽器表面。overflow.js找出在 320 到 1440 px 寬度之間導致水平滾動的原因，並指出最外層的問題元素。console-scan.js訪問網站地圖中的每個 URL，並報告控制台錯誤、頁面錯誤、失敗的請求、4xx/5xx 狀態碼以及 CSP 違規。
資產與模板
複製到目標儲存庫或暫存區，並根據需要進行調整：
assets/render-email.ts：在不使用react-dom/server的情況下，將 React Email 模板渲染為 HTML，適用於邊緣路由。assets/JsonLd.tsx：一個安全嵌入的 JSON-LD 腳本標籤。assets/ScrollTriggerRefresh.tsx：每當頁面高度改變時，重新測量 GSAP 的滾動觸發器。assets/templates/claims-ledger.md：已交付、未交付、未知以及數字，每個都附有來源（第 1 階段）。assets/templates/direction-contract.md：論點、核心理念、獨特世界、首個視口、標誌性設計和品牌例外（第 2 階段）。assets/templates/critique-round.md：評分批判，每輪一個區塊（第 7 階段）。assets/templates/DESIGN.md：最終確立的設計系統，在最後撰寫，以便後續的代理程式能維持品牌一致性（第 8 階段）。assets/templates/team-update.md：供團隊聊天室直接貼上的更新內容（第 8 階段）。
業主確認點
在發布任何依賴於以下事項的內容之前，請先取得業主確認。每個問題只問一次並提供選項；切勿因此延誤建置進度：
- 上線狀態和商店可用性，需來自即時商店列表而非環境標誌
- 價格和方案，以及它們的來源
- 尚無人能提供來源的數據（如正常運行時間、資料中心、客戶數量）：在獲得正式批准前，請將其移除
- 聯絡收件匣，以及一個業主可用於測試的收件匣
- 任何清單、目錄或輪播中尚未發布的項目
- 法律實體名稱、地址和電話，需在出現的所有地方保持一致
- 任何會接收訪客資料的第三方（如分析工具、嵌入內容、字型、電子郵件服務），以及其所需的隱私權政策條款
- 任何吉祥物、3D 模型或影片的原始檔，在你重新建置之前
- 每個上線步驟：網域、DNS、部署設定、資料庫遷移。業主負責執行或批准這些步驟