Как сделать лендинг самому за вечер: пошаговая инструкция по часам

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

Лендинг, он же одностраничный сайт, я собрал на пробном аккаунте и ничего не платил: пробный период даёт 14 дней, 100 000 кредитов и один поддомен, карта не нужна. Три отрезка вечера я засёк по секундам: сборка, публикация и одна правка в чате. Остальные отметки в заголовках условные, от старта в 19:30, чтобы было видно, сколько шагов помещается в один вечер и где можно остановиться.

Что такое лендинг и из каких блоков он состоит, здесь не разбираю: об этом написано в статье как создать лендинг с помощью нейросети. Если ещё сомневаетесь, хватит ли одной страницы, есть разбор с семью вопросами про лендинг или многостраничный сайт.

19:30. Что положить рядом до регистрации

Десять минут до кабинета я потратил на заметку в телефоне. В ней: имя и город, телефон в одном формате, список того, что продаётся, с ценами, часы и район, пара фактов о себе. Для сайта репетитора это выглядело так: ученики 5-11 классов, онлайн и очно, четыре цены, КФУ, стаж с 2015 года. Без этой заметки описание пришлось бы сочинять на ходу, а конструктор на месте пропусков подставляет правдоподобные заглушки, которые потом вылавливаешь по всей странице.

Фото тоже стоит выбрать заранее. Три штуки: рабочее место, вы за работой, результат. У меня в прогоне своих фото не было, и на странице стоят снимки из библиотеки конструктора - об этом ниже, в главе про первый осмотр. Если фото есть, переименуйте их из IMG_4821.jpg во что-нибудь вроде irina.jpg: потом проще сказать в чате «поставь irina.jpg на первый экран».

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

19:40. Регистрация: почта или Яндекс ID, карта не нужна

Кабинет открывается по адресу app.wuna.ai. На странице регистрации четыре поля: имя, почта, пароль и его повтор, ниже галочка согласия с офертой и политикой конфиденциальности, кнопка «Создать аккаунт». Под ней «или продолжить с» и кнопка «Яндекс» для тех, кто не хочет заводить ещё один пароль. Карту нигде не спрашивают.

После входа сразу открылся экран «Создать» с приветствием «Что сделаем сегодня, Ирина?» - аккаунт я регистрировал на имя Ирины, чтобы кабинет и сайт совпадали. Наверху счётчик «100 000 / 100 000 кредитов» - я записал цифру, чтобы в конце вечера посчитать расход. Слева меню: Создать, Проекты, Все проекты, Файловый менеджер, Тарифы и платежи, Поддержка, Настройки. Поверх поля всплыл короткий тур «Опишите свой сайт», шаг 1 из 2.

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

19:45. Описание для сборки: лендинг с нуля одним сообщением

На экране «Создать» два поля. Верхнее - название проекта с подсказкой «например, «Заря»», оно же станет заголовком сайта. Нижнее - большое поле описания. Под ним кнопка «Настроить», которая открывает две настройки: «Структура → Шаблон: Автоматически» и «Дизайн → Дизайн-система: Автоматически». Я их не трогал.

Описание я готовил по правилу из руководства по промптам: 100-150 слов, в которых есть кто вы и где, тип сайта, список блоков, цвета и одно целевое действие. Своё я написал заранее в заметке и вставил целиком. В нём 1 056 знаков, цены и телефон стоят прямо в тексте, а про отзывы сказано «не выдумывать - оставить заготовки». Последняя фраза сработала: на странице появились три карточки с текстом в квадратных скобках и подписью «заменить».

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

Описание, которое я отправил в поле

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

Одностраничный сайт репетитора по математике Ирины
Соколовой из Казани. Занятия онлайн и очно в
Ново-Савиновском районе, ученики 5-11 классов,
подготовка к ОГЭ и ЕГЭ. Первый экран: фото, имя,
заголовок «Математика для 5-11 классов: закрываем
пробелы и готовим к ОГЭ и ЕГЭ», кнопка «Записаться
на пробное занятие». Разделы: кому подходит (три
карточки: школьная программа, ОГЭ, ЕГЭ), как
проходит занятие (четыре шага: диагностика, план,
занятия, контрольные точки), цены (индивидуально
60 минут 1 500 ₽, 90 минут 2 000 ₽, мини-группа до
3 человек 900 ₽ за занятие, пробное занятие 30
минут бесплатно), об учителе (КФУ, стаж с 2015
года, эксперт ОГЭ), отзывы (три заготовки с
пометкой «заменить»), частые вопросы (перенос
занятия, оплата, домашние задания, материалы),
форма записи: имя, класс, телефон, удобное время,
галочка согласия на обработку персональных данных;
контакты: телефон +7 900 000-00-00, Telegram.
Спокойные цвета: тёмно-зелёный и кремовый, крупные
заголовки, много воздуха. Отзывы и результаты
учеников не выдумывать - оставить заготовки.

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

Собрать сайт репетитора по этому описанию, 14 дней бесплатно

Открыть заготовку описания для любой услуги, 14 дней бесплатно

Название проекта я вписал «Математика с Ириной» и нажал «Старт». Если ваша ниша есть в блоге, подробное описание для неё уже лежит в соответствующей статье, например сайт репетитора разобран отдельно, со структурой и промптом.

19:45-19:56. Сборка: у меня ушло десять минут

Страница проекта открылась через секунду. Под названием статус «Сборка…», слева в чате моё описание и лента шагов с иконками: «Сканируем src/pages/Home.tsx», «Приправляем src/pages/Home.tsx», «Полируем src/pages/Home.tsx», «Проверяем build». По этим строкам видно, что процесс идёт и ничего не зависло. Справа надпись «Пока ничего не собрано. Начните диалог с AI, чтобы создать свой сайт. Ваш проект появится здесь».

Предпросмотр появился примерно на седьмой минуте. Ещё три минуты шли проверки: «Проверяем page integration», «Сохраняем design decisions», в конце строка «Думала 372 с». От нажатия «Старт» до статуса «Готово» прошло 10 минут 20 секунд. Вкладку в это время можно закрыть, проект соберётся без вас. Что происходит во время сборки, в общих чертах описано в разделе документации создание сайта.

Счётчик после сборки показал 59K / 100K. На первую версию ушло около 41 000 кредитов.

19:56. Первый взгляд: отчёт ассистента и сама страница

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

«Форма работает в демо-режиме: на тарифе «Пробный период» нет базы данных сайта, заявки не сохраняются. Фото - из стоковой библиотеки (не Ирина), отзывы - заготовки, как вы просили».

Первое означает, что форму на пробном сайте можно заполнить и отправить, но заявка никуда не запишется. Встроенная база данных, куда падают заявки, подключается с тарифа «Стандарт» за 890 ₽ в месяц, как устроена база, описано в разделе документации. На первые дни решение простое: рядом с формой на странице уже стоят телефон и Telegram, и ученики придут по ним. Второе означает, что фото нужно заменить своими: загрузить их через «Файловый менеджер» в меню слева и написать в чате, какой файл куда поставить.

Потом я прошёл по самой странице сверху вниз. Первый экран на тёмно-зелёном: надзаголовок «РЕПЕТИТОР ПО МАТЕМАТИКЕ · КАЗАНЬ», крупный заголовок, подзаголовок «Закрываем пробелы и готовим к ОГЭ и ЕГЭ», кремовая кнопка. Дальше три карточки «Кому подходят занятия», четыре шага с номерами 01-04, четыре карточки цен, где стоят мои 1 500 ₽, 2 000 ₽, 900 ₽ и «Бесплатно» для пробного занятия. В блоке «Об учителе» пять пунктов, включая КФУ и стаж с 2015 года. Отзывы подписаны «Мама ученика 6 класса · заменить». Форма записи с полями Имя, Класс ученика, Телефон, Удобное время и галочкой «Согласен(на) на обработку персональных данных».

Сначала я проверял факты, потом всё остальное. Цены, телефон и поля формы совпали с описанием. Если бы разошлись, я бы описал расхождение в чате: правка обходится дешевле, чем кнопка «Пересобрать». По моему счётчику первая версия обошлась в 41 000 кредитов, правка с телефоном в двух местах - в 27 000, об этом ниже. Даже при таких цифрах описать словами дешевле, чем пересобирать и заново вычитывать всю страницу. Своё описание можно проверить тем же способом на пробном аккаунте без карты, счётчик покажет расход по ходу.

20:05. «Инспектировать» и «Дизайн»: точечные правки без пересборки

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

«Дизайн» открывает панель «Выбрать дизайн» с подписью «Выберите дизайн-систему и акцентный цвет. ИИ повторно применит его к вашему сайту». В списке дизайн-системы с миниатюрами: Субстрат, Апертура, Атриум, Безмятежность, Ботаника и другие, ниже выбор акцента (в моём кадре стоял «Индиго») и кнопка «Попросить ИИ применить». Так меняют палитру и шрифты целиком, не пересобирая страницу. Тёмно-зелёный с кремовым мне подошёл, панель я закрыл без изменений.

Рядом стрелки «Отменить (Ctrl+Z)», «Повторить» и «История ревизий»: любую версию проекта можно вернуть. Полный список инструментов рабочей области есть в разделе работа над сайтом.

20:10. Как проверить мобильную версию сайта до публикации

Три переключателя над предпросмотром: «Предпросмотр на телефоне», «на планшете», «на всю ширину». В телефонном виде сайт показывается в узкой рамке: шапка с именем и бургером, первый экран, заголовок переносится на три строки, кнопка встаёт под текстом. По этому кадру видно, что ничего не вылезает за край и текст читается.

Чего переключатель не покажет: нажимается ли номер телефона пальцем, не закрывает ли клавиатура кнопку отправки, как выглядит карточка ссылки в мессенджере. Документация Chrome DevTools называет такую эмуляцию устройства «first-order approximation» и советует проверять на настоящем телефоне. Google при этом индексирует и ранжирует страницы по мобильной версии, так что телефонный вид и есть основной. Поэтому после публикации ссылку стоит отправить себе в «Избранное» в Telegram и открыть с телефона: нажать на номер, доскроллить до цен, открыть форму, ввести текст, проверить, что заголовки не режутся.

Галочка согласия под формой в прогоне появилась сама, потому что была в описании. Ссылку на политику обработки персональных данных под этой галочкой и саму политику внизу страницы я бы добавил следующим сообщением в чат, до того как отправлять ссылку ученикам; имя и контакты оператора в ней вписываются свои. Что ещё должно стоять на странице рядом с формой и почему уведомление в Роскомнадзор подаётся до того, как форма начнёт принимать заявки (ч. 1 ст. 22 152-ФЗ), собрано в статье что по закону должно быть на сайте.

20:15. Заголовок и описание в настройках: что увидит поиск

Вкладка «Настройки» в верхней полосе, рядом с «Предпросмотром» и «Кодом», открывает настройки проекта. На пробном тарифе там четыре вкладки: «Общие», «Домены», «Знания», «Хранилище». В «Общих» сверху фавикон (PNG до 256×256, кнопка «Загрузить»), затем «Название проекта», «Заголовок сайта» с подписью «Виден во вкладке браузера и в превью ссылки», «Описание» со счётчиком 0/150, «Видимость» со значением «Публичный» (приватная видимость открывается на платном тарифе) и «Изображение для публикации», которое покажется в соцсетях и мессенджерах при отправке ссылки.

По документации заголовок и описание отсюда участвуют в поисковой выдаче, поэтому заполнять их стоит до публикации. Заголовок у меня совпал с названием проекта, «Математика с Ириной». Описание я бы написал так: «Репетитор по математике в Казани, 5-11 классы, ОГЭ и ЕГЭ. Онлайн и очно в Ново-Савиновском районе, пробное занятие 30 минут бесплатно» - в 150 знаков помещается. Справка Яндекс Вебмастера просит, чтобы описание отличалось от заголовка и не было парой слов, Google пишет, что использует его, когда оно описывает страницу точнее её текста.

Вкладка «Знания» принимает постоянные указания для ИИ до 500 символов. Туда я бы положил телефон и обращение на «вы», чтобы после каждой новой правки номер не менялся. В прогоне обошёлся без этого, правка была одна.

20:20. Как выложить сайт в интернет: поддомен за две секунды

Вкладка «Домены», её порядок целиком описан в разделе публикация и домены. Блок «Поддомен» с подписью «Опубликуйте ваш проект на кастомном поддомене»: поле уже заполнено предложением matematika-s-irinoi, справа «.wuna.ai», под полем зелёная строка «Этот поддомен доступен!» и счётчик «Использование поддоменов: 0 / 1». Занятость проверяется прямо при вводе, так что перебирать варианты можно тут же. Ниже блок «Кастомный домен» с замком и надписью «Публикация на кастомном домене недоступна на вашем текущем плане» - о нём отдельная глава.

Я нажал «Опубликовать». Публикация заняла 2 секунды. В блоке появилась метка «Опубликовано», строка «Ваш проект доступен по адресу: matematika-s-irinoi.wuna.ai», счётчик стал «1 / 1», а кнопки сменились на «Обновить поддомен» и «Снять с публикации». Сайт открылся по https сразу, сертификат получать не пришлось.

На этом вопрос «как опубликовать сайт в интернете» для пробного аккаунта закрыт: хостинг, адрес и защищённое соединение входят в тариф, отдельно ничего не настраивается. Совет по имени поддомена: выбирайте такое, которое можно продиктовать по телефону. matematika-s-irinoi диктуется, matematika-s-irinoi-kazan-oge-2026 уже нет. Свой поддомен занимает те же две секунды, если начать с готового описания.

20:25. Правка в чате после публикации: две минуты и «Обновить поддомен»

Правку я нарочно сделал после публикации, чтобы проверить, как она доедет до боевого адреса. В поле чата написал: «Добавь в шапку телефон +7 900 000-00-00 и продублируй его в подвале». В ленте пошли шаги «Сканируем src/components/Navigation.tsx», «Проверяем чертежи в src/components/Footer.tsx», «Проверяем build», в конце «Думала 122 с». Готово через 2 минуты 6 секунд.

Ответ ассистента: «Сделано: Телефон +7 900 000-00-00 с иконкой и ссылкой tel: добавлен в шапку (десктоп) и в подвал под строкой копирайта. Сборка прошла проверку типов. Что дальше: можно продублировать телефон в мобильном меню (сейчас он только в десктопной шапке - в мобильной шапке мало места, при желании добавлю)». То есть он сам предупредил, где телефона пока нет, и предложил следующий шаг. Счётчик после правки: 32K / 100K, на неё ушло около 27 000 кредитов.

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

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

Когда перейдёте на платный тариф: как привязать свой домен к сайту

На пробном аккаунте блок «Кастомный домен» закрыт замком, поэтому этот шаг описан по документации: в прогоне его не было. Свой домен подключается с тарифа «Стандарт»: 890 ₽ в месяц или 8 590 ₽ за год. Порядок такой.

Как подключить домен к сайту: две A-записи у регистратора

1. В кабинете: «Настройки» → «Домены» → блок «Кастомный домен» → ввести адрес и нажать «Добавить домен».
2. У регистратора, там, где домен покупали, создать две записи типа A: имя «@» (сам домен) со значением 178.253.55.205 и имя «www» с тем же значением 178.253.55.205.
3. Если у домена уже есть A-записи от прошлого хостинга, их нужно заменить. Две разные A-записи на один адрес будут работать через раз, об этом прямо сказано в документации.
4. Подождать, пока записи разойдутся, и нажать «Проверить» в кабинете. SSL выпустится автоматически после подтверждения.

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

Сколько ждать DNS

По документации обычно 15-30 минут, в редких случаях до суток. Справки регистраторов называют ту же пару записей «@» и «www» и тот же срок до суток. Разброс объясняется временем жизни записи, TTL: у Cloudflare, например, значение Auto равно 300 секундам, а диапазон допускает до суток. Поэтому этот шаг стоит последним в вечере: сохранить записи, лечь спать, утром нажать «Проверить». Если после этого адрес не открывается, в разделе документации про публикацию есть короткий список, что проверить.

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

Сколько кредитов ушло за вечер

Цифры с этого прогона, снятые со счётчика в шапке. До старта 100 000. После сборки 59 000, то есть около 41 000 на первую версию. После одной правки с телефоном 32 000, то есть около 27 000 на правку. Итого за сборку и правку 68 000 из 100 000 кредитов пробного периода. Остаток 32 000 я оставил на замену фото и отзывов, до которых в этот вечер не дошёл. С отзывами одно правило: текст публикуется с согласия автора, а имя или фото ребёнка - только с согласия родителя (ст. 152.1 ГК, ст. 9 152-ФЗ). Подпись вида «Мама ученика 6 класса», как в заготовках, этому правилу не мешает, её можно оставить.

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

Чек-лист перед тем, как отправить ссылку

1. Цены, телефон и имя на странице ваши, заглушек в квадратных скобках не осталось.
2. Фото загружены через «Файловый менеджер» и стоят на своих местах.
3. Под формой есть галочка согласия, не отмеченная заранее, и ссылка на политику, которая открывается.
4. Рядом с формой стоят телефон и мессенджер: на пробном периоде заявки из формы не сохраняются.
5. Во вкладке «Общие» заполнены заголовок, описание и изображение для публикации.
6. После последней правки нажато «Обновить поддомен».
7. Ссылка открыта на настоящем телефоне, номер нажимается, кнопка формы видна над клавиатурой.

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

Собрать свой лендинг за вечер, 14 дней бесплатно

Или с заготовкой под любую услугу: универсальное описание с квадратными скобками на месте названия, цен и блоков.

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