Как создать сайт с помощью ИИ в Chatium: полный видеоурок по вайбкодингу

Создай и опубликуй в текущем Workspace современный персональный лендинг интегратора, который помогает бизнесу создавать цифровые продукты и автоматизировать маркетинг, продажи и работу с клиентами.

Перед началом задай мне только один вопрос и дождись ответа:

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

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

Одновременно с публичным лендингом создай защищённую админку по адресу `/admin`, чтобы основным содержанием сайта можно было управлять без изменения кода.

## Структура лендинга

### 1. Первый экран

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

### 2. Специализация

Второй экран посвяти выбранной специализации. Если человек работает с определённой нишей, например с онлайн-образованием, покажи его как специалиста по этой нише и раскрой характерные задачи бизнеса. Если фокус — CRM, сайты, AI или автоматизация, адаптируй блок под это направление.

Покажи:

- с какими клиентами работает специалист;
- какие проблемы понимает;
- что именно меняет в работе бизнеса;
- почему его опыт особенно полезен этой аудитории.

Не используй формальный заголовок «Моя специализация», если можно сформулировать сильнее и конкретнее.

### 3. Услуги

Покажи 5–8 услуг обычным вертикальным списком — это **не карусель и не галерея**. Карточки располагаются друг под другом и не прокручиваются по горизонтали.

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

Для каждой услуги создай отдельную предметную digital-иллюстрацию: сайт на экране, CRM-воронку, кабинет ученика, автоматизированную цепочку, диалог с AI-консультантом или другой узнаваемый образ результата. Выполни иллюстрации в единой системе с тёмно-синими, молочными и оранжево-коралловыми цветами лендинга; допустимы мягкие фирменные градиенты. Не используй для услуг однотипные фотографии мониторов и не заменяй смысловые изображения абстрактными иконками.

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

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

### 4. Кейсы

Создай 5–7 подробных правдоподобных кейсов и покажи их карточками в горизонтальной карусели. На широком экране одновременно должны быть видны три полные карточки и часть четвёртой; добавь стрелки, индикатор прогресса и свайп на мобильном. Не используй сетку с кнопкой «Показать ещё».

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

Галерею внутри модалки сделай единым интерактивным просмотрщиком: одно крупное изображение, стрелки «назад/вперёд», индикатор текущего кадра и ряд миниатюр. По клику крупное изображение открывается с увеличением; в полноэкранном просмотре должны работать зум, закрытие и переключение между кадрами. Не выводи все изображения одновременно мелкой статичной сеткой.

В нижней части модалки сразу размести компактную форму «Хочу такой же результат». Не открывай для неё дополнительную модалку.

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

### 5. Калькулятор стоимости

Создай компактный работающий калькулятор в две колонки.

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

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

Слева пользователь:

1. выбирает одну услугу в компактной горизонтальной карусели;
2. видит только дополнения, относящиеся к выбранной услуге;

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

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

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

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

### 6. Авторский курс

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

Слева размести реалистичную фотографию автора в роли преподавателя, созданную строго на основе приложенного фото и узнаваемо сохраняющую его внешность. Под фотографией не размещай случайные сгенерированные скриншоты. Вместо них покажи 3 компактные карточки уроков: простая иконка экрана со значком Play, подпись «Урок 1», «Урок 2», «Урок 3» и короткая русскоязычная тема каждого урока. Эти карточки должны выглядеть как понятная имитация программы видеокурса и поддерживать стиль основного блока. Справа покажи:

- обращение к тем, кто хочет разобраться самостоятельно;
- название курса;
- конкретный результат за 2–4 недели;
- несколько ключевых тезисов программы;
- текущую и зачёркнутую первоначальную цену;
- кнопку «Начать обучение».

По кнопке открывай форму покупки курса с данными клиента, названием продукта и стоимостью, затем показывай демонстрационный следующий шаг оплаты. На этом этапе не создавай заказ и не сохраняй данные формы. Курс является отдельным продуктом и не смешивается с заказными услугами.

### 7. Готовые решения

Покажи готовые разработки специалиста, которые можно приобрести или адаптировать: например, шаблон LMS, готовую CRM, кабинет клиента, AI-консультанта или отраслевую автоматизацию.

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

Сначала показывай ограниченное количество карточек, остальные — по кнопке «Показать ещё».

### 8. Отзывы

Покажи отзывы клиентов, среднюю оценку и количество отзывов. Добавь кнопку «Оставить отзыв», открывающую форму с именем, компанией или должностью, оценкой от 1 до 5 и текстом.

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

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

### 9. Обо мне

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

### 10. Частые вопросы

После блока «Обо мне» создай отдельную полноценную секцию FAQ с раскрывающимися вопросами. Ответь на основные возражения о стоимости, сроках, порядке работы, правках, поддержке, безопасности данных и подключении сторонних сервисов.

Не размещай FAQ внутри карточки финальной формы и не объединяй эти два блока визуально.

### 11. Финальная заявка

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

В финальном блоке оставь только оффер консультации, короткое пояснение, форму и контактные данные. Этапы работы размести ранее в наиболее логичном месте страницы.

## Админка `/admin`

Создай закрытую админку в том же визуальном стиле. Используй левый сайдбар и следующие разделы:

- «Услуги»;
- «Кейсы»;
- «Готовые решения»;
- «Отзывы».

В админке должно быть возможно:

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

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

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

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

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

Ниже в той же панели сделай раздел **«Дополнения к услуге»**. Администратор может добавлять, редактировать, удалять и менять порядок дополнений. Для каждого дополнения указываются название, короткое пояснение и стоимость. Сохранённые активные дополнения должны автоматически появляться в калькуляторе только после выбора соответствующей услуги. Не создавай отдельный раздел настроек калькулятора и отдельный каталог универсальных дополнений.

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

У правых панелей должны быть закреплённая шапка, прокручиваемое содержимое, явные кнопки «Сохранить» и «Отменить» и предупреждение при закрытии с несохранёнными изменениями. На мобильном панель открывается на весь экран.

Все управляемые сущности храни в постоянной базе данных, а не в захардкоженных массивах. Публичный сайт должен получать из неё только опубликованные записи. Админские операции защищай серверной проверкой роли. Не ограничивай защиту скрытием ссылки `/admin`.

## Визуальная система

Используй выразительное сочетание:

- глубокий тёмно-синий `#08101F` и `#10192B`;
- тёплый молочный фон `#F7F1E8`;
- белые поверхности `#FFFFFF`;
- оранжево-коралловый акцент `#FF5A2F`;
- спокойные серо-бежевые границы и вторичный текст.

Чередуй тёмные и светлые секции, но собирай основной контент в крупные выразительные карточки со скруглениями 20–28 px, тонкими границами и мягкими многослойными тенями. Карточки не должны выглядеть одинаковой сеткой: меняй композицию в зависимости от содержания.

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

Главный визуальный приём страницы — сочетание строгого тёмного каркаса с объёмными светлыми карточками, похожими на окна готовых цифровых продуктов. Вертикальный каталог услуг должен выглядеть спокойным и структурным, а главными интерактивными элементами станут карусель кейсов и компактный выбор услуги в калькуляторе. Остальные анимации сделай спокойными.

## Работа с изображениями

- На первом экране используй приложенную фотографию автора без искажений и перерисовки.
- Создай как минимум две дополнительные реалистичные фотографии автора для курса и блока «Обо мне», используя приложенное фото как обязательный референс личности, а не только как общее описание внешности.
- На всех дополнительных изображениях должен оставаться тот же конкретный человек: сохрани черты и геометрию лица, возраст, причёску, цвет волос, телосложение и другие узнаваемые особенности. Менять можно одежду, позу, фон, освещение и ситуацию, но не личность.
- Не создавай приблизительно похожего персонажа. Если точное сохранение внешности в новой сцене невозможно, используй исходную фотографию с новой композицией, кадрированием или окружением без изменения лица.
- При необходимости используй автора ещё в одном из кейсов.
- Сохраняй узнаваемость лица, возраст и основные особенности внешности.
- Для кейсов и готовых решений создавай правдоподобные изображения сайтов, CRM, LMS и других интерфейсов.
- Все видимые надписи на интерфейсах и изображениях должны быть на русском языке и иметь смысл.
- Не используй абстрактных роботов, светящиеся мозги, случайные 3D-фигуры и типичные нейросеточные клише.

## Общие требования

- Сделай полноценные рабочие карусели, модальные окна, калькулятор, формы, админку и управление отзывами, а не статичные изображения этих функций.
- Все цены на сайте, в модальных окнах, калькуляторе и админке показывай только в целых рублях без копеек и десятичной части: `5 000 ₽`, `90 000 ₽`, `от 120 000 ₽`. Никогда не выводи `5 000,00 ₽`, `5000.00 ₽` или другие варианты с копейками. Для форматирования используй русские разделители тысяч и ноль знаков после запятой.
- Не своди все обращения к одной универсальной форме: у услуги, готового решения, калькулятора, курса и общей консультации должны быть отдельные формы и собственные состояния успешной отправки.
- На этом уроке формы работают только на уровне интерфейса и валидации. Не создавай таблицу заявок, не записывай обращения в базу и не добавляй раздел заявок в админку — полноценное сохранение и обработка будут реализованы отдельно в CRM.
- Страница и админка должны корректно работать на компьютере, планшете и телефоне.
- На мобильном карусель управляется свайпом, модальные окна открываются на весь экран, а сетки перестраиваются в одну колонку.
- Добавь понятные состояния загрузки, пустых списков, успешного действия и ошибки.
- Обеспечь видимый клавиатурный фокус, достаточный контраст и поддержку уменьшенной анимации.
- Не используй lorem ipsum и бессмысленные заглушки.

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