mcpField
T
terminal-inserts

terminal-inserts

github.com/liamrjohnston创意与媒体1411.0k 次安装14 周前更新
代码仓库

关于 terminal-inserts

terminal-inserts 是面向 Remotion 视频制作的技能，用真实终端画面呈现 CLI、Agent 和仓库工作流。它规定了终端布局、命令输入与日志动画，并包含移动端可读性及渲染检查要求。

主要功能

  1. 01制作终端风格视频插片
  2. 02呈现命令输入与 CLI 输出
  3. 03按顺序显示安装或运行日志
  4. 04规定终端材质与镜头运动
  5. 05提供画面与可读性检查

适用场景

  1. 01展示技能安装流程
  2. 02演示仓库自动化工作流
  3. 03呈现 Agent 运行与验证日志

安装

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

$npx skills add https://github.com/liamrjohnston/remotion-motion-graphics-skill --skill terminal-inserts

安装后在 Claude Code 中输入/terminal-inserts确认已加载。

详细介绍

终端插入画面

与 remotion-best-practices、motion-graphics 和 cinematic-camera 搭配使用，适用于 Claude Code、Codex、MCP、Agent、技能、代码库工作流、自动化演示和真实 CLI 插入画面。

强制前期确认

开始编码前，先遵循 motion-graphics 的前期确认要求。如果尚未说明，请询问：

你想要哪种格式：4:3 半屏 Instagram 插入画面，还是 9:16 全屏 Instagram？背景想选哪种：暖色浅色、干净深色、浅色网格，还是深色网格？

无论选择哪种背景，终端窗口都可以保持炭灰色。出现终端元素，不意味着整个场景都必须是深色。

绝对禁止的视觉效果

  • 严禁使用霓虹色、荧光绿、亮青色、亮紫色或多色 AI 配色。
  • 严禁使用辉光、泛光、发光边缘、彩色阴影、径向色彩渐变、光环、光晕或溢光。
  • 禁止玻璃拟态、闪亮渐变、赛博朋克氛围、炫目的扫描线效果或“黑客电影”风格。
  • 禁止在文字、光标、面板或 ASCII 字样周围使用青紫渐变或绿色辉光。
  • 使用纯色墨色／炭灰色表面、中性边框、中性阴影，最多搭配一种克制的纯色产品色或 ANSI 强调色。

如果静帧中出现任何辉光或霓虹效果，必须拒绝该渲染，并在交付前移除这些效果。

目标与参考

使用真实的终端隐喻，在两秒内让人明白主题——不要使用随意的代码截图、清单 UI、仪表板或通用 AI 动画。

编码前先查看实际获批的示例：

  • assets/examples/terminal-install.mp4 — 命令 → 大号终端字样 → 真实 CLI 文本 → 成功状态。
  • assets/examples/outreach-sequence-generator.mp4 — 命令 → 状态 → 结构化生成内容。
  • 代码库示例 examples/kickbacks-spinner-terminals.mp4 — 多个 CLI 会话构成一个连贯的整体。

在 references/ 中有联系表时，请使用。延续其中的字体、密度、间距和动效，同时遵守上述零辉光规则。

背景与终端规格

  • 与所选投放目标完全匹配。
  • 4:3 插入画面：1440×1080，30fps，除非用户另有指定。
  • 9:16 全屏：1080×1920，30fps，除非用户另有指定。
  • 终端：#101214 / #15181B，炭灰色标题栏、1px 中性边框、中性黑色阴影。
  • 场景背景采用用户选择的暖色浅色、干净深色、浅色网格或深色网格。
  • 字体：终端内部仅使用等宽字体。优先使用 SF Mono、JetBrains Mono、IBM Plex Mono；也可使用 Berkeley Mono。
  • 文字：暖白色和柔和灰色。
  • 强调色：一种克制的纯色产品色，或柔和的终端绿，例如 #4F8F6D；不得使用荧光色 #39FF88。
  • macOS 红绿灯圆点可作为小型真实界面元素使用，不得将其用作装饰性色彩。

关键真实性规则

安装／日志场景应使用终端符号和流动的 CLI 文本，不要使用 UI 清单卡片：

~ $ codex skills load carousel-qa

        QA CHECK LOADED

        ( + Welcome to Carousel QA )
┌ installing carousel-qa...
◇ skill added: brand-rules ✓
◇ skill added: slide-fit-checker ✓
◇ skill added: remotion-frame-guard ✓
◇ skill added: export-reviewer

✓ carousel QA skill ready

要求：

  • 提示符以 ~ $ 或项目路径加 $ 开头。
  • 命令逐字符输入。
  • 可用 ┌ 开始一个区块。
  • 安装／进度行以 ◇ 为前缀。
  • 已完成的行以 ✓ 结尾。
  • 使用连续流动的纯文本终端内容，不要使用圆角清单组件。
  • 当前行显示闪烁的 ▊ 或竖线光标。
  • 大号 ASCII／终端字样可通过纯色文字淡入并放大，绝不可使用辉光。

避免：

  • 复选框 UI 或单独的大号勾选图标。
  • 终端内的 Emoji 和无衬线 UI 列表。
  • 终端日志使用药丸形元素、状态标签、分隔线、仪表板或嵌套卡片行。
  • 随机伪造的代码倾泻。
  • 将密集且难以辨读的日志用作装饰纹理。

透视与运动

  • 在与辅助物体相同的连通摄像机空间中构建终端。
  • 以受控透视效果进入场景，例如 perspective(...) rotateX(18deg–22deg)，并略微朝一个方向 rotateY。
  • 保持内容清晰易读，并大致面向正前方；倾斜效果应自然真实，而非扭曲变形。
  • 使用细微的缩放、淡入淡出和克制的缓动。
  • 结尾保持干净画面 20–30 帧。
  • 使用 useCurrentFrame()、spring() 和 interpolate() 驱动运动；不要使用 CSS 动画。
  • 条件允许时，按每个字符约一帧的速度输入命令。
  • CLI 行之间间隔 6–12 帧依次显示，并在每行之后显示末尾的检查标记。
  • 不要添加光晕脉冲、颜色脉冲、扫描线闪烁或装饰性扫光。

可复用模式

真实可信的技能安装
  1. 终端以受控透视效果进入场景。
  2. 输入一条真实可信的命令。
  3. 显示一个大型、扁平的 ASCII／终端文字：LOADED、VERIFY 或 DEPLOY。
  4. 使用 ◇ ... ✓ 依次显示 CLI 行。
  5. 用一句简短的成功提示结束操作。
命令 → 生成的输出
  1. 输入命令。
  2. 显示一条克制的扁平状态行。
  3. 显示两三个输出对象。
  4. 只有当生成的结构化输出是重点时，输出对象才可以使用卡片；使用中性色材质和一种克制的强调色。
Agent 运行／验证日志
  1. 输入一条合理的命令，例如 codex run "fix checkout bug"。
  2. 显示真实可信的操作：读取、复现、编辑、测试。
  3. 以 ✓ diff ready for review 或其他真实的状态结束。

除非提供的故事明确要求呈现对应的示例状态，否则不要虚构产品能力，也不要声称测试通过。

移动端清晰度

  • 每个插入画面只表达一个主要信息。
  • 主要命令、终端文字或成功状态必须在手机尺寸下依然清晰可读。
  • 4:3 插入画面在 9:16 画面中约占一半时，仍必须清晰可辨。
  • 微小的日志不能承载主要信息。
  • 不要添加冗余的旁白文字；屏幕上应展示真实的命令、文件名、UI 字符串和经过验证的输出。

首轮验收关卡

只有当以下每个问题的答案都为“否”时，才可以交付：

  1. 是否有格式或背景尚未确认？
  2. 是否存在霓虹、光晕、径向色彩晕染、荧光绿或青紫色处理？
  3. 终端是否看起来像检查清单、仪表板、玻璃卡片或通用 AI 模板？
  4. 场景是否只是因为出现了终端才变暗，而非用户主动选择了暗色？
  5. 是否有关键文字在目标尺寸下无法清晰阅读？
  6. 是否在存在真实材料时，仍使用了虚假的 CLI 结构、产品标识或输出声明？
  7. 成品的间距、克制程度和运动质量是否不及已批准的示例？

在内部反复修改，直至通过验收。

QA 与交付

  1. 执行类型检查／构建，或渲染最小且有意义的验证内容。
  2. 渲染命令输入、主要输出和结尾定格画面的静帧。
  3. 对照已批准的终端示例进行检查。
  4. 检查 MP4，确认没有裁切、透视效果不佳、文字过小、通用填充内容、任何光晕／霓虹效果或结尾画面乏力等问题。
  5. 交付 MP4，并注明尺寸、时长、准确的渲染命令和编辑器放置说明。

评论

支持 Markdown