enesozturk/dimensional-drawing

️

UI 구성품을 제공하여 한 페이지의 기술 도면을 다시 가져옵니다. 패딩, 갭, 코너 레이디, 레이어 및 뷰 포트 배치, 측정 및 애플의 치수 도면과 같은 라벨.

설치 · 사용 · 그것을 이동 · 이름 *

---

Apple은 모든 장치에 대한 치수 도면을 게시하므로 액세서리 제조업체는 적합한 사례를 만들 수 있습니다. 그들은 평온하고 짙은 아름답습니다. 한 장, 몇 번의 전망, 작은 세부적인 원형, 어디 번호.

이 repo는 에이전트가 ** 구성 요소 ** 같은 방법을 그리는 것을 가르칩니다. 카드 또는 대화 상자는 누구에게도 손이 될 수 있으며 architecture : 패딩, 갭, 레이디, 레이어, 뷰 포트에 앉아있는 방법. 복사 및 내용은 목적에 남아 있으므로 그림은 텍스트가 변경 될 때 true를 유지합니다.

내부는 무엇인가?

집 규칙

인포메이션 |—||| | ♀️ **모노크롬 ** | 그레이스만; 일체는 선중량, 다시 및 모자치로 나뉩니다 | | Ar Architecture, not content | [T0]], ACTION · HUG, CONTENT SLOT · FILL | Variable, not number | S1, R2], H1 = 2·S1 + H3, R2 = R1 − B − S6]

dimensional-drawing ✏️📐

Give it a UI component, get back a one-page technical drawing of it. Paddings, gaps, corner radii, layers and viewport placement, measured and labeled like Apple’s dimensional drawings.

Install · Use it · Make it move · Examples

---

Apple publishes dimensional drawings for every device so accessory makers can build cases that fit. They are calm, dense and beautiful: one sheet, a few views, tiny detail circles, numbers everywhere.

This repo teaches your agent to draw your components the same way. A card or a dialog becomes a spec sheet you could hand to anyone and they would rebuild its architecture: paddings, gaps, radii, layers, how it sits in the viewport. Copy and content are left out on purpose, so the drawing stays true when the text changes.

What’s inside 🎁

skills/
├── dimensional-drawing/          the drawing skill
│   ├── SKILL.md
│   └── examples/                 card + dialog sheets (single HTML files)
└── dimensional-drawing-motion/   turns a sheet into a ~10 s film
    ├── SKILL.md
    ├── templates/                reference scene + stylesheet
    └── adapters/
        ├── claude-motion.md      Claude's Motion artifact (primary)
        └── headless/             Playwright + ffmpeg, no Claude needed

The house rules

Install

Claude Code

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 CLI, or point your agent at the SKILL.md files.

npx skills add enesozturk/dimensional-drawing

Use it

Ask for a drawing and point at the source (a repo file, a Storybook story, a URL, a screenshot):

Make a dimensional drawing of the Card component in src/components/Card.tsx

Draw the anatomy of our settings dialog, same style as the examples