1实现原理 · 为什么它能做到
第一铁律:数字就是信息——价格与折扣必须推导,绝不输入两次。
1. **The number is the message — keep it exact.** Prices and percentages must be computed, never typed twice. Derive `now` and the `% off` from `was` and the discount so they can't disagree.
只存真源:now 与 pct 不落数据、必须由 was/discount 派生,因此不可能自相矛盾。
One object per product. `now` and `pct` are NOT stored — they are derived, so they can never contradict `was` and `discount`. Store only the source of truth.
先划线、后落价——顺序错会被读成故障。
Order matters: strike the old price *first*, then drop the new one. Striking and counting at the same instant reads as a glitch.
金额先四舍五入到分再格式化,用 Intl 呈现。
Compute every displayed figure from the offer in one place. Round to cents *before* formatting so the price a viewer reads is exactly the price they pay.
批量前逐行校验、坏行即停:静默渲染坏行正是「470 美元标成 47 美元」的来源。
A batch that silently renders a bad row is how a $470 item ships labelled "$47". Validate every offer before rendering and stop the run on the first bad one.
紧迫感必须真实:给死线或像真倒计时,绝不用假计时器。
Urgency lifts conversion only when it's real. Show a concrete deadline ("Ends Sun 11:59pm") or a live-looking countdown — never a fake timer.
一帧一个焦点:一个折扣、一个码、一个 CTA;两个优惠就做两条片。
2. **One offer, one focus per frame.** A single discount, a single code, a single CTA. Competing offers kill the urgency. If there are two deals, make two videos.
按价位选择呈现方式:高价用百分比,低价用固定金额。
Choose the framing by price: percentage for higher-priced items ("40% OFF" beats "$32 off"), a flat amount for low-priced items ("$5 off" beats "8% off").
验证环重点是「钱对不对、图在不在」:数字精确与产品图加载不可妥协。
This is heavy-tier: the deliverable is an MP4, not a live page. A promo carries exact money — the verify pass is mostly *are the numbers right and is the product image actually there*.
2核心能力
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | remotion(frame/spring/interpolate/Img/Sequence) |
| cli | node fs(校验时检查图片是否存在) |
| package | Intl.NumberFormat / Intl.DateTimeFormat(运行时内置,无第三方包) |
| cli | npx remotion render(逐 offer 渲染) |
| cli | ffmpeg / ffprobe(仓库共享 contact-sheet.sh、probe-mp4.sh) |
| network | iart.ai(reference 尾部推广链接,具 utm 参数;仅读者点击才请求) |
4风险提醒 风险提醒:橙色 · 评估后使用
- 倒计时实现引入挂钟时间,破坏确定性 — Date.now() 出现在 reference 组件里,与 SKILL.md 的铁律冲突;服务端或并行渲染会得到不一致的剩余时间,甚至跨渲染回跳。
- 示例代码有拼写错误 — AbstractFill 不是 Remotion 导出(应为 AbsoluteFill),照抄即报错。
- 商业欺诈仅被算术一致性挡住 — 虚高原价(was)以制造虚假折扣不会被拦;skill 校验 now<was,但不校验 was 是否为真实历史价。
- 数据校验是结构性的,不查真伪 — code/url/cta 文案可任意填写,skill 不校验链接可用性或文案合规。
- 商业引流位 — reference 尾部固定 iart.ai 推广段与 utm 链接。
5第二遍独立确认
- [discrepancy] 「全部为帧纯函数、禁用 Date.now()」与 reference 实现是否一致 — SKILL.md 明确要求所有动画值为 useCurrentFrame() 纯函数(no CSS transitions, timers, Date.now()),其自身示例也写「derived from a deadline prop (deterministic per frame)」;但 promo-components.md 的 Countdown 实际用 `const remaining = Math.max(0, (end - Date.now()) / 1000 - frame / fps);`——引入挂钟时间,同一 props 在不同时刻渲染会得到不同剩余时间,不可复现。
- [discrepancy] 组件 import 名是否可运行 — promo-components.md 的 composition 写成 AbstractFill(Remotion 并无该导出,应为 AbsoluteFill),且使用处同样写 <AbstractFill …>;照抄会直接 import 失败。
- [ok] 折扣公式是否两处一致 — SKILL.md 的 Math.round((1 - now / was) * 100) 与 priceModel 的 Math.round((1 - now / o.was) * 100) 同式同精度。
- [ok] 校验清单是否与 SKILL.md 文字一致 — validateOffer 覆盖 now≥0 且 <was、discount∈(0,1)(当 now 未给)、code 非空、deadline 可解析、图片存在;与 SKILL.md 的 now < was / code present / image exists 一致且更强。
- [ok] 节拍/时长的一致性 — SKILL.md 的 10s 节拍表与 reference 的帧调度(hook 0 / badge 27 / price 60 / code 210 / cta 270)及 --frames=0-299(10s@30fps)一致。
- [ok] 「先划线后落价」顺序的实现 — PriceDrop 的 strike 从 f=0 起(0–12 帧画完),新价 spring 从 f-8 起跑;与 SKILL.md 的 strike the old price first 时序意图一致。
6结论
0c3e003bf0617b1c…2bd0dd19c9