对话框尺寸规格图动画，展示尺寸线、镜头拉远与图层分解视图。
项目截图关于这个 Skill
在绘图 Skill 之后使用，或提供已有尺寸图。修改配套场景与 CSS，同时保留黑白线条、变量标签和不依赖文案的 UI 占位结构。
为什么推荐
提供可复用的尺寸图示例、动画场景、测量规则及视觉检查步骤；使用前按任务确认浏览器与渲染依赖。
适合用来做什么
- 通过简短的绘图与分解视图动画说明组件结构。
把完成的规格图做成动画
动画入口以完成的尺寸图为输入，修改配套场景与样式，制作 8–15 秒影片：线条逐步绘制，镜头拉远，图层抬升成分解视图，最后展示整张图纸。参考影片为 11 秒。
可使用 Claude Motion 适配器，或配套的 Playwright 与 FFmpeg 渲染器。场景由时间直接决定，可独立检查任意帧；音乐和旁白仅在用户要求时添加。
| 命令 | 用途与使用时机 |
|---|---|
cd skills/dimensional-drawing-motion/adapters/headless && npm install | 在克隆的仓库中安装无界面渲染依赖。 |
node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4 | 在 headless 适配器目录运行，渲染作者的参考影片。 |
安装上游 Skills
两个成员是同一仓库中的任务入口：绘图任务生成图纸，动画任务使用完成的图纸。本收录链接到作者提供的免费 MIT 许可资源。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add enesozturk/dimensional-drawing | 选择绘图及动画 Skill，并保留配套文件。 |
使用前需要了解
- 提供组件源码、Storybook、网址、设计文件或截图。无法确认的尺寸保留为 [TBD]；实物尺寸须有公开规格来源。
- 保留各 Skill 目录中的示例、模板与适配器，使用浏览器渲染测量组件并检查最终图纸。
- 无界面动画渲染需要 Node.js 18+、Playwright、Chromium 和 FFmpeg。作者主要适配 Claude Motion；上游未测试 Remotion、Motion Canvas、GSAP 或 Lottie 集成。
支持的 Agent
Claude CodeCodex CLICursorGitHub CopilotDeepSeek HarnessGemini CLIGrok BuildHermes AgentOpenCodePiKiroRovo DevQoderMistral VibeGoogle Antigravity
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
