dimensional-drawing — скилл
Скилл рисует UI-компонент как чертеж Apple: один лист с отступами, радиусами и слоями, плюс ролик из этого листа.
- 2 084 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Основной скилл читает исходный файл и пишет один HTML-файл. Для ролика без Claude запускается `render.mjs` с Chromium и ffmpeg.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/dimensional-drawingОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Основной скилл читает исходный файл и пишет один HTML-файл. Для ролика без Claude запускается `render.mjs` с Chromium и ffmpeg.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `dimensional-drawing` превращает компонент интерфейса в одностраничный технический чертеж по образцу размерных чертежей Apple для аксессуаров. Исходником служит файл репозитория, история Storybook, адрес страницы или скриншот. На выходе один самодостаточный HTML-файл: блок с названием и ключевыми переменными сверху, затем лист с планом, разнесенными слоями, деталями скруглений и таблицами значений. Чертеж показывает устройство компонента, а не его содержимое: вместо текста стоят слоты вроде `TITLE SLOT · FLEX`. Размеры записаны переменными, например `S1` или `R2 = R1 − B − S6`, и таблица связывает каждую переменную со значением. Неизвестное остается пометкой `[TBD]`, значения агент не придумывает. Чертеж монохромный, различия передают толщина линий, штрихи и штриховка. Второй скилл, `dimensional-drawing-motion`, превращает готовый лист в ролик примерно на 10 секунд: камера движется по листу, пока линии прорисовываются, а слои поднимаются в разнесенный вид.
Для кого. Дизайнерам и фронтенд-разработчикам, которым нужен точный чертеж карточки, диалога или кнопки для передачи, ревью или документации дизайн-системы.
Подходит, если
- Разработчик получает макет диалога и хочет увидеть отступы, радиусы и поведение во вьюпорте на одном листе.
- Документация дизайн-системы нуждается в схеме устройства карточки с таблицей переменных.
- Ревью компонента проходит по чертежу: слои, вложенные скругления, тень и габариты.
- Лист нужно превратить в короткий ролик для поста или презентации.
- Для физического изделия требуются три проекции и разрез по опубликованным размерам.
Не подходит, если
- Нужна цветная иллюстрация или макет страницы: чертеж монохромный и описывает один компонент.
- Требуется отрисовка реального текста и контента: скилл рисует слоты вместо них.
- Ролик нужен в Remotion, Motion Canvas, GSAP или Lottie: автор их не проверял.
Пример запроса к агенту
Сделай dimensional drawing компонента Card из `src/components/Card.tsx` в стиле примеров из репозитория.Ограничения
Движение настроено под артефакт Motion в Claude, это основной путь. Без Claude ролик собирает скрипт `render.mjs` в папке `adapters/headless`: нужны Node 18 или новее, Playwright с Chromium и ffmpeg. Автор проверил только эту связку, другие библиотеки анимации не тестировались. Чертеж создается в одной светлой теме, а размеры, которых нет в источнике, остаются `[TBD]` и рисуются условной схемой. Для физических изделий агент берет только опубликованные характеристики и помечает расхождения источников словом `CONFLICT`.
Как отключить. Удалите папки `dimensional-drawing` и `dimensional-drawing-motion` из `~/.claude/skills/` и откройте новую сессию.
Частые вопросы
Как поставить скилл в Claude Code?
Выполните `git clone https://github.com/enesozturk/dimensional-drawing`, затем `cp -r dimensional-drawing/skills/* ~/.claude/skills/`. Для Codex, Cursor и Gemini CLI автор советует CLI `skills`: `npx skills add enesozturk/dimensional-drawing`.
Что получится на выходе?
Один HTML-файл: блок с названием и ключевыми переменными, затем лист с планом, разнесенными слоями, деталями и таблицами. В claude.ai его публикуют как артефакт.
Как собрать ролик без Claude?
В `skills/dimensional-drawing-motion/adapters/headless` выполните `npm install`, затем `node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4`. Нужны Node 18 и ffmpeg.
Работает ли скилл с физическими вещами?
Да. Агент рисует три проекции и разрез в миллиметрах по опубликованным размерам, а остальное оставляет пометкой `[TBD]`.
Можно ли сделать чертеж по скриншоту?
Да. Источником может быть файл репозитория, история Storybook, адрес страницы или скриншот.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл оживляет любой рисунок кодом: персонажей, воду, дым, значки и целые сцены в React Native и SwiftUI без ощущения слайд-шоу
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Коротко о README
Автор вдохновился размерными чертежами Apple, которые нужны производителям чехлов. Репозиторий учит агента рисовать так же компоненты интерфейса и содержит два примера: карточку и диалог.