mcpField
T
title-kinetic-typography

title-kinetic-typography

github.com/calesthio创意与媒体219183 次安装15 周前更新
代码仓库

关于 title-kinetic-typography

适用于视频、网页等制作流程的独立于供应商的标题与动态排版技能，将文字视为有时间安排的编辑内容，涵盖层级、易读性、动效、本地化和平台安全区。

主要功能

  1. 01按编辑目的划分文字
  2. 02建立排版层级
  3. 03规划入场、停留与退场时序
  4. 04用动效表达含义
  5. 05检查易读性与安全区
  6. 06处理多语言断行

适用场景

  1. 01设计视频标题与章节卡
  2. 02制作易读的社交开场文字和法律说明
  3. 03规划本地化动态排版
  4. 04检查字幕与文字的无障碍表现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/generative-media-skills --skill title-kinetic-typography

安装后在 Claude Code 中输入/title-kinetic-typography确认已加载。

附带文件EVAL.md

详细介绍

标题与动态排版指导

使用此技能，让文字成为精心设计的场景，而不是装饰性叠加层。将每个文字元素视为一个经过编排、各有职责的编辑决策：识别、解释、推销、传达情绪、引导注意力，或让语音更易读。

此方法不依赖特定提供方。无论最终素材是用 After Effects、HTML/CSS/GSAP、Remotion、Lottie、游戏引擎、字幕、AI 视频提示词，还是静态图像／视频生成器制作，都适用。当文字必须准确无误时，优先使用可编辑／渲染的排版图层，而不是要求图像或视频生成器自行生成字形。

区分事实、观察与经验法则

有据可查的事实：

  • WCAG 2.2 要求网页内容在任何一秒内不得出现超过三次闪烁，除非闪烁低于阈值；即使交付物不是网页，也应将此作为视频文字的保守安全规则。
  • WCAG 关于持续超过五秒的移动、闪烁、滚动或自动更新内容的指南，支持在媒介条件允许时让观众进行控制；无法控制时，应减少或简化非必要动画。
  • Unicode 和 W3C 国际化资源将断行定义为与书写系统相关的规则；不要假设英文的自动换行行为适用于中日韩文字、泰文、阿拉伯文、印度文字或混合文字系统的标题。
  • TikTok 广告安全区域文档指出，文字和徽标等关键元素必须位于相关安全区域内，且安全区域的大小会随广告尺寸、字幕长度和附加内容而变化。核实于 2026-07-10。
  • Google Ads 视频规格指南指出，徽标、产品和叠加文字等重要元素应位于提供的安全区域内，以降低在某些广告库存中被遮挡的风险。核实于 2026-07-10。
  • Meta Reels／Stories 安全区域指南可在 Ads Manager 中查看，但访问公开内容可能需要登录；交付最终广告前，请在账号中核实当前版位覆盖层。核实于 2026-07-10。

经验观察：

  • AI 图像／视频生成器可能生成美观的类文字纹理，却会破坏准确拼写、字距、标点、品牌字形和多语言文字。可将其用于背景、排版氛围画面或抽象字形动效，但须先检查字形是否准确。
  • 在桌面预览中看起来清晰的动态文字，往往在手机上无法顺畅阅读，因为平台界面、压缩、眩光、拇指遮挡、字幕和观看时间缩短都会影响可读性。
  • 快速动态排版单独看时可能很吸睛，但如果每个词都以相同强度动画，就会让人疲惫。

制作经验法则：

  • 先确保信息可读，再追求表现力，最后才考虑新颖性。
  • 选择最能传达含义的最小动画单位：文字块、行、词、音节、字形、笔画或纹理。单位越小，动感和风险就越高。
  • 用动效阐明关系或状态变化。如果动效不能帮助阐明、强调、控制节奏或带来愉悦感，就删掉。
  • 制作镜头前先建立文字系统：字体角色、安全区域、时间规则、动效词汇、品牌限制、无障碍限制和质量检查项。

从文本任务入手

在设计之前，先对每种文本元素进行分类。

  • 主标题：宣告作品主题，并传达最强烈的基调。可以富有表现力，但仍须清晰易读。
  • 标题卡／章节标题：用于切换章节、浓缩故事节拍或营造期待感。即使没有旁白，也必须能发挥作用。
  • 下三分之一字幕：在其他内容仍为主体时，标识人物、地点、产品、来源或指标。它应自然出现，停留足够长的时间以便阅读，然后悄然离开，不要抢走剪辑重点。
  • 设计型字幕：强化语音或音乐，同时成为视觉语言的一部分。如果它取代了无障碍字幕，也必须继续服务于聋人和听障观众。
  • 歌词／文本视频：让文字成为主要表演内容。节奏、换行和情绪起伏就是剪辑本身。
  • 社交媒体钩子：在最初几秒内迅速引发共鸣。它必须能避开平台叠加层，并经得起快速滚动浏览。
  • 行动号召／强调文字／法律声明：传达必需信息。清晰度、合规性和安全放置比修饰效果更重要。

为每种元素写一句话，说明其作用：

  • “用一句挑衅性短语抓住开头两秒的注意力。”
  • “标识发言者，同时不遮挡手部或面部。”
  • “让副歌听起来像集体合唱，同时确保每句歌词都清晰可读。”
  • “沿着同一视线路径呈现产品主张及其证据。”

如果作用含糊，设计就会偏离方向，变得千篇一律。

建立字体层级

在选择动画之前，先定义各层级的职责。

  • 主要信息：观众此刻必须读到的内容。
  • 次要信息：可在主要信息之后阅读的背景信息。
  • 三级信息：来源、日期、标签、账号名、披露信息或元数据。
  • 氛围文字：装饰性字形、放大并裁切的词语、字体纹理或重复短语，无需重点阅读。

有意识地运用对比：

  • 字号：最快速的层级提示，但会占用安全区域。
  • 字重：适合强调；避免在同一画面中使用过多字重。
  • 大小写：全大写适用于简短标签和强调词，但要使用字距调整，并避免长篇全大写内容。
  • 字宽：窄体节省空间，但可能降低易读性；宽体更显高级或富有电影感，但需要足够空间。
  • 颜色和明度：文字在动态过程中必须始终与背景区分开来，而不只是静帧中清晰可见。
  • 位置：顶部、居中、下三分之一、侧边栏或全屏标题会改变内容的重要程度。
  • 动态：动作越快、出现越早、尺寸越大或弹性越强，读起来就越重要。

不要同时运用所有对比维度。出色的标题通常只采用一种主导对比，再搭配一种辅助对比。

动态文本的可读性规则

根据投放场景进行设计，而不是根据画板进行设计。

检查以下条件：

  • 最小目标设备及预期观看距离。
  • 纵横比和裁切版本。
  • 背景运动、对比度变化和压缩。
  • 平台 UI 覆盖层、字幕、个人资料账号名、按钮和广告 CTA。
  • 观众是否有音频、是否静音观看，或是否依赖字幕。
  • 文本是必须准确无误的品牌／法律文案，还是可灵活调整的编辑文案。

实用准则：

  • 将重要的阅读文本放在目标平台的安全区域内，或制作平台专用版本。
  • 每个关键短语在显示后、退出前都要留出足够的可读停留时间。
  • 避免将关键文字放在人脸、手部、眼睛、细小的产品细节、字幕或背景运动剧烈的区域上。
  • 如果文字背后的背景会发生变化，请添加底板、渐变、阴影、模糊、描边或压暗处理。
  • 在 100% 输出尺寸下以及手机上进行检查，不要只在编辑器中查看。
  • 对较长的短语使用句首字母大写，除非品牌另有要求。
  • 单帧中不要出现超过两个活跃的文本意念。

对于字幕和说明字幕，借鉴广播／教育领域的惯例很有帮助，但这些惯例并非绝对适用于经过设计的社交内容。DCMP 指南支持字幕显示时长足以供人阅读、不超过两行，并放置在安全区域内。只有当内容、受众和平台有此需要时，才采用更紧凑或更宽松的设置。

换行是一种编辑手段

换行会改变含义、节奏和视觉平衡。未经检查，切勿直接接受主视觉文字的自动换行。

对于英语及类似的空格分词文字：

  • 按语义单元换行：名词短语、动词短语、对比组合、铺垫／回报。
  • 修饰语应与其修饰的词语放在一起。
  • 避免让短小的词语孤零零地落在一行，造成不自然的感觉。
  • 避免拆开人名、带单位的数字、产品名称、URL、账号名、话题标签和法律短语。
  • 利用行长营造节奏：短行制造冲击感，较宽的行用于平静的解释。

对于多语言和混合文字脚本的内容：

  • 确认目标语言、地区、文字脚本、阅读方向和经批准的译文。
  • 不要将英语的大小写、词间空格或换行习惯强加给其他文字脚本。
  • 阿拉伯文和印度文字脚本应使用正确的字形塑形；如果字形塑形会改变含义或可读性，就不要将孤立字形分别设置动画。
  • 对于从右向左阅读的文字，应有意设计显示方向和阅读顺序；不要只是镜像翻转英语版式。
  • 对于 CJK 文字，请参考符合相应地区习惯的换行规则，并避免标点出现在不合规的行首／行尾。
  • 对于泰语、老挝语、柬埔寨语以及其他没有可见词间空格的文字脚本，应使用适合该语言的文本引擎或换行工具。
  • 留出文本扩展空间。译文可能变长、变短或改变行数；应设计多个版本，而不是挤压单一版式。

本地化文本时，应定义“含义锁定”和“版式锁定”：

  • 含义锁定：不能更改的词语、名称、数字、披露内容和声明。
  • 版式锁定：最大行数、安全区域框、大致的强调位置和时间预算。

如果译文无法同时满足这两项要求，应升级处理，而不是悄悄缩小字号，直到文字无法阅读。

时序：显现、停留、退出

每个文字节拍都需要三个有时序的状态。

显现：

  • 明确观众该看哪里。
  • 传达语气和重要性。
  • 避免在观众认出词句前过度动画化。

停留：

  • 留出时间让观众真正读完。
  • 保持文字足够稳定，便于理解。
  • 仅在微动效有助于营造氛围且不影响可读性时使用。

退出：

  • 为剪切、转场或下一个想法做好准备。
  • 避免在最后一个词还没读完时就退出。
  • 将退出作为标点：骤停、溶解、擦除、漂移、收缩、剪切、涂抹或解构。

时序经验法则：

  • 社交媒体钩子标题：除非刻意以悬念为概念，否则应在第一秒内显现。
  • 人名条：在观众看到人物或主体后再进入；至少停留到观众完整辨认出对象。
  • 主标题：即使显现过程复杂，也要留出清晰的主视觉停留时间。
  • 设计化字幕：与讲话或音乐同步，但优先保证措辞可读，避免逐词混乱跳动。
  • 歌词视频：让入场跟随音乐节拍；让停留时长跟随含义。
  • 法律声明／披露信息：动画不要快到看起来像是刻意隐藏内容。

不要只按秒数安排时序，也要根据注意力来安排：

  • 文字出现前，观众在看什么？
  • 什么视觉事件会与文字争夺注意力？
  • 什么音频节拍能让这个动作显得合理？
  • 下一个剪切前，观众必须理解什么？

动作语义

动作应当传达含义。建立一套精简的动作词汇，并保持一致地重复使用。

常见对应关系：

  • 上升或抬起：出现、乐观、地位、激活。
  • 下落或跌落：后果、重量、失败、冲击。
  • 从来源方向滑入：到来、归属说明、加入对话。
  • 放大：重要性、自信、接近；过度使用会显得廉价。
  • 缩小：精准、压缩、领悟。
  • 从模糊到清晰：发现、澄清、记忆。
  • 擦除／显现：证据、揭示、编辑上的笃定。
  • 逐字显现：过程、证据、实时思考、计算。
  • 字符扰乱／故障效果：不确定、错误、赛博美学；如果效果过强，会危及可读性与无障碍体验。
  • 拉伸／挤压：趣味、触感、音乐性。
  • 扩大字距：奢华、呼吸感、距离、电影式停顿。
  • 动态碰撞：冲突、幽默、强调、冲击。
  • 遮挡在物体之后：空间融合、高级合成、真实感。

高价值时刻使用富有表现力的动作，辅助标签则使用有助于理解的细微动作。IBM Carbon 的动效指南区分了细微的功能性动效与更显眼的表现性动效；即使在 UI 以外的标题系统中，这一区分也很有用。

安全区域与平台变体

安全区域变化很大。导出时，请针对确切的投放位置、账号和广告产品进行核实。

截至 2026-07-10 核实的信息：

  • TikTok 广告文档指出，文字／Logo 必须位于安全区域内，且安全区域大小取决于格式、说明文字长度和附加组件；交付前应预览实际效果。
  • Google Ads 为视频广告提供安全区域参考／模板，并警告称，如果重要元素放在安全区域之外，部分广告库存中的内容可能会被遮挡。
  • Meta 在 Ads Manager 中为 Reels 和 Stories 广告提供安全区域参考线，但公开帮助页面可能需要登录；最终交付前应使用账号预览／参考线。
  • 第三方 Shorts 安全区域工具通常将 YouTube Shorts 描述为 9:16 画幅，并指出顶部、底部和右侧存在 UI 遮挡风险。请将这些工具视为有用的参考叠加层，而非平台的权威保证；购买媒体时，应在 YouTube／Google 广告工具中核实。

制作规则：如果同一素材必须用于 TikTok、Reels、Shorts 和付费广告，应将关键信息设计在保守的中央区域，并针对 CTA、字幕和人名条制作适配各平台的导出版本。

品牌规范

设计前，请询问：

  • 已批准的字体、备用字体，以及将字体嵌入视频时的许可要求。
  • 标志的留白空间和最小尺寸。
  • 调色板、对比度要求及禁止使用的配色组合。
  • 品牌语气：沉稳、风趣、高端、强势、编辑风、活泼、机构化。
  • 动效原则：干脆、电影感、克制、弹性、机械、有机。
  • 必须使用的词语、法律文案、商标格式、标点、大小写和发音。
  • 本地化要求和目标市场。

如果没有品牌体系，请创建一套轻量规范：

  • 一种展示字体或展示字体效果。
  • 一种易读的辅助字体。
  • 三种文本角色：主视觉、辅助信息、元数据。
  • 两种动效强度：功能性和表现性。
  • 每种宽高比对应一套安全区域网格。
  • 一条对比度／底板规则。

不要擅自设计商标样式。保留大小写、标记、重音符号、注册／商标符号、型号、URL 和法律措辞。

无障碍与安全

将无障碍视为设计要求的一部分。

检查清单：

  • 对比度：在整个动态过程中保持文本清晰可辨；测试最差帧，而非最佳帧。
  • 动态敏感：当观看者无法选择关闭动效时，避免不必要的镜头抖动、强烈缩放循环、快速振荡和大幅重复视差。
  • 闪烁：除非确认低于 WCAG 阈值，否则任意 1 秒内闪烁次数不要超过 3 次；全屏高对比度闪烁应采取更严格的限制。
  • 阅读时间：关键文本的停留时间应足以让目标受众理解其内容和复杂度。
  • 字幕：如果设计字幕取代标准字幕，应包含所有必要对白和有意义的非语音音频信息。
  • 非音频理解：即使静音，标题卡和开场钩子也应传达信息。
  • 阅读障碍／认知负荷：避免间距过于紧凑、大段文字全部使用大写、字体快速变化，或对密集说明逐字动画。
  • 颜色依赖：不要只靠颜色来传达说话者、状态、错误或强调信息。

如果无法确定是否安全，请降低闪烁对比度、放慢转场、去掉交替效果，或改用擦除、变暗、模糊或单次冲击式切换。

提示词与规范说明

对于生成式工具，请将字体排版作为艺术指导和保真度约束来说明。

请包含：

  • 准确文本及允许的变体。
  • 语言／文字体系和阅读方向。
  • 字体个性，而不仅是字体名称：几何无衬线、编辑风衬线、窄体 grotesk、等宽终端字体、手绘笔刷字等。
  • 层级：主要／次要／第三级角色。
  • 布局：宽高比、安全区域、位置、行数。
  • 时间：显现、停留、退出的时长或节拍。
  • 动效含义：说明为何采用这种运动方式。
  • 与背景的关系：底板、遮罩、景深、交互或分离效果。
  • 无障碍限制：对比度、闪烁、减少动态效果、可读停留时间。
  • 交付物：可编辑图层、Alpha 通道、矢量文件、成片视频、字幕或仅提示词的概念稿。

避免使用“酷炫的动态字体”这类模糊要求。应改用明确的文本规范：

  • “短语 STOP SCROLLING 以两行堆叠显示，使用粗重窄体无衬线字体，白字黑底，置于中央安全区域。第一个鼓点响起时文字猛然进入，超调 6％，在 0.35s 时稳定，保持 1.0s，然后直接切出。不要闪烁或故障效果。”

对于 AI 视频／图像提示词，请加入补救方案：

  • “如果无法可靠生成准确字样，请生成不含文字的背景画面，再单独渲染字体。”

实施交接

交接一份动态字体规范，让其他 Agent 或设计师无需猜测即可据此制作。

最低规范：

  • 画布：分辨率、宽高比、帧率、时长。
  • 文本清单：确切文本、作用、语言，以及相关的发音说明。
  • 布局：边界框、对齐方式、安全区域限制、响应式／裁切变体。
  • 字体排印：字体系列或类别、字重、字号范围、字距、行距、大小写、颜色、效果。
  • 时间：入场／退场帧或时间码、显现／停留／退出，以及与音频／剪辑的同步点。
  • 动效：变换属性、缓动、强度、错开、遮罩、模糊、形变、物理效果说明。
  • 背景交互：背景底板、遮罩、遮挡、阴影、变暗、碰撞、深度顺序。
  • 无障碍：对比度目标、闪烁检查、必要时的减少动态效果替代方案、字幕完整性。
  • 本地化：文本扩展余量、换行规则、RTL／CJK 注意事项、审核负责人。
  • QA：设备／平台检查、文本逐字校对、品牌／法务审批。

尽可能使用帧编号进行实现。只有工具不支持帧时才使用秒数。

迭代工作流

按以下顺序审查：

  1. 文本准确性：拼写、标点、大小写、名称、数字、法律文案和语言。
  2. 可读性：视频播放时，目标观众能否在目标设备上读清文本？
  3. 层级：视线是否首先落在正确的短语上？
  4. 时间：显现／停留／退出是否与剪辑和音频相符？
  5. 动效含义：动效是否强化了信息？
  6. 安全区域：是否有平台 UI 遮挡重要文本？
  7. 品牌：处理方式是否符合品牌的字体、语气和动效规范？
  8. 无障碍／安全：对比度、闪烁、动态强度、字幕完整性。
  9. 工艺：字距调整、换行、缓动、遮罩、对齐、视觉平衡、压缩伪影。

不要只根据静帧进行迭代。拖动时间轴、播放视频、在手机上观看，并检查效果最差的帧。

常见失败模式

  • 文本拼写错误或由 AI 臆造。
  • 显现效果很漂亮，但停留时间太短。
  • 每个词都在动，结果没有哪个词显得重要。
  • 下三分之一字幕条遮住字幕、人脸、手部或产品操作。
  • 将一个平台的安全区域假设套用到另一个平台。
  • 法律文案或 CTA 文本被挤压成难以辨认的微型文字。
  • 无法获取品牌字体、字体被悄悄替换，或字体未经授权。
  • 本地化后的文本超出文本框，便通过缩小字号来解决，导致难以辨认。
  • 故障／闪烁效果带来闪光风险，或导致字母难以辨认。
  • 动效方向与阅读方向或故事含义冲突。
  • 只在某一帧检查了文本对比度，但在移动画面上对比度不足。

示例：社交媒体开场钩子

意图：用于餐食规划应用的竖屏社交广告开场钩子，9:16，优先适配静音观看。

规范：

  • 文本：Dinner decisions are stealing your week.
  • 作用：主要钩子。
  • 布局：两行，置于中央安全区域；避开右侧 UI 和下方字幕／CTA 区域。
  • 字体：粗体人文风格无衬线字体，句首字母大写，行距紧凑但易读。
  • 动效：Dinner decisions 作为一个整体向上滑入，共 8 帧；stealing your week 从左向右擦入，带有轻微拖拽感，然后停留。
  • 30 fps 下的时间安排：显现 0:00-0:14，停留 0:14-1:18，在 1:18 的切点退出。
  • 背景：将文本后方的备餐画面调暗 35%；仅在压缩测试需要时添加柔和阴影。
  • 安全：无闪光、无故障效果、稳定停留。
  • QA：叠加平台 UI 进行手机预览；校对标点是否完全准确。

采用这种结构的原因：文本的作用是阻止观众继续滚动，因此文案简短、层级只突出一个想法，动效强化了时间流逝的感觉，同时保留了易读的停留时间。

示例：主标题

意图：在缓慢的产品微距镜头上叠加高端品牌影片标题。

规格：

  • 文本：Built for the long run
  • 作用：主标题。
  • 布局：16:9 画面中居中单行显示；9:16 画面中采用视觉上自然的断行，分为两行：Built for / the long run。
  • 字体：优雅的高反差衬线字体或品牌展示字体；如果预计会压缩画面或在小屏幕上显示，应避免使用过细的笔画。
  • 动效：字母起初稍微拉开字距，随后在 32 帧内逐渐收拢，同时镜头推近速度放缓。不要逐字母弹跳。
  • 时机：待产品轮廓清晰可辨后再开始显现；转场前至少完整停留一个呼吸的时间。
  • 背景：文字后方使用由深到中的渐变底板；不要遮挡产品标志。
  • 无障碍：不使用闪烁效果；检查文字与产品最亮高光之间的对比度。

采用这种结构的原因：高端感来自克制、留白和干净的停留，而不是大量动画效果。

示例：作为设计元素的字幕

意图：解说视频将设计化字幕作为主要的视觉节奏。

规格：

  • 口播内容：“诀窍不是做更多，而是消除选择。”
  • 字幕文本：先显示 Not doing more.，然后显示 Removing the decision.。
  • 作用：无障碍字幕和强调图形。
  • 布局：位于下方中部的安全区域，而非贴近底边；最多两行。
  • 字体：清晰易读的无衬线字体，白色文字置于半透明炭灰色圆角底板上。
  • 动效：第一部分在口播开始时出现并停留，随后 more 一词缓缓淡出。第二部分通过干净的向上擦除效果替换前一部分，并用品牌强调色突出 decision。
  • 时机：与口播的短语边界同步，而不是逐词同步。
  • 无障碍：字幕应完整传达口播内容；不要只依赖强调色；避免遮挡图表。

采用这种结构的原因：字幕经过剪辑以便于理解，同时保留说话者的原意。动效则标示出概念上的转折。

来源说明

请将以下内容作为依据，而非替代当前项目规范：

评论

支持 Markdown