site-inspirado 是做什麼的？
將一個普通網站與令人難忘的網站區分開來的，不是程式碼，而是流程： 視覺參考 → 提問 → 研究 → 統一風格的圖片 → 帶有動態效果的頁面 → 確認使用者仍然能找到按鈕。
S=<此技巧所在資料夾> · T=<網站資料夾>（每個網站一個；使用客戶指定的路徑，例如 ~/my-site；若未指定，則使用 ~/projects/output/site-inspirado/<slug>）。始終在 T 內部工作。
最終網站不使用 INEMA 視覺風格（黑與黃）。風格來自客戶提供的參考資料。 INEMA 視覺風格僅適用於工具箱指南。
6 個步驟（按順序；每個步驟都有閘門）
| # | 步驟 | 你產出的內容 | 閘門條件 |
|---|---|---|---|
| 1 | 參考資料 | T/refs/（2 到 5 張圖片） | 客戶確認這就是他們想要的氛圍 |
| 2 | 提問 + 研究 | T/BRIEF.md | 對應區塊的所有問題都已回答；沒有憑空捏造 |
| 3 | 風格 | T/estilo.json | 調色盤已測量 + prompt_estilo 已根據參考圖片撰寫；文字對比度 ≥ 4.5 |
| 4 | 圖片 | T/img/*.jpg + T/img/folha.jpg | 你檢查過完成的圖片：風格統一，沒有扭曲的文字，沒有變形的手 |
| 5 | 頁面 | T/index.html | 主要按鈕添加了 data-cta；透過 movimento.js 實現過渡動畫 |
| 6 | 閘門 + 發布 | 閘門報告、截圖 | portao.js 輸出 PASSA；隨後發布（GitHub Pages / 客戶的 Vercel） |
1. 參考資料
請客戶提供 2 到 5 張圖片：他們已有的素材（邀請函、Logo、店鋪照片）＋ 靈感來源（Pinterest：「麵包店網站」、「婚禮網站水彩風」）。如果客戶沒有，則用 Codex 的 image_gen 生成 2 張，並在繼續前展示給客戶。儲存在 T/refs/。
2. 提問與研究（在生成任何內容之前）
對 AI 說（或你自己做）：「在生成任何東西之前，請詢問我所有需要的資訊，並研究這類網站通常包含什麼。」 使用網站類型（活動、在地商家、服務/顧問、作品集）對應的 referencias/perguntas.md 區塊。研究事實（如何到達、當時的氣候、附近景點），並在 BRIEF 中標註哪些資訊來自客戶，哪些來自研究。在 BRIEF 中決定網站類型：negocio（目標是特定行動：訂購、預約、撥打電話）或 visual（活動、作品集、邀請函：可以包含更多動態效果）。
3. 測量風格
python3 $S/scripts/estilo.py T/refs T/estilo.json --prompt "<英文風格描述，觀察參考圖片後撰寫>"
此腳本會測量調色盤，並根據計算出的對比度建議背景、文字和強調色。你決定最終顏色（如果對比度 < 4.5，請加深文字色）。prompt_estilo 需描述技法 + 光線 + 調色（例如：「棉紙上的水彩暈染，酒紅色、鼠尾草綠與奶油色，細金墨線條」）。
4. 統一風格的圖片
編寫 T/plano.json（每張圖片一行：nome、prompt 描述主題、largura、altura）並生成：
python3 $S/scripts/imagens.py T/plano.json T/estilo.json T/img --refs T/refs
每張圖片都會收到參考圖片與第一張生成的圖片（作為錨點）作為參考：整個系列因此風格一致。一次生成一張；如果可用記憶體低於 30 GB，腳本會自動等待。打開 T/img/folha.jpg，對不合群的圖片使用 --so nome 重新生成。人物：使用背對鏡頭或遠景（避免偽造「真實新人」的臉）。
影片引擎（從圖片生成動態片段：Kling、Magnific 等）可選，且需獲得客戶對該服務的授權。如不使用，則動態效果由程式碼實現（步驟 5）。
5. 帶有動態效果的頁面
每個網站一個頁面，根據主題量身設計（切勿複製其他實例）。使用：
cp $S/runtime/movimento.js T/並加入<script src="movimento.js">（始終放在T內部，且在閘門檢查之前）：data-revela（上升/浮現/側滑/縮放/簾幕）、data-parallax、data-intro（面紗效果 ≤ 1.2 秒）、data-conta、data-contagem。當系統要求「減少動畫」時，所有動畫應停止。- 主要按鈕需加上
data-cta。若為negocio類型，按鈕應出現在第一屏，且無進入動畫；在手機上，按鈕應固定在底部。 - 圖片需設置
width/height、折線以下圖片加上loading="lazy"，並提供描述畫面的alt屬性。
動畫使用量的衡量標準：referencias/visual-x-conversao.md。
6. 閘門與發布
node $S/scripts/portao.js T/index.html --tipo negocio|visual --fotos T/fotos
在 1440×900 與 390×844 解析度下，分別測試「減少動畫」開啟與關閉的狀態：CTA（若為 negocio 類型，需在 1.5 秒內於第一屏出現）、0 個主控台錯誤、0 個損壞檔案、無水平捲動、圖片已載入、「減少動畫」開啟時無動畫運行、頁面大小（negocio < 3 MB，visual < 8 MB）。僅在輸出 PASSA 時才能發布。首次執行：cd $S/scripts && npm install && npx playwright install chromium。