SuperAPI AI 工具集

brand-clone

设计与创作

查看项目

更新于 11-08 17:12

技能介绍

brand-clone 是一个面向 Tella 的视频品牌复刻技能。它的目标是把一个网站已有的设计系统读出来、写成一份简短的品牌套件,并且只用套件中的值来构建每一张图形。

用途 网站本身通常已经包含一套设计系统:两三种有严格角色的颜色、一两种特定字重的字体、带固定边距的内容栏、若干圆角、发丝线颜色、装饰纹样以及标题写法。该技能从在线页面读取这套系统,按角色记录数值,再据此生成视频图形。如果某个值不是来自网站,就不会被写入套件。

主要能力

  • 抓取与采样:用 import_from_url 把页面首屏抓成 1920×1080 静态图,颜色从截图像素中采样,而不是只信 CSS,因为 CSS 里可能定义页面从未展示的颜色,且页面很少是纯白。
  • 读取页面:获取 HTML 与样式表,读取 @font-face 字体家族、--font-* 变量、body/h1/hero 的字体与字重、最常用的圆角与边框色、hero 标题与副标题(语气与 CTA 标签)以及 logo(依次尝试内联 header SVG、mask-icon、/logo.svg、位图)。
  • 测量网格:测量内容栏(logo 或标题左边缘到导航右边缘),缩放后作为视频边距。
  • Logo 处理:使用 SVG 路径数据作为 path 节点,简单部件重绘为真实形状(如圆角矩形、圆形)以便分别弹出;纯位图字标可作为图片放置,或在其为普通文字时用展示字体排版。
  • 字体方案:若 list_motion_fonts 中有站点字体家族则直接使用并保持字重;若为授权字体,则按字形相似度选择最接近的目录字体(如 neo-grotesk→Inter、geometric→DM Sans 或 Figtree、humanist→Source Sans 3、过渡衬线→Lora、高对比衬线→Playfair Display)并说明替换关系。绝不从网站下载字体;用户可上传自己拥有的字体(create_source kind font,然后 add_library_item)。
  • 一次确认:通过一个预填的 ask_form,附带截图与色板图片,向用户确认按角色的十六进制色值、字体方案、圆角与 logo,并填写开场白两行与胶囊标签、人名条两行(仅按视频所述的人名与角色,或用讲者原话概括主题)、引言(讲者原话,在自然断点拆分)、片尾文字与两个胶囊标签。禁止编造任何主张、人名、数字或链接。

构建产物 全部为 1920×1080 的 Tella Motion 文档,背景为页面颜色:

  • 品牌套件板(独立 7.5 秒片段):截图(裁掉站点自有媒体以上部分,不包含第三方 logo、客户图片或人物)在等宽“Source 域名”行与托盘之间铺满画面;吸管标记(带采样色的圆环)依次在标题、灰色行、按钮与页面处弹出,并各向托盘添加一个色片(圆点、名称、十六进制值);随后截图移入面板左上 780 像素槽位,展示双色标题、五个色板、字体卡、形状卡与图标卡,并有靛蓝焦点环与滑动活动标签块。
  • 片头(片段开头 3.2 秒叠加层):以站点 hero 风格呈现视频文字,包含 logo、双色标题、带播放图标的靛蓝胶囊与发丝线面板;素材在面板媒体框内播放,随后扩展至全屏无缝交接给片段。
  • 人名条(叠加层,左边距偏上,有字幕时约 260 像素):白色卡片,带圆角、发丝线与柔和阴影,从方形侧向展开以容纳靛蓝播放图标与双色文字。
  • 引言卡(从引言第一个词开始):素材从全屏收缩为左侧 700×760 圆角框,引言在右侧以衬线体逐词出现,配有发丝线与灰色出处。
  • 片尾卡(独立 4.5 秒片段):带动态条纹的发丝线面板、部件弹出的品牌图标、居中双色标题、靛蓝胶囊与白色描边胶囊,站点光标图标滑入并按下主胶囊。
  • 预设:按品牌命名保存文字预设“ · Title”“ · Label”“ · Pill”与字幕预设“ captions”,使套件在视频之外仍可复用。

运动与时序 所有入场使用同一条缓出曲线(bezier 0.22, 1, 0.36, 1),框架换槽位时使用 ease-in-out(0.65, 0, 0.35, 1),退场用 easeInCubic;无弹跳或过冲。文字按词上升(约 0.55 秒,0.06 秒错峰);组以 0.3 秒淡入并抬升 16–24 像素。文档还给出了套件板、片头、人名条、引言卡、片尾卡各自的详细关键时间点。

构建注意事项 文档列出了在 Tella Motion 中实现时的技术要点,例如:叠加层为全画布(add_overlay 于 0,0,1920×1080,depth front);片头与引言在文档内播放片段自身素材,需根据叠加层首帧找到源时间,设置片段布局为全屏以便交接时精确匹配,若剪辑点落在叠加层内则拆分;按部件分组便于修改文字与时序;cornerRadius 对媒体节点不会跟随关键帧目标,需用遮罩矩形(setMatte alpha)并对齐几何与目标关键帧;fit: "cover" 与 sourceIn(单位为秒×254016000000)需在同一次 node.patch 中设置;sourceRect 可裁剪图片;新节点会画在上层,片头中素材应最后添加;组与路径以画布中心为锚点,关键帧缩放前先设 anchorX/anchorY;路径颜色可按数值关键帧(用十六进制与保持缓动)实现活动图标变靛蓝;发丝线卡片是线色全尺寸加内缩 2 像素的填充;渐变板用 fx.gradientRamp;阴影用 shadowY、shadowBlur 与低 shadowOpacity(约 0.1);Roboto Mono 无“→”字符,字体映射需用文字表述;add_overlay 后若文档画布变化,需移除并重新添加叠加层;不使用 generate_image,因为虚构图像会背离初衷。

检查 除常规检查外,还需查看:套件板 1.3 秒处(标记在文字旁而非覆盖文字)、片头中段保持与中段增长(圆角正确、无方形素材边缘)、人名条(内边距均匀、无内容超出卡片)、以及跨越片头交接与引言开始处的胶片条(叠加层素材与片段之间无跳变、条纹不超出面板)。最后报告套件(按角色的十六进制值、字体映射、圆角)、每张图形及其时间点与预设名称。

适用场景 适合需要快速让视频与既有网站品牌保持一致的内容创作者、营销与设计团队,尤其是使用 Tella 制作标题卡、人名条、引言卡与片尾卡的场景。

限制 该技能依赖 Tella 及其 Tella Motion 文档能力与相关工具接口(如 import_from_url、add_overlay、list_motion_fonts、save_text_preset 等);只从网站读取设计系统,不下载站点字体,不生成虚构图像,不编造文字内容。资料未提供收费、价格或平台支持范围的更多信息。