Social Safe Zone
平台應用程式會在畫面邊緣覆蓋按鈕、字幕和個人檔案欄，而個人檔案網格則會裁切兩側。重要的內容若落在這些區域就會被遮擋。這個技能確保這種情況永遠不會發生。
所有數值都存放在 zones.json 中。切勿硬編碼。列出預設：python scripts/zones_lib.py list。
工作流程（依序執行）
- 選取預設。 比對平台：
ig-reel、ig-story、ig-story-strict、ig-feed、tiktok、yt-shorts、linkedin-4x5、linkedin-16x9。若使用者未指定平台，預設為ig-reel。若需涵蓋多個平台，先以最嚴格的安全區域設計一個主版本，再逐一檢查其他平台。 - 讀取安全區域。
python scripts/zones_lib.py show <preset>會印出安全矩形與避開區域。 - 在安全區域內建構。
- 滿版背景和影片素材可以填滿整個畫面。
- 所有重要內容都必須放在安全矩形內：標題、內文、字幕、標誌、人臉、行動呼籲按鈕、關鍵產品畫面。
- 切勿將任何內容放在
avoid區域（Reels：右下角的按鈕欄）。 - 字幕應放在安全區域的下半部，絕對不要貼著底部邊緣。
- 最小文字大小：在 1080 寬度下為 42px。在所有背景上都要有高對比。
- Reels 和 Feed：重要內容也要保持在網格裁切範圍內，讓個人檔案網格縮圖仍然可讀。
- 根據工具使用正確的輔助程式：
- Remotion / React：
templates/SafeZone.tsx和templates/zones.ts - HTML / CSS：
templates/safezone.css（類別如sz-ig-reel） - Python / Pillow / ffmpeg：
scripts/zones_lib.py - Canva / CapCut / Premiere：將
assets/guides/<preset>.png作為鎖定圖層疊加在上方 - 更多細節：
references/integrations.md
- Remotion / React：
- 在交付前驗證。
- 佈局 JSON（精確檢查）：
python scripts/check_zones.py layout.json - 圖片或影片：
python scripts/check_zones.py file --preset <preset> --overlay check.png（若已安裝 tesseract 可加上--ocr） - 模擬應用程式預覽：
python scripts/preview_mock.py frame.png --preset <preset> --out mock.png
- 佈局 JSON（精確檢查）：
- 修正並重新檢查。
python scripts/autofix.py layout.json會移動或縮放元素。對於無法重新佈局的完成影片：python scripts/autofix.py fit in.png --preset <preset> --out out.png。 - 告訴使用者結果，一行即可：使用的預設、PASS 或 FAIL，以及移動了什麼。如有幫助可顯示疊加圖或模擬預覽。
佈局 JSON（用於精確檢查與自動修正）
{"preset": "ig-reel", "elements": [
{"id": "headline", "type": "text", "text": "Hello", "x": 60, "y": 300, "w": 700, "h": 90, "size": 90},
{"id": "logo", "type": "box", "x": 60, "y": 1500, "w": 220, "h": 110},
{"id": "bg", "type": "box", "x": 0, "y": 0, "w": 1080, "h": 1920, "important": false}
]}
important: false 標記可溢出安全區域的背景。
規則
- 如果使用者明確要求將內容放在危險區域內，可以這麼做，但必須說明哪些部分可能被遮擋。
zones.json中標示為estimate的數值為社群測量結果，非官方數據。客戶專案中請提及這一點，並建議先發布測試貼文。- 若要新增平台或更改數值，僅編輯
zones.json，然後執行python scripts/export_zones.py css > templates/safezone.css與python scripts/make_guides.py --all。