Готовый рабочий прототип посадочной страницы можно собрать за 2–4 часа без кода, дизайнера и ТЗ на 40 страниц. На первый набросок структуры и концепции хватит 15 минут. Достаточно браузера и нейросети с режимом Canvas — например, Gemini, ChatGPT или Qwen Studio.
О чем статья
Расскажем, как бэкенд-разработчик из «Софт Инжиниринга» сделал лендинг для ИТ-вечеринки, вообще не касаясь фронтенда. Ниже — полный гайд, как повторить.
Кому будет полезно
- Владельцам бизнеса — красиво презентовать продукт или услугу.
- HR-специалистам и ивент-менеджерам — собрать прототип страницы для регистрации на мероприятие.
- Маркетологам — подготовить визуал сайта перед тем, как передать задачу в разработку.
- Руководителям отделов — заменить скучный PowerPoint на интерактивный сайт-презентацию.
Как было у нас: лендинг для ProgerFest
Если вы были на нашей ИТ-вечеринке в октябре прошлого года, то наверняка помните и эту посадочную страницу — bar-code.esoft.su. Ее создал Женя — наш бэкенд-разработчик. Ни одной строчки кода для страницы не было написано вручную.
Год назад Женя собрал сайт с помощью ИИ за 8 часов. В этом году на аналогичную задачу ушло бы в 2 раза меньше времени: технологии не стоят на месте, инструменты становятся проще и быстрее.
Год назад Женя собрал сайт с помощью ИИ за 8 часов. В этом году на аналогичную задачу ушло бы в 2 раза меньше времени: технологии не стоят на месте, инструменты становятся проще и быстрее.
🦆 Фронтенд и бэкенд — в чем разница
Веб-сайт состоит из двух частей.
Фронтенд — это то, что вы видите в браузере: кнопки, формы, анимации, тексты. Все, с чем взаимодействует пользователь.
Бэкенд — это то, что работает за кулисами: база данных, обработка заявок, отправка писем, безопасность. Пользователь этого не видит, но без бэкенда форма регистрации не сохранит данные.
Фронтенд — это то, что вы видите в браузере: кнопки, формы, анимации, тексты. Все, с чем взаимодействует пользователь.
Бэкенд — это то, что работает за кулисами: база данных, обработка заявок, отправка писем, безопасность. Пользователь этого не видит, но без бэкенда форма регистрации не сохранит данные.
Какую задачу решали?
Сделать посадочную страницу для ИТ-вечеринки ProgerFest с формой регистрации. Заявки должны падать в Google-таблицу.
Контекст
Изначально был только Telegram-бот. Женя предложил сделать удобную страницу с кнопками и формой — сначала в браузере, потом внутри Telegram.
Решение
Собрать лендинг через нейросеть, не привлекая фронтенд-разработчика.
Инструменты
Gemini в режиме Canvas для быстрого прототипа, Cursor AI для продвинутых правок.
Как это было:
🔗 Готовый лендинг: bar-code.esoft.su
Сделать посадочную страницу для ИТ-вечеринки ProgerFest с формой регистрации. Заявки должны падать в Google-таблицу.
Контекст
Изначально был только Telegram-бот. Женя предложил сделать удобную страницу с кнопками и формой — сначала в браузере, потом внутри Telegram.
Решение
Собрать лендинг через нейросеть, не привлекая фронтенд-разработчика.
Инструменты
Gemini в режиме Canvas для быстрого прототипа, Cursor AI для продвинутых правок.
Как это было:
- Брейншторм структуры сайта в чате с ИИ — какие блоки, в каком порядке.
- Генерация HTML-прототипа в Gemini Canvas.
- Точечные правки по очереди, а не все вместе: «сделай кнопку зеленой», «измени анимацию фона».
- Скачивание HTML-файла и проверка в браузере.
- Превращение прототипа в полноценный рабочий сайт (на фреймворке Vue3).
🔗 Готовый лендинг: bar-code.esoft.su
🦆 Что такое Canvas-режим
Canvas — это специальный режим в нейросети. ИИ не просто пишет текст, а создает визуальный прототип. Вы сразу видите страницу, кнопки, блоки и можете править их в реальном времени. Не нужно копировать код — все отображается в окне чата.
В разных нейросетях этот режим называется по-разному: в Qwen Studio → веб-разработка, в ChatGPT → холст. Мы для удобства будем использовать термин Canvas.
Canvas — это специальный режим в нейросети. ИИ не просто пишет текст, а создает визуальный прототип. Вы сразу видите страницу, кнопки, блоки и можете править их в реальном времени. Не нужно копировать код — все отображается в окне чата.
В разных нейросетях этот режим называется по-разному: в Qwen Studio → веб-разработка, в ChatGPT → холст. Мы для удобства будем использовать термин Canvas.
Что ИИ делает хорошо, а где буксует
✅ Хорошо:
- Собирает базовую структуру: блоки, кнопки, заголовки.
- Подбирает цветовую схему и пишет черновые тексты.
- Выдает адаптивный код — страница работает на телефоне и десктопе.
- ИИ не понимает бизнес-контекст без подробного описания.
- Интерактивные элементы: формы, всплывающие окна, сложные кнопки могут работать криво.
- Верстка на телефоне иногда съезжает — нужно проверять вручную.
Метрики и результаты
Сколько времени потратили
- Первый прототип ProgerFest — около 4 часов.
- Доработка, смена тематики, правки — еще 4 часа.
- Итого: 8 часов на готовый лендинг с формой, которая пишет заявки в Google-таблицу.
- Если делать сегодня: 4 часа с учетом правок и консультаций с заказчиком. Модели стали умнее, правок меньше.
Обратная связь от автора
Женя, бэкенд-разработчик:
«Я никогда не делал фронтенд. Вообще не трогал код — максимум менял тексты. Все: расположение блоков, анимации, интерактив — делал ИИ по моим текстовым командам.
Главное — не просить ИИ сразу «сделать страницу». Сначала утвердите структуру словами: какие блоки, в каком порядке, что в каждом. Когда план вас устраивает — переходите к генерации. Иначе будете переделывать по десять раз».
«Я никогда не делал фронтенд. Вообще не трогал код — максимум менял тексты. Все: расположение блоков, анимации, интерактив — делал ИИ по моим текстовым командам.
Главное — не просить ИИ сразу «сделать страницу». Сначала утвердите структуру словами: какие блоки, в каком порядке, что в каждом. Когда план вас устраивает — переходите к генерации. Иначе будете переделывать по десять раз».
Гайд для не-айтишников: как сделать лендинг за вечер
Рассказываем по шагам, как вы можете подготовить посадочную страницу: от сбора требований до готового сайта с интерактивными элементами.
🦆 Чему мы научим, а что делать самостоятельно не стоит
С помощью ИИ вы легко соберете визуальный прототип: красивый дизайн, все блоки, работающие кнопки, форму заявки. Этого достаточно, чтобы показать идею коллегам, получить одобрение или передать макет в разработку.
Если нужна рабочая форма, которая реально отправляет заявки на почту или в таблицу — покажите готовый прототип программисту. Он безопасно подключит отправку данных.
С помощью ИИ вы легко соберете визуальный прототип: красивый дизайн, все блоки, работающие кнопки, форму заявки. Этого достаточно, чтобы показать идею коллегам, получить одобрение или передать макет в разработку.
Если нужна рабочая форма, которая реально отправляет заявки на почту или в таблицу — покажите готовый прототип программисту. Он безопасно подключит отправку данных.
Шаг 1. Начните со сбора требований
Откройте любой ИИ-чат. Подойдут Qwen Studio, Gemini, ChatGPT. Вставьте промпт (см. ниже «Промпт для сбора требований»).
Шаг 2. Дайте ответы на вопросы
Помощник задаст семь вопросов: цель страницы, целевая аудитория, основное предложение, блоки, стиль, цвета, дополнительные требования. Отвечайте своими словами. После каждого ответа ИИ резюмирует, что понял, и задаст следующий вопрос.
Шаг 3. Сгенерируйте страницу
После всех ответов ИИ выдаст новый структурированный промпт. Скопируйте его.
Откройте нейросеть с режимом Canvas: это снова могут быть Qwen Studio, Gemini или ChatGPT. Чтобы переключиться на режим Canvas, нажмите на «+» в окне для ввода промпта, найдите нужный режим и кликните на него.
Вставьте готовый промпт и отдайте его ИИ.
Шаг 4. Сохраните работу
ИИ создаст визуальный прототип. Скачайте HTML-файл или скопируйте код из окна и вставьте в «Блокнот». При сохранении файла в «Блокноте» выберите «Все файлы» и назовите файл index.html — именно с расширением .html, а не .txt.
Шаг 5. Проверьте и внесите правки
Откройте файл двойным кликом и проверьте результат. Для точечных правок используйте специальный промпт-помощник (см. ниже «Промпт для внесения правок»). Он даст команду ИИ менять только то, что вы просите, не трогая остальной код.
Вернитесь в тот же чат, где вы создавали сайт, и вставьте промпт для правок. ИИ уже видит ваш код, поэтому заново его загружать не нужно.
Шаг 6. Заберите результат
Скопируйте весь обновленный код из окна Canvas. Откройте ваш файл index.html в «Блокноте», выделите все содержимое, удалите его и вставьте новый код. Сохраните файл.
Если нужно показать коллегам, скиньте им этот файл в мессенджер, они откроют его у себя в браузере. Если нужен полноценный сайт в интернете, передайте этот файл вашему сисадмину или разработчику.
Откройте любой ИИ-чат. Подойдут Qwen Studio, Gemini, ChatGPT. Вставьте промпт (см. ниже «Промпт для сбора требований»).
Шаг 2. Дайте ответы на вопросы
Помощник задаст семь вопросов: цель страницы, целевая аудитория, основное предложение, блоки, стиль, цвета, дополнительные требования. Отвечайте своими словами. После каждого ответа ИИ резюмирует, что понял, и задаст следующий вопрос.
Шаг 3. Сгенерируйте страницу
После всех ответов ИИ выдаст новый структурированный промпт. Скопируйте его.
Откройте нейросеть с режимом Canvas: это снова могут быть Qwen Studio, Gemini или ChatGPT. Чтобы переключиться на режим Canvas, нажмите на «+» в окне для ввода промпта, найдите нужный режим и кликните на него.
Вставьте готовый промпт и отдайте его ИИ.
Шаг 4. Сохраните работу
ИИ создаст визуальный прототип. Скачайте HTML-файл или скопируйте код из окна и вставьте в «Блокнот». При сохранении файла в «Блокноте» выберите «Все файлы» и назовите файл index.html — именно с расширением .html, а не .txt.
Шаг 5. Проверьте и внесите правки
Откройте файл двойным кликом и проверьте результат. Для точечных правок используйте специальный промпт-помощник (см. ниже «Промпт для внесения правок»). Он даст команду ИИ менять только то, что вы просите, не трогая остальной код.
Вернитесь в тот же чат, где вы создавали сайт, и вставьте промпт для правок. ИИ уже видит ваш код, поэтому заново его загружать не нужно.
Шаг 6. Заберите результат
Скопируйте весь обновленный код из окна Canvas. Откройте ваш файл index.html в «Блокноте», выделите все содержимое, удалите его и вставьте новый код. Сохраните файл.
Если нужно показать коллегам, скиньте им этот файл в мессенджер, они откроют его у себя в браузере. Если нужен полноценный сайт в интернете, передайте этот файл вашему сисадмину или разработчику.
🦆 Что такое HTML-файл
HTML — это язык, на котором сделана любая страница в интернете. Файл с расширением .html — и есть страница. Открываете его в браузере — видите сайт.
HTML — это язык, на котором сделана любая страница в интернете. Файл с расширением .html — и есть страница. Открываете его в браузере — видите сайт.
Советы для максимальной пользы
- Сначала структура — потом код. Не просите ИИ сразу «сделать страницу». Сначала утвердите план блоками.
- Проверяйте на разных устройствах. Откройте HTML-файл на компьютере или смартфоне — ИИ иногда ошибается с адаптивом.
- Показывайте референсы. Не пытайтесь объяснить стиль словами «сделай красиво и современно». Сделайте скриншот сайта, который вам нравится, загрузите мудборд или логотип компании прямо в чат. Напишите: «Сделай дизайн и цветовую гамму в такой же стилистике». ИИ считает визуал лучше, чем текстовые описания.
Ответы на популярные вопросы (FAQ)
Я вообще не умею программировать. Я смогу?
Да. Вам нужен только браузер и нейросеть. Код писать не придется — ИИ генерирует его сам. Вы управляете процессом текстовыми командами: «сделай кнопку больше», «добавь блок с отзывами».
Сколько это стоит?
Базовые версии Qwen Studio, Gemini, ChatGPT бесплатные. Платные подписки дают доступ к более мощным моделям, но для старта хватит бесплатных.
Мне нужен не прототип, а полноценный сайт. Как быть?
Прототип, собранный через ИИ, можно передать разработчику как ТЗ — это сэкономит дни работы.
Да. Вам нужен только браузер и нейросеть. Код писать не придется — ИИ генерирует его сам. Вы управляете процессом текстовыми командами: «сделай кнопку больше», «добавь блок с отзывами».
Сколько это стоит?
Базовые версии Qwen Studio, Gemini, ChatGPT бесплатные. Платные подписки дают доступ к более мощным моделям, но для старта хватит бесплатных.
Мне нужен не прототип, а полноценный сайт. Как быть?
Прототип, собранный через ИИ, можно передать разработчику как ТЗ — это сэкономит дни работы.
Итог: суть кейса в 5 пунктах
- Проблема: нужен лендинг для мероприятия, но нет свободного фронтенд-разработчика.
- Решение: собрать прототип через ИИ в режиме Canvas, не привлекая специалиста.
- Результат: рабочий лендинг за 8 часов (сейчас — 4 часа), с адаптивом, анимациями и формой для сохранения заявок.
- Настройка: нейросеть с режимом Canvas (Gemini, Qwen Studio, ChatGPT) + браузер для проверки.
- Для кого: руководители, HR, ивент-менеджеры, владельцы бизнеса — все, кому нужен быстрый прототип посадочной страницы без программиста.
Это был второй кейс из цикла «Утиных историй»: проекта, где мы рассказываем, как ИИ может облегчить жизнь бизнесу. Все истории реальны, а персонажи не вымышлены. Кроме меня, утенка Севы 🦆 — я здесь, чтобы наш рассказ про ИИ был проще, а технологии стали вам ближе.
🦆 Попробуйте на своих задачах
Скопируйте промпт для сбора требований → ответьте на вопросы → скопируйте готовый промпт для Canvas → сгенерируйте код → сохраните как index.html → внесите правки → получите готовый прототип.
Скопируйте промпт для сбора требований → ответьте на вопросы → скопируйте готовый промпт для Canvas → сгенерируйте код → сохраните как index.html → внесите правки → получите готовый прототип.
Поделитесь результатом в комментариях в наших соцсетях или задайте нам вопрос: