設計網站 是做什麼的？
目標
生成一個經過打磨的單頁 HTML 網站模擬頁面，用於展示潛在客戶的業務。該網站符合 buildinamsterdam.com 的美學風格：醒目的排版、米白色背景、編輯風格的網格佈局、赭紅色點綴。用於推銷網頁設計服務。
輸入
- Google Sheets URL：包含潛在客戶資料
- 行號（1-indexed，不含標題行）：選擇要使用的潛在客戶
- 可選：工作表名稱（預設為第一個工作表）
預期的欄位
腳本會對應這些欄位（不區分大小寫，彈性匹配）：
| 欄位 | 對應至 |
|---|---|
| company_name / company | 企業名稱（導航欄、主視覺、頁尾） |
| description / about | 關於我們區塊 + 主視覺副標題 |
| keywords / services | 服務網格（逗號分隔） |
| phone / phone_number | 聯絡區塊 |
| email / contact_email | 聯絡區塊 |
| address / full_address | 聯絡區塊 |
| city, state, country | 地點資訊 |
| industry / category | Unsplash 圖片搜尋查詢 |
| first_name, last_name | 擁有者歸屬 |
| title / role | 擁有者職稱 |
腳本
scripts/read_prospect.py— 從 Google Sheets 讀取單一潛在客戶行 → 輸出 JSONscripts/generate_website.py— 從潛在客戶 JSON 生成 HTML 網站
流程
步驟 1：讀取潛在客戶資料
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # 可選
輸出 JSON 至標準輸出。
步驟 2：生成網站
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
或使用 JSON 檔案：
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
步驟 3：預覽
在瀏覽器中開啟生成的檔案：
open .tmp/website_*.html
輸出
.tmp/website_{company_slug}.html— 自包含的 HTML 檔案，可在任何瀏覽器中檢視- 所有 CSS 皆為內嵌，圖片為外部 URL（Unsplash）
環境
UNSPLASH_ACCESS_KEY在.env中 — 用於庫存照片。免費金鑰請至 https://unsplash.com/developers 取得- 若未設定金鑰，則會使用 picsum.photos 的預設佔位圖片
- Google OAuth 憑證（token.json / credentials.json）用於 Sheets 存取
設計系統
- 字型：Inter（Google Fonts CDN）
- 顏色：米白
#F2EFE6、黑色#000、白色#FFF、赭紅#C38133 - 排版：粗體全大寫顯示（72-100px）、區塊標題（36-48px）、內文（16-18px）
- 佈局：全視口主視覺、2 欄關於我們、3 欄服務網格、2x2 圖庫
- 按鈕：邊框樣式、全大寫、字母間距
邊界情況
- 缺少欄位：腳本會使用合理的預設值（例如，若無描述則顯示「歡迎」）
- 無 Unsplash 金鑰：會使用 picsum.photos 的預設佔位圖片
- 過長的企業名稱：CSS 會透過響應式字型大小處理換行
- 特殊字元：輸出時會進行 HTML 跳脫