Готовый рабочий прототип посадочной страницы можно собрать за 2–4 часа без кода, дизайнера и ТЗ на 40 страниц. На первый набросок структуры и концепции хватит 15 минут. Достаточно браузера и нейросети с режимом Canvas — например, Gemini, ChatGPT или Qwen Studio.
О чем статья
Расскажем, как бэкенд-разработчик из «Софт Инжиниринга» сделал лендинг для ИТ-вечеринки, вообще не касаясь фронтенда. Ниже — полный гайд, как повторить.
Кому будет полезно
Владельцам бизнеса — красиво презентовать продукт или услугу.
HR-специалистам и ивент-менеджерам — собрать прототип страницы для регистрации на мероприятие.
Маркетологам — подготовить визуал сайта перед тем, как передать задачу в разработку.
Руководителям отделов — заменить скучный PowerPoint на интерактивный сайт-презентацию.
Как было у нас: лендинг для ProgerFest
Если вы были на нашей ИТ-вечеринке в октябре прошлого года, то наверняка помните и эту посадочную страницу — bar-code.esoft.su. Ее создал Женя — наш бэкенд-разработчик. Ни одной строчки кода для страницы не было написано вручную.
Год назад Женя собрал сайт с помощью ИИ за 8 часов. В этом году на аналогичную задачу ушло бы в 2 раза меньше времени: технологии не стоят на месте, инструменты становятся проще и быстрее.
🦆 Фронтенд и бэкенд — в чем разница
Веб-сайт состоит из двух частей.
Фронтенд — это то, что вы видите в браузере: кнопки, формы, анимации, тексты. Все, с чем взаимодействует пользователь.
Бэкенд — это то, что работает за кулисами: база данных, обработка заявок, отправка писем, безопасность. Пользователь этого не видит, но без бэкенда форма регистрации не сохранит данные.
Какую задачу решали?
Сделать посадочную страницу для ИТ-вечеринки ProgerFest с формой регистрации. Заявки должны падать в Google-таблицу.
Контекст
Изначально был только Telegram-бот. Женя предложил сделать удобную страницу с кнопками и формой — сначала в браузере, потом внутри Telegram.
Решение
Собрать лендинг через нейросеть, не привлекая фронтенд-разработчика.
Инструменты
Gemini в режиме Canvas для быстрого прототипа, Cursor AI для продвинутых правок.
Как это было:
Брейншторм структуры сайта в чате с ИИ — какие блоки, в каком порядке.
Генерация HTML-прототипа в Gemini Canvas.
Точечные правки по очереди, а не все вместе: «сделай кнопку зеленой», «измени анимацию фона».
Скачивание HTML-файла и проверка в браузере.
Превращение прототипа в полноценный рабочий сайт (на фреймворке Vue3).
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 в «Блокноте», выделите все содержимое, удалите его и вставьте новый код. Сохраните файл.
Если нужно показать коллегам, скиньте им этот файл в мессенджер, они откроют его у себя в браузере. Если нужен полноценный сайт в интернете, передайте этот файл вашему сисадмину или разработчику.
🦆 Что такое HTML-файл
HTML — это язык, на котором сделана любая страница в интернете. Файл с расширением .html — и есть страница. Открываете его в браузере — видите сайт.
Ты — опытный продуктовый дизайнер и маркетолог. Твоя задача — помочь мне сформулировать требования к лендингу, который я хочу создать.
Я не дизайнер и не маркетолог. Мне нужна твоя помощь, чтобы понять, что именно я хочу видеть на странице.
Задавай мне вопросы по одному. После каждого моего ответа:
1. Кратко резюмируй, что понял.
2. Задай следующий вопрос.
Вот вопросы, которые нужно задать (можешь переформулировать своими словами, но суть должна остаться):
Цель страницы. Что должен сделать посетитель после просмотра лендинга?
Варианты: зарегистрироваться на мероприятие, оставить заявку, купить продукт, скачать материал, связаться с нами. Или свой вариант.
Целевая аудитория. Кто будет читать эту страницу? Опишите в 1–2 предложениях: возраст, профессия, что их волнует, почему они сюда пришли.
Основное предложение. Что вы предлагаете? Какую проблему решаете? Сформулируйте в одном предложении. Например: «Регистрация на фестиваль для разработчиков» или «Курс по маркетингу для начинающих».
Ключевые блоки. Какие разделы должны быть на странице? Если не уверены, я предложу стандартный набор:
Шапка с навигацией
Главный экран с заголовком и призывом к действию
О продукте или мероприятии
Преимущества или особенности
Программа или тарифы
Отзывы или кейсы
Форма регистрации или заявки
Контакты и футер
Скажите, какие блоки вам нужны, или напишите «предложи сам».
Стиль и дизайн. Какой стиль вам ближе?
Минимализм: чистый, простой, много воздуха
Корпоративный: строгий, деловой, сдержанные цвета
Яркий молодежный: насыщенные цвета, динамичный
Технологичный: тёмные тона, неон, футуристичный
Или опишите свой
Цветовая схема. Есть ли предпочтения по цветам? Если нет, я подберу под стиль.
Дополнительные требования. Что-то еще важное? Анимации, интеграции, особые элементы.
После того как я отвечу на все вопросы, ты должен:
1. Собрать все мои ответы в структурированный документ.
2. Сформировать готовый промпт для режима Canvas — отдельным блоком, который я смогу скопировать.
3. Дать рекомендации, если увидишь противоречия или упущения.
Начни с первого вопроса.
Ты — опытный фронтенд-разработчик, который работает аккуратно и не ломает существующий код.
Твоя задача: внести точечные изменения.
Правила работы:
Изменяй ТОЛЬКО то, о чем я прошу. Остальной код, стили, структуру и логику не трогай.
Если правка касается конкретного блока, меняй только этот блок.
Сохраняй все существующие классы, анимации и адаптивность.
После внесения изменений кратко опиши, что именно ты изменил (1–2 предложения).
Правки:
[ОПИШИТЕ ПРАВКИ. Например: «Сделай кнопку “Зарегистрироваться” зеленой (#00C853), увеличь ее размер на 20% и добавь тень при наведении. Остальные кнопки и стили не трогай.»]
Если правка неясна или может сломать другие элементы — сначала спроси меня, прежде чем вносить изменения.
Советы для максимальной пользы
Сначала структура — потом код. Не просите ИИ сразу «сделать страницу». Сначала утвердите план блоками.
Проверяйте на разных устройствах. Откройте HTML-файл на компьютере или смартфоне — ИИ иногда ошибается с адаптивом.
Показывайте референсы. Не пытайтесь объяснить стиль словами «сделай красиво и современно». Сделайте скриншот сайта, который вам нравится, загрузите мудборд или логотип компании прямо в чат. Напишите: «Сделай дизайн и цветовую гамму в такой же стилистике». ИИ считает визуал лучше, чем текстовые описания.
Ответы на популярные вопросы (FAQ)
Я вообще не умею программировать. Я смогу? Да. Вам нужен только браузер и нейросеть. Код писать не придется — ИИ генерирует его сам. Вы управляете процессом текстовыми командами: «сделай кнопку больше», «добавь блок с отзывами».
Сколько это стоит? Базовые версии Qwen Studio, Gemini, ChatGPT бесплатные. Платные подписки дают доступ к более мощным моделям, но для старта хватит бесплатных.
Мне нужен не прототип, а полноценный сайт. Как быть? Прототип, собранный через ИИ, можно передать разработчику как ТЗ — это сэкономит дни работы.
Итог: суть кейса в 5 пунктах
Проблема: нужен лендинг для мероприятия, но нет свободного фронтенд-разработчика.
Решение: собрать прототип через ИИ в режиме Canvas, не привлекая специалиста.
Результат: рабочий лендинг за 8 часов (сейчас — 4 часа), с адаптивом, анимациями и формой для сохранения заявок.
Настройка: нейросеть с режимом Canvas (Gemini, Qwen Studio, ChatGPT) + браузер для проверки.
Для кого: руководители, HR, ивент-менеджеры, владельцы бизнеса — все, кому нужен быстрый прототип посадочной страницы без программиста.
Это был второй кейс из цикла «Утиных историй»: проекта, где мы рассказываем, как ИИ может облегчить жизнь бизнесу. Все истории реальны, а персонажи не вымышлены. Кроме меня, утенка Севы 🦆 — я здесь, чтобы наш рассказ про ИИ был проще, а технологии стали вам ближе.
🦆 Попробуйте на своих задачах
Скопируйте промпт для сбора требований → ответьте на вопросы → скопируйте готовый промпт для Canvas → сгенерируйте код → сохраните как index.html → внесите правки → получите готовый прототип.
Поделитесь результатом в комментариях в наших соцсетях или задайте нам вопрос: