Communitygithub.com

isometric

以2:1等距投影的冷静精确产品线图风格渲染镜头:白色或深色背景上仅用恒定2像素细线绘制,白色填充面使近处物体遮挡远处线条,圆角板片具有可见厚度,分层堆叠,重复零件网格,每帧一个微小的深色点缀。当用户提及等距、产品线图、技术插图、硬件分解视图或要求简洁的文档级图表风格时使用。

isometric 是什么?

isometric 是 motion-explainer 库中的一种渲染风格,专为生成冷静、精确的产品线图而设计。它采用严格的 2:1 等距投影(dimetric isometric),所有线条均为恒定 2px 细线,并在白色或深色背景上以白色填充面实现远近遮挡效果。该风格支持 Remotion 和 fframes 两种引擎,提供了 `<IsometricGrid>`、`<IsometricBlock>` 等组件,用于快速构建等距视角下的块、网格、标题板等元素。它特别适合技术插图、产品爆炸图、文档级图表等场景,开发者只需在 `$MOTION_STYLE` 环境变量或元数据中声明 `isometric`,即可将工作流无缝切换至该风格。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/boytegar/motion-skills/tree/HEAD/style/isometric

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

冷静、精确的产品线图,采用 2:1 等距投影,恒定细线和弹性安定效果。

这是 motion-explainer 库中的一种风格。它与其他风格一样提供三个部分:style.json 清单、Remotion 引擎和 fframes 引擎。流水线技能(motion-explainer、motion-script、motion-storyboard、motion-build、motion-qa)均通过 $MOTION_STYLE 环境变量引用风格名称,因此切换风格时工作流中的其他部分无需改动。

何时使用

当需求符合以下风格特征时,请选择此风格。首先阅读 docs/style-guide.md:它是权威说明,本文件仅为索引。

风格特征

  1. 仅使用 2:1 等距投影。不使用其他透视。
  2. 在 1080 宽度下恒定 2.0px 细线,根据当前缩放比例缩小以确保线条不会变粗。
  3. 面填充为白色,使近处物体遮挡远处物体的线条。
  4. 圆角板片和板材具有可见厚度,分层堆叠,以及重复零件的网格(如按键、通风口、柱体、接口)。
  5. 每帧一个微小的深色点缀,不超过一个。动画按帧播放并带有弹性安定效果,否则保持静止。

调色板:背景 #ffffff,轮廓和边缘 #a4a4ac,内部及后退线条 #e0e0e4,面为白色,一个深色点缀 #2a2b36

工具包组件

Remotion 组件,可从 ../lib/<file> 导入(工具包会同步到每个项目的 src/lib/ 目录):

组件说明
<IsometricGrid>淡色等距构造网格
<IsometricBlock x y w h d color>具有顶部、左侧和右侧面,且角度为正确 2:1 的块
<IsometricBanner text>细线横幅板
<IsometricCaptions text>深色标题条

没有孤立存在的元素

docs/style-guide.md 包含了经过测量的参考线宽和点缀规则。线宽不可协商;绘图前请先阅读。

引擎

引擎路径入口
remotionremotion/template/、kit/、sync_kit.sh、CATALOG.md、AGENT_BRIEF.md
fframesfframes/Cargo.toml、src/(lib、tokens、kit、look、video、main)、tools/ff.sh

已注册引擎:remotion、fframes。

搭建剧集

# 从库根目录,并已解析 MOTION_LIB
./core/new_episode.sh <series-dir> 01-slug Episode out-name --style isometric --engine remotion
./core/new_episode.sh <series-dir> 01-slug Episode out-name --style isometric --engine fframes

或者,在系列 SERIES.md / episode.json 中将风格命名为 "style": "isometric",然后让 motion_style_of 自动拾取。

此风格的 QA 检查

在每次联系单上检查以下项目,然后再宣布场景完成;motion-qa 中的其余检查表仍然适用。

  • 每个形状都位于 2:1 等距轴线上;无透视,无 3/4 视图。
  • 线宽恒定约 2px;近处面遮挡远处线条。
  • 面为白色;背景为白色或声明的深色背景。
  • 每帧恰好一个小深色点缀。
  • 动画按帧播放并带有弹性安定效果,非双帧播放。

文件

  • docs/style-guide.md
  • docs/style-prompt.md
  • remotion/CATALOG.md
  • remotion/AGENT_BRIEF.md
  • style.json:清单(画布、引擎列表、文档路径、音频根目录)
  • sample.png:一个代表性帧

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能