SuperAPI AI 工具集

article-highlights

设计与创作

查看项目

更新于 10-14 18:54

技能介绍

Article Highlights 是 Remotion 动效图形技能集中用于制作编辑风格文章插入片段的技能,建议与 remotion-best-practices、motion-graphics 和 cinematic-camera 配合使用,适合新闻、发布、趋势和文章佐证等用终端画面会显得牵强的场景。

强制输入确认 在写代码之前,必须先向用户确认缺失的决策:需要哪种格式,是 4:3 半屏 Instagram 插入还是 9:16 全屏 Instagram;以及哪种背景,是暖光、干净深色、浅色网格还是深色网格。如果用户委托决定背景,则使用暖光。4:3 插入为 1440×1080,设计目标是在约 9:16 画面的一半尺寸下仍可读;9:16 全屏为 1080×1920,需尊重字幕/界面区域。只有在明确要求时才使用 16:9。文章纸张在干净深色或深色网格场景中可以保持浅色,不要悄悄把整个合成改成深色。

绝对视觉禁令 禁止霓虹、发光、泛光、发光边缘、彩色阴影、青紫色渐变、渐变球体、径向色彩晕染、玻璃拟态、赛博朋克光照或氛围编程式的 AI 装饰。高亮必须看起来像物理记号笔/纸张处理,而不是发出的光。交付前要拒绝任何被禁止的处理。

批准参考 编码前先查看 assets/examples/article-highlight.mp4 和 contact/reference 帧,延续其编辑层级、宽松的纸张留白、克制的记号笔处理、缓慢的镜头和可读性。本地资源不可用时使用标准仓库画廊:https://github.com/Liamrjohnston/remotion-motion-graphics-skill。

何时使用 适用于信息/新闻/发布/趋势节拍;"有东西变了或上线了"的佐证;带有有意义高亮短语的真实文章摘录;以及非终端证据中编辑材料能阐明观点的场合。CLI/安装/代理运行故事应使用 terminal-inserts;产品演示节拍应使用真实产品画面/UI。

核心架构 当记号笔笔画必须位于文字后方时,不要压平文章。要构建分层 Remotion DOM/SVG:选定的场景表面;带宽松安全内边距的编辑纸张/卡片;位于纸张之上的 Rough.js/SVG 记号笔层;位于记号笔之上的 DOM/SVG 文字。记号笔必须可见地位于文字之后、纸张之上。

素材与布局 纸张使用暖白/米白,配中性边框和柔和中性阴影,绝不用彩色发光。排版采用编辑/新闻层级:小号栏目标签、大号衬线/编辑标题、柔和的署名/日期,以及最多 2 到 3 行简短正文。高亮使用克制、半透明的物理记号笔颜色(如柔和黄色),绝不用荧光色。使用真实文章/来源身份和提供的文案。不要编造出版物、日期、声明或引语。要有意硬换行,并让文字保持在变换后的安全边距内。不要像标题幻灯片那样居中;它应该感觉像真实的文章摘录。如果在目标尺寸下无法阅读,就移除不必要的胶囊标签/按钮/来源杂乱元素。

动画 只有当支持已批准参考时,才以短暂的克制模糊到聚焦开场;模糊是光学聚焦,不是发光。早期聚焦阶段不可见记号笔。使用缓慢微妙的镜头推进和克制的透视旋转。聚焦稳定后开始记号笔笔画。用遮罩/擦除从左到右绘制每条高亮。高亮要按顺序出现,绝不要一次全部显示。以所有关键短语可读且稳定的保持结尾。用 useCurrentFrame()、spring() 和 interpolate() 驱动动画;不用 CSS 动画。

记号笔规则 使用 rough.js 或不规则 SVG 记号笔形状。记号笔保持在文字后方。轻微的不完美是好的;完美的渐变矩形不是。只高亮有意义且已验证的短语,而不是整段。记号笔不透明度必须保持文字对比度。不用荧光黄、光发射、模糊光晕或发光边缘。

避免冗余旁白 当文章/来源文字是实际证据时,可以出现该文字。不要添加仅重复旁白的单独标题。只使用真实摘录和最少的结构化元数据。

首轮拒绝门 直到每个答案都是"否"才能交付:格式或背景是否未确认?是否有霓虹、发光、发光记号笔处理、彩色阴影、渐变晕染或玻璃拟态?来源/文章身份或声明是否虚构?卡片是否是通用居中标题幻灯片而非编辑表面?在所选 Instagram 位置上任何关键文字是否不可读?记号笔是否位于文字上方/遮挡文字或出现过早?镜头是否裁切纸张或产生空白移动?结果是否缺少已批准参考的克制和打磨?私下修改直到通过门禁。

QA 与交付 进行类型检查或运行最小有意义的验证。渲染早期无高亮静帧、笔画中间静帧、最终高亮静帧和结束保持。确认记号笔早期不可见、位于文字后方、结束时完整。检查裁切、不可读文案、虚构来源细节、霓虹/发光和弱构图。交付 MP4,并附上尺寸、时长、确切渲染命令和编辑放置说明。