Image to UIавтор UIZZE

Image to UI Skill.

Реализуйте интерфейс, который вы уже видите. Image to UI рассматривает скриншот или макет как визуальную спецификацию, сохраняет существующий стек проекта и просит вашего агента отрисовать результат и сравнить его, прежде чем заявлять о совпадении.

Скриншот в код
Сопоставление с образцом
Реализация UI

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · image-to-uiSKILL.md

Задача Реализация UI по скриншоту Результат • Код интерфейса в существующем проекте • Настоящий текст и элементы управления, а не плоский скриншот • Сводка сравнения с оставшимися расхождениями Перед началом Предоставьте читаемое эталонное изображение, целевой вьюпорт, доступ к проекту и доступные ресурсы. Для проверки визуального совпадения нужна отрисовка в браузере. Аккаунт UIZZE и подключение MCP не требуются.

Редакционная сводка · источник проверен 2026-10-12 · не сгенерированный пример

01 Что делает навык

Изображение как спецификация

Этот краткий навык нацелен на воспроизведение уже принятого визуального решения, а не на поиск нового художественного направления. Описанный ниже процесс основан на источнике; это не выполненная реконструкция.

Процесс по источникуНе тест выполнения

Рабочий подход

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

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

Ожидаемые результаты

Редактируемый код интерфейса на стеке целевого проекта с подходящими повторно используемыми компонентами
Запрошенные элементы управления, подключённые к существующему поведению, без выдуманной серверной функциональности
Краткий отчёт о фактически выполненных визуальных сравнениях, оставшихся различиях и отсутствующих ресурсах

Смотреть пример задания

От образца к сравнению

01
Изучите само изображение
Читайте само изображение, а не только имя файла или извлечённый текст. Перед правкой кода определите размеры, видимую область, выравнивание, типографику и ресурсы.
02
Стройте в эталонном размере
Сопоставьте иерархию, переносы, отступы и обрезки в существующем стеке. Используйте готовые компоненты, если они воспроизводят образец; не подгоняйте его под несвязанные настройки по умолчанию.
03
Отрисуйте и исправьте
Снимите работающий экран в том же вьюпорте. Сначала сравните крупные различия вёрстки и пропорций, затем типографику, цвет и мелкие детали; после изменений отрисуйте снова.
04
Проверьте запрошенные варианты
После установления эталонного размера проверьте запрошенные адаптивные размеры и работу элементов управления. Сообщайте об оставшихся расхождениях, а не обещайте пиксельную точность.

02 Когда использовать

Когда использовать

Выбирайте Image to UI, когда визуальное направление уже определено и его нужно точно реализовать.

Хорошо подходит

Утверждённый макет экранаПревратите предоставленное изображение дизайна в экран существующего приложения, сохранив видимую иерархию и содержимое.
Пересборка по скриншотуВоссоздайте образец, исходный файл дизайна которого недоступен, явно указав отсутствующие шрифты или изображения.
Точечная визуальная правкаПриблизьте реализацию к известному образцу, используя снимки в том же вьюпорте и список оставшихся различий.

Ограничения, которые стоит учесть

Скриншот не определяет скрытое поведениеНевидимые разделы, ответы сервера и дополнительные экраны не входят в образец. Предоставьте для них требования, а не ждите, что навык додумает продукт.
Точных ресурсов может не хвататьНавык требует сообщать об отсутствующих шрифтах, значках и изображениях. Он не может обеспечить точное визуальное совпадение, если нужные ресурсы недоступны.
Для точности нужны доказательства отрисовкиПравдоподобная реализация или успешная сборка не подтверждает сходства. Если среда не может отрисовать экран, визуальное совпадение остаётся непроверенным.

Подготовьте эти данные

Читаемый образец и вьюпортПриложите само изображение и укажите нужные размеры браузера. Отметьте, является ли изображение обрезкой и какую область нужно реализовать.
Существующий проект и ресурсыУкажите целевой маршрут или компонент, фреймворк, шрифты, значки и файлы изображений. Отметьте существующие компоненты или поведение, которые нужно сохранить.
Требования к взаимодействию и адаптивностиНазовите элементы управления, которые нужно подключить, и дополнительные ширины для поддержки. Укажите, чего скриншот не показывает и что должно остаться вне объёма работы.

03 Важные решения

Важные решения

Сначала совпадение, потом редизайн
Изображение определяет палитру, композицию и видимое содержимое. Декоративные добавления или другое направление дизайна требуют отдельного запроса.
Воссоздавайте интерфейс, а не растровое изображение
Обычные grid- и flex-раскладки, настоящий текст и работающие элементы управления сохраняют редактируемость UI. Абсолютное позиционирование оставлено для настоящих оверлеев, а не для всего экрана.
Сравнивайте сопоставимое
Одинаковые размеры вьюпорта и загруженные ресурсы делают сравнение осмысленным. Задокументированный порядок исправлений начинается с пропорций и вёрстки, а затем переходит к мелким деталям.

04 Попробуйте точное задание

Попробуйте точное задание

Пример ниже не запускался. Прикрепите своё эталонное изображение и адаптируйте сведения о проекте, прежде чем использовать его.

Проверьте настройку

В README исходного репозитория задокументирована приведённая ниже команда установки. Она устанавливает пакет Image to UI на GitHub; это не установка необязательного сервиса UIZZE MCP.

Задокументированная команда установки

npx skills add uizze/uizze --skill image-to-ui

Используйте агента, который умеет просматривать изображения и редактировать ваш проект. Запустите проект в браузере для визуальной проверки. Сам навык не требует аккаунта UIZZE или подключения MCP; у вашего проекта и агента остаются собственные требования к настройке.

Прикрепите один экран

Ограничьте первую задачу видимым экраном или фрагментом. Приложите изображение, точные ресурсы и взаимодействия, которые приложение уже поддерживает.

Пример задания

Используйте image-to-ui, чтобы реализовать в существующем приложении приложенный образец экрана оплаты. Сначала изучите изображение и проект, затем, если целевой маршрут и эталонный вьюпорт неясны, уточните их у меня. Сохраните видимый текст, иерархию, отступы, переносы и обрезки изображений, не переделывая их. Используйте предоставленные шрифты и ресурсы; перечислите всё недостающее, а не подменяйте молча. Сохраните существующее поведение оплаты и счетов и не выдумывайте ответы API или невидимые разделы. Отрисуйте в эталонном вьюпорте, дождитесь шрифтов и изображений, сравните с предоставленным изображением и сначала исправьте самые большие различия. Затем проверьте ширины 390 px и 320 px, не меняя визуальную идентичность. Сообщите, какие снимки фактически сравнивались, какие элементы управления проверены и какие расхождения остались.

Проверьте отрисованный результат

Сравните тот же вьюпорт, прежде чем оценивать адаптивные варианты. Проверьте и видимый дизайн, и запрошенные элементы управления.

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

OpenDesign предоставляет локальное дизайнерское рабочее пространство для кодовых агентов. Этот листинг не означает, что навык включает внешние инструменты, учётные данные и программные зависимости.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

Эта страница описывает зафиксированную ревизию источника, ссылка на которую приведена ниже. Поведение и требования исходного репозитория могут измениться.

Владелец источника: UIZZE
Репозиторий: uizze/uizze
Файл навыка: skills/image-to-ui/SKILL.md
Лицензия: MIT · лицензия на уровне навыка
Проверенный снимок: 2026-10-12 · 146928eb50bc

Редакционная сводка источника

Image to UI — это краткий процесс реконструкции по скриншоту: изучить изображение и проект, реализовать видимый интерфейс в существующем стеке, затем отрисовать в эталонном вьюпорте и исправить различия. Это редакционная сводка, а не отчёт о тестовом запуске.

Оригинальная сводка OpenDesign на основе указанного источника. Лицензия MIT относится только к каталогу этого навыка; у других пакетов репозитория могут быть другие уведомления. Звёзды репозитория не равны числу установок.

06 Вопросы перед началом

Вопросы перед началом

Нужен ли Image to UI платный UIZZE MCP?

Нет. В навыке и README исходного репозитория прямо сказано, что аккаунт или подключение MCP не требуются. В репозитории также есть необязательный платный сервис поиска образцов, но он отделён от реализации вашего изображения.

Может ли он построить остальную страницу по обрезанному скриншоту?

Источник предписывает воспроизводить видимую область и не выдумывать невидимые разделы. Для всего, что за пределами обрезки, предоставьте дополнительные образцы или явные требования.

Гарантирует ли он пиксельную точность?

Из инструкций гарантии не следует. Навык нацелен на близкую реконструкцию и требует сравнения отрисованного результата. Об отсутствующих ресурсах и оставшихся расхождениях нужно сообщать; без отрисовки визуальная точность не проверена.

Image to UI

Постройте уже выбранный экран

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

Скачать OpenDesign Обзор дизайн-навыков