Содержание
Пересоздатель дизайна — в разработкеЧто выходит из пересозданного дизайнаКак вы будете это использоватьВдохновение, а не копированиеПочему Rekreate это создаетЧасто задаваемые вопросыДизайнеры и фронтенд-разработчики ежедневно анализируют интерфейсы: измеряют отступы на скриншоте, угадывают типографику, пересобирают компонент, чтобы понять его поведение. Пересоздание дизайна превращает это в один шаг — загрузите скриншот или ссылку и получите дизайн-токены, разбор компонентов и рабочий фронтенд-код.
Этот инструмент разрабатывается в Rekreate. Ниже показано, что он будет выдавать, а также что уже доступно в наших существующих инструментах.
- Ввод: скриншот, кадр из Figma или URL. Вывод: токены, компоненты, код.
- Цветовая палитра, типографика, ритм отступов, радиусы и тени извлекаются как переменные.
- Вывод на уровне компонентов — карточка, навигация, таблица цен — а не один плоский блок разметки.
- В разработке. Инструменты для работы с изображениями в
/makeуже доступны.
Пересоздатель дизайна — в разработке
Загрузите интерфейс и получите систему, которая за ним стоит: цветовую палитру с именованными токенами, типографику, ритм отступов, радиусы углов и высоту слоев, а затем каждый компонент пересобранный в HTML и CSS с понятными классами и адаптивным поведением.
Цель — не клонировать чей-то продукт, а ответить на вопрос, который задает каждый дизайнер скриншоту: как это вообще сделано? — за секунды, а не за целый день.
Этот инструмент ещё не запущен. Создайте бесплатный аккаунт, и мы сообщим вам в приложении, как только он станет доступен.
Что можно сделать уже сейчас
Что уже работает в Rekreate:
- Пересоздать фото — переснять визуал, макет или иллюстрацию в вашем стиле.
- Пересоздать логотип — чистые бренд-активы с прозрачным фоном.
- Ideogram — графика в стиле интерфейсов, где текст должен быть читаемым.
Для кода сейчас используйте специализированный инструмент скриншот-в-код; возвращайтесь сюда, когда пересоздатель откроется.
Что выходит из пересозданного дизайна
| Слой | Планируемый вывод |
|---|---|
| Цвет | Палитра с ролями — фон, текст, приглушенные, акценты, семантика — как CSS переменные, для светлой и темной темы |
| Типографика | Шрифты, используемая шкала, веса, межстрочные интервалы и межбуквенные отступы |
| Отступы | Базовый ритм (4/8pt или другой), плюс ширина контейнеров и промежутки |
| Компоненты | Кнопки, карточки, навигация, формы, таблицы — каждый как отдельный HTML и CSS |
| Состояния | Hover, focus, disabled и error, если их можно определить |
| Заметки по доступности | Предупреждения о контрасте и отсутствующих состояниях focus отмечены, а не скопированы молча |
Как вы будете это использовать
Загрузите референс
Скриншот продукта, который вам нравится, кадр из Figma или активный URL.
Выберите область
Весь экран или один компонент, который нужно понять — карточка цен, боковая панель, пустое состояние.
Проверьте систему
Сначала токены: подходит ли палитра, совпадает ли типографика, ритм отступов на сетке? Исправьте то, что модель угадала неверно.
Возьмите код
Скопируйте компоненты в ваш проект или используйте их как референс, пока ваша команда создает финальную версию.
Вдохновение, а не копирование
Паттерны интерфейсов — это общее ремесло. Никто не владеет карточкой с заголовком, текстом и кнопкой; индустрия пришла к этим паттернам, потому что они работают.
Что является собственностью: визуальная идентичность продукта — его логотип, стиль иллюстраций, кастомные шрифты, изображения и текст — плюс любой проприетарный код. Пересозданный дизайн должен научить вас механике, а затем быть оформлен в вашем собственном бренде.
Если ваш экран выглядит как экран конкурента с другим логотипом, вы скопировали их идентичность, а не изучили структуру. Используйте токены как отправную точку и адаптируйте их к своей системе.
Почему Rekreate это создает
Вся наша идея — начать с того, что уже работает, а затем сделать это своим. Это началось с вирусных видео, перешло в рекламу, фото и голоса, а дизайн — это то же самое движение, примененное к интерфейсам.
Это также завершает семейство /make для команд: пересоздайте рекламу, пересоздайте лендинг, пересоздайте дизайн-систему за ним — все в одном месте, на языке, в котором вы работаете.
Следите за пересоздателем сайтов и пересоздателем приложений, если вам нужны соседние инструменты.
Часто задаваемые вопросы
Может ли ИИ пересоздать UI дизайн из скриншота?
Да — модели компьютерного зрения могут извлечь палитру, типографику и макет из изображения и пересобрать компоненты в коде. Пересоздатель дизайна от Rekreate находится в разработке; сейчас наши инструменты работают с изображениями, логотипами и видео.
Будет ли выдавать файлы Figma?
Планируемый вывод — дизайн-токены и фронтенд-код. Токены легко импортируются в большинство инструментов для дизайна, но цель — получить рабочий код.
Законно ли пересоздавать чей-то UI?
Макеты и паттерны взаимодействия не защищены так, как бренд-активы. Не используйте их логотип, иллюстрации, кастомные шрифты, текст или проприетарный код — возьмите структуру, добавьте свою идентичность.
Поддерживает ли темную тему?
Да, это в планах: токены извлекаются для каждой темы, чтобы пересозданные компоненты работали в обеих, а не были жестко привязаны к одной.
Когда запуск?
Публичная дата пока не объявлена. Создайте бесплатный аккаунт, и новые инструменты /make появятся в приложении по мере открытия.
Что использовать пока?
Пересоздатель изображений от Rekreate для визуалов и пересоздатель логотипов для бренд-активов, плюс специализированный инструмент скриншот-в-код для разметки.
Создайте своё следующее вирусное видео с Rekreate
Найдите проверенное короткое видео, переснимите его со своим сценарием, аватаром и голосом, создайте сцены с Seedance, Kling и Veo в одном рабочем пространстве.
Начать бесплатный пробный период →