Yueban Image to Code — скилл
yueban-image-to-code
Скилл для Codex переносит скриншот мобильного интерфейса в код на холсте 750 px и вырезает прозрачные PNG.
- 129 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл запускает локальные скрипты Python над вашими картинками и пишет файлы в проект.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/yueban-image-to-codeОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл запускает локальные скрипты Python над вашими картинками и пишет файлы в проект.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Yueban Image to Code воспроизводит выбранную картинку интерфейса или дизайн-скриншот в HTML, CSS и JS на холсте шириной 750 px. Масштаб считается как `750 / ширина исходника`, раскладка и отступы не улучшаются: исходная картинка считается единственным источником. Агент ведет файл `layers.manifest.json` с рамками, типами и порядком слоев, показывает рамки вырезаемых областей, экспортирует прозрачные PNG для аватаров, иконок и иллюстраций, оставляет текст редактируемым, а простые формы собирает средствами CSS. Результат проверяют четыре скрипта Python: `preview_bboxes.py`, `extract_png_asset.py`, `audit_png_assets.py` и `compare_images.py`.
Для кого. Фронтенд-разработчикам и верстальщикам, которым дали PNG-макет мобильного экрана и нужен точный перенос с вырезанными ресурсами.
Подходит, если
- Макет мобильной страницы лежит картинкой, а исходника в Figma нет.
- Иконки и иллюстрации вырезают с прозрачным фоном, а не подбирают из библиотеки.
- Готовую верстку сверяют с макетом наложением на оригинал.
- Текст на экране должен остаться живым, а не растрированным.
Не подходит, если
- Нужна адаптивная верстка: скилл фиксирует холст 750 px и запрещает перестраивать компоновку.
- Макет хотят улучшить, но правила скилла запрещают менять отступы и заменять ресурсы похожими.
- Исходник лежит в Figma: удобнее подключить MCP для Figma.
Пример запроса к агенту
Используй `$yueban-image-to-code`: переведи выбранный UI-скриншот в код и выгрузи прозрачные PNG для иконок.Ограничения
Скилл вызывается в Codex как `$yueban-image-to-code`, настройки лежат в `agents/openai.yaml`. Холст всегда 750 px, подход рассчитан на мобильные экраны. Области для вырезки подтверждают по превью рамок до экспорта, автообрезка запрещена. Для скриптов проверки нужен Python. Скилл не придумывает недостающее: если нужного ресурса нет на исходной картинке, его не заменяют иконкой из библиотеки или сгенерированным изображением. Лицензия в репозитории не указана, README на китайском.
Как отключить. Удалите папку `~/.codex/skills/yueban-image-to-code`. Уже созданные страницы и PNG в проектах останутся.
Частые вопросы
Куда ставить скилл?
Папку кладут в `~/.codex/skills/yueban-image-to-code`, затем вызывают `$yueban-image-to-code`.
Что хранится в манифесте слоя?
Идентификатор, тип (`bitmap` или `text`), рамки в исходных и масштабированных координатах, `z_index` и путь к ресурсу.
Как проверить вырезанные PNG?
`audit_png_assets.py` с флагом `--require-transparent-bg` проверяет прозрачность, прилегание к краю и размеры.
Как сравнить итог с макетом?
Запустить `compare_images.py reference-750.png render-750.png --json` и просмотреть наложение.
Что скилл делает с текстом?
Оставляет его редактируемым слоем, а не частью растровой картинки. Простые формы собирает на CSS.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл и CLI превращают скриншот или текстовую идею в редактируемый интерфейс с кодом и отдельными картинками.
design-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
imagegen-skills учит агента рисовать дизайн-картинки: макеты сайтов, экраны приложений, бренд-борды, и строит сайт по ним
Скилл-движок дизайна для локальных агентов: мокапы, прототипы, лендинги, дашборды и слайды в виде самодостаточного HTML прямо в редакторе
Скилл для Codex: три разных визуальных концепта, ревью по скриншотам и чистка лишнего, чтобы интерфейс не выглядел шаблонно.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Yueban Image to Code (эта карточка) | нет | 129 | ||
| Figma To Code MCP — макет Figma в код | нет | API-ключ | 7 | отдает агенту макет из Figma через MCP; Yueban работает с растровой картинкой и вырезает ресурсы |
| Image to Editable PPT | нет | 3 327 | пересобирает слайды из картинок в редактируемый PowerPoint; Yueban строит код мобильного интерфейса |
Коротко о README
README задает принципы: исходник неприкосновенен, масштаб один для всех элементов, ресурсы берутся только из текущей картинки. Перечислены восемь шагов работы и критерии приемки.