对话框尺寸规格图动画，展示尺寸线、镜头拉远与图层分解视图。
项目截图关于这个 Skill
两个 Skill 将 UI 组件绘制为黑白 HTML 尺寸规格图，并用镜头运动与图层分解将完成的图纸制作成动画。
为什么推荐
提供可复用的尺寸图示例、动画场景、测量规则及视觉检查步骤；使用前按任务确认浏览器与渲染依赖。
合集中的 Skills
2 个 Skills- 查看 →
Dimensional Drawing Sheets
制作独立 HTML 尺寸规格图，以黑白 SVG 视图、实测变量、分解图和细节视图描述组件几何结构。
- 查看 →
Dimensional Drawing Motion
将完成的尺寸图制作成 8–15 秒影片，逐步绘制线条、移动镜头并抬升图层，支持 Claude Motion 或无界面渲染器。
适合用来做什么
- 记录组件间距、圆角、层次与响应式位置。
- 把完成的技术图纸制作成简短的黑白动画。
用图纸描述结构
工作流在独立 HTML 图纸中输出黑白 SVG 示意图，以标题栏、平面视图、分解图、转角细节和变量表描述间距、圆角、层次与视口位置。界面文案用 HUG、FLEX、FILL 等中性占位结构表示。
尺寸使用变量编号与可核对的公式。缺失数值保持 [TBD]，除非用户要求，否则不加入品牌。实物采用有来源的尺寸与第三角投影视图。
把完成的规格图做成动画
动画入口以完成的尺寸图为输入，修改配套场景与样式，制作 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 编辑整理。
