Альфа-Про — сайт с нуля и конструктор комплексного заказа с помощью вайб-кодинга

Создать для «Альфа-Про» сайт с нуля: на старте у заказчика не было готового сайта и материалов для его оформления. Весь проект выполнил самостоятельно — логотип, проектирование, UX/UI-дизайн, наполнение, адаптивная реализация на Tilda, SEO-настройка и публикация.

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

Фактический срок выполнения — сентябрь 2026 года. В полях Workspace указан диапазон сентябрь–октябрь: форма площадки не принимает одинаковые месяцы начала и окончания.

Самостоятельно создал сайт «Альфа-Про» с нуля. Главный акцент проекта — конструктор комплексной заявки, разработанный с помощью вайб-кодинга и встроенный в сайт на Tilda.

Сценарий комплексного заказа

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

Материалы и техника

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

Работы и параметры объекта

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

Обратная связь в интерфейсе

Сводка «Ваша заявка» отражает выбранные позиции. Имя и телефон вынесены в контактную часть; предусмотрены ссылки на документы об обработке персональных данных. Форма собирает исходные данные для менеджера: окончательная стоимость определяется после уточнения заказа.

Вайб-кодинг

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

Сайт и визуальная система

Параллельно разработал логотип, структуру и UX/UI-дизайн сайта. Разделил направления компании на страницы материалов и услуг, оформил главный экран, карточки предложений, информацию для организаций и контакты. Выполнил наполнение, адаптивную реализацию на Tilda, SEO-настройку и публикацию.

На иллюстрации ниже — блок работ и дополнительных параметров в действующей форме заказа.

Заказчик получил созданный с нуля сайт «Альфа-Про» с логотипом, структурой, UX/UI-дизайном, контентом, адаптивной реализацией на Tilda и SEO-настройкой. Сайт опубликован и представляет материалы, спецтехнику и работы для строительных объектов.

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

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

Все работы выполнил самостоятельно в сентябре 2026 года. В полях карточки указан технический диапазон сентябрь–октябрь из-за ограничения Workspace на одинаковые месяцы начала и окончания.

На иллюстрации ниже — главный экран сайта с основным предложением и переходом «Рассчитать заказ» к форме.