/website-build – 正確建置網站
濃縮自為一家行動應用程式公司建置、翻譯成五種語言、啟動並強化一個真實行銷網站的經驗。參考文件中的每一條規則都來自實際出錯或耗費時間的案例。此文件為路徑；參考文件則包含詳細內容。
| 開啟此檔案 | 當您準備要……時 |
|---|---|
references/01-architecture-pipeline-deploy.md | 設定資料夾與建置鏈、選擇函式庫、新增建置步驟、部署、設定代管/CSP/重新導向、設定備份 |
references/02-design-typography-mockups.md | 定義 Token 與字型、處理字體與換行、製作手機模擬圖、放置圖示/標誌、建置元件與動態效果 |
references/03-i18n-seo-geo.md | 翻譯、新增市場、撰寫 meta/JSON-LD、Sitemap/robots/llms.txt、執行 GEO、最佳化效能、設定分析 |
references/04-qa-devices-modes.md | 測試任何項目；測試框架、裝置/寬度/模式矩陣、應用程式內瀏覽器、無障礙、同意流程、對抗性與即時 QA |
references/05-process-content-legal-launch.md | 執行專案：角色、核准、回饋循環、資訊架構、事實、法律頁面、同意、正式上線 |
scripts/qa/ | 執行 QA 框架（原生 CDP，無需安裝）以及 WebKit/應用程式內瀏覽器矩陣（Playwright） |
scripts/backup/snapshot.py | 在編輯前對檔案進行版本控制、列出版本、還原；或將其安裝為 PreToolUse 鉤子 |
1. 階段（依序）
- 簡報（
05）：目標與行動呼籲、市場/語言、頁面清單、附有來源的事實表、品牌資產、每個市場的法律實體、追蹤與同意、代管以及誰負責合併生產版本。 - 骨架（
01）：一個來源資料夾、主語言手動編輯、透過冪等標記區塊注入的共用殼層、用於其他所有項目的建置程式、_dist（最佳化）和_deploy（代管）作為單向產生的副本、建置鎖定、從第一個檔案開始的 git。 - 設計系統（
02）：每個基礎的 Token、使用clamp()搭配 rem 加上小幅 vw 斜率、圖片上的真實width/height、絕對路徑的srcset、自我託管的子集字型（涵蓋所有變音符號）、每個元素一個動態系統、支援減少動畫與無 JS 模式。 - 圖像（
02）：從設計工具匯出每個市場的真實產品螢幕擷取畫面（3x PNG -> WebP）。絕不將文字貼到點陣圖上。在檔案中修復標誌，而不是使用混合模式。 - 文案與事實（
05）：一個事實清單、每個概念一個詞彙、每個市場的法律實體、每個受眾的正式/非正式稱呼。 - i18n（
03）：字典加上精確文字比對的建置程式、執行階段的排版、hreflang（加上 x-default）、每個市場的資料表、語言 QA。 - SEO（
03）：標記之間的冪等後處理器、每頁一個 JSON-LD@graph、含有真實 lastmod 的 Sitemap、robots（允許 AI 爬蟲存取）、真實的 404 頁面。 - GEO（
03）：llms.txt（+完整版）、facts.json、站內外一致的實體資料、在無 JS 擷取下仍能存在的文字，然後執行 GEO 測試協議，包括詢問真實的 AI 引擎。 - 效能（
03）：內嵌資源 -> 雜湊檔案、WebP、折疊下方內容延遲載入、自我託管的函式庫、延遲的標籤管理工具、在行動與桌面端執行 Lighthouse。 - 同意、分析、法律（
03、05）：同意橫幅、Consent Mode v2（審慎決定採用基本或進階模式）、僅在同意後才嵌入標籤、隱私權政策中列出所有追蹤器、必要的法律頁面、先以 Report-Only 模式設定 CSP。 - QA（
04）：完整的頁面 x 寬度矩陣、模式、WebKit 與社交應用程式內瀏覽器、鍵盤/焦點、同意情境、連結/錨點/語言切換、對抗性審查，然後是真實手機測試。 - 上線（
05、01）：備份舊網站與 DNS、重新導向每個舊 URL（保留商店清單中的精確路徑）、對照基準測試預覽、切換、執行上線檢查清單。
2. 硬性規則
- 絕不手動編輯產生的檔案（語言版本、
_dist、_deploy）。編輯來源或建置程式，然後重新建置。 - 絕不手動將
/<br>插入翻譯建置程式透過精確文字比對的文案中。換行應在執行階段處理。 - 一次工作階段建置並發佈。建置鎖定會檢查其擁有者；如果鎖定被持有，請等待，絕不刪除它。在完整建置前檢查可用記憶體。
- 頁面能渲染不代表任何事：對每個內嵌腳本進行語法檢查、掃描控制字元、執行完整的矩陣測試。
- 每一輪反饋都會成為建置中的一個冪等檢查，如果目標文字消失則會失敗。
- 生產版本由擁有者合併。代管、CSP、同意、追蹤和法律相關的變更應先提交到技術審查者的側分支。
- 事實存在於單一清單中。兩個頁面上不同的數字是信任錯誤，也是 GEO 錯誤。
- 備份： 每個站點使用 git，並在每個階段進行提交；使用
scripts/backup/snapshot.py（或它的鉤子）處理提交之間的所有內容；在上線前備份舊站點和 DNS。 - 在已建置、已壓縮的輸出上重新測試浮動層、固定列和選單。壓縮工具可能會降低選擇器的特異性。
- 在您的廣告投放的應用程式內瀏覽器中測試 CSP 和同意，並在包含狀態（URL 中的 token）的頁面上進行測試。
3. 一口氣說完 QA
路徑相對於此技能資料夾。先執行 node scripts/qa/jscheck.mjs site/_dist，然後執行
node scripts/qa/audit.mjs <資料夾或網址>，並設定 QA_WIDTHS=1440x900,1280x800,1024x768,768x1024,430x932,390x844,360x780,320x700，
接著執行 anchors.mjs、modes.mjs、console-sweep.mjs、shots.mjs（請自行查看螢幕截圖），
以及用於 WebKit 和 Instagram/Facebook/TikTok 應用程式內瀏覽器的 inapp.mjs。每個腳本遵循相同的
退出碼約定：0 為乾淨，1 為發現問題（包括無法載入的頁面），2 為錯誤用法，3 為無法執行
（缺少 Chrome、axe-core 或 Playwright）。檢查清單：04，章節「發佈前」和「部署後」。