mcpField
B
breakdown

breakdown

github.com/artemnovitckii创意与媒体75594 次安装2 周前更新
代码仓库

关于 breakdown

用于 Claude Code 的技能，可生成带六层标签的手机拆解动画视频。用户通过 JSON 规格提供标签和视觉细节；模板还可将形状改为其他扁平分层物体。

主要功能

  1. 01六层手机拆解动画
  2. 02自定义标签与视觉细节
  3. 03基于 JSON 的渲染规格
  4. 04支持其他物体模板
  5. 05PNG 快照检查

适用场景

  1. 01制作手机部件说明视频
  2. 02创建带标签的分层物体动画
  3. 03检查组装与拆解画面

安装

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

$npx skills add https://github.com/artemnovitckii/claude-animation-skills --skill breakdown

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

附带文件build.pytemplate.html

详细介绍

/breakdown

┌──────────────────────┐
│ PHONE / EXPLODED VIEW│  mono header
│   ▱▱▱▱▱▱ ──── 01 Glass
│   ▱ 9:41 ▱ ── 02 Screen
│   ▱▱▱▱▱▱ ──── 03 Frame │  layers lift apart, the phone turns slowly
│   ▱▱▱▱▱▱ ──── 04 Board │  leader lines draw out to the labels
│   ▱▱▱▱▱▱ ──── 05 Battery
│   ▱▱▱▱▱▱ ──── 06 Back  │
└──────────────────────┘

首次使用

此技能的文件夹就是 Claude Code 加载技能时显示的“基础目录”。

SKILL_DIR="<base directory of this skill>"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -s "$KIT/node_modules/three/build/three.module.js" ] || bash "$KIT/setup.sh"

需要 ffmpeg 和 Node。它会在无头 Chrome 中使用 WebGL 渲染。

步骤

  1. 标签。 询问这张分解图的用途。模型是一部手机，因此标签是用户对其六层结构的看法，从顶部开始依次为：盖板玻璃、显示屏、中框、主板、电池和后盖。标签可以是字面描述（“Battery / 3,582 mAh”），也可以是玩笑（“Battery / 永远不够用”）。
  2. 规格。 编写 <name>.breakdown.json（见下文）。
  3. 构建。 运行 python3 "$SKILL_DIR/build.py" <spec.json>。3D 渲染大约需要 1.5 分钟，大部分时间都花在 HyperFrames 等待 WebGL 上（出现 sub_timeline_readiness_timeout 警告是正常的）。先使用 --snap 3.8 运行，检查标签。
  4. 检查图表：每个标签都位于手机右侧、红色边框内，编号从上到下依次为 01 到 06。
  5. 交付 mp4 文件路径。

规格

{
  "title": "Phone", "subtitle": "Exploded view",
  "labels": [["Cover glass", "toughened · 0.6 mm"], ["OLED display", "6.3 in · 120 Hz"], ["Titanium frame", "grade 5 · 7.8 mm"],
             ["Logic board", "3 nm chip · 8 GB"], ["Battery", "3,582 mAh"], ["Back glass", "matte · magnet ring"]],
  "time": "9:41", "date": "Saturday 1 November", "accent": "#F08A5D"
}
  • labels：恰好 6 个，从顶层开始依次排列，每个格式为 ["名称", "简短说明"]。名称最多约 16 个字符，说明约 22 个字符。["", ""] 会隐藏标签。编号会按屏幕上的顺序添加。
  • title / subtitle：标题栏内容，以大写字母显示。
  • time / date：锁屏显示的时间和日期。
  • accent：标签编号、引导线圆点和电池条纹的颜色（十六进制）。
  • hold（可选）：结尾额外停留的秒数。out（可选）：输出路径。

其他物体

规格只会更改文字，不会更改形状。要制作其他扁平分层物体（平板电脑、笔记本电脑上盖、卡包、智能手表），请将 "$SKILL_DIR/template.html" 复制到规格文件旁边，并在规格中添加 "template": "template.html"。在副本中：

  • PW、PL、PR 用于设置轮廓（宽度、长度、圆角半径）。slab(w, l, r, thickness, material) 会制作一个圆角层，tex(w, h, draw) 会在其上绘制画布纹理（参见电池和屏幕）。
  • 每个 part(y) 都是一层；y 表示爆炸图中该层浮起的高度。Y0 保存组装状态下各层的高度，ORDER 指定各层的移出顺序。
  • ANCHORS 指定每个标签引导线的起点：[部件索引, [该部件上的 x、y、z 坐标]]。 每次修改后都使用 --snap 1.0,3.8 检查：1.0 时为组装状态，3.8 时为爆炸图并带有标签。

风格

  • 最多使用六个标签，简短直白。说明应是事实，或一个冷面笑话，绝不要写成口号。
  • 保留深色背景和右侧标签栏；文字不能遮挡手机。

评论

支持 Markdown