會計師網站建置工具 (HandL Agency)
大多數會計師網站看起來都差不多，說著「歡迎光臨 Smith & Co」。設計本身很少是無法帶來客戶的原因。真正的問題是：H1 標題沒有提及服務和城鎮、沒有價格、沒有真人照片、以及訪客在閱讀的地方無法聯繫。這項技能建立一個看起來昂貴 而且 能達成目標的頁面。
請依序執行下列步驟。
1. 取得簡要需求 (一次詢問，然後決定)
僅就下列你無法推斷的資訊，用一條簡短訊息詢問。其餘部分自行填寫，並說明你選擇了什麼。
- 公司名稱、服務 (例如「會計師」、「簿記」、「自僱會計師」) 和 城鎮或地區。
- 他們協助的對象 (一個利基市場勝過「所有企業」)，以及他們的與眾不同之處 (固定費用、每次通話都是同一位會計師、回應時間)。
- 訪客應採取的單一行動 (例如「取得固定報價」)。一個主要按鈕，在頁面各處使用。
- 用三個詞表達的氛圍、品牌顏色，以及他們自己的照片或影片 (如果有的話)。
2. 撰寫簡報檔案
使用 references/brief.md 撰寫 brief.json。複製 examples/ 中最接近的檔案並修改它；不要從空白開始。規則：
h1必須包含服務和城鎮。讓它有人情味，而非關鍵字堆砌：「布里斯托的會計師，終於站在你這邊。」sub長度為 120 到 165 個字元，因此可同時作為 Meta 描述。stats是公司實際承諾的事項 (回覆時間、每年檢查次數)。絕對不能虛構客戶成果、評論或獎項。- 使用
references/layouts.md選擇版面。
3. 英雄場景 (讓它脫穎而出的關鍵)
預設使用 stage 版面：一個電影般的背景底圖、一個會動的金融物件 (它會滑行、懸浮、飄動、旋轉或流動)、粒子效果、一個巨大的回聲字在後方增加深度、滑鼠視差，以及當訪客滾動時物件會飛下頁面。使用 references/scenes.md 建立場景：
- 選擇適合該公司的金融物件 (硬幣、用鈔票風格紙張折的紙鶴、金色鳥、玻璃包裹、稅表紙船、鍍鉻緞帶)。現成場景位於
assets/scenes/。 - 對於新場景，使用圖片模型生成一張靜態圖 (提示公式在
scenes.md中)，將物件裁剪出來，然後要求模型生成一張相同但移除物件的圖片 (底圖)。 - 在
brief.json中設定動畫、粒子效果和回聲字。
公司自己的團隊照片應放在英雄區以下的段落。切勿熱連結你沒有使用權的媒體，也切勿使用握手或計算機的庫存照片。
4. 建置
執行 python3 scripts/build.py brief.json site/。它會寫入 site/index.html (單一檔案，無需建置步驟，可在任何地方開啟) 並印出 SEO 檢查結果。修正每個失敗的檢查項目，然後再次建置。
5. 查看與修正 (不可跳過)
執行 python3 scripts/shoot.py site/index.html shots/ (它需要 Playwright：pip install playwright && python -m playwright install chromium)。開啟螢幕截圖，查看它們並使用 references/review.md 為頁面評分。修正最弱的三個點，然後再次截圖。當所有項目都達到 4 分或以上，或經過三輪後停止。
6. 移交
提供使用者：
index.html檔案以及如何開啟它。- 最終的桌面版螢幕截圖。
- 頁面標題和 H1，以便他們確認這些內容包含了服務和城鎮。
- 上線前需要替換的內容：真實照片、真實價格、預約或聯絡連結，以及公司在頁尾的監管文字 (例如 ICAEW/ACCA/AAT 執業詳細資訊)。
檔案
references/brief.md：brief.json中的每個欄位。references/layouts.md：版面配置及其適用時機。references/scenes.md：如何建立動畫英雄場景、動畫類型及圖片提示。assets/scenes/：六個現成的金融場景 (底圖和裁剪出的物件)。references/finance-rules.md：金融服務公司網站的 SEO 和轉換規則。references/review.md：步驟 5 的評分標準。examples/*.json：六個完整的簡報範例 (會計師、簿記、自僱會計師、電子商務簿記、稅務申報、薪資服務)。scripts/build.py和scripts/stage.py：渲染頁面 (將媒體複製到旁邊) 並執行 SEO 檢查。scripts/shoot.py：用於評審的桌面和手機螢幕截圖。