image-to-code — скилл для Codex: что делает и как установить
Переносит макеты, скриншоты и концепт-арты в интерактивный веб-интерфейс. Помогает воссоздать точный адаптивный фронтенд без ручной нарезки картинок.
npx skills add openai/plugins --skill image-to-code -a codexЧто делает image-to-code
Скилл требует готового графического файла — текстового описания ему недостаточно. Он замеряет отступы, находит похожие бесплатные шрифты и выбирает библиотеку иконок под стиль оригинала. При этом инструкция запрещает собирать графику кодом на CSS, верстать самодельные SVG или заменять иконки на эмодзи.
Для фонов и аватарок скилл запускает до трех параллельных субагентов. Они генерируют изображения через встроенный инструмент, пока главный агент пишет разметку. Если исходник рассчитан на телефон, макет оборачивается в системный каркас мобильного устройства.
Для запуска локального превью в ChatGPT Work Mode проект должен запускать Vite на хосте 0.0.0.0 и порту 4173. Этот инструмент стоит ставить тем, кому нужно быстро проверить идею интерфейса в браузере и не тратить время на ручную подготовку ассетов.
Какие задачи решает
- Сверстать интерактивный прототип сайта по скриншоту или дизайн-макету
- Сгенерировать недостающие фоны и аватарки через параллельных субагентов
- Подобрать подходящие бесплатные шрифты и иконки под стиль макета
- Развернуть мобильный интерфейс с системным окружением через готовый шаблон
Примеры запросов агенту
- Сверстай этот макет интернет-магазина в адаптивный интерфейс на React
- Реализуй прикрепленный скриншот мобильного экрана с помощью шаблона mobile-app
- Собери интерактивный прототип лендинга по последней сгенерированной картинке
Как установить image-to-code
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill image-to-code -a codex2Вручную: положить файлы
.agents/skills/image-to-code/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill image-to-code -a claude-code2Вручную: положить файлы
~/.claude/skills/image-to-code/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/image-to-code/
Вручную: положить файлы
.cursor/skills/image-to-code/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/plugins image-to-code2Вручную: положить файлы
.github/skills/image-to-code/SKILL.mdКомандой платформы
gemini skills install https://github.com/openai/plugins --path plugins/product-design/skills/image-to-codeВручную: положить файлы
.devin/skills/image-to-code/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора201
Весь набор →Похожие
Вопросы о image-to-code
Как установить image-to-code в Codex?
Выполните команду npx skills add openai/plugins --skill image-to-code в терминале.
Что делает скилл image-to-code?
Он переводит скриншоты, макеты и сгенерированные изображения в адаптивный фронтенд-код, самостоятельно подбирая шрифты, иконки и графические ассеты.
Можно ли запустить верстку только по текстовому описанию?
Нет, рабочий процесс требует прикрепленного графического файла, скриншота или результата генерации изображений перед началом работы.
