enesozturk/dimensional-drawing

选用指南

AI 根据 README 整理 · 2026/10/25 23:26:38

使用方式

通过Claude Code或claude.ai添加技能，或使用skills CLI安装，然后通过自然语言请求生成图纸。

查看 README 依据

| 🙅 **Never invent values** | unknowns stay `[TBD]` | ## Install **Claude Code** ```bash git clone https://github.com/enesozturk/dimensional-drawing cp -r dimensional-drawing/skills/* ~/.claude/skills/ ``` **claude.ai / Claude desktop:** zip a skill folder (for example `skills/dimensional-drawing`) and add it under *Settings → Capabilities → Skills*. **Any other agent** (Codex, Cursor, Gemini CLI, …): use the [`skills`](https://skills.sh) CLI, or point your agent at the `SKILL.md` files. ```bash npx skills add enesozturk/dimensional-drawing ``` ## Use it

部署要求

使用无头渲染器需要Node 18+和ffmpeg，且仅测试过Playwright (Chromium)。

查看 README 依据

| **With Claude** | ask *"animate this drawing"*. Claude builds it in the **Motion** artifact and you export MP4. This is the primary target and where the timing was tuned. | | **Without Claude** | `cd skills/dimensional-drawing-motion/adapters/headless && npm install`, then `node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4`. Needs Node 18+ and ffmpeg. | > [!NOTE]

> Optimized for Claude Motion. The headless renderer is tested with Playwright (Chromium) + ffmpeg. Other animation libraries (Remotion, Motion Canvas, GSAP, Lottie…) are **not tested**. ## Examples **Dialog**: fixed width, scrim, viewport placement, header controls, footer actions <img src="assets/dialog-sheet.png" alt="Dimensional drawing of a dialog component" width="100%"> **Card**: flexible width, body well, nested corner, shadow envelope <img src="assets/card-sheet.png" alt="Dimensional drawing of a card component" width="100%">

已知限制

动画技能主要针对Claude Motion优化，其他动画库未测试。

查看 README 依据

> Optimized for Claude Motion. The headless renderer is tested with Playwright (Chromium) + ffmpeg. Other animation libraries (Remotion, Motion Canvas, GSAP, Lottie…) are **not tested**. ## Examples **Dialog**: fixed width, scrim, viewport placement, header controls, footer actions <img src="assets/dialog-sheet.png" alt="Dimensional drawing of a dialog component" width="100%"> **Card**: flexible width, body well, nested corner, shadow envelope <img src="assets/card-sheet.png" alt="Dimensional drawing of a card component" width="100%">