Как за 5 минут создать лендинг с помощью AI, Astro и Konso CMS

Большинство генераторов сайтов обещают одно и то же: «Опишите продукт — получите готовый сайт». На практике всё обычно заканчивается красивой картинкой или кучей HTML, который потом приходится переделывать вручную.

Мы решили пойти другим путем.

Вместо генерации одноразового сайта AI создает контент, сохраняет его в Konso CMS, а Astro превращает этот контент в полноценный лендинг.

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

Сегодня покажу, как это работает.

Что вообще происходит?

Вся схема выглядит примерно так.

Вы описываете продукт
        │
        ▼
AI читает описание
        │
        ▼
Создает тексты для лендинга
        │
        ▼
Публикует их в Konso CMS
        │
        ▼
Astro отображает готовый сайт

Самое приятное — почти ничего делать не нужно.

Что понадобится для начала

Перед запуском убедитесь, что у вас есть:

Общее понимание принципов headless CMS
Активная подписка на Claude или Codex. Именно эти AI-ассистенты используются для генерации контента и были протестированы с проектом.
Базовое понимание работы со Skills. AI использует специальный Skill good-landing-creator для создания структуры лендинга и публикации контента в Konso CMS.
Активная подписка на Konso CMS. Она необходима для хранения контента, который сгенерирует AI и который затем будет отображаться на сайте.
Базовые навыки работы с Node.js и терминалом. Достаточно уметь установить зависимости и запустить несколько команд из README.

Перед началом

Исходный код проекта доступен в репозитории вместе с подробной инструкцией по запуску.

git clone https://gitverse.ru/konso/landing-astro-demo.git .

Шаг 1. Настраиваем проект

Первое, что нужно сделать — подготовить окружение.

Создаем файл настроек:

cp .env.example .env

В нем находятся параметры подключения к Konso CMS.

Заполняем три значения:

KONSO_PROJECT_ID=...
KONSO_API_KEY=...

Если не хочется создавать файл, можно временно экспортировать переменные прямо в терминале:

export KONSO_PROJECT_ID=...
export KONSO_API_KEY=...

Но есть нюанс.

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

Теперь устанавливаем зависимости:

pnpm install

На этом подготовка закончена.

Шаг 2. Создаем структуру в CMS

Любая CMS должна понимать, какие данные в ней будут храниться.

Например:

заголовок страницы;
SEO;
описание продукта;
боли клиентов;
преимущества;
CTA-кнопка;
и так далее.

Вручную создавать все эти поля долго и скучно.

Поэтому достаточно один раз выполнить команду:

node scripts/init.mjs

Скрипт автоматически создаст модель контента landing-page со всеми необходимыми полями. После выполнения команды вы сможете открыть личный кабинет Konso и посмотреть созданную структуру, а при необходимости — изменить или дополнить её.

Если уже запускали раньше — повторять не нужно.

Шаг 3. Расскажите AI о своем продукте

Теперь самое интересное.

Откройте файл:

config/context.json

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

Например:

{
  "name": "SuperCRM",
  "description": "CRM для небольших компаний",
  "audience": "Отделы продаж",
  "problems": [
    "Теряются заявки",
    "Нет аналитики",
    "Менеджеры работают в Excel"
  ],
  "cta": "Попробовать бесплатно"
}

Не нужно писать рекламные тексты.

Не нужно придумывать красивые формулировки.

Не нужно пытаться “угодить” AI.

Чем честнее и конкретнее описание — тем лучше получится результат.

Шаг 4. Просим AI сделать лендинг

Дальше происходит магия.

Открываем Claude Code или Codex и пишем буквально одну фразу:

/good-landing-creator Создай лендинг для моего Saas сервиса

На этом всё.

Дальше AI самостоятельно:

читает context.json;
запускает встроенный skill;
пишет тексты;
создает структуру страницы;
публикует результат в Konso CMS.

То есть вам не нужно копировать тексты.

Не нужно открывать CMS.

Не нужно создавать записи вручную.

Весь контент появляется автоматически.

Что такое Skill?

Если интересно, почему AI понимает, что именно нужно сделать.

Все дело в специальных инструкциях — Skills.

В данном примере используется good-landing-creator.

Он знает:

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

Получается что-то вроде очень опытного маркетолога, который еще умеет работать с CMS.

Шаг 5. Запускаем сайт

Теперь остается всего одна команда:

pnpm dev

После запуска открываем браузер:

http://localhost:4321

Если всё прошло успешно, вы увидите уже готовый лендинг.

Почему Astro?

Можно было взять React, Next.js или любой другой фреймворк.

Но Astro отлично подходит именно для лендингов.

Почему?

Во-первых, страницы генерируются заранее.

Это означает:

быструю загрузку;
хороший SEO;
минимальный JavaScript;
высокие оценки Lighthouse.

Во-вторых, Astro не заставляет использовать какой-то один стек.

Можно спокойно подключить React, Vue, Svelte или вообще писать обычный HTML.

Почему контент хранится в CMS?

Многие AI-инструменты просто генерируют HTML.

Каждый раз приходится создавать сайт заново.

Здесь подход другой.

AI создает именно контент.

А значит после генерации можно:

изменить заголовок;
заменить изображение;
переписать текст;
добавить новый блок;
подключить перевод;
переиспользовать данные на другом сайте.

И всё это без знания HTML

Получается полноценный рабочий процесс, а не одноразовая генерация.

Что можно изменить?

Практически всё.

Можно заменить шаблон Astro, например запустив /frontend-design Обнови дизайн сайта, сделав его более современным и визуально привлекательным.

Можно добавить новые блоки.

Можно изменить структуру CMS.

Можно написать собственный Skill для AI.

Можно генерировать лендинги для разных продуктов буквально за несколько минут.

Никаких ограничений здесь нет.

Для кого подойдет этот проект?

Он будет полезен, если вы:

делаете MVP;
запускаете новые продукты;
работаете в агентстве;
часто создаете промостраницы;
хотите автоматизировать создание маркетингового контента.

Особенно удобно, когда нужно запускать сразу несколько лендингов с похожей структурой.

Итоги

Вместо того чтобы вручную писать тексты, копировать их в CMS и верстать страницу, вы просто описываете свой продукт.

Дальше всё происходит автоматически.

AI создает контент.

Konso хранит его в структурированном виде.

Astro превращает его в быстрый современный сайт.

И самое главное — после генерации вы получаете не “одноразовую картинку”, а полноценный проект, который можно развивать дальше.

Именно таким, на наш взгляд, и должен быть современный AI-first процесс создания лендингов.

Создание лендинга за 5 минут с AI, Astro и Konso CMS