enesozturk/dimensional-drawing

размерный рисунок -️-

Дайте ему компонент пользовательского интерфейса, верните его на одну страницу. Паддинги, зазоры, радиусы углов, слои и размещение в режиме просмотра, измеренные и помеченные как размерные чертежи Apple.

Установить Используйте его · Сделайте движение Примеры

Apple публикует размерные чертежи для каждого устройства, чтобы производители аксессуаров могли создавать подходящие корпуса. Они спокойны, плотны и красивы: один лист, несколько видов, крошечные круги деталей, цифры повсюду.

Это РЕПО учит вашего агента рисовать ваши компоненты таким же образом. Карта или диалог становится спецификационным листом, который вы можете передать кому угодно, и они перестраивают его архитектуру: прокладки, зазоры, радиусы, слои, то, как он сидит в поле зрения. Копия и контент специально исключены, поэтому рисунок остается верным при изменении текста.

Что находится внутри

###Правила дома

[править] [скрыто] [скрыто] | ️ ** Монохром ** | только серые; вещи говорят отдельно по весу линии, тире и люки | Архитектура, а не содержание 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