Demo 網站
一次執行就能讓潛在客戶從「是的，我想看看」到一個即時的重新設計，並在草稿中準備好回覆。使用者貼上一個 URL 或名稱；剩下的全部自動找到，無需提問。創意方向在整個執行過程中都被授權：不要為了收集面試答案或批准而中斷。
參考建置： 當你完成一個滿意的展示後，請將其保留作為參考。讀取它的 BRIEF.md 並複製其結構（site.css、site.js、pages.css、home.css、home.js、lab/）作為起始骨架。切勿複製其設計：指紋閘門（fingerprint gate）禁止這麼做。
每個展示的固定規則
- 保留： 標誌、每張照片、每個文字、每個頁面以及頁面內的區塊順序。錯字也保留。導覽標籤保留。CTA 標籤保留。
- 更改： 所有視覺元素。版面、字體、色彩運用、動畫、互動。
- 每個頁面都要重新設計，不只是首頁。每個原始頁面對應一個 HTML 檔案，使用相同的 slug（
cleanUrls保持/services可用）。 - 允許新增： 僅限最小的 UI 微文案（表單狀態行、輸入框佔位符、
aria標籤）。不得增加新行銷文字或虛構數字。 - 內部規則優先於任何參考（請根據自身喜好編輯此列表）：淺色調色板搭配客戶自己的強調色，品牌 + 老闆照片 + 所有服務在英雄區塊可見，固定標題欄始終可見，按標誌返回頂端（首頁使用平滑滾動），無側欄，任何地方不顯示 em 破折號，僅使用客戶自己的照片（除非使用者要求，否則不生成）。
- 部署至 Vercel 正式環境並提交，無須詢問。電子郵件僅為草稿。
步驟 0 · 識別潛在客戶
- 如果使用者提供了名稱而非 URL，且你有 CRM：請在 CRM 中查詢潛在客戶，以獲取網站、城市、語言、外寄郵件的信箱以及回覆狀態。如果潛在客戶不在 CRM 中，則根據 URL 進行操作且不要提問；草稿步驟會指明需要使用哪個信箱。
- Slug：使用域名主幹，例如
acmecoaching。建置資料夾：demos/<slug>-scrollcraft/。Vercel 專案：<slug>-redesign。Demo URL：https://<slug>-redesign.vercel.app（使用連字號，絕不使用點號：帶點的子域名不存在，而無效連結是此管線中最昂貴的錯誤）。 - 信件中的名字：來自潛在客戶的電子郵件簽名、網站的關於/聯絡頁面，或域名（「janecoaching」→ Jane）。如果完全未知，則省略（「Bonjour,」/「Hi,」）。
步驟 1 · 擷取整個現有網站
所有內容都放入 <build>/_src/（原始素材）和 <build>/lab/（筆記、截圖）。
- 擷取首頁並讀取導覽列和頁尾連結以列出所有頁面。擷取每個頁面。
- 依序提取每個頁面：區塊、標題、段落（含粗體/斜體範圍）、列表、按鈕及其目標、圖片（全解析度 URL；對於 Squarespace 請附加
?format=2500w，對於 Wix 請移除/v1/fill/...變換）、表單（欄位標籤、必填標記、提交標籤、成功訊息）、嵌入影片。Squarespace 將表單定義保留在data-block-json/formFields中。 - 下載標誌（所有變體：深色、淺色、favicon）、每張照片、每個紋理。將簡單的幾何標誌向量化為 SVG，使用
cv2.findContours+approxPolyDP在其 Alpha 通道上處理；對於複雜標記則保留 PNG。 - 品牌標記：從網站 CSS 變量中取得強調色/墨色/背景色，以及標題和正文字體。如果字體是 Typekit 或自訂字體，請選擇最接近的 Google Font。
- 對每個線上頁面進行全頁截圖（
scripts/full.mjs <live-url> 1440 900 lab/live <pages>）並讀取：這就是你必須保留的結構。
步驟 2 · 使用 scroll-craft 設計
如果你有設計研究技能，請先載入它，然後載入 scroll-craft（https://github.com/nateherkai/scroll-craft），並按照 scroll-craft 從頭到尾執行，並套用以下覆寫：
- 簡報為在明確的創意授權下自行撰寫（使用者的長期指令即為此技能）。撰寫
BRIEF.md，內容包含：上述固定規則、步驟 1 的證據、八個主題、具有真實限制的命名文法、情感曲線、一個高峰、一句可轉述的話、標誌性動作、評分表，以及每個內部頁面的簡短計劃。 - 對你的 scroll-craft 工作區
FINGERPRINTS.md執行指紋閘門檢查（每列至少 4/6）。閱讀每個近期列的「下一個建置應避免的內容」行。標誌性動作必須來自此品牌（其標誌幾何、其標語、其自身的照片），而非來自上一個建置。 - 結構由客戶固定，因此文法和裝置改變的是相同區塊的行為，而非哪些區塊存在。
- 使用 Vanilla 引擎（
scrollcraft.js/.css保持不變複製）、純多頁 HTML、為特定場景使用頁面本機 JS。
步驟 3 · 建置
- 共用：
site.css（標記、標題、選單、頁尾、按鈕、框架、進入動畫）、site.js（掛載引擎、標題狀態、選單、標誌返回頂端、進入動畫、表單）、pages.css用於內部頁面，home.css/home.js用於首頁的特定場景。 - 從一次性腳本建立內部頁面的骨架是可以的；之後 HTML 檔案即為原始來源。請在
BRIEF.md中說明。 - 聯絡表單：使用
mailto:轉交至客戶的地址，搭配method="post"、驗證，以及一個狀態行，明確說明郵件應用程式將開啟，且在使用者按下發送前不會發送任何內容。切勿偽造成功訊息。 - 商店與預約工具：連結至客戶現有的產品/預約頁面。
已經導致過一輪成本的陷阱
- 切勿在
[data-sc-stage]元素上設定position。 引擎會使其變成sticky；你在 CSS 中設定的position: relative會默默地殺死所有釘選。 - 高峰必須保留頁面上最大的
data-sc-span。如果英雄區塊增大，請隨之增大高峰。 - 從一張照片製作的分層英雄區塊：使用 DP 邊緣路徑追蹤每個剪影（先粗略漸層，然後在精細邊緣上細化），根據下一個剪影重建每個圖層（天空：擬合垂直漸層；遠方薄霧：每個欄位平坦顏色；紋理斜坡：鏡像拼貼約 110px），清除追蹤線上方殘留的暗色雜點，然後查看最終滾動位置：接縫僅在行程結束時顯現。
- 人物去背：使用 rembg
u2net_human_seg，將遮罩侵蝕約 2px 並淨化邊緣顏色，否則原始牆壁會顯示為光暈。在前景平面或基礎帶隱藏裁切處進行裁切。 - 在網格內使用
white-space: nowrap會破壞手機版面；讓按鈕在 520px 以下可以換行，並使用minmax(0, 1fr)。 - 傾斜的裝飾區塊在手機上會溢出視口：在其區塊上設定
overflow-x: clip。 - 替換的圖片在手機上會保留舊位元組一週（
/assets快取標頭）：新的美術圖應使用新檔案名稱（-v2）。 .prose p { margin: 0 }優於.prose > * + *；請將間距規則寫成.prose > * { margin: 0 } .prose > * + * { margin-top }。
步驟 4 · 驗證
在本地提供服務（node <scroll-craft>/scripts/serve.mjs --root . --port 4610）並使用此技能中的 scripts/snap.mjs / scripts/full.mjs。兩者都會從你執行它們的資料夾或其任一父資料夾解析 playwright-core，因此在專案根目錄執行一次 npm i playwright-core 即可涵蓋其下的所有建置。
- 在每個固定動作的多個位置以桌面 1440x900、手機 390x844 和 360x640 進行測試，並測試減少動畫模式。讀取每個表單；修正並重新截圖。
- 每個內部頁面的全頁截圖（1440 和 390）：無溢出、無裁切文字、無空白網格單元格。
- scroll-craft 測試工具：無死滾動、無控制台錯誤、無失敗請求。
- 文字在圖片上的對比度需在合成像素上測量（隱藏文字，讀取其下方的像素）；正文 4.5:1，大字體 3:1。
- 功能測試：標誌性互動從頭到尾、表單驗證訊息、選單開啟/Escape/焦點、標誌返回頂端、英雄區塊服務中的錨點。
- 在建置中搜尋 em 和 en 破折號（U+2014、U+2013）：數量為零。
步驟 5 · 發佈
vercel.json：包含cleanUrls、buildCommand: null、outputDirectory: "."，並對/assets設定 7 天快取。.vercelignore：包含lab/ _src/ node_modules/ BRIEF.md。- 執行
vercel link --yes --project <slug>-redesign，然後執行vercel deploy --prod --yes。 - 對你將要發送的確切 URL 進行煙霧測試：每個頁面回傳 200、關鍵素材回傳 200、
lab/和BRIEF.md回傳 404，一次真實瀏覽器載入且無控制台錯誤。 - 在建置中建立 Git 儲存庫（
git init -b main），使用-F <file>提交（絕不使用 PowerShell here-string），執行gh repo create <github-user>/<slug>-redesign --private --source . --push，然後執行vercel git connect --yes。後續編輯：提交並推送到main，這會觸發重新部署。將展示儲存庫保持為私人：其中包含潛在客戶的標誌、照片和文字。 - 將指紋列附加到你的工作區
FINGERPRINTS.md（所有六個維度：世界、埠、調色板、類型、與其他建置共享的內容、下一個建置應避免的內容）。
步驟 6 · 草擬回覆
python scripts/draft_demo_reply.py <prospect-email> --mailbox <alias> --url https://<slug>-redesign.vercel.app --first-name <FirstName>
它會檢查 URL 是否可回應，在外寄郵件信箱中找到潛在客戶的最新電子郵件，以聯絡人的語言（--lang fr|en）渲染「這是展示」範本（使用該信箱的簽名），在該信箱的「草稿」資料夾中儲存一個包含回覆緒的草稿，並讀取它。它絕不會發送。 如果緒看起來有任何異常，請先使用 --dry-run 執行。信箱在 .env 中配置（請參閱 .env.example）。
當潛在客戶從你寫信以外的地址回覆時（例如個人信箱而非 info@），請使用 --to <their-address> 傳遞：回覆是從該寄件者查詢，草稿也會寄往該地址。某些 IMAP 伺服器僅在完整地址上比對 FROM 搜尋；域名片段不會回傳結果。
如果連線了 CRM（DEMO_CRM_DIR，請參閱 README），則 <prospect-email> 可以是 CRM 能解析的任何內容，信箱和語言來自聯絡人，且腳本會記錄潛在客戶的回覆和展示 URL。
在最終訊息中顯示草稿文字。告訴使用者何時發送，以便標記展示為已發送。
最終報告（簡短）
線上 URL（確切的那個） · 已重建的頁面 · 兩行描述設計理念 · 一行描述標誌性動作 · 少數微文案新增 · 已驗證與未驗證的項目（真實手機、Safari） · 草稿（信箱、緒、完整文字） · 建置資料夾的本機路徑。