# Сайт из презентации компании: как собрать одностраничник с ИИ-агентом и ничего не выдумать

Как сделать сайт из презентации компании с ИИ-агентом: карта фактуры по слайдам, визуалы и цвета из PDF, чистый HTML для визитки и грабли первой выкладки.

URL: https://posts.danashkin.ru/guides/sayt-iz-prezentacii-kompanii
Обновлено: 2026-10-12

---

## Коротко

**Главное**

- Презентация компании - почти готовый сайт: в ней уже согласованы услуги, кейсы с цифрами, клиенты и фирменные цвета. С ИИ-агентом из неё собирается одностраничный сайт за одну рабочую сессию.
- Главное правило: вся фактура только из презентации. Агент раскладывает её в карту «что на каком слайде», а всё, чего в презентации нет, помечается «уточнить» вместо догадки.
- Агент сам достаёт из PDF визуалы кейсов и логотипы клиентов, а фирменные цвета снимает подсчётом пикселей, а не на глаз.
- Для сайта-визитки без базы и личного кабинета хватает чистого HTML, CSS и JavaScript: без сборки, открывается двойным кликом и выкладывается одной командой.

## Почему презентация - лучший исходник для сайта?

**Главное**

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

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

В начале сентября я собрал сайт рекламного агентства ровно из такой презентации - на 61 слайд. В итоге получился одностраничник: 17 флагманских кейсов с цифрами, 16 других проектов, 5 направлений услуг, 3 собственных продукта, 19 логотипов клиентов, награды и контакты. Плюс отдельная страница одного из продуктов агентства.

Логика переноса простая: презентацию читают, когда менеджер её прислал, а сайт находят сами. Если фактура в презентации уже согласована, перенести её на сайт - самый короткий путь к актуальной витрине. Как такой подход вписывается в общую логику первой версии продукта, разбирал в материале про [первую версию насквозь](/guides/pervaya-versiya-naskvoz-a-ne-po-sloyam).

## Карта фактуры: что на каком слайде

**Главное**

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

Нейросеть, которой поручили «сделать сайт агентства», с удовольствием допишет недостающее: красивую цифру, ещё одного клиента, услугу, которой нет. Для сайта компании это недопустимо: каждая выдуманная строка - риск перед клиентами и юристами.

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

| Раздел сайта | Откуда берётся | Что делать, если данных нет |
|---|---|---|
| Услуги | слайды с направлениями | не дописывать, спросить заказчика |
| Кейсы с цифрами | слайды кейсов | цифры только как на слайде |
| Клиенты | слайд с логотипами | только те, что есть на слайде |
| Цены, сроки, контакты | обычно в презентации нет | метка «уточнить» на странице |
| Фирменные цвета | сам дизайн слайдов | снять подсчётом, не подбирать |

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

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

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

## Как достать из PDF картинки, логотипы и цвета?

**Главное**

Агент превращает слайды в изображения и вырезает из них нужные куски: визуалы кейсов под карточки, логотипы клиентов с прозрачным фоном. Фирменные цвета он считает по самым частым цветам на отрисованных слайдах. Получается точный бренд, а не «примерно похожий».

Самая трудоёмкая часть ручной сборки - картинки. Дизайнер выгружал бы их из исходников, которых часто уже нет. [ИИ-агент](/concepts/ai-agent) делает это из самого PDF.

На моём проекте агент так нарезал 33 визуала кейсов и вырезал 19 логотипов клиентов с прозрачностью прямо со слайда, где они стояли сеткой. Интересная деталь: нужной библиотеки для работы с картинками в системе не оказалось, и агент не стал её ставить, а написал свой небольшой модуль на шестьдесят строк. Для разовой задачи это нормальный выбор: меньше зависимостей - меньше сюрпризов.

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

**Визуалы - собственность клиентов**

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

## Из чего собирать: конструктор, фреймворк или чистый HTML?

**Главное**

Для одностраничника без базы данных, личного кабинета и серверных форм хватает чистого HTML, CSS и JavaScript. Такой сайт открывается двойным кликом, не требует сборки и выкладывается одной командой. Фреймворк здесь добавил бы сборку и зависимости без единой новой возможности.

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

Один приём, который окупился в тот же день: все цвета вынесены в переменные в одном месте. Страницу продукта за вечер перекрашивали три раза подряд, и каждая перекраска заняла минуты. Если бы цвета были разбросаны по файлу, каждая правка стоила бы часа.

Есть и обратная сторона. Сайт на чистом HTML отдаёт текст сразу, без скриптов, и это хорошо для поисковиков и нейросетей. Если же собрать визитку как приложение на React, её текст может оказаться невидимым для краулеров нейросетей, об этом подробно писал в статье про [сайт на JavaScript](/guides/sayt-na-javascript-i-neyroseti).

## Грабли, которые съели больше всего времени

**Главное**

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

1. **Обрезанные заголовки в визуалах**

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

2. **Кэш, который прячет правки**

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

3. **Подвисший локальный сервер**

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

4. **Сайт, видимый только владельцу**

   Хостинг по умолчанию включил защиту развёртывания: посетитель видел страницу входа. Защиту для основного адреса пришлось снять отдельно.

## Как выложить сайт и передать его дальше?

**Главное**

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

Выкладка - одна команда из папки сайта. Именно из неё, а не из корня проекта: в корне лежат презентация клиента и планы, которые наружу не должны попасть. Чем приватный репозиторий отличается от закрытого сайта и почему одно не заменяет другое, разбирал в материале про [три уровня закрытости](/guides/privatnyy-repozitoriy-ne-zakryvaet-sayt).

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

Свой домен компания выбирает сама. Как подключить его, когда решение принято, разбирал в статье про [домен для сайта](/guides/svoy-domen-dlya-prilozheniya).

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

**Главное**

Спрашивают, подойдёт ли способ для презентации в PowerPoint, что делать со старой презентацией и нужен ли дизайнер.

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

**Презентация в PowerPoint, а не в PDF. Это проблема?**

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

**Презентация устарела. Всё равно собирать из неё?**

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

**Нужен ли дизайнер?**

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

**Сколько это стоит в обслуживании?**

Статический одностраничник на бесплатном или самом дешёвом тарифе хостинга почти ничего не стоит. Из чего складывается счёт за более сложные проекты, разбирал в материале про [стоимость содержания приложения](/guides/schet-za-svoe-prilozhenie).

## Главный вывод

**Главное**

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

Это хороший первый проект для [вайбкодинга](/concepts/vibecoding) в компании: понятный результат, исходник уже есть, а проверить работу может любой, кто знает презентацию.

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

Твоя презентация сейчас свежее твоего сайта?

### Источники

- [Deployment Protection - защита развёртываний по умолчанию и как её настроить, Vercel Docs](https://vercel.com/docs/deployment-protection)
- [object-fit - как картинка заполняет контейнер и почему обрезается, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit)
- [Cache-Control - заголовок, который управляет кэшированием файлов в браузере, MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control)