Как с помощью ИИ создавать красивые лендинги на GetCourse

GetCourse позволяет онлайн-школам собирать страницы из блоков, добавлять собственные HTML, CSS и JavaScript, подключать формы, настраивать мобильную версию — решать любые задачи. В связке с ИИ работать становится ещё удобнее: нейросеть помогает продумать структуру, подготовить тексты и изображения, написать код и быстро проверить разные визуальные решения.

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

Недавно мы уже писали про работу победительниц конкурса — Дианы Мохаммад и Мадины Салбиевой из «Эффекта Медичи». Они рассказали, как с помощью ИИ создали лендинг за 40 минут и перенесли готовые HTML, CSS и JavaScript в GetCourse.

В этой статье мы собрали больше кейсов лендингов, собранных в связке ИИ и GetCourse. Разбираемся, какие нейросети использовали авторы, как ставили задачи, что собирали с помощью кода, а что оставляли в стандартном конструкторе GetCourse, и сколько времени заняла работа.

«ИИ-ИЗИ» — онлайн-школа о практическом применении искусственного интеллекта в работе, бизнесе и повседневной жизни. Мы показываем, как с помощью ИИ создавать контент, исследовать рынок, автоматизировать рутинные задачи и разрабатывать продукты.

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

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

Такой подход особенно хорошо показал себя при работе с GetCourse, поскольку позволил заметно расширить возможности стандартного конструктора.

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

На весь сайт ушло примерно 5–6 часов, включая разработку структуры и оффера, написание текстов, создание визуальной концепции и кода, добавление интерактивных элементов, тарифов и мобильной адаптации. Такой подход позволил пройти путь от идеи до готовой страницы в рамках одного рабочего процесса.

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

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

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

Claude Code не только написал код, но и самостоятельно открыл страницу в браузере, проверил её работу и исправил найденные проблемы.

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

Главной задачей было создать новую стартовую страницу «Собачьего дела» — онлайн-школы о поведении собак для владельцев и специалистов.

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

В результате получился лендинг, который сочетает штатные возможности GetCourse с индивидуальным визуальным оформлением.

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

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

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

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

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

На конкурс я представила лендинг для регистрации на эфир о вёрстке с помощью нейросетей. Он рассчитан на технических специалистов, которые работают с GetCourse и собирают страницы по готовым макетам. Аудитория узкая и хорошо знакома с этим процессом, поэтому мне не хотелось делать обычную продающую страницу.

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

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

При этом полностью отказываться от стандартного конструктора необязательно. Если заказчику нужно самостоятельно менять тексты и изображения, контент можно оставить в редактируемых блоках GetCourse, а ChatGPT использовать для оформления через CSS.
Страницу я всегда собираю по отдельным блокам. Так проще контролировать изменения и меньше риск, что при исправлении одного участка нейросеть случайно затронет другой.
Все этапы удобно проходить в одном диалоге: придумать концепцию, создать визуал, подготовить отдельные элементы, сверстать их и сразу внести правки. В то же время этот опыт подтвердил, что ИИ не заменяет специалиста. Нужно понимать основы вёрстки, точно формулировать задачи и проверять результат: расположение элементов, скорость загрузки, читаемость и корректность отображения на разных устройствах.
Для меня нейросеть стала не заменой дизайнера, а инструментом, который помогает гораздо быстрее пройти путь от идеи до работающего лендинга и реализовать более сложные визуальные решения.

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

Подписывайтесь на официальный Telegram-канал GetCourse, чтобы не пропустить новые конкурсы. Показывайте свои проекты, участвуйте, занимайте призовые места и получайте награды. Возможно, следующий материал будет уже о вашей работе!