風格展示建構器
將任何產品轉化為精美的展示登陸頁面，借用參考網站的視覺風格——包括其色板、排版、版面模式與動態——同時呈現使用者自己的產品故事。
黃金規則：複製 風格，絕不複製 內容。 參考網站提供外觀；使用者的網站/產品提供文字。產出不得複製參考網站的文案，也不應只是重新換膚使用者現有的版面——它應該是以借用風格打造的全新頁面。
這是第一大錯誤。 只複製參考網站的色板，卻保留使用者自己網站的區塊骨架（編號的功能區塊、卡片元素、順序），產生的頁面看起來仍像是用新顏色重新塗裝的原始網站。重新配色不等於重新設計風格。你必須借用參考網站的版面骨架與標誌性元件，而不僅僅是它的十六進位色值。一定要同時研究使用者自己網站的結構（步驟 2），這樣你才知道該從哪些地方偏離。
支援的版面模式（依需求選用）：
- 單一借用風格 — 整個頁面使用一個參考網站的風格。
- 逐區風格導覽 — 每個區塊借用不同網站的風格（例如 Hero → ProjectDiscovery，Pricing → Linear，CTA → Superhuman）。每個
<section>有自己獨立的主題區塊：背景、強調色、字體、圓角半徑，以及一個標誌性元件。適合使用者說「每個區塊要有自己的主題」。除非使用者想要對比效果，否則應保持整體協調（例如全部暗色系）。
工具包（隨此技能提供——請優先使用，不要自行推導）
路徑相對於此技能目錄。請優先使用這些工具而非手刻，因為它們已內建了常見陷阱的處理方式，讓你避免重蹈覆轍。
template/— 一個可建置的 Next 14 + GSAP + Lenis 框架，動態層已預先串接（SmoothScroll、ScrollProgress、Reveal、已代幣化的globals.css、一個起始的page.tsx）。每次建置都從這個模板開始。template-html/index.html— 相同的代幣 + 動態層，打包成一個自包含的檔案（GSAP/Lenis 透過 CDN 載入）。當使用者選擇單一 HTML 檔案輸出時使用；無需框架或安裝。scripts/new-demo.sh <dest>— 將模板複製到<dest>並執行npm install。scripts/verify.sh <dir>— 步驟 5 的腳本化版本：在next dev執行時拒絕建置、執行型別檢查、建置靜態匯出、檢查out/index.html。scripts/extract-style.js— 在開啟的參考頁面中，透過 Chrome 開發者工具的javascript_tool執行，以擷取真實的字體、顏色、圓角半徑與比例尺，輸出為規格草稿（步驟 2）。scripts/shoot.mjs <url>— 使用無頭 Playwright 進行螢幕截圖，僅適用於無顯示器的沙箱或 CI 環境。在本機上，請改用 Chrome 開發者工具截圖。scripts/deploy.sh [dir] [--prod]— 將建置完成的靜態目錄（out/或單一 HTML 檔案的資料夾）部署至公開網址。預設使用 Vercel；因為僅是靜態檔案，任何主機服務都適用。對外公開——請先建置並與使用者確認後，再使用--prod。scripts/audit.sh <url>— 針對開發伺服器或部署版本執行 Lighthouse 評分（效能/無障礙/最佳實踐/SEO）。references/patterns.md— 動畫配方與標誌性元件藍圖，根據參考網站的能量特質選用。
步驟 1 — 訪談使用者（請先執行此步驟）
使用 AskUserQuestion 工具。一次詢問這些問題。前兩個為自由文字（請使用者透過「其他」欄位或在對話中輸入）；其餘為單選題，附有合理選項。務必包含「自行輸入」的選項。
- 你的網站 / 產品 —— 一個網址（例如
www.acme.com）或簡短描述。這是 內容 的來源。 - 參考網站 —— 一個或多個要借用其 風格 的網址（例如
granola.ai、linear.app、stripe.com）。這是 外觀 的來源。 - 字體風格 （可複選） —— 例如：編輯襯線體 · 乾淨無襯線體 · 等寬/技術感 · 圓潤/友善 · 與參考網站一致。
- 主題 （可選，可複選） —— 例如：淺色/紙質 · 深色/電影感 · 大膽色塊 · 極簡/大量留白 · 與參考網站一致。
加入這些額外問題（它們會明顯改變結果）：
- 氛圍 / 調性 —— 冷靜 & 編輯感 · 電影感 & 戲劇化 · 活潑 & 樂觀 · 企業感 & 可信賴。
- 動態程度 —— 細微（柔和揭露） · 豐富的滾動動畫（視差、與滾動連動的章節） · 互動式（訪客可操作的點擊展示）。預設：豐富的滾動動畫。
- 強調色 —— 與參考網站一致 · 指定顏色 · 讓我選擇。
- 深度 —— 僅 Hero + 幾個區塊 · 完整故事（說明一切：運作方式、功能、證明、CTA）。預設：完整故事。
- 輸出格式 —— 可執行的 Next.js 專案（建議） · 單一自包含的 HTML 檔案。
如果使用者已在訊息中提供部分答案，請勿重複詢問。
步驟 2 — 研究參考網站
你必須實際查看參考網站，而非猜測。
- 先嘗試
mcp__workspace__web_fetch。行銷網站通常是客戶端渲染，因此常會回傳空白——這是預期情況。 - 切換到 Chrome 瀏覽器工具（如果為延遲載入，請透過 ToolSearch 載入）：使用
navigate→get_page_text取得文案與結構，然後使用computer螢幕截圖（向下捲動並擷取 3–5 個畫面）來讀取實際的視覺語言。以最保護隱私的方式關閉 Cookie 橫幅。 - 快速取得證據草稿：將
scripts/extract-style.js貼入 Chrome 開發者工具的javascript_tool，在開啟的參考頁面上執行——它會回傳真實的字體、顏色頻率、字體比例尺與圓角半徑。然後撰寫簡短的風格規格（填入references/style-extraction.md中的架構）：背景、色板 + 強調色、字體搭配、區塊/版面模式、標誌性元件（例如浮動產品模型），以及動態特徵。腳本能捕捉肉眼誤判的值；你的螢幕截圖能捕捉版面與標誌性「特徵」。兩者都使用。 - 也以同樣方式閱讀使用者的網站——取得真實的產品內容，並注意其本身的版面/區塊骨架、字體與頁尾。你需要這些資訊，以便故意偏離它（借用參考網站的結構，而非產品本身的結構），並能逐字重用產品真實的頁尾/法律文字，而不是自行編造。
- 非拉丁語系內容： 如果產品的文案包含天城文、中日韓越文、阿拉伯文、西里爾文等（例如一個混用印地語 + 英語的展示），現在就記錄下來——你必須載入支援該語系的字體（請參閱建置指南中的陷阱）。
如果無法擷取某個網域或遭到封鎖，請告知使用者，並從螢幕截圖/他們的描述繼續進行——切勿嘗試繞過擷取限制。
步驟 3 — 規劃
將使用者的產品內容映射到參考網站的結構模式上。建立簡短的區塊大綱。選擇字體（與參考網站最接近的免費 Google Fonts）、色板與動態計畫。確認任何真正不明確的部分，然後開始建置。
步驟 4 — 建置
預設技術棧：Next.js 14（App Router，靜態匯出）+ GSAP ScrollTrigger + Lenis，使用手寫 CSS，在 globals.css 頂部定義設計代幣。
從模板建構框架——不要手寫技術棧。 執行 scripts/new-demo.sh <dest>；它會複製 template/（動態層已預先串接且已知可建置）並安裝相依套件。然後：
- 根據你的風格規格，在
app/globals.css的:root中設定設計代幣，並在app/layout.tsx中將字體替換為已配對的 Google Fonts。 - 將
app/page.tsx替換為真實的區塊——使用者的內容映射到參考網站的版面骨架（而非使用者自己網站的）。 - 建立標誌性元件，並從
references/patterns.md中選取 2–4 個動畫配方；references/build-guide.md包含黏性標籤和模型展示的起手式。對於其餘部分，重複使用.rise、[data-speed]和<Reveal>。
如果使用者選擇單一 HTML 檔案，則改從 template-html/index.html 開始（相同的代幣 + 動態層，GSAP/Lenis 透過 CDN 載入，無需安裝）並替換其內容。有關多主題變體的逐區導覽說明，請參閱建置指南。
務必遵從 prefers-reduced-motion。保留參考網站的感覺，但撰寫原創的標記與文案。
步驟 5 — 驗證
執行 scripts/verify.sh <dir>——它會進行型別檢查、建置靜態匯出，並檢查 out/index.html。加入你自己的檢查，用於驗證真實的產品文案、強調色十六進位值與字體名稱（腳本會提醒你）。修正所有問題直到全部通過。
檢視結果。 在本機工作階段中，你可以看到渲染結果：啟動 npm run dev，將 Chrome 開發者工具指向 http://localhost:3000，然後用 computer 截圖（向下捲動）。這是真正的品質檢查——請務必執行，不要只依賴 grep。在無法連線至 localhost 的無顯示器沙箱中，請使用 scripts/shoot.mjs http://localhost:3000（或針對部署版本）進行無頭截圖，並在無法使用時明確告知。
絕對不要在
npm run dev執行期間執行npm run build。 兩者都會寫入.next目錄；建置過程會破壞正在執行的開發伺服器區塊，導致頁面出現Error: Cannot find module './31.js'（或類似錯誤）。我們曾經遇到這個問題，它看起來像程式碼錯誤，但實際上不是。當開發伺服器正在執行時：
- 使用
npx tsc --noEmit進行型別檢查（不會觸碰.next）；- 要執行真正的
npm run build，請先停止dev；- 如果開發伺服器已損毀：執行
pkill -f "next dev"，rm -rf .next，然後重新啟動npm run dev。在編輯執行中的開發伺服器時，建議使用
tsc --noEmit+ 執行curl localhost:3000 | grep來確認內容已編譯，而非執行完整建置。
步驟 6 — 打包與交付
移除 node_modules、.next、out 目錄，壓縮專案，並透過 mcp__cowork__present_files 分享。提供執行指令（npm install && npm run dev）以及一段簡短的摘要，說明參考網站的風格如何被應用。
步驟 7 — 上線與稽核（可選）
如果使用者想要可分享的網址或品質分數：
- 稽核：
scripts/audit.sh http://localhost:3000（開發伺服器正在執行）會輸出 Lighthouse 的效能/無障礙/最佳實踐/SEO 分數。目標是 90 分以上；無障礙性和 SEO 是出貨前最容易修正的低成本項目。 - 部署： 先建置（
scripts/verify.sh <dir>產生out/），然後執行scripts/deploy.sh out取得預覽網址。部署是對外公開的——在使用者確認前，請不要執行scripts/deploy.sh out --prod，也不要部署過時的out/。這些是靜態檔案，因此 Vercel/Netlify/任何主機服務都適用。 - 針對正式網址重新執行
audit.sh <deploy-url>以取得真實網路的評分。
護欄
- 原創性： 絕不複製參考網站的文字，也不要嵌入其標誌或商標圖像資產——請改用 CSS 產生的紋理/形狀。在比較或文字脈絡中使用公司名稱則無妨。
- 敏感領域： 如果產品涉及健康、金融、法律等領域，請保持語氣負責且準確，將展示資料標示為說明用途，避免保證，並包含適當的聲明（例如心理健康網站應提供危機資源專線）。保持載入/行銷語言的非驚嚇性。
- 說明性資料： 請註明顯示的任何姓名、數字、引述或可用性皆為佔位的展示內容——但應保持小而低調（一行簡短文字），不要使用巨大的免責聲明區塊，也絕對不要塞進頁尾，彷彿它是網站的正式頁尾。如果使用者想要產品的真實頁尾，請複製該頁尾（見下文），並將說明性註記放在其他地方，或者如果使用者明確要求覆蓋則直接移除——然後告知他們不再有任何標示來說明資料為說明性質。
- 頁尾： 優先使用目標產品的真實頁尾——擷取並逐字重用其標語、連結與版權資訊——而不是自行編造或留下建置備註。
- 動態： 每個動畫必須能在減少動態設定下優雅降級。
已學到的陷阱（請勿重蹈覆轍）
這些是從實際執行中辛苦學到的教訓。完整技術細節請參閱 references/build-guide.md。
- 重新配色 ≠ 重新設計風格。 不要保留使用者自己網站的區塊骨架而只更換顏色——這樣看起來仍像原網站。請借用參考網站的結構與標誌性元件。（請見黃金規則。）
- 對包含行內標記（
<b>、<span>）的文字列表項/段落使用display:flex會將每個行內區塊分割成獨立的 flex 欄位——文字會碎裂成不完整的欄位。請使用定位的::before來製作項目符號；將文字容器保持為display:block。僅對外層容器使用 flex，絕對不要對內文的文字行本身使用。 - 絕對不要在
npm run dev執行期間執行npm run build（會損毀.next）。在開發伺服器執行時，請使用npx tsc --noEmit進行驗證。（請見步驟 5。） - 非拉丁語系文字需要專用的網路字體。 天城文/中日韓越文/阿拉伯文無法使用 Inter 或 JetBrains Mono 渲染；請載入對應的
next/font並指定正確的subsets（例如Noto_Sans_Devanagari，subsets:["devanagari"]），然後套用.hi{font-family:var(--f-deva)}類別。不要依賴作業系統的後備字體。 - 重複使用產品的真實頁尾，不要自行編造或在那裡留下建置備註（請見頁尾護欄）。
品質標準
目標是讓成品看起來能通過真實上線頁面的考驗：自信的字體比例尺、克制的色板、參考網站中的一個標誌性視覺元素，以及能隨著滾動揭露內容而非裝飾內容的動態效果。不要為不同的參考網站重複使用相同的版面——重點在於每個結果都應看起來像它所借鏡的網站。