Как мы собрали ИИ-лендинг на GetCourse: от идеи до готового результата за 40 минут

На создание похожих лендингов у команды «Эффекта Медичи» раньше уходило две-три недели. Страницу для программы «AI-профессионал» Диана Мохаммад и Мадина Салбиева собрали за 40 минут.

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

GetCourse провёл конкурс лендингов, созданных с помощью ИИ. Участникам нужно было разместить страницу в действующей школе на GetCourse, показать её скриншоты или скринкаст и указать, сколько времени прошло от идеи до публикации. Всего в конкурсе участвовали 59 человек. Проверку прошли 49 работ: их авторы разместили лендинги на платформе, вступили в чат и указали затраченное время.

Из этих работ выбрали десять финалистов, а победителей определили открытым голосованием. Первое место заняли Диана Мохаммад и Мадина Салбиева с лендингом проекта «Эффект Медичи».

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

Ниже победительницы рассказывают, как с помощью ИИ собрали лендинг программы «AI-профессионал» за 40 минут и перенесли его на GetCourse.

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

Во время конкурса мы в основном использовали ИИ-агентов для разработки — Codex и Claude Code. Для работы с ними применяли скиллы, то есть наборы инструкций для дизайна, вёрстки, проверки адаптивности, работы с браузером и других повторяющихся задач. Часть этих скиллов мы создавали сами для задач, которые приходилось выполнять регулярно.

Изображения создавали с помощью Nano Banana и инструментов ChatGPT. Для анимации использовали Remotion: он позволяет программно собирать видео из отдельных элементов и анимаций.

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

Мы старались не использовать слишком общие ролевые промпты вроде «ты специалист по UX» или «ты дизайнер лендингов». Вместо этого максимально четко описывали критерии результата и давали большое количество референсов — как отдельных элементов дизайна, так и полноценных лендингов.

Одного большого промпта не было. Скорее это была последовательность задач и итераций.

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

После этого давали референсы и примеры дизайна. Агент предлагал решение, мы смотрели результат непосредственно в браузере и затем либо принимали его, либо уточняли задачу.

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

На практике это была не схема «написал один промпт — получил лендинг», а полноценная цепочка:

Дорабатывать результаты работы нейросети приходилось. Причём это была обычная часть работы.

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

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

Когда визуальная концепция и код страницы были готовы, мы перенесли результат в GetCourse. Здесь не пришлось собирать страницу заново из стандартных блоков конструктора: основой стал готовый код на HTML, CSS и JavaScript.

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

В итоге схема получается довольно простой:

Итоговый результат: готовый лендинг. На всё у нас ушло 40 минут.

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

При этом внутренние инструменты GetCourse — формы, работа с пользовательскими данными, аналитика и другие элементы — достаточно удобно интегрируются в такую страницу.

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

То есть мы уже гораздо меньше зависим от ограничений конструктора, отдельных дизайнеров или верстальщиков. Если нужно что-то изменить, правку можно достаточно быстро внести непосредственно в код.

Во всём процессе подготовки лендинга удивила скорость перехода от идеи к работающему варианту.

Раньше между формулировкой идеи, дизайном, вёрсткой и проверкой могло пройти несколько дней. Сейчас можно описать задачу, показать референс и практически сразу увидеть работающий вариант в браузере.

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

Кроме того, работу ускоряет автоматическая проверка страниц: агент может сам открыть сайт, пройти нужный сценарий и проверить, как всё отображается.

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

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

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

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

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

Мы советуем своим ученицам для начала использовать самые бюджетные варианты, а затем дорабатывать их. Например, у GetCourse есть шаблоны лендингов для разных задач — начинающим это может быть полезно.

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

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