社交安全区域
平台应用会用按钮、字幕和个人资料栏遮挡画面的一部分，而个人资料网格则会裁剪两侧。任何重要的内容都可能因此被隐藏。这个技能确保这种情况永远不会发生。
所有数据都保存在 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 <预设名称>会打印安全矩形和避免框。 - 在安全区域内构建内容。
- 全出血背景和素材可以填满整个画框。
- 所有重要内容都必须放在安全矩形内：标题、正文、字幕、Logo、面部、CTA按钮、关键产品图。
- 切勿将任何内容放置在
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/<预设名称>.png作为锁定图层拖入 - 更多详情：
references/integrations.md
- Remotion / React：
- 交付前验证。
- 布局JSON（精确）：
python scripts/check_zones.py layout.json - 图像或视频：
python scripts/check_zones.py file --preset <预设名称> --overlay check.png（如果存在tesseract则添加--ocr） - 模拟应用预览：
python scripts/preview_mock.py frame.png --preset <预设名称> --out mock.png
- 布局JSON（精确）：
- 修复并重新检查。
python scripts/autofix.py layout.json可以移动或缩放元素。对于无法重新布局的已完成素材：python scripts/autofix.py fit in.png --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。