Terminal replica 是一项面向内容创作者的制作方法技能,目标是在生成的图形、GIF 或视频画面中,按照使用者自己的真实环境来绘制终端和 CLI 智能体界面,而不是套用通用的绿字黑底“黑客终端”样式。资料明确覆盖 Claude Code、Codex CLI、Gemini CLI 三类工具的画面还原。
一、用途
该技能用于在视频帧、GIF 或静态图中复现真实的终端外观,使发布出去的素材与制作者实际使用的工具和配置一致。资料强调:通用化的终端画面会显得虚假,因此应以真实截图作为依据。
二、采集真实基准(Method)
第一步是截取自己运行该工具的真实终端截图,并用取色器或 PIL.Image.getpixel 采样背景色、前景色和强调色;资料指出实时截图优于文档中的任何规格。随后需记录五项配置事实:
- 模拟器类型(Terminal.app、iTerm2、Warp、VS Code 集成终端、Ghostty 等)。
- 字体族与字号;例如 macOS 上的 VS Code 默认使用 Menlo 12。
- 主题配色:背景、默认前景及 16 种 ANSI 颜色。
- Shell 提示符形态,例如默认 macOS zsh 的 user@host ~ %,或 powerline、starship 布局。
- 状态栏格式(若智能体配置了自定义状态栏)。
转录内容应取自自己的会话日志:Claude Code 将日志存放在 ~/.claude/projects/<project-slug>/*.jsonl 下,其中 assistant 和工具调用回合可反映真实出现的文本。绘制完成后,需把渲染结果与真实截图并排比对,再进行发布。建议在自己的项目中维护一个 JSON 或 Python dict 配置来存放这五项事实,由渲染脚本读取,而不要硬编码到共享代码中。
三、Claude Code TUI 要素
资料按从上到下的顺序描述了启动界面(需对照已安装版本验证):左侧为像素风 logo,是 Anthropic 陶土色(#D97757)的块状生物造型,约 5×4 个粗像素并带脚,不应画成 emoji 或机器人;右侧为标题文本块,含加粗白色的 Claude Code、灰色版本号、灰色模型与账户行、灰色工作目录路径;警告区包含警告符号和橙黄色文字(如“N MCP servers need authentication”)以及灰色的 · run /mcp;通知块为橙色左边框 │、橙色加粗标题行、默认前景色正文和蓝色下划线链接;提示符为 ❯ 加暗灰占位文字,首字符处有块状光标;底部为状态栏(若已配置),需按自己的格式绘制,包括绿色实心条与暗色空条;权限模式激活时,状态栏下方还有模式行(例如“bypass permissions on (shift+tab to cycle)”)。
转录形态方面:助手工具调用显示为 ⏺ Bash(git status),圆点按状态着色(成功为绿色),工具名为白色,参数为暗色;结果续行显示为 ⎿ 加输出首行(暗色),以及灰色的 … +N lines;工作动画为单个符号循环 ✳ ✶ ✻ ✽,加动名词(如“Reticulating…”)和灰色 token 计数;用户回合以 > 加纯文本表示。资料特别要求不得展示不存在的交互元素:TUI 内不应出现标签页、菜单栏或假按钮。
动画方面:光标按约 530ms 周期以方块闪烁,spinner 约 120ms 步进,输出按整行块状出现,只有用户输入是逐字符显示。
四、Codex CLI 与 Gemini CLI
Codex CLI 在同一终端中以 codex 命令调用,因此背景与字体与前述一致;横幅为极简的 >_ OpenAI Codex (vX.Y.Z) 风格标题行加蓝色强调,下方是由圆角制表符(╭─╮ │ ╰─╯)绘制的带边框输入框和暗灰占位文字(如“Ask Codex to do anything”),底部为暗灰快捷键行。发布前应在临时目录实际运行 codex 并截图验证,同时检查 ~/.codex/config.toml 是否设置了自定义主题。
Gemini CLI 要求不要凭记忆伪造:如需使用,应在临时环境中安装(npm i -g @google/gemini-cli)、运行并截图。若无法验证,资料给出已知形态作为草稿参考:蓝紫渐变的 GEMINI 大字 ASCII 横幅、提示列表、带边框输入框(> Type your message)以及含 cwd、沙箱说明、模型名和上下文百分比的底部状态行;未经核实的渲染需标注为草稿。
五、渲染配方(PIL)
以 2 倍分辨率渲染,再用 LANCZOS 缩小 50% 实现抗锯齿;使用从采集配置中得到的等宽字体(如 macOS 的 /System/Library/Fonts/Menlo.ttc);字体缺失的 TUI 符号(圆点、折线、spinner)用矢量图形绘制,不得出现豆腐块;行高约 1.35em,左侧留白约 2 个字符,终端内不加投影;窗口外框可选择与模拟器一致的平面面板,或直接裁掉只显示内容。
六、示例值与完成标准
资料给出一个仅供示例的 VS Code Dark Modern 典型配置:VS Code 集成终端、Menlo 12、背景 #181818、默认前景 #CCCCCC,并列出 ANSI 常规与亮色共 16 色,提示符为 user@host ~ %,自定义状态栏示例为“🤖 Model | ctx: 0% | s:▰▰▰▰▰ 87% | $4.06”,实心条用绿色 #23D18B、空条为暗色。资料强调所有值都应替换为自己采集的结果。
完成标准包括:颜色采样自本人终端的真实截图或匹配采集配置;等宽字体与模拟器一致且不用 emoji 替代 logo;转录行复制或改编自真实会话日志;状态栏若展示则与本人格式一致;Codex 与 Gemini 横幅经实际验证,或明确标注为未验证。