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