GitHub-радар
Получи технический чертёж любого UI-компонента за один запрос
Скилл для Claude Code превращает компонент интерфейса — код, скриншот, ссылку или демо — в подробный чертёж с отступами, радиусами и слоями. Получаешь готовую схему без ручной разметки.
Это скилл — набор инструкций для агента, который рисует точную схему UI-компонента: отступы, промежутки, радиусы углов, слои и расположение на экране.
Когда пригодится
Пригодится, если ты проектируешь интерфейс через диалог с агентом и хочешь зафиксировать или показать результат дизайнерам или другим агентам. Не стоит использовать, если геометрия компонента часто меняется.
Плюсы
- Строит чертёж по коду, скриншоту, ссылке или демо
- Убирает текст и цвета — схема не устаревает при редизайне
- Можно передать дизайнерам, рецензентам или другим агентам
- В комплекте скилл для анимации готового чертежа
Минусы
- Чертёж нужно пересоздавать при каждом изменении геометрии
- Качество результата зависит от точности измерений агента
Как поставить — по шагам
- 1Открой Claude Code в папке своего проекта.
- 2Отправь агенту текст из блока ниже.
- 3Приложи свой компонент — файл кода, ссылку на демо, скриншот или Storybook-историю.
- 4Проверь готовый чертёж: подписи слоёв, радиусов, отступов и переменных.
- 5Попроси агента анимировать чертёж, если нужна короткая анимация.
Текст для агента
Текст для шага с агентом — скопируй и отправь (Claude Code, Codex, любой):
Вот репозиторий: https://github.com/enesozturk/dimensional-drawing — подключи этот skill к моему агенту (положи его в ~/.claude/skills/) и сделай dimensional drawing вот этого компонента [вставь файл, ссылку или скриншот своего компонента], покажи получившийся лист с подписанными слоями и радиусами.
▌ Ещё находки