Как сделать сайт по картинке

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

Сейчас всё по-другому: вы загружаете изображение, описываете задачу и получаете готовый сайт, похожий на тот, что был на картинке.

Теперь детально разберем, как именно мы это делаем, и рассмотрим два реальных сценария: скриншот сайта и фотографию меню.

Как это работает у нас

Весь процесс занимает всего один шаг. В форме создания сайта есть кнопка для загрузки файлов. Вы прикрепляете изображение, описываете задачу и нажимаете «сгенерировать». Система анализирует картинку и формирует сайт: если это макет, она повторяет его структуру и настроение, а если это ваш товар — использует фото в качестве контента.

Тут самое главное вот в чём. Пиксели она не копирует. Изображение считывается по смыслу: где шапка, где блок цен, какая цветовая гамма, какая атмосфера — и эта логика переносится к вам. Причём вы получаете не просто красивую заглушку, а уже рабочие формы и готовую базу для заявок.

Что вообще можно приложить

Не всякая картинка одинаково полезна. Что заходит:

• Скриншот сайта, который вам нравится. Будь то конкурент, вдохновляющий лендинг или страница из закладок — не имеет значения.
• Эскиз. Не имеет значения, создано ли это вручную или в Фигме. Даже элементарный эскиз — шапка, три услуги и форма в самом низу — уже формирует структуру.
• Фото товара, меню, прайса. Пойдёт в каталог как содержимое.
• Логотип и ваши цвета. Чтобы сайт был в фирменном стиле, а не в дефолтном.

Обычные форматы — JPG и PNG. Также подойдут PDF или текстовый документ, если ваше меню сохранено в таком виде.

Пошагово

Шаг 1. Форма создания сайта. В личном кабинете кликните на кнопку «Создать сайт». Заполните поле с адресом и крупное поле для описания.

Шаг 2. Прикрепите картинку. В описании найдите раздел «Файлы (логотип, тексты, примеры)». Кликните по нему и загрузите нужные элементы с компьютера или телефона. Допускается прикрепление сразу нескольких файлов.

Шаг 3. Опишите словами, что с ней делать. Как правило, именно на этом этапе появляются трудности. Картинка демонстрирует, «как» что-то должно выглядеть, а текстовое описание объясняет, «что» именно нужно. Например, от вас могут потребовать: «Сделай лендинг для барбершопа в стиле этого скрина, но под мужские стрижки и бороду». Возможен и другой вариант: «Вот фото меню, собери по нему каталог с ценами».

Шаг 4. Запустите. Уже через несколько минут всё будет готово: дизайн, тексты, отдельная база, адрес и сертификат. Процесс идёт по шагам, и чётко видно, что именно происходит.

Шаг 5. Поправьте. Тот самый синий? Сделай кнопки темнее. Если нужно переместить фото — просто перетаскивайте его мышкой в редакторе.

В этом месте не предусмотрен ни экспорт в HTML, ни настройка хостинга — подобные термины вам вообще не встретятся.

Пример 1. Скриншот понравившегося сайта

До боли знакомая ситуация. Заходим в интернет, находим сайт студии — а там всё сделано как надо: аккуратная шапка, крупный заголовок, опрятные карточки. И тут же мысль: хочу так же, только про себя.

Что делаете:

1. Скриншотите ту страницу — целиком или заметный кусок.
2. Прикрепляете скрин в форму.
3. Вы просите: нужно создать сайт для массажного салона в аналогичном оформлении и архитектуре. Структура услуг — классический, спортивный и антицеллюлитный массаж. Также следует добавить возможность онлайн-записи и раздел с отзывами.

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

На практике действует такое правило: чем чётче скриншот, тем точнее результат. Размытое фото экрана с бликом от окна система тоже распознает, но зачем усложнять.

Пример 2. Фото меню — в каталог

А в этом случае речь идёт о бизнесе, где сама картинка и есть контент. Это кофейня. Пекарня. Небольшой магазин у дома.

У владельца бизнеса обычно нет ни сайта, ни желания по вечерам вручную вбивать позиции. Зато есть меню — бумажное на стойке или фото в телефоне.

Что делаете:

1. Фотографируете меню (или пару страниц прайса).
2. Прикрепляете фото.
3. Пишете: «Собери сайт кофейни. Вот меню на фото — сделай по нему каталог напитков и десертов с ценами, блок „о нас“ и карту с адресом».

Система определяет позиции, сортирует их по категориям и выставляет цены. Дальше вы редактируете текстом: «убери раф, добавь новинку сезона». Через полчаса у кофейни готов живой сайт, который не стыдно показывать из соцсетей.

Чем это отличается от конструктора

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

Здесь изображение служит задачей, а не готовым решением. Вы просто передаёте его, а сборку выполняет система. Это то же самое, что разница между «нарисуй сам по образцу» и «покажи образец мастеру».

Пара честных оговорок

Чтобы без завышенных ожиданий.

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

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

В-третьих, и это скорее плюс: прикладывать что-либо совсем не обязательно. Сайт соберётся и по одному текстовому описанию. Картинка ускоряет работу и помогает уточнить детали, но без неё вполне можно обойтись.

Частые вопросы

Обязательно прикладывать картинку?
Нет. Сайт создается в том числе и по тексту. Изображение лишь помогает точнее попасть в стиль.

Можно скриншот чужого сайта?
Да, можно взять это за образец для стиля и структуры. Тогда вы получите сайт, который будет близок по духу, но с вашим содержимым, а не украденной копией.

Распознает ли текст с фото меню?
Да, он умеет определять названия и цены с чёткого снимка и добавлять их в каталог. Слабо различимые фотографии лучше дублировать текстом.

Сколько картинок можно?
Тут сразу несколько элементов: логотип, пример скриншота и пара фотографий товаров.

Если вышло не совсем то?
Править текст можно прямо в чате или мышкой в редакторе. Все версии сохраняются, откат доступен.

Вывод

Сайт по картинке — это самый быстрый способ превратить пожелание «хочу вот так» в готовую страницу. Вы предоставляете образец, затем он переносится в рабочий сайт на платформе, а детали вновь на вас.

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