Все разработки
Программное обеспечение

Конструктор лендингов с AI

Внутренний инструмент для быстрого выпуска продуктовых лендингов: редактор в 4 шага, 15 переиспользуемых блоков, 5 цветовых тем, AI-генерация текстов. Каждый лендинг — отдельный URL с собственной темой, без перекомпиляции проекта.

Блоков
15
Тем
5 × dark/light
Шагов редактора
4
Конструктор лендингов с AI

О продукте

Контент-редакторы собирают лендинг, не трогая код: выбирают блоки, задают тему, заполняют поля, превью видно сразу. Результат — JSON, который хранится в in-memory store и рендерится динамической route /landing/[slug].

Архитектура стилей — трёхуровневая система CSS-токенов: primitives → semantic → component. Тема и режим переключаются через data-attributes, все блоки автоматически перекрашиваются без повторной сборки.

AI-ассистент подключён на уровне полей: нажимаешь «сгенерировать» → GigaChat выдаёт вариант текста под тон бренда и структуру блока.

Ключевые возможности

15 блоков

Hero, Features, Stats, Comparison, CTA, FAQ, Pricing, Testimonials, Gallery, Form, Contacts, Team, Timeline, Logos, Banner.

5 тем × 2 режима

Amber, Blue, Teal, Purple, Coral — каждая с light и dark режимом. Переключение через data-lp-theme / data-lp-mode.

AI-генерация

GigaChat генерирует тексты, заголовки, описания. Поле за полем или весь блок сразу — с учётом темы и контекста.

Визуальный редактор

4 шага: выбор секций → стиль → контент → превью. Drag-and-drop порядка блоков, live preview.

CSS Design Tokens

3 уровня: primitives (цвета, размеры) → semantic (bg, text, border) → component (btn, card). Только var(--lp-*) в блоках.

JSON-driven

Каждый лендинг — сериализуемый JSON. Сохранение, экспорт, шаблоны, A/B-тесты — всё через данные, без билда.

Админ-панель

Интерфейсы редактирования и конфигурирования

Шаг Шаблон: выбор стартового шаблона
Шаблон — стартовый пресет для нового лендинга
Шаг Секции: каталог блоков
Секции — выбор блоков из каталога (hero, features, pricing...)

Технологический стек

Core
  • Next.js 16
  • React 19
  • TypeScript strict
Стили
  • CSS Design Tokens
  • Tailwind 4
  • data-attribute themes
AI
  • GigaChat
  • GigaChat SDK
  • Streaming responses
  • Per-field generation
Backend / Data
  • Zod schemas
  • PostgreSQL 16 (JSONB)
  • MinIO (медиа)
  • Идемпотентные сейвы
Инфраструктура
  • Docker Compose
  • Proxmox VE
  • Caddy reverse-proxy
  • Один git push → live

Что под капотом

  • Добавление нового блока = 2 файла: Block.tsx и config.ts
  • Живое превью без перезагрузки — состояние в контексте шагов
  • Force-dynamic route на рендер — свежий JSON, без пересборки
  • Полная замена стилей лендинга одним свитчем темы
  • Каждый лендинг — JSONB-запись в PostgreSQL — версионирование, A/B-тесты, шаблоны через копию строки
  • Self-hosted на нашем Proxmox: docker compose up — и контент-редактор уже у клиента

Посмотреть вживую

Страница конструктораАдмин-панель

Нужна похожая разработка?

Обсудим задачу, соберём команду под стек и сроки, предложим прозрачную оценку.

Обсудить проектСледующий кейс