Можно ли загрузить свои картинки в AI-конструктор сайта

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

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

Что происходит, когда вы прикладываете картинку в чат?

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

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

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

Практическое правило простое. Вложения объясняют, как должно выглядеть. Ссылки определяют, что реально окажется на странице.

Как поставить своё фото на опубликованную страницу?

Дайте прямую ссылку и скажите, куда её ставить. Промпт вида «используй https://example.com/photos/fasad.jpg как изображение первого экрана, во всю ширину» это обычная правка, и конструктор впишет этот адрес в страницу.

Ссылка обязана быть прямой: она заканчивается самим файлом и открывает картинку, если вставить её в адресную строку браузера. Ссылка на страницу просмотра в Google Drive, на страницу шаринга Dropbox или на пост в соцсети ведёт на веб-страницу, которая показывает изображение, а не на само изображение. Внутри вашего сайта такая ссылка не отрисуется.

Если картинок несколько, перечислите их вместе с назначением, а не сваливайте кучей. «Первая карточка товара: [ссылка], подпись Керамическая кружка. Вторая: [ссылка], подпись Льняной фартук». Именно названное место рядом с каждым файлом не даёт им перемешаться.

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

Где хранить картинки, чтобы ссылки не отвалились?

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

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

Какие картинки подставятся, если своих нет?

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

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

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

Какие изображения важнее всего заменить первыми?

Не все. Начинать имеет смысл с тех, что меняют чтение страницы, примерно в таком порядке отдачи:

• Первый экран. Задаёт тон до того, как прочитано хоть одно слово. Меняется первым.
• Фото товаров или работ. В магазине и в портфолио это и есть содержание, сток тут не заменитель.
• Лица. Настоящая фотография команды делает для доверия больше, чем абзац о том, какие вы надёжные.
• Логотип. Мелочь, но это разница между «сайт» и «ваш сайт».

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

Как проверить, что картинки реально загрузились?

Проверяйте на опубликованном адресе, а не в превью конструктора. Публикация ставит проект на адрес вида vash-proekt.zugo.run, и именно это видит посетитель.

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

Поэтому сделайте короткую версию сами:

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

Как быть с логотипом и иконкой вкладки?

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

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

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

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

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

Какие границы стоит знать заранее?

Три, без обиняков.

Встроенной медиатеки нет. Файлы не хранятся внутри проекта, галереи для повторного использования не существует, и за своими ссылками вы следите сами.

Вложение это ориентир, и оно расходуется вместе с тем сообщением, с которым уехало. Если следующая инструкция опирается на тот же скриншот, приложите его снова.

Конструктор не чинит исходники. Фотография с телефона на 6 МБ во весь первый экран сделает страницу медленной, и никакой промпт этого не изменит. Уменьшайте и сжимайте до того, как ставить ссылку, ровно как на любом другом сайте.

Ничего из этого не специфично для AI-конструкторов, так устроен веб. Если удобнее вести ассеты в нормальной структуре проекта, выгрузите код в GitHub и продолжайте оттуда: проект принадлежит вам.

Быстрее всего понять, как ложатся ваши собственные фото, собрать страницу и заменить одну картинку. Бесплатный тариф даёт 5 кредитов без карты, чтобы осмотреться; полная сборка стоит 6 кредитов, правка 3, а Pro стоит $25 в месяц и даёт 200 кредитов. Опишите страницу в Zugo, вставьте одну настоящую ссылку и посмотрите, как она встанет.