---

Задача: разработать профессиональный сайт компании «ТЁПЛЫЙ СРУБ»

Ты — опытный senior frontend-разработчик, UI/UX-дизайнер и арт-директор. Твоя задача — самостоятельно разработать полноценный стартовый макет современного коммерческого сайта компании, которая строит бани под ключ в Москве и Московской области.

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

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

1. Концепция и позиционирование

Название компании: «ТЁПЛЫЙ СРУБ».

Сфера деятельности:

- Строительство бань под ключ.
- Деревянные бани из бруса и бревна.
- Современные каркасные бани.
- Индивидуальное проектирование.
- Фундамент, строительство, кровля и отделка.
- Монтаж парной, печи и инженерных систем.
- Строительство на участках заказчиков в Москве и Московской области.

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

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

Основная цель сайта — вызвать доверие, показать качество строительства и мотивировать посетителя оставить заявку на расчёт стоимости.

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

2. Визуальный стиль

Создай визуально убедительный, сдержанный и дорогой сайт.

Направление дизайна:

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

Цветовая палитра:

- Основной фон: тёплый молочный или светлый оттенок льна.
- Основной текст: глубокий графитовый.
- Дополнительный фон: тёмный древесный, почти чёрно-коричневый.
- Акцент: приглушённый оливковый или цвет натурального мха.
- Дополнительные оттенки: песочный, ореховый, светло-серый.

Не используй кислотные цвета, чрезмерные градиенты, стеклянные карточки, неоновые свечения, случайные цветовые акценты и чрезмерно скруглённые элементы.

Не делай дизайн похожим на типовой шаблон лендинга, генеративный AI-сайт или каталог карточек из UI-библиотеки.

Избегай:

- Бесконечных одинаковых карточек.
- Повторения одной композиции в каждом блоке.
- Декоративных элементов без смысла.
- Избыточных иконок.
- Огромного количества бейджей.
- Искусственных метрик вроде «10 000 довольных клиентов».
- Фальшивых сертификатов, рейтингов и наград.
- Текстовых подписей, наложенных на каждую фотографию.
- Нумерации каждой фотографии и каждого визуального блока.
- Автоматических заголовков «Фото 1», «Проект 2», «Изображение 3» и подобных.
- Технических комментариев, плейсхолдеров и надписей, оставленных генератором.

Каждый элемент должен выглядеть так, словно сайт создавался профессиональной дизайн-студией для реального бизнеса.

3. Генерация фотографий через ImageGen — критически важная часть

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

Не заменяй полноценную генерацию фотографий градиентами, эмодзи, иллюстрациями, условными 3D-моделями или случайными изображениями из интернета.

Главное требование: каждое изображение должно быть самостоятельным

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

Для каждого изображения продумай отдельную сцену:

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

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

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

Список необходимых сцен

Сцена 1. Главный экран

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

Сцена 2. Классическая баня из бруса

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

Сцена 3. Современная баня с панорамным остеклением

Отдельное здание с лаконичной геометрией, тёмным фасадом из термодревесины, крупными окнами и минималистичной террасой. Участок с каменными дорожками, декоративными травами и соснами. Мягкий пасмурный свет. Архитектурная съёмка премиального уровня.

Сцена 4. Компактная баня для дачного участка

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

Сцена 5. Просторная баня с зоной отдыха

Более крупная баня с просторной крытой террасой, столом из дерева, местами для отдыха, широкими окнами и сложной, но реалистичной архитектурой. Участок окружён лесом. Тёплый вечерний свет.

Сцена 6. Баня из бревна

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

Сцена 7. Интерьер парной

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

Сцена 8. Комната отдыха

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

Сцена 9. Терраса и экстерьер

Другой объект и другой ракурс: деревянная терраса с выходом из бани, вид на лесной участок, натуральный камень, выразительная фактура фасада. Утренний рассеянный свет.

Сцена 10. Строительство

Реалистичная документальная фотография процесса строительства деревянной бани на настоящем по виду загородном участке. Видны конструктивные элементы здания, деревянный каркас или этап сборки стен, аккуратно организованная рабочая зона. Без постановочных жестов, фантастических конструкций и чрезмерно идеальной CGI-картинки.

Сцена 11. Фундамент и подготовка участка

Фотореалистичный строительный этап на другом участке: подготовленное основание будущей бани, строительные материалы и аккуратно организованная площадка. Реалистичные технологии строительства, дневной свет.

Сцена 12. Дополнительный архитектурный проект

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

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

Требования к качеству изображений

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

Обязательные характеристики:

- Фотореалистичная текстура дерева.
- Правдоподобная геометрия зданий.
- Реалистичные окна, двери, крыши, ступени и террасы.
- Естественные тени и освещение.
- Корректная перспектива.
- Правдоподобный ландшафт.
- Отсутствие визуальных артефактов.
- Отсутствие надписей, водяных знаков, логотипов и рамок.
- Отсутствие неестественных повторяющихся деталей.
- Отсутствие типичных признаков дешёвого CGI.

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

Интеграция изображений в проект

Сохраняй изображения локально в проекте, если доступный процесс ImageGen и рабочая среда позволяют это сделать. Организуй их в понятную папку, например "public/images/".

Используй осмысленные имена файлов:

- "hero-bathhouse.webp"
- "bathhouse-timber.webp"
- "bathhouse-modern.webp"
- "bathhouse-compact.webp"
- "bathhouse-log.webp"
- "bathhouse-terrace.webp"
- "interior-steam-room.webp"
- "interior-lounge.webp"
- "construction-process.webp"
- "construction-foundation.webp"

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

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

Использование изображений в интерфейсе

Не подписывай каждую фотографию.

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

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

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

4. Структура сайта

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

Шапка

Сделай аккуратную адаптивную шапку.

Слева — текстовый логотип «ТЁПЛЫЙ СРУБ». Допускается минималистичный графический знак, если он выглядит уместно.

В навигации:

- Проекты.
- Услуги.
- Этапы строительства.
- О компании.
- Контакты.

Справа:

- Телефон компании.
- Кнопка «Рассчитать стоимость».

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

На мобильных устройствах используй компактное меню.

Главный экран

Большое архитектурное изображение на всю доступную ширину.

Текст:

Надзаголовок: «СТРОИМ В МОСКВЕ И МОСКОВСКОЙ ОБЛАСТИ»

Главный заголовок: «Баня, в которую хочется возвращаться»

Описание: «Проектируем и строим деревянные бани под ключ — от фундамента до готовой парной».

Основная кнопка: «Рассчитать стоимость».

Вторичная ссылка: «Смотреть проекты».

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

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

Блок проектов

Заголовок: «Бани, созданные для отдыха».

Короткое вступление об архитектуре, материалах и продуманных деталях.

Покажи 4–6 разных визуальных проектов. Используй асимметричную архитектурную сетку с разными размерами изображений.

Не делай одинаковые карточки с одинаковой структурой и одинаковыми подписями.

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

Можно использовать названия вроде «Сосновый берег», «Тихий двор», «Лесная линия». Поскольку проекты демонстрационные, не представляй их как подтверждённые завершённые заказы реальных клиентов.

Блок услуг

Заголовок: «Всё для вашей будущей бани».

Предусмотри услуги:

- Проектирование.
- Строительство из бруса.
- Строительство из бревна.
- Каркасные бани.
- Фундамент и кровля.
- Отделка и монтаж парной.
- Печи и инженерные системы.
- Террасы и зоны отдыха.

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

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

Блок о подходе к строительству

Заголовок: «Продумываем не только стены, но и ощущения».

Расскажи о качестве проектирования, подборе материалов, логике планировки, вентиляции, теплоизоляции и грамотном устройстве парной.

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

Можно использовать сочетание фотографии интерьера и текстового блока на контрастном фоне.

Этапы строительства

Покажи понятный процесс:

1. Обсуждение задачи и участка.
2. Выбор проекта и материалов.
3. Подготовка основания.
4. Строительство коробки и кровли.
5. Инженерные работы и отделка.
6. Проверка готового объекта и передача заказчику.

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

Не добавляй анимацию, которая мешает чтению этапов.

Блок материалов и деталей

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

Заголовок: «Натуральные материалы. Продуманные детали».

Используй новую подборку изображений, не повторяя фотографии главного экрана и блока проектов.

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

Блок преимуществ

Раскрой преимущества подхода компании:

- Единая концепция проекта и строительства.
- Подбор материалов под задачу и бюджет.
- Продуманная планировка.
- Комплексное выполнение работ.
- Возможность адаптации проекта под участок.

Не придумывай статистику, количество объектов, стаж компании, реальные отзывы или подтверждённые сертификаты.

Блок расчёта стоимости

Создай выразительную секцию с контрастным фоном.

Заголовок: «Давайте обсудим вашу баню».

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

Форма:

- Имя.
- Телефон.
- Тип бани: брус, бревно, каркасная, пока не определился.
- Ориентировочная площадь: до 30 м², 30–50 м², более 50 м², пока не определился.
- Необязательное поле для комментария.
- Чекбокс согласия на обработку персональных данных со ссылкой на соответствующий документ.

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

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

Часто задаваемые вопросы

Добавь 4–6 вопросов:

- Сколько стоит баня под ключ?
- Можно ли адаптировать проект под мой участок?
- Какие материалы можно выбрать?
- Входит ли отделка парной в строительство под ключ?
- Можно ли построить баню по индивидуальному проекту?
- С чего начать, если пока нет готового проекта?

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

Реализуй аккуратный accordion с анимацией раскрытия.

Контакты и подвал

Включи:

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

Не добавляй карту с вымышленным физическим адресом, если она не нужна.

5. Тексты и вымышленные реквизиты

Самостоятельно подготовь реалистичные демонстрационные контактные данные.

Используй для макета:

- Телефон: +7 (495) 000-00-00.
- Email: hello@teplysrub.example.
- Название: ООО «ТЁПЛЫЙ СРУБ».
- Юридический адрес: демонстрационный, без выдачи за существующий адрес компании.
- ИНН и ОГРН: не выдумывай случайные номера, которые могут принадлежать реальным организациям. Используй явные плейсхолдеры с пометкой «демонстрационные реквизиты» до подготовки реальных данных.

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

6. Юридические страницы

Создай отдельные страницы:

- "/privacy" — политика обработки персональных данных.
- "/terms" — пользовательское соглашение.

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

В пользовательском соглашении опиши:

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

В политике обработки персональных данных опиши:

- Какие данные может передать пользователь через формы.
- Цели обработки.
- Основания обработки.
- Принципы минимизации данных.
- Общие условия хранения и защиты.
- Порядок обращения пользователя по вопросам персональных данных.
- Контактные данные оператора.

Не выдумывай фактически несуществующие меры защиты, инфраструктуру хранения, лицензии или процессы передачи данных.

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

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

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

7. Анимации и интерактивность

Добавь качественные, ненавязчивые анимации.

Используй:

- Плавное появление текста и фотографий при прокрутке.
- Лёгкий stagger для элементов списков.
- Небольшой сдвиг или изменение масштаба изображения при наведении.
- Аккуратное появление мобильного меню.
- Плавную прокрутку к нужным секциям.
- Переход состояния шапки при скролле.
- Анимацию раскрытия FAQ.
- Микроанимации кнопок и интерактивных элементов.
- Плавное появление формы или её подтверждения.

Анимации должны подчёркивать качество дизайна, а не демонстрировать технические возможности.

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

Учитывай "prefers-reduced-motion" и отключай необязательные анимации, если пользователь предпочитает уменьшенное движение.

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

8. Адаптивность

Полностью адаптируй сайт для:

- Больших настольных экранов.
- Ноутбуков.
- Планшетов.
- Смартфонов.

На мобильных устройствах:

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

9. Техническая реализация

Сначала изучи структуру существующего репозитория и используй уже имеющийся стек, если проект настроен.

Если проект пустой, выбери подходящий современный стек:

- React.
- T