From cf4b810fac1c73fb65a2bb31d8c9278d82cbc4c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=AD=E6=B5=A9?= Date: Thu, 2 Jul 2026 00:38:49 +0800 Subject: [PATCH] docs: expand Live Photo README guide --- README.en.md | 31 +++++++++++++++++++++++++++++++ README.md | 31 +++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/README.en.md b/README.en.md index c608fa2..bc1943e 100644 --- a/README.en.md +++ b/README.en.md @@ -71,6 +71,37 @@ Turn these three game clips into a triple Live Photo collage with Swiss-style gu - ✅ **Validator**: `validate-social-deck.mjs` auto-detects overflow, type cap violations, 4-band density gaps, and footer collisions - 📄 **Single-file HTML + Playwright rendering**: no frontend build pipeline; `node render.mjs` outputs PNG directly +## Live Photo effects and layouts + +In this skill, Live Photo means "put the user's video into a social-card layout." It is not random stock-video sourcing and not long-form video editing. First make the first frame work as a still card; then let `3s/5s` of motion add evidence. + +| Layout | Effect | Best for | +|--------|--------|----------| +| Single-video motion card | One video cropped to full-canvas `3:4`; when text is needed, use one short headline only and follow `M16 Image-Led Cover` / `image-overlay` rules for subject safety, quiet zones, type, and localized tint | Coffee, travel, fitness moves, product states, game moments | +| Two-grid / three-grid / four-grid puzzle | Multiple video wells inside one Live Photo, usually with no added text so strong footage leads | Travel scenery, fashion picks, room details, food process, workout actions | +| Triple Live Photo collage | Three short clips in parallel, increasing information density inside the short duration; add at most one real scene headline when needed | Guide steps, before/after, multi-angle demos, model test results | +| Long-video diagnosis | Sparse frames / contact sheet for long source videos, then recommend trimming, speed-up, splitting, or asking the user for an exact range | 1-3 minute user videos without a chosen moment | +| Publishing package | Debug `JPG + MOV` plus an iPhone-friendly `.pvt` package | Xiaohongshu and WeChat Official Account article Live Photos | + +Judge the information budget first: WeChat `3s` is best for one action point or one state change; Xiaohongshu `5s` can hold one compact process; triple collages are for three parallel results, not a long sequential story. + +## Live Photo generation guide + +1. **Confirm platform and assets**: user-supplied video is the default input; sourced public video is only for demo / promo testing. Confirm Xiaohongshu, WeChat Official Account article, or local test. +2. **Judge information density**: ask what the viewer can understand in `3s/5s`. If it needs narration, audio, or a full tutorial, do not force it into Live Photo. +3. **Choose the structure**: one strong clip becomes a single-video card; multiple strong clips become two-grid / three-grid / four-grid; three parallel results become a triple collage; long videos get low-cost diagnosis first. +4. **Check the still card first**: the first frame must read as a polished social card. Check crop, subject, text placement, platform safe area, and never turn production requirements into visible audience copy. +5. **Generate motion assets**: output preview video, key JPG, MOV, and `.pvt` inside the task folder; do not write generated files into the skill root. +6. **Deliver with publishing notes**: Xiaohongshu uses `5s`; WeChat Official Account article Live Photo should stay at `3s`; usually transfer the `.pvt` as one package to iPhone and publish from the matching mobile app, because desktop/web paths generally cannot publish Live Photo. + +Useful prompts: + +```text +Turn this coffee video into a 5-second Xiaohongshu Live Photo. Use only one headline and avoid the cup and hand. +These four travel clips are strong. Make a four-grid Live Photo with no added text. +Make a contact sheet from this 2-minute game video and recommend the best 5 seconds for a guide-style Live Photo. +``` + ## Fits / Doesn't fit **✅ Fits**: Xiaohongshu carousels / Live Photo motion cards / WeChat cover pairs / Moments covers / Channels covers / article visuals / tutorial pages / data recaps / travel guides / product reviews / screenshot explainers diff --git a/README.md b/README.md index d86fe7d..d7cad77 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,37 @@ npx skills add https://github.com/op7418/guizang-social-card-skill --skill guiza - ✅ **校验脚本**:`validate-social-deck.mjs` 自动检测溢出、字号上限、4 横带密度、footer 碰撞 - 📄 **单文件 HTML + Playwright 渲染**:不需要前端构建链,`node render.mjs` 直接出 PNG +## Live Photo 效果与版式 + +Live Photo 在这个 Skill 里的定位是"把用户提供的视频装进社交卡版式",不是让 Agent 随机找公开视频,也不是长视频正片剪辑。先让首帧按静态卡片成立,再让 `3s/5s` 的动作补充信息。 + +| 版式 | 效果 | 适合 | +|------|------|------| +| 单视频动态卡 | 一段视频裁成 `3:4` 吃满画布;需要文字时只放一组短标题,按 `M16 Image-Led Cover` / `image-overlay` 的主体避让、quiet-zone、字体与局部 tint 规则处理 | 咖啡、旅行、健身动作、产品状态、游戏瞬间 | +| 二宫格 / 三宫格 / 四宫格拼图 | 多个视频井拼成一张 Live Photo,通常不加文字,让高质量素材自己说话 | 旅行风景、穿搭精选、空间细节、菜品过程、运动动作 | +| 三连 Live Photo 拼图 | 三段几秒素材并列,提高短时长内的信息密度;只在必要时加一行真实场景标题 | 攻略步骤、前后对比、多视角展示、模型测试结果 | +| 长视频诊断 | 对超长素材做稀疏抽帧 / contact sheet,判断更适合裁哪段、倍速、拆分,还是请用户指定时间段 | 用户给了 1-3 分钟素材但还没选片段 | +| 平台发布包 | 输出调试用 `JPG + MOV`,以及 iPhone 测试/发布用 `.pvt` 包 | 小红书、微信公众号文章内 Live Photo | + +信息量判断是第一步:微信 `3s` 更适合一个动作点或一次状态变化;小红书 `5s` 可以容纳一个小过程;三连拼图适合三个并列结果,不适合讲一个必须顺序理解的长故事。 + +## Live Photo 生成指南 + +1. **确认平台和素材**:用户视频是默认输入;公开视频素材只用于 demo / 宣传测试。先确认小红书、微信公众号文章内,还是本地测试。 +2. **判断信息量**:问自己 `3s/5s` 内观众能看到什么。如果需要解释、音频或完整教程才能懂,就不应该硬塞进 Live Photo。 +3. **选择结构**:单个强素材用单视频动态卡;多个好素材用二宫格 / 三宫格 / 四宫格;三个并列结果用三连;长视频先做低成本诊断。 +4. **先做静态卡检查**:首帧必须像一张合格社交卡。检查裁切、主体、文字位置、平台安全区,不要把制作要求写成观众可见文案。 +5. **再生成动态资产**:在任务文件夹输出预览视频、关键 JPG、MOV 和 `.pvt`;不要把生成结果写到 Skill 根目录。 +6. **交付时提醒发布路径**:小红书按 `5s`,微信公众号文章内按 `3s`;通常需要把 `.pvt` 作为一个包传到 iPhone,再从对应 App 发布,电脑端/网页端一般不能直接发布 Live Photo。 + +可直接这样让 Agent 做: + +```text +把这个咖啡视频做成小红书 5 秒 Live Photo,标题只放一组,避开杯子和手。 +这四段旅行视频素材质量很好,帮我做成四宫格 Live Photo,不加文字。 +这段 2 分钟游戏视频先做 contact sheet,帮我判断适合截哪 5 秒做攻略 Live Photo。 +``` + ## 适合 / 不适合 **✅ 合适**:小红书图文组图 / Live Photo 动态卡 / 公众号封面对 / 微信朋友圈封面 / 视频号封面 / 文章配图 / 教程拆页 / 数据回顾 / 旅行攻略 / 产品测评 / 截图说明