本地門面展示站

展示型網站執行腳本

展示型（vitrine）網站是為本地商家建立的業務展示型（brochure）網站：幾個頁面回答「你做什麼、為誰做、多少錢、你值得信任嗎、怎樣聯絡你」。訪客從 Google 或推薦連結進入，在幾秒內做決定，如果必須四處搜尋便會離開。這個腳本說明要建立什麼以及順序為何；領域技能保留了詳細的規則。

方向關卡

在為新頁面、螢幕或重新設計撰寫任何程式碼之前（即使請求只有一行），先做這個。這個技能的其餘部分會移除錯誤，但不會賦予螢幕獨特性格。若跳過此關卡，結果將是每個模型都會產出的中間值頁面：細節正確，但不屬於任何人。

1. 五個方向。 產品：它做什麼、為誰做。個性：兩三個具體的詞（例如「平靜、精確、帶點溫暖」），永遠不要用乾淨、現代、時尚、簡約或高級。世界：產品所屬的場所或材料；它會為中性色調色並設定強調色。時刻：一兩個會獲得豐富色彩和細節的地方：對本地商家來說，通常是工作或人員的真實照片，或是像業界使用的印刷文件那樣設定的價目表。簽名：只有這個產品擁有的、一致使用的一個小細節。 時刻是用心繪製的，而不只是清理乾淨：為它必須傳達的內容重新繪製圖表（平滑的線條、對稱的比較、真實的比例），或者讓產品本身的物體呈現重量與光線。
2. 盤點，然後是構想。 列出 8 到 12 個競爭對手沒有的東西（名稱、街道、簡報中的數字、材料、工具、儀式、業界會印刷的文件）。寫下：「在這個頁面上，[一個項目] 變成了 [那個裝置]」。這個裝置就是那個時刻。
3. 拒絕次要預設，除非品牌已經擁有它們。這些是模型在禁止了明顯的線索後會使用的選項：
   • 奶油色、石色或暖灰白的頁面，配上燒烤橘色、陶土色、鼠尾草綠或森林綠的強調色，無論是否搭配襯線標題（「紙與墨」的外觀是新的預設值，而不是一個方向）；
   • 反射性地使用 Fraunces、Instrument Serif、Playfair 或 Georgia 作為標題字體；使用 system-ui 作為唯一字型；
   • 白色背景上使用 Inter 或 Geist，搭配一種靛藍或藍色強調色；
   • 英雄區、服務、評價、服務區域、聯絡方式，按此順序排列，沒有理由；
   • 置中的小標題、標題和兩個按鈕作為整個第一畫面。
4. 交換測試。 將名稱和行業替換為競爭對手的。如果頁面仍然適合，則更改主張、時刻和簽名，然後再次測試。
5. 展示並等待。 展示五個方向和構想，然後等待業主。如果您無法詢問（使用者說直接建立，或者您在沒有真人互動的情況下運行），則將它們作為註解寫在主檔案頂部，並完全按照說明建置。

深度：參閱 anti-slop 腳本 §2（方向）和 §12（應用程式畫面）；design-inspiration-index 技能提供真實參考資料。

展示型網站需要什麼

1. 每個頁面一個清晰的提案。 第一畫面用平實的語言說明賣的是什麼、賣給誰、在哪裡，並提供一個主要行動。跳過其他所有內容的讀者仍然知道。為不同服務設立獨立頁面，勝過一個頁面銷售所有東西。
2. 價格或「起」價。 買家會比較。起始價格及其包含的內容可以過濾掉不良線索並建立信任；單獨寫「請聯絡我們報價」會讓客戶流向公開價格的競爭對手。說明什麼會影響價格。將金額保存在一個資料檔案中，以便所有頁面和結構化資料保持一致。
3. 預約或聯絡一次完成。 在每個頁面上提供可見的電話連結和一個簡短的聯絡表單或預約連結。只要求回覆所需的資訊（姓名、聯絡方式、需求）。說明他們何時會收到回覆。發送後清楚確認。在手機上支援點擊通話。
4. 證明。 包含結果的真實專案、具備姓名和日期的真實評價（或連結到它們），僅在獲得授權時使用標誌。幾個具體的證明勝過許多模糊的陳述。不要使用庫存照片團隊或虛構的推薦。
5. 在地 SEO 基礎。
   • 每個值得排名的服務區域都有一個頁面，每個頁面都有真正在地的內容（不是僅替換城市名稱的相同文字）。
   • 使用 LocalBusiness（或更具體的次類型）JSON-LD，包含名稱、地址或服務區域、電話、營業時間以及與公佈價格相符的價格範圍。僅在一個規範頁面上添加 FAQPage。
   • 完整填寫 Google 商家檔案：與網站相同的名稱、地址和電話、類別、營業時間、照片、指向正確頁面的連結，以及回覆評論的習慣。
   • 每個頁面一個 h1、描述性標題和 meta 描述、兩種語言的 hreflang、站點地圖、可讀的 URL。
6. 速度預算。 本地訪客使用平均連線品質的手機。預載 LCP 圖片並正確設定尺寸（現代格式、明確的寬度和高度）；自行託管字型、一到兩個系列、設定 font-display、子集化；沒有沉重的 3D 效果、影片背景或大型 JS 函式庫用於裝飾；僅在第三方腳本有實際用途時才引入。內容在載入時即可呈現。目標是行動裝置上 LCP 低於 2.5 秒，並使用真實網路節流進行測試。
7. 雙語 FR/EN（當市場需要時）。 每種語言一個訊息來源，具有相同的結構和內容均等性、保持目前頁面的可見語言切換、本地化 URL 和 hreflang。法文文案通常會比英文長約 20%，因此版面設計必須能夠承受。對每個法文字串套用 french-typography 技能，並加入其 CI 防護機制。
8. 魁北克：第 25 號法律。 在魁北克收集任何個人資訊的網站（一個聯絡表單就足夠）需執行 loi-25-website 技能：隱私政策、顯示負責人、在收集時通知、預設關閉追蹤、審查魁北克以外的工具。將其視為建置的一部分，而不是事後考慮；在選擇分析工具和表單工具時要考慮到這一點。
9. 動畫：至多一個簽名時刻。 一個令人難忘且有目的性的互動（例如帶有淡入淡出效果的專案切換器、一個前後對比）加上簡單的按壓和懸浮回饋。沒有滾動觸發的動畫、平滑滾動函式庫或循環裝飾。使用 motion 技能；prefers-reduced-motion 設定為減少時應顯示最終狀態。

建議頁面

首頁、服務（或每個服務一個頁面）、附有案例研究的專案、定價、聯絡方式。僅當您能誠實且持續維護時，才添加服務區域頁面和少數指南。除非「關於」頁面能提供證明，否則跳過；將簡短的個人介紹摺疊進首頁或聯絡方式。

工作順序

1. 提案和證明。 在任何設計之前，先寫好一句話的提案、價格行、三個證明和聯絡路徑。使用 ux 技能處理純文案。
2. 方向和設計標記。 執行上述方向關卡，然後使用 ui 技能（如果專案沒有，則使用品味預設值）設定調色盤、一兩種自行託管的字型、間距、圓角。
3. Mockup，桌面版和 390 px。 先做首頁，然後一個內頁。由業主判斷；先迭代再建置（ui 技能，mockup 優先）。
4. 使用真實內容建置頁面。 真實照片和文字，而不是 lorem ipsum。檢查長法文字串。
5. SEO 和結構化資料。 標題、meta、JSON-LD、站點地圖、hreflang、服務區域頁面、與網站對齊的 Google 商家檔案。
6. 語言和法律。 在所有法文文案上執行 french-typography，然後執行 loi-25-website 產出稽核報告。
7. 速度檢查。 在節流行動裝置設定檔上測量 LCP、CLS 和總傳輸量，並優先修正最大的項目。
8. 動畫，然後是垃圾內容檢查。 加入唯一的簽名時刻，然後執行 anti-slop 及其偵測器。

常見錯誤

• 英雄區說「歡迎」或使用標語，而不是提案。
• 價格隱藏在表單後面，或者變更後舊價格仍留在結構化資料和服務區域頁面中。
• 五種聯絡方式，但沒有明顯的主要方式。
• 服務區域頁面只是替換了城鎮名稱的相同頁面。
• 為了裝飾而加入 Cookie 橫幅，但追蹤功能仍預設載入。
• 語言切換器將訪客送回首頁。

完工檢查清單

• 第一畫面說明提案、目標受眾、地點和一個主要行動。
• 起始價格及其範圍出現在定價頁面上，並與 JSON-LD 一致。
• 在手機上，電話和聯絡表單一次完成；確認訊息說明下一步。
• 至少三個真實、具體的證明。
• LocalBusiness JSON-LD 有效；Google 商家檔案的名稱、地址、電話一致。
• 服務區域頁面包含不同的在地內容；站點地圖和 hreflang 正確。
• LCP 圖片已預載；字型自行託管；節流行動裝置上 LCP 低於 2.5 秒；沒有沉重的 3D 效果。
• 法文和英文內容相同；french-typography 檢查通過。
• loi-25-website 報告中沒有未解決的修正項目（魁北克網站）。
• 至多一個簽名動畫；尊重 prefers-reduced-motion。
• anti-slop 偵測器乾淨；390 px 和桌面版已檢查；tsc、lint 和測試皆通過。