Web 素材、打磨與上線
針對已存在網站進行收尾工作的簡短流程。涵蓋 futuristic-web-design 技能的視覺與發布步驟，包裝成可獨立執行的套件。
如果 ../futuristic-web-design/ 位於此技能旁，其參考檔案會提供詳細資訊：references/assets.md 包含提示詞與 ffmpeg 指令，references/ship.md 包含通過檢查、表單、部署、網域與完整啟動檢查清單。
只執行使用者要求的部分。以下每個標題都可獨立執行。
為網頁準備檔案
生成器與相機輸出的檔案過於龐大，不適合直接傳輸。使用行動數據的訪客會等待每一個位元組，而從本機磁碟讀取的手機則會隱藏這個問題。
在安裝 ffmpeg 或 sharp 等工具前須先取得使用者同意。某些 ffmpeg 版本沒有 WebP 編碼器；如果已安裝 cwebp 或 sharp，它們可以完成相同工作。
在 Next.js 中，將檔案以描述性名稱儲存於 public/images/。在純 HTML 網站中，將它們放在與頁面相鄰的 images/ 資料夾：在 Vercel 上，如果沒有框架的網站存在 public/ 資料夾，則只會提供該資料夾，這會隱藏頁面本身。
| 檔案 | 目標 |
|---|---|
| 主視覺圖片 | 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 圖片。 - favicon、sitemap 與 robots 檔案。
- 將生產網域設為基礎 URL，以便分享圖片與 sitemap 能正確解析。如果未知，請詢問使用者。
部署
僅在使用者要求時才進行部署。
- 將儲存庫連接到 Vercel。每次推送到主分支都會重新部署生產環境。
- 在平台的專案設定中輸入
.env.local的值。本機運作正常但在生產環境中損壞的表單，幾乎都是因為缺少這些設定。 - 如果建置失敗，請閱讀日誌並修復根本原因。
- 在手機使用行動數據的情況下，於生產 URL 上驗證：載入頁面、提交表單，並檢查儲存的記錄。
- 將連結貼入即時通訊應用程式，以檢查預覽卡片。
誠實報告：哪些已驗證、哪些無法驗證（實體手機、生產網域），以及哪些事項留給使用者處理。