site-inspirado は何をしますか？
普通のサイトと記憶に残るサイトを分けるのは、コードではなくプロセスです： 参考画像 → 質問 → リサーチ → 統一スタイルの画像 → 動きのあるページ → それでもボタンが見つかるか確認する。
S=<このスキルのパス> · T=<サイトのパス>（サイトごとに1つ。ユーザーが指定したパスを使用。未指定の場合は ~/projetos/output/site-inspirado/<slug>）。常に T の中だけで作業します。
最終的なサイトはINEMAのビジュアル（黒と黄色）を使いません。スタイルはユーザーの参考画像から決まります。 INEMAのビジュアルはキットガイドのみで有効です。
6つのステップ（順番厳守。各ステップにゲートあり）
| # | ステップ | あなたが生成するもの | ゲート |
|---|---|---|---|
| 1 | 参考画像 | T/refs/（2～5枚） | ユーザーが「この雰囲気でOK」と確認した |
| 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 が0で終了。その後公開（GitHub Pages / クライアントのVercel） |
1. 参考画像
ユーザーに2～5枚の画像を依頼してください：既に持っているもの（招待状、ロゴ、お店の写真）+ インスピレーション（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 を記述し（画像1行につき：nome、被写体のprompt、largura、altura）、以下のコマンドを実行します：
python3 $S/scripts/imagens.py T/plano.json T/estilo.json T/img --refs T/refs
各画像は、参考画像＋最初に生成された画像（アンカー）を参照として受け取るため、シリーズ全体が同じ作風になります。画像は1枚ずつ生成。空きメモリが30GBを下回るとスクリプトは待機します。T/img/folha.jpg を開き、違和感のある画像は --so nome で再生成します。人物は後ろ姿か、風景の中に小さく配置（実在の新郎新婦の顔をでっち上げると誤解を招きます）。
動画生成（画像からアニメーションクリップ：Kling、Magnificなど）はオプションであり、そのサービスの利用についてユーザーの許可を得た場合のみ使用します。それ以外の場合、動きはコードで実装します（ステップ5）。
5. 動きのあるページ
1サイト1ページ。内容に合わせてデザインします（他のパイロットをコピーしないこと）。以下を使用：
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。