Коротко
Почему презентация - лучший исходник для сайта?
Почти у каждой компании есть коммерческая презентация, которую годами шлифуют отдел продаж и руководитель. И почти у каждой второй сайт отстаёт от неё на пару лет: там старые услуги, три кейса из позапрошлого года и чужие стоковые фото.
В начале сентября я собрал сайт рекламного агентства ровно из такой презентации - на 61 слайд. В итоге получился одностраничник: 17 флагманских кейсов с цифрами, 16 других проектов, 5 направлений услуг, 3 собственных продукта, 19 логотипов клиентов, награды и контакты. Плюс отдельная страница одного из продуктов агентства.
Логика переноса простая: презентацию читают, когда менеджер её прислал, а сайт находят сами. Если фактура в презентации уже согласована, перенести её на сайт - самый короткий путь к актуальной витрине. Как такой подход вписывается в общую логику первой версии продукта, разбирал в материале про первую версию насквозь.
Карта фактуры: что на каком слайде
Нейросеть, которой поручили «сделать сайт агентства», с удовольствием допишет недостающее: красивую цифру, ещё одного клиента, услугу, которой нет. Для сайта компании это недопустимо: каждая выдуманная строка - риск перед клиентами и юристами.
Поэтому правило ставится до первой строки кода: вся фактура только из презентации. Агент сначала раскладывает её в карту, и уже по карте собирает страницу.
| Раздел сайта | Откуда берётся | Что делать, если данных нет |
|---|---|---|
| Услуги | слайды с направлениями | не дописывать, спросить заказчика |
| Кейсы с цифрами | слайды кейсов | цифры только как на слайде |
| Клиенты | слайд с логотипами | только те, что есть на слайде |
| Цены, сроки, контакты | обычно в презентации нет | метка «уточнить» на странице |
| Фирменные цвета | сам дизайн слайдов | снять подсчётом, не подбирать |
На втором похожем проекте - лендинге нашей услуги по боту поддержки - таких меток «уточнить» в макете было одиннадцать: цены, сроки, контакты, текст политики конфиденциальности. Это нормально. Видимая метка честнее правдоподобной выдумки, и заказчик закрывает их за один разговор.
Карта нужна и потом. При любой правке не приходится заново перечитывать 61 страницу: видно, где факт из презентации, а где добавлено отдельно.
Как поставить агенту эту задачу: «Прочитай презентацию целиком. Составь файл-карту: для каждого слайда - какие факты на нём есть и в какой раздел сайта они пойдут. Ничего не добавляй от себя. Если для раздела нет данных, напиши, чего не хватает». Сначала проверяешь карту глазами, и только потом даёшь команду собирать страницу.
Как достать из PDF картинки, логотипы и цвета?
Самая трудоёмкая часть ручной сборки - картинки. Дизайнер выгружал бы их из исходников, которых часто уже нет. ИИ-агент делает это из самого PDF.
На моём проекте агент так нарезал 33 визуала кейсов и вырезал 19 логотипов клиентов с прозрачностью прямо со слайда, где они стояли сеткой. Интересная деталь: нужной библиотеки для работы с картинками в системе не оказалось, и агент не стал её ставить, а написал свой небольшой модуль на шестьдесят строк. Для разовой задачи это нормальный выбор: меньше зависимостей - меньше сюрпризов.
С цветами то же самое. Вместо «кажется, у них коралловый» агент отрисовал слайды и посчитал самые частые цвета. Получились три точных значения: тёмный фон, светлый фон и акцент. Сайт сел на бренд без подбора на глаз.
Картинки кейсов в презентации агентства часто принадлежат его клиентам. Их можно показывать в том же контексте, что и в презентации, но репозиторий сайта лучше держать приватным, а исходную презентацию в него не класть.
Из чего собирать: конструктор, фреймворк или чистый HTML?
Мой дефолт для новых проектов - Next.js, и для сайта-визитки я от него сознательно отказался. Причина простая: у одностраничника нет базы, авторизации и серверной логики. Всё, что даёт фреймворк, здесь не нужно, а сборка и папка зависимостей остаются.
Один приём, который окупился в тот же день: все цвета вынесены в переменные в одном месте. Страницу продукта за вечер перекрашивали три раза подряд, и каждая перекраска заняла минуты. Если бы цвета были разбросаны по файлу, каждая правка стоила бы часа.
Есть и обратная сторона. Сайт на чистом HTML отдаёт текст сразу, без скриптов, и это хорошо для поисковиков и нейросетей. Если же собрать визитку как приложение на React, её текст может оказаться невидимым для краулеров нейросетей, об этом подробно писал в статье про сайт на JavaScript.
Грабли, которые съели больше всего времени
Обрезанные заголовки в визуалах
Режим заполнения карточки дорезает картинку, если пропорции контейнера не совпадают с пропорцией файла. На слайдах заголовки часто набраны внутри картинки, и первые буквы уходили за край. Лечится точной пропорцией контейнера, а не перекропом.
Кэш, который прячет правки
В настройках хостинга стояло кэширование стилей на час. Новый CSS на сервере уже был, а браузер показывал старый. Нашлось только потому, что результат проверяли в браузере, а не по коду. Для стилей и скриптов поставлен запрет кэша, картинки кэшируются.
Подвисший локальный сервер
Стандартный однопоточный сервер для просмотра захлебнулся на 33 картинках в одном экране. Помог сервер, который обслуживает запросы параллельно.
Сайт, видимый только владельцу
Хостинг по умолчанию включил защиту развёртывания: посетитель видел страницу входа. Защиту для основного адреса пришлось снять отдельно.
Как выложить сайт и передать его дальше?
Выкладка - одна команда из папки сайта. Именно из неё, а не из корня проекта: в корне лежат презентация клиента и планы, которые наружу не должны попасть. Чем приватный репозиторий отличается от закрытого сайта и почему одно не заменяет другое, разбирал в материале про три уровня закрытости.
Дальше сайт живёт своей жизнью. На этом проекте его развитие передано другому разработчику через приватный репозиторий: он работает в своих ветках и открывает запросы на слияние, а сливаю и выкатываю я. Автовыкладки из репозитория нет специально: изменение в коде не может сломать живой сайт без моей проверки.
Свой домен компания выбирает сама. Как подключить его, когда решение принято, разбирал в статье про домен для сайта.
Частые вопросы
Частые вопросы
Главный вывод
Это хороший первый проект для вайбкодинга в компании: понятный результат, исходник уже есть, а проверить работу может любой, кто знает презентацию.
Практический шаг: возьми свою коммерческую презентацию и попроси агента не делать сайт, а сначала разложить её в карту фактуры по слайдам. По этой карте сразу станет видно, хватит ли материала на сайт и чего не хватает.
Твоя презентация сейчас свежее твоего сайта?