site-inspirado 是做什么的？
将一个普通网站与一个令人难忘的网站区分开来的不是代码，而是流程： 视觉参考 → 提问 → 搜索 → 风格统一的图片 → 带动画的页面 → 确认用户仍然能找到按钮。
S=<本技能所在文件夹> · T=<网站所在文件夹>（每个网站一个；使用用户指定的文件夹，例如 ~/meu-site；如果未指定，则为 ~/projetos/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 返回 0；然后发布（GitHub Pages / 客户的 Vercel） |
1. 参考图片
索要 2 到 5 张图片：用户已有的素材（邀请函、Logo、店铺照片）+ 灵感（Pinterest："site padaria"、"wedding website watercolor"）。如果用户没有，则通过 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 描述技法 + 光线 + 色板（例如："loose watercolor on cotton paper, burgundy, sage and cream, thin gold ink accents"）。
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. 带动画的页面
每个网站一个页面，为主题量身设计（切勿复制其他 pilot 项目）。使用：
cp $S/runtime/movimento.js T/并在 HTML 中添加<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。