script2animation

Overview

将本地脚本的真实用法转化为“离线 HTML 终端动画”，包含分镜、打字机效果、场景切换与重播/暂停控制，并严格使用相对路径与指定提示符样式。HTML终端动画设计使用frontend-design SKILL，场景文案使用brainstorming SKILL。

设计基调

• 背景底色：墨绿色系（页面与终端整体基调保持深墨绿风格），不得使用高亮浅色背景破坏终端观感。

• 默认布局：两栏并排，无外层大矩形外框（左侧终端 + 右侧“场景/说明”），不要再额外用一个大容器把两栏整体包成“大卡片/大矩形”。

• 用户偏好优先（配色可调）：当用户提出明确的配色偏好（例如“更绿”“更亮一点”“更黑一点”“更偏青绿”等），在不破坏“墨绿色系”与终端可读性的前提下，必须优先调整配色；不得以“推荐默认值/复刻模板”为由忽略。

• 允许调整的范围（建议）：仅在“深色墨绿系”内做微调（例如亮度上调约 10%–25%，或提高绿相/饱和度但避免荧光绿与浅色底）。

• 必须改动的三处：全局变量（:root 色板）、body 背景、以及 终端容器（.termWrap /.term ）。

• 每次配色偏好变更后，需在生成页面的说明区或构建日志中用 1 行记录“改动了哪些色值（列出新旧或至少列出新值）”，便于复现。

• 终端底色基准（推荐默认值）：

• 页面背景建议使用径向渐变：radial-gradient(1200px 800px at 20% 0%, #0e1510 0%, #0b0f0c 55%, #070a08 100%)

• 终端输出区底色建议使用“微弱绿光晕 + 深墨绿渐变”叠加：

• 光晕：radial-gradient(800px 600px at 20% 0%, rgba(52,208,88,.08) 0%, rgba(0,0,0,0) 55%)

• 底色：linear-gradient(180deg, #071009, #061008) （对应 --term-bg/#071009 与 --term-inner/#061008 ）

• 禁止用纯黑/灰黑（如 #000/#111/#1a1a1a ）直接替代终端底色，避免“发灰、失去墨绿质感”。

固定呈现样式（以“终端动画参考模板”为准）

• 两栏无外框：两栏并排，无外层大矩形外框。

• 整体居中：终端+右侧栏整体在页面内上下居中、左右居中（建议：body{display:flex; justify-content:center; align-items:center; min-height:100vh;} ；必要时用 padding 留出安全边距）。

• 尺寸写死：左列终端容器严格 800×600 px ；右列容器严格 高度=600 px 且 overflow:hidden 。

• 标题栏与尺寸标签：终端标题栏含三色按钮；右侧显示尺寸标签（格式 800×600 px ）。

• 右侧仅两块：仅“场景”卡 + “说明”卡；场景按钮横排（3 个一行）且 active 高亮；“场景”卡含 暂停/继续 与 重播 。

• 右列高度对齐：右列两块卡片累积高度必须与 600px 对齐；说明区内部滚动，不得撑高右列。

• 说明高度锁定：首帧即锁定说明区高度，切换场景不跳动（建议实现“先测量所有场景说明高度取最大值，再与右侧可用高度取 min(maxNeeded, available) ”的逻辑）。

• 终端输出清爽：不在终端内自动插入“相对路径基准/尺寸提示/结束提示”等说明文本（这些应在右侧说明/标题栏表达）。

Workflow（必须按顺序执行）

• 读取脚本文本内容

• 必须先读取脚本文件，确认入口与参数解析方式（argparse/click/typer/手写解析/硬编码），基于脚本内容给出准确的参数示例与输出提示。

• 若脚本不可读或缺失，先要求用户提供路径或内容。

• 获取真实帮助信息（优先）

• 若脚本支持 --help/-h 且安全可运行，优先运行并捕获真实输出。

• 优先运行脚本可行示例，并捕获真实输出结果。

• 编排至少 3 个场景（强关联脚本逻辑）

• 在完成脚本读取与真实帮助信息获取之后，使用brainstorming skills 来编排每个场景的文案效果实现，文案字数为300字（按中文字符计数，含标点；中英混排按字符计数）。

• 注意：技能调用顺序需遵守 using-superpowers ，但文案生成顺序仍必须按本流程执行。

• 场景1：快速介绍/帮助信息（推荐 --help ）。

• 场景2：最小可行示例或典型用例。

• 场景3：进阶用例/边界情况/输出文件检查或错误提示与修复。

• 生成单文件 HTML（CSS/JS 内联）

• 终端风格：经典 macOS Terminal（深墨绿背景 + 绿字命令 + 标题栏三色按钮）。

• 打字机效果：逐字输出，速度可分场景调整。

• 动画总时长约 120秒（±10 秒）。

• 页面离线可播放，不依赖外网。

• 终端动画设计使用frontend-design SKILL

• 自检清单（必须逐项满足）

• 输出路径正确、相对路径示例、提示符与颜色、场景切换、重播/暂停、三场景、输出准确性。

• 窗口尺寸一致（终端容器尺寸统一），场景切换前后 clientWidth/Height 不变。

• 说明区域按所有场景中“最长说明文本高度”预留空间，切换场景不发生整体布局跳动。

• 布局复现检查：两栏并排（无外层大矩形外框）；右侧仅“场景+说明”；场景按钮横排；说明区可滚动且高度锁定；尺寸标签存在且在标题栏右侧。

• 尺寸写死检查：终端容器 CSS 必须固定为 800×600 px （不允许用 min() /百分比/媒体查询改变该尺寸，除非用户明确要求改尺寸）。

硬性规范（必须遵守）

输入/输出与路径

• 只能使用相对路径理解与输出示例，禁止输出绝对路径。

• 输出文件：outputs/[脚本名]/animation.html （脚本名为 basename 去扩展名）。

• script2animation 为相对路径硬性特例：如需说明基准目录，必须明确以项目根目录为基准（不得使用绝对路径）。

• 在输出中必须明确提示“相对路径基准=项目根目录”，避免歧义。

终端样式

• 提示符固定：(base) lingguiwang@localhost ~ %

• 颜色：提示符白色、命令绿色、输出蓝色。

• 字体：等宽字体（优先 SF Mono /Menlo /Monaco ，fallback monospace ）。

• 禁止引用外部字体/图标或任何外部资源，保持离线可播放。

• 页面背景与组件背景应为墨绿色系（保持“深墨绿质感”与终端可读性），避免出现明显灰黑/纯黑导致质感偏差。

• 终端底色（推荐默认值）：--term-bg:#071009; --term-inner:#061008; ，并在终端输出区叠加淡绿色光晕（见“设计基调”）。

• 滚动条（必须）：当终端输出内容超过固定窗口（默认 800×600 px ）时，终端输出区域必须出现滚动条（例如 .screen{ overflow:auto; } ），不得用 overflow:hidden 裁剪内容。

默认布局（必须准确复现）

以当前已确认的页面为“标准布局”，后续生成动画应默认复刻此布局与组件结构（除非用户另行指定）。

• 两栏布局：左侧为 Terminal，右侧为“场景与说明”侧栏。

• 无外层大矩形外框：不要再额外用一个大容器把两栏整体包成“大卡片/大矩形”。

• 右侧仅保留两块：只允许“场景”和“说明”，不显示快捷键面板。

• 场景按钮：同一行横排（3 个按钮一行），并有 active 高亮；按钮文案默认不带方括号。

• 说明区：内容超出时滚动；高度锁定以避免切换场景跳动（见“窗口尺寸规则”）。

• 尺寸标签：默认显示终端尺寸标签 宽×高 px （放在标题栏右侧）。

• 终端尺寸（写死）：默认必须固定为 800×600 px，不得做响应式缩放或随屏幕改变（除非用户明确要求更改尺寸）。

窗口尺寸规则

• 所有场景共享同一终端窗口容器尺寸，不得按场景内容改变窗口大小。

• 窗口尺寸由统一布局规则控制（固定宽高或固定比例），禁止基于内容重新计算尺寸。

• 右侧列总高度必须等于 600px：右侧不得因内容溢出而增高；仅允许说明区内部滚动。

• 说明高度需在初始化阶段一次性测量所有场景说明文本高度并取最大值锁定，并与“右侧可用高度”取 min() ，首帧即使用锁定值，后续不再因内容变化调整。

• 说明高度测量应在 DOMContentLoaded 后进行；若字体加载影响高度，使用保守固定高度兜底。

• 默认显示“终端窗口尺寸标签”（固定像素或实时像素），放置在固定位置（如标题栏右侧或侧栏顶部），格式为 宽×高 px ；仅当用户明确要求不显示时才可移除。

输出准确性

• 禁止臆造参数、选项或输出。

• 若不能安全运行脚本：只展示真实 --help 或脚本内可严格推出的输出。

• 如需“期望输出”，基于脚本内容给出准确的参数示例与输出结果，不得冒充真实运行结果，并统一用 # 预期输出 标注。

说明文案语言与配色（必须）

• 说明文案必须为中文：包括参数/选项的介绍、注意事项、用法解释等，默认使用简体中文（除非用户明确要求英文）。

• 说明区强调色：说明区（右侧“说明”）需要有颜色区分与层级，默认使用天蓝色作为强调色（例如用于“参数名/选项名/关键术语/小标题/提示标签”等）。

• 终端输出真实性不变：终端窗口内的 --help 原文输出允许是英文（因为来自真实 help），但说明区必须提供对应的中文解释与要点总结。

分镜/交互（必须实现）

• 至少 3 场景，且与脚本逻辑强关联。

• 右侧场景切换按钮文案默认为：快速介绍 、典型用例 、进阶用例 ...(以场景数量为准，需要有按钮作用)。

• 点击场景按钮：立即跳转并从该场景开头重新播放。

• 再增加“重播/暂停”控制：

• 暂停：动画立刻停止，按钮文案变“继续”。

• 继续：从暂停点继续。

• 重播：从当前场景开头重播（允许独立按钮或组合按钮）。