Сайт с помощью ИИ по частям — от схемы до публикации

Где нейросеть помогает, а где нет

От пустого экрана до рабочего прототипа лендинга с ИИ можно дойти за вечер вместо недели переписки с подрядчиком. Модель предложит порядок секций, напишет заголовки и основной текст, подготовит HTML и CSS. Отдельный генератор сделает фон, иконки и изображения для блоков. Согласно документации Mozilla по HTML, именно разметка задаёт структуру страницы. CSS управляет её оформлением, а изображения дополняют визуальную часть. Нейросети умеют работать со всеми тремя составляющими, но обычно это несколько специализированных моделей, а не одна кнопка. Проверка результата, публикация на хостинге и ответственность за работающие ссылки всё равно остаются на человеке.

Полной автоматизации здесь нет.

Текстовая модель отвечает за логику, содержание и код. Генератор изображений закрывает визуальные задачи. В Trackly эти инструменты доступны в одном окне, поэтому фрагменты не приходится переносить между разными сервисами. Для пользователей из России есть оплата рублями с карты «Мир», работа без VPN и выбор между списанием за фактический расход и подпиской.

Как распределить работу между моделями

Одной модели не стоит поручать весь проект. Семейство Claude Sonnet ориентировано в том числе на аккуратную работу с кодом. Gemini, согласно документации Google, поддерживает мультимодальный формат и понимает текст вместе с изображениями. На практике структуру, тексты и вёрстку удобнее отдавать сильной текстовой модели. Для фонов, баннеров и знаков нужен генератор изображений. Короткий ролик для первого экрана потребует уже модели генерации видео. Такое разделение снижает количество случайных ошибок и упрощает правки.

• План страницы. Что поручить ИИ — логика и порядок секций; Подходящая модель в Trackly — ChatGPT 5, Claude Sonnet 4.6
• Тексты. Что поручить ИИ — заголовки, тон, варианты формулировок; Подходящая модель в Trackly — ChatGPT 5, Gemini 2.5 Pro
• HTML и CSS. Что поручить ИИ — разметка, стили, адаптивная версия; Подходящая модель в Trackly — Claude Sonnet 4.6
• Фоны, иконки и баннеры. Что поручить ИИ — изображения для блоков; Подходящая модель в Trackly — Nano Banana Pro, GPT Image 2
• Логотип. Что поручить ИИ — знак и простая графика; Подходящая модель в Trackly — Nano Banana Pro
• Ролик для шапки. Что поручить ИИ — короткое видео; Подходящая модель в Trackly — Veo 3, Kling 3.0

Нужные инструменты собраны в каталоге моделей Trackly, а для работы с вёрсткой можно сразу открыть чат с Claude Sonnet.

Это набор инструментов, а не волшебный конструктор.

Рабочий порядок сборки

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

Шаг 1. Составить схему страницы

Сначала — схема.

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

Подход согласуется с рекомендациями Google по адаптивному веб-дизайну, где страница строится вокруг понятного действия пользователя. Нейросеть выдаёт каркас быстро, но она не знает реальных приоритетов бизнеса. Возможно, цены нужно поднять выше отзывов, а форму записи повторить после услуг. Такие решения принимает владелец проекта.

Код пока не нужен.

Шаг 2. Заполнить блоки текстом

Когда порядок секций утверждён, можно готовить содержание. Просите не один вариант заголовка, а пять или семь с разным тоном. Отдельно заказывайте подзаголовок, выгоды, описания услуг, подписи кнопок и короткие ответы на частые вопросы.

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

Шаг 3. Собрать HTML и CSS

После утверждения структуры и содержания всё можно передать модели одним комплектом. Попросите сделать адаптивный лендинг в одном HTML-файле, разместить стили внутри тега style и использовать системные шрифты. Отдельно задайте поведение кнопок при наведении и требования к мобильной версии. Полученный файл нужно сразу открыть в браузере. Дальнейшие изменения лучше вносить небольшими командами, например увеличить высоту первого экрана или сделать сетку услуг из трёх колонок. Если вёрстка сломалась, отправьте модели сообщение об ошибке вместе с проблемным фрагментом. Базовое понимание того, за что отвечает CSS, поможет точнее описывать отступы, цвета и сетки. Более подробный процесс есть в руководстве по генерации кода нейросетью.

После каждой заметной правки страницу лучше обновлять в браузере, а не копить изменения до финала.

Шаг 4. Подготовить изображения

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

Логотип тоже можно получить за несколько итераций. Для сложной айдентики этого недостаточно, но простой знак для прототипа генератор подготовит. Готовые файлы затем размещают рядом с HTML или подключают по ссылке.

Лендинг или многостраничный проект

Лендинг хорошо подходит для первого опыта с нейросетями. У него одна страница, одно основное предложение и одно целевое действие. Модели проще удерживать такую структуру и не путаться в навигации.

Это нормальный первый проект.

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

Каталог, личный кабинет и несколько связанных разделов тоже можно собирать с ИИ. Однако такую работу приходится делить на отдельные страницы, многократно проверять переходы и вручную сводить части проекта. Здесь уже потребуется хотя бы базовая готовность работать с кодом.

Из чего складывается хороший запрос

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

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

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

Что ограничивает бесплатные сервисы

Бесплатные инструменты подходят, чтобы проверить подход и собрать первый черновик. Для рабочего проекта их ограничения проявляются довольно быстро.

• Лимиты запросов. После нескольких генераций сервис предлагает ждать следующего дня или переходить на оплату.
• Упрощённые модели. В бесплатный тариф нередко входят менее сильные версии, которые чаще ошибаются в коде.
• Водяные знаки. Они могут появляться на изображениях и в подвале опубликованной страницы.
• Ограничения для РФ. Некоторые зарубежные конструкторы требуют VPN и иностранную банковскую карту.

Доступные варианты и их реальные пределы собраны в обзоре бесплатных нейросетей. Бесплатный тариф разумно использовать для знакомства с процессом, но перед рабочей публикацией стоит оценить фактические расходы.

Оплата и расходы при работе из России

В Trackly запросы можно оплачивать рублями с карты «Мир». VPN и зарубежная карта не требуются. Доступна оплата по фактическому использованию или подписка. Текстовые операции со структурой, содержанием и кодом обычно обходятся дешевле изображений. Генерация видео остаётся самой затратной частью. Актуальные условия опубликованы на странице тарифов.

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

Ошибки, из-за которых черновик приходится переделывать

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

• Слишком мало контекста. Укажите тип бизнеса, город, аудиторию, услугу, тон и ключевое действие. Для частного стоматолога в Казани полезно сразу зафиксировать спокойные цвета, акцент на безболезненности и форму записи.
• Весь проект в одном сообщении. Надёжнее отдельно согласовать первый экран, услуги, цены и форму. В длинном запросе часть требований может потеряться.
• Нет проверки мобильной версии. Попросите добавить viewport, медиазапросы и отдельно показать поведение блоков на узком экране.
• Полное доверие к коду. Нейросеть ошибается, поэтому HTML нужно открывать в браузере после каждой серии изменений.

Проверять всё равно придётся.

Проверка скорости и публикация

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

В рекомендациях Google по Core Web Vitals указаны конкретные ориентиры. Основной контент должен появляться быстрее 2,5 секунды по метрике LCP. Сдвиг элементов во время загрузки следует удерживать ниже 0,1 по метрике CLS. Большие фоновые изображения сильнее всего мешают первому показателю, поэтому их сжимают до публикации.

Дальше HTML-файл и изображения размещают на хостинге, проверяют пути к файлам и подключают домен. Подойдёт и бесплатная площадка, если её ограничения устраивают. При проблемах с вёрсткой модели отправляют конкретный участок кода и описание того, что должно происходить.

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

Источники

• Mozilla, MDN Web Docs, материал о языке разметки HTML, проверено 9 июля 2026
• Mozilla, MDN Web Docs, материал о каскадных таблицах стилей CSS, проверено 9 июля 2026
• Google, web.dev, руководство Responsive web design basics, проверено 9 июля 2026
• Google, web.dev, руководство Web Vitals, проверено 9 июля 2026
• Google, документация Gemini API, проверено 9 июля 2026
• Anthropic, обзор моделей Claude, проверено 9 июля 2026