Нейросеть для создания сайта по картинке: что работает
Нейросеть для создания сайта по картинке: что работает
Картинка работает, но не так, как обычно ожидают. Фотография вашего товара или объекта становится главным изображением страницы, и текст пишется именно про то, что на ней. А если нужен сайт, устроенный как чужой, лучше дать не скриншот, а ссылку: по ней читается настоящая разметка, и переносится каркас страницы, а не догадка по пикселям.
Что люди имеют в виду под «сайтом по картинке»?
Формулировка одна, а ожиданий за ней три, и они требуют разных действий.
Первое: у человека есть фотография. Снимок изделия, блюда, интерьера, вида из окна дома, который сдаётся. Он хочет сайт про вот это, и чтобы фотография была на нём главной. Это самый частый случай и самый простой.
Второе: у человека есть чужой сайт, который нравится. Он делает скриншот и хочет «такой же, но про меня». Здесь картинка это способ показать образец, и есть путь лучше.
Третье: у человека есть макет из графического редактора, нарисованный дизайнером. Он хочет попиксельного воспроизведения. Это самый трудный случай, и обещать его нельзя.
Дальше по каждому отдельно, потому что действия у них разные.
Что даёт фотография, а что ссылка на образец?
Это два разных механизма, и они не заменяют друг друга.
| Что вы прикладываете | Что с этим происходит | Когда это правильный выбор |
|---|---|---|
| Фотография предмета или места | становится главным изображением, страница пишется про то, что на ней | есть свой товар, объект, работа, блюдо |
| Ссылка на понравившийся сайт | читается разметка, переносится каркас: порядок секций, палитра, шрифтовая пара, плотность | нужна структура «как у них», содержание своё |
| Скриншот чужого сайта | видно картинку, но не разметку: ни шрифтов по имени, ни точных цветов, ни структуры | ссылки нет, доступ закрыт, страница уже не существует |
| Скриншот вашей собранной страницы | показывает, что именно вам не нравится, при правке | трудно объяснить словами, где съехало |
Первая и вторая строки решают разные задачи и прекрасно сочетаются: ссылка задаёт устройство страницы, фотография наполняет её вашим содержанием.
Почему ссылка работает лучше скриншота?
Потому что по ссылке читается сама страница, а не картинка страницы.
Со скриншота видно, что шапка тёмная, а кнопка оранжевая. Со страницы читается, какой именно шрифт и какая шкала размеров, какие цвета и в каком соотношении, сколько секций и в каком порядке они идут, сколько призывов к действию и куда они ведут, липкая ли шапка, есть ли тёмная тема, как устроена сетка карточек. Это разный объём знания, и он потом виден в результате.
Есть и вторая причина, менее очевидная. Модель хорошо знает известные сайты по названию и охотно рассказывает, как они устроены, не заглядывая в них. Такой рассказ выглядит как анализ, но им не является: получается страница по воспоминанию о бренде, а не по его нынешней главной. Ссылка убирает эту подмену, потому что страница действительно скачивается и разбирается.
Поэтому практическое правило простое. Если сайт-образец открывается в браузере, давайте адрес. Скриншот остаётся для случаев, когда адреса нет.
Что не переносится с чужого сайта, и почему это правильно
С образца снимается каркас, а не содержимое. Не переносятся дословные абзацы, имена клиентов, отзывы, цены и изображения. Вместо них остаются места, которые заполняются вашим.
Первая причина юридическая: чужой текст и чужие фотографии остаются чужими, и сайт, собранный из них, нельзя ни показать клиенту, ни продвигать.
Вторая причина практическая, и она важнее. Вы просите сайт КАК ТОТ, а не ТОТ ЖЕ. Копия чужой страницы с вашим логотипом читается именно как копия: цены не про ваши услуги, отзывы от незнакомых людей, разделы под чужой ассортимент. Каркас переносить полезно, содержимое вредно.
Как попросить, чтобы получилось
Порядок такой, и он занимает несколько минут.
- Откройте zugo.dev и войдите через Google или GitHub. Стартовые кредиты выдаются сразу, карта не нужна.
- Если есть образец, добавьте его ссылкой через меню рядом с полем ввода. Страница скачается и разберётся до начала сборки.
- Если есть своя фотография, прикрепите её там же. Она станет главным изображением, поэтому выбирайте тот снимок, который должен встречать посетителя.
- Опишите словами, что это за сайт и для кого. Фотография отвечает на вопрос «про что», а текст на вопрос «зачем человек сюда пришёл и что должен сделать».
- Дождитесь сборки и откройте превью.
- Правьте следующим сообщением. Если трудно объяснить словами, что не так, снимите скриншот своей страницы и приложите его к правке: так видно ровно то место, о котором речь.
Отдельно про шаг четвёртый. Одной картинки без слов почти всегда мало. По фотографии дома собирается страница про дом, но она не знает, продаётся он или сдаётся посуточно, и от этого зависит вся страница целиком.
Какая фотография сработает, а какая испортит страницу?
Снимок становится первым, что видит посетитель, поэтому к нему стоит отнестись как к витрине, а не как к иллюстрации.
Работает горизонтальный кадр с запасом по краям. Главное изображение обычно растягивается на всю ширину экрана, и вертикальная фотография в этой роли либо обрезается по краям, либо оставляет пустоту по бокам. Если снимок только вертикальный, скажите об этом словами, чтобы он встал иначе.
Работает кадр, где предмет один и понятен. Стол, на котором лежат пятнадцать разных вещей, читается как склад: непонятно, о чём страница. Один предмет крупно решает эту задачу без всяких настроек.
Работает свет, а не разрешение. Снимок с телефона у окна выглядит лучше, чем тёмный кадр с хорошей камеры. Тёмную фотографию приходится осветлять на стороне страницы, и результат почти всегда хуже, чем если переснять.
Мешает текст, вшитый в изображение. Надписи на самой картинке не переводятся, не масштабируются под телефон и вступают в спор с заголовком страницы. Если текст нужен, пусть он будет текстом.
Мешает и коллаж из нескольких кадров, собранный заранее. Он занимает место главного изображения целиком, а страница при этом лишается всех остальных мест под картинки. Лучше отдать снимки по одному.
Где предел: макет из графического редактора
Здесь стоит сказать прямо, потому что обещания встречаются часто.
Макет, нарисованный дизайнером, отличается от готового сайта тем, что в нём нет разметки: это изображение. По нему воспроизводится общее устройство и настроение, но не попиксельное совпадение отступов, начертаний и состояний кнопок. Если задача именно в точности до пикселя, то честный путь другой: собрать основу описанием, а потом доводить правками, сверяясь со скриншотом макета.
Отдельная тонкость про шрифты. С изображения название шрифта не читается, оно угадывается по форме букв. Если шрифт для вас важен, назовите его словом, это дешевле любых догадок.
Сколько это стоит?
Стартовых кредитов даётся 1 450, карта для них не нужна. Обычная сборка стоит около 1 100 кредитов, правка около 550. Списывается фактический расход модели на вашу задачу, поэтому короткая правка обходится дешевле длинной. Когда стартовых кредитов перестаёт хватать, есть подписка Pro за $25 в месяц с 20000 кредитов.
Разбор образца по ссылке и прикреплённая фотография отдельных денег не стоят, они часть сборки. Публикация на адрес тоже.
Коротко
Картинка помогает, когда понятно, какую роль она играет. Фотография это содержание: она становится главным изображением, и страница пишется про то, что на ней. Ссылка это устройство: с неё снимается каркас, палитра и типографика, а тексты и цены остаются вашими. Скриншот стоит третьим и годится для двух случаев: когда до образца нет доступа и когда надо показать, что именно съехало в вашей собственной странице. Если собираете с телефона, путь тот же самый, он разобран в статье как создать сайт с телефона. А если вместо сайта нужен работающий инструмент, это соседняя задача, и она разобрана в статье нейросеть для создания приложения на андроид.