客戶網站設計（無AI垃圾） 是做什麼的？
自動將此技能應用於每個網站設計請求（網站、網頁、登陸頁、首頁、模型、重新設計、重建、推介網站）——使用者無需特別指定。
建立看起來像真實設計公司製作的客戶網站：具明確風格的設計、真實的文案、乾淨的程式碼，並在實際瀏覽器中檢查後才交付。
步驟 0 — 詢問，不要假設
在撰寫任何程式碼之前，確認（僅詢問缺失的部分）：
- 技術堆疊：原生 HTML/CSS/JS、Angular、React/Next.js 或 WordPress/Elementor。
- 業務：名稱（精確拼寫）、行業、城市、服務/產品、目標客戶。
- 真實素材：標誌、照片、專案清單、聯絡電話、WhatsApp、地址、Google 地圖連結、Google 評分、社交媒體連結。
- 語言（例如英語 + 泰米爾語/坎納達語）——切勿猜測。
- 網站的主要目標：來電、WhatsApp 詢問、報價請求、預訂或線上訂單。
如果缺少素材，請使用明確標記的 TODO 佔位——絕不使用庫存人物照片或虛構事實。
步驟 1 — 先制定設計規格（暫不建立元件）
撰寫簡短規格並獲得批准：
- 美學方向 — 確定採用一種：編輯式、奢華、工業風、溫暖在地、粗獷風、極簡高級。用一句話說明為何適合此業務。
- 字型系統 — 一個獨特的顯示字型 + 一個乾淨的正文字型。使用 clamp() 進行流體大小調整，並採用嚴格的模數尺度（例如 1.25）。顯示字型絕不使用預設的 Inter/Roboto/Arial。
- 顏色（60-30-10） — 60% 底色（例如暖灰白 #F7F6F2 或木炭色 #111214），30% 結構表面，10% 一個強烈的品牌強調色。定義為 CSS 變數/設計令牌。
- 網格與佈局 — 12 欄網格，至少一個不對稱/編輯式分割區段，使用 1px 細邊框，設定充足的留白。
- 頁面清單 + 真實文案 — 每個區段的標題和正文文案，針對此行城市進行撰寫。
方向預設（起點，根據客戶調整）
- 珠寶/黃金： 奢華編輯式；襯線顯示字型（例如 Cormorant、Instrument Serif）；象牙色 + 深酒紅/綠色 + 金色強調色少量使用；大型產品攝影；黃金價格區塊含日期/時間；儲蓄方案區段；BIS 標誌信任條。
- 工業/製造/B2B： 工業精準式；無襯線顯示字型（例如 Space Grotesk、Archivo）；木炭色 + 鋼鐵灰 + 一種安全強調色（橙色/黃色）；規格表、專案案例研究（客戶、地點、面積、時間表）、型錄下載、詳細報價表單。
- 飯店/款待： 溫暖編輯式；房間卡片含真實照片、價格/設施、位置及附近景點、預訂/WhatsApp 行動呼籲按鈕。
- 攝影/創意： 極簡畫廊優先；以圖片為主的不對稱瀑布流佈局，極簡金屬色，強烈字型用於名稱/類別。
步驟 2 — 嚴格禁止（AI 陳詞濫調）
絕不使用：
- 紫色/靛色/藍紫色漸層、玻璃態模糊、浮動漸層球體。
- 通用圖示放在彩色圓圈內的三欄居中功能網格。
- 佔位文案：「革新你的工作流程」、「賦能企業」、「釋放你的潛力」、「提升你的體驗」、「Lorem Ipsum」、「示例標題」。
- 與業務無關的庫存微笑人物照片。
- 假數據、假見證、或可顯示「0+」的動畫計數器。
- 表情符號作為圖示、所有內容居中、統一高度的卡片。
- 連結到已完成的網站中的「#」。
步驟 3 — 建置規則
- 元件應小而可組合（例如 Card 包含 Header/Body/Footer 部分），而非單一巨大 props 重的元件。
- 行動優先；測試寬度 390px 和 1440px。
- 圖片：真實的 alt 文字、設定 width/height（避免版面位移）、在折疊以下使用 lazy-load、盡可能使用 WebP/AVIF 格式。
- 動畫：細緻且具目的性（滾動時的淡入/滑入、真實的懸停狀態）；尊重 prefers-reduced-motion。
- 無障礙性：WCAG AA 對比度、可見的焦點狀態、語義化標題（每頁一個 H1）、描述性連結文字（不僅是「了解更多」）。
- Angular + TranslateModule：始終為每個專案語言生成 i18n 金鑰檔案。
- 如果輸出內容較長，先提出批次計劃，然後完整生成每個批次——絕不截斷檔案。
本地商業必備（印度中小企業客戶）
- 固定的 WhatsApp 按鈕和點擊撥號（tel:）連結。
- 地址 + 嵌入的 Google 地圖 + 營業時間。
- Google 評分/評論（真實的，連結到個人檔案）。
- 實際能發送的聯絡/報價表單（電子郵件和/或 WhatsApp 通知）並附垃圾郵件防護。
- SEO：頁面標題 =「城市中的服務 | 品牌」；每個頁面的 meta description；LocalBusiness JSON-LD 結構化資料；Open Graph 圖片；sitemap.xml；robots.txt。
- 隱私政策頁面；正確的當前版權年份。
步驟 4 — 在真實瀏覽器中驗證
使用 Playwright（無頭 Chromium）：
- 對每個頁面截圖 1440px 和 390px 寬度；檢視螢幕截圖。
- 檢查水平溢出、文字重疊、破損圖片、過小的點擊目標（<44px）。
- 檢查主控台錯誤和失敗的網路請求。
- 修正並重新截圖直到乾淨。
步驟 5 — 交付前檢查清單（必須全部通過）
- 未遺留可見的 Lorem Ipsum /「示例」/ TODO 文字。
- 沒有 href="#" 或無效連結；所有社交媒體連結都指向真實的個人檔案。
- 公開頁面上沒有管理員/登入連結；meta 標籤或原始碼中沒有開發者電子郵件或內部路徑。
- 業務名稱、客戶名稱和地址拼寫正確且一致。
- 計數器、滑桿、價格更新器和表單顯示真實數值並正常運作。
- 每張圖片的 alt 文字有意義；每個頁面的標題和 meta description 都是獨一無二的。
- 已審查行動版和桌機版螢幕截圖。
- Lighthouse：效能、無障礙性、SEO 各項得分 90 以上（或解釋為何未達標）。
最後附上簡短摘要：所選擇的設計方向、已建立的頁面、檢查清單結果，以及任何仍在等待客戶提供的內容（照片、文案、憑證）。