Web 资产、优化与上线
一个针对已有网站的收尾工作流程。它覆盖了 futuristic-web-design 技能中的视觉与发布步骤，可独立运行。
如果 ../futuristic-web-design/ 位于此技能旁边，其参考文件中包含更多细节：references/assets.md 包含提示词和 ffmpeg 命令，references/ship.md 包含优化步骤、表单、部署、域名和完整的上线清单。
仅执行用户要求的部分。以下每个标题均可独立运行。
准备 Web 文件
生成器或相机输出的文件体积过大，不适合直接传输。使用移动数据的访问者会等待每一个字节的加载，而笔记本电脑从本地磁盘读取时则掩盖了这个问题。
在安装 ffmpeg 或 sharp 等工具前需获得批准。某些 ffmpeg 版本不包含 WebP 编码器；如果系统中已安装 cwebp 或 sharp，它们可以完成同样的工作。
在 Next.js 中，将文件存储在 public/images/ 下，并使用描述性名称。在纯 HTML 网站中，将其放在与页面平级的 images/ 文件夹中：在 Vercel 上，如果存在 public/ 文件夹，无框架的网站将仅提供该文件夹中的内容，从而隐藏页面本身。
| 文件类型 | 目标 |
|---|---|
| 主图（Hero image） | WebP，宽度最多 1920px，约 300 KB |
| 其他图片 | WebP，宽度最多约 1000px，约 150 KB |
主视频（hero.mp4） | H.264 MP4，最高 1080p，移除音频，小于 4 MB |
视频海报（hero-poster.webp） | 视频的第一帧 |
最后提供一个压缩前后的大小对比表格，直观展示节省的空间，而非仅靠声称。
编写图片与视频提示词
这些提示词适用于 Google Flow 或任何其他生成器。如果你可以直接生成，在花费积分前需获得批准。如果不能，将提示词交给用户，并用明确标记的占位符继续。
- 先确定镜头清单。 在生成前决定资产及其宽高比：单页网站大约需要七个（主视频、主图、三个产品卖点图、一个故事图、一个分享图）。
- 图像概要，按顺序包含六个部分： 主题、场景、灯光、相机（高度、镜头、景深）、情绪与调色板、格式（16:9 主图，4:5 产品图）。要求使用空白标签，因为生成器会扭曲文字，而真实文本应属于 HTML。
- 风格线。 从第一个获批的图像中提取灯光、相机和情绪与调色板的句子，并在之后的每个提示词中逐字复用。这是使整套素材看起来像同一场拍摄的关键。
- 主视频。 对已获批的静态图像进行动画处理，描述一个微小的运动，并声明其他所有元素保持静止，相机固定。
- 爆炸视图片段。 开场静止画面：组装好的产品，小而居中，周围留出空位以便放置零件。结束静止画面：从开场静止画面构建（绝不从头开始），零件沿一条直线轴排列，保持相同的视角、灯光和背景。片段从第一个静止画面过渡到第二个，相机锁定。
在生成的资产中避免出现真实人物和第三方标志，展示真实企业的真实产品。
移动端适配、优化与速度
- 390px 宽度下的移动端检查。 文字可读，内容不紧贴边缘，触摸目标约 44px，无水平滚动，菜单切换可用。以列表形式修复问题，然后再次滚动检查。调整大小的桌面浏览器只能近似模拟手机，因此要求用户在真实设备上检查，如果未进行则需说明。
- 视觉优化。 各部分之间的间距一致，同级标题大小相等，每个交互元素都有悬停和焦点样式，无残留的预览路由。
- 速度。 使用移动端预设进行性能分析，列出三项最重要的改进，按影响从大到小排序。如果某项改进意味着删除用户重视的内容，则标记出来供其决定。
在更改用户未要求修改的内容之前，先列出发现的问题。
密钥
.env.local保存密钥，并已列入.gitignore。- 网站代码仅使用公钥。密钥或服务密钥绝不会出现在客户端代码中。
- 搜索代码和 Git 历史中的秘密信息，并报告检查内容。
- 曾经在页面代码中提供或提交到 Git 的密码即使仓库从未推送过，也是已暴露的：访问者可以读取页面，且历史记录会随每次复制和未来推送而传播。仅从文件中移除并不能消除风险。无论其值看起来如何，都应告知用户在提供方控制面板中轮换密钥。
搜索与分享
- 标题最多 60 个字符，描述最多 155 个字符，说明销售的产品和地点。仅品牌名称对陌生人毫无意义。
- 分享图片为 1200x630，存放于
public/images/share.webp，并设置为 Open Graph 和 Twitter 图片。 - 收藏夹图标、站点地图和 robots 文件。
- 将生产域名设置为基础 URL，以便分享图片和站点地图能正确解析。如果未知则询问用户。
部署
仅在用户要求时部署。
- 将仓库连接到 Vercel。每次推送到主分支都会重新部署生产环境。
- 在宿主平台的项目设置中输入
.env.local中的值。本地正常但生产环境失效的表单，几乎总是缺少这些环境变量。 - 构建失败时，阅读日志并修复根本原因。
- 在生产 URL 上使用移动数据网络从手机验证：加载页面、提交表单，并检查存储的记录。
- 将链接粘贴到即时通讯应用中检查预览卡片。
如实报告：已验证的内容、无法验证的内容（实体手机、生产域名）以及留给用户完成的部分。