enesozturk/dimensional-drawing

寸法図 ️️️

UIコンポーネントを付与し、1ページ目の技術的な図面を返します。 パディング、ギャップ、角半径、レイヤー、およびビューポート配置、Appleの寸法図のように測定およびラベル付け。

インストール・ 利用する・ 動くこと・ 事例紹介

お問い合わせ

Appleは、すべてのデバイス用の寸法図を公開しているため、アクセサリメーカーは適切なケースを作成できます。 彼らは落ち着いて、密かで美しいです: 1枚のシート、いくつかのビュー、小さな詳細サークル、どこでも数字。

このリポジトリは、あなたのコンポーネント**を同じ方法で描画するためにあなたのエージェントを教えます。 カードまたはダイアログは、誰にでも手渡すことができるスペックシートになり、アーキテクチュア:パディング、ギャップ、半径、レイヤー、ビューポートに座る方法を再構築します。 コピーやコンテンツは目的外に残っているため、テキストが変更されたときに図面は真にとどまります。

閉じる

家のルール

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | お問い合わせ | ◯★☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ | TITLE SLOT · FLEX, [ACTION · HUG], [CONTENT SLOT · FILL] | 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