Pixel Perfect | AI для диджитал-специалистов


Гео и язык канала: Россия, Русский
Категория: Дизайн


Помогаем внедрять AI-инструменты для рабочих и личных задач диджитал-специалистов. По обучению или сотрудничеству пиши Антону → @pixelpsale
Сайт школы: https://pixelperfect.school

Связанные каналы  |  Похожие каналы

Гео и язык канала
Россия, Русский
Категория
Дизайн
Статистика
Фильтр публикаций


Зачем дизайнеру Git и GitHub, если код пишет агент? 🤨

Как раз поэтому. Агент правит быстро и много, и любую его правку нужно уметь отменить.

→ Git сохраняет у вас на компе версии рабочей папки, где лежат все проекты и скиллы. Каждая версия называется коммитом. Условно ваша точка сохранения в игре, только с подписью, что именно вы сделали.
→ GitHub это сервис в интернете, где хранится копия этой папки со всей историей коммитов. Закрытую копию видите только вы: в ней материалы клиентов.

✨ Какие-то команды учить не нужно. Заведите аккаунт на GitHub, а дальше просите агента простыми словами. В первый раз напишите: «Синхронизируй с GitHub. Копия должна быть закрытой. Сначала проверь, что пароли и ключи не уйдут». Агент попросит войти в GitHub через браузер и отправит первый коммит. Дальше после каждой готовой задачи хватит «Синхронизируй с GitHub».


3 ситуации, где дизайнеру без них никак ↓

1. Агент что-то сломал. Пишете ему агенту: «Верни как было до этой правки». Он покажет последние коммиты с подписями, спросит, к какому вернуться, и вернёт файлы. Вернуться можно только к тому, что сохранили.

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

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

✨ Еще такой нюанс: GitHub хранит только то, что вы туда отправили. База заказов, загруженные клиентом картинки и данные из CMS могут находиться отдельно. Спросите агента, где они хранятся и как делать их резервные копии. Пароли и ключи доступа на GitHub НЕ отправляйте (даже в закрытую копию). Если ключ хоть раз туда попал, убрать его очень сложно.


А ваши проекты уже на GitHub или пока живут на одном компьютере?


«Лендинг с агентом – собрал и забыл. А корпоративный сайт кто будет поддерживать?» 🙅‍♂️

Да, на конструкторе за хостинг и безопасность отвечает платформа, в коде – вы. Но сайт на ИИ это просто обычный код, который написал агент. Задачи разные, и стек под них разный: лендингу достаточно статики, корпоративному сайту нужен Next.js с CMS на сервере клиента, а магазину – отдельный движок.

Главный страх: «Я не кодер. Кто починит, если что-то сломается?». Вот как это решается. Сайт сам присылает алерт в Telegram о сбое. Вы открываете агента: по памятке проекта и журналам ошибок он сам находит баг и вносит правки. Проверяете результат на сайте, а выкатку агент запускает сам. Код писать руками не нужно, главное – понимать структуру. А на крайний случай подключается разработчик (для наших клиентов это мы по договору).


➡️ Что мы еще на старте закладываем в проект, чтобы он не ломался:
• Код в git. История каждой правки и откат. Код принадлежит клиенту, а не платформе – подхватит любой разраб или агент.
• Памятка для агента в проекте: что за сайт, где что лежит, какие правила. И папка с документацией по каждой части сайта.
• CMS для текстов. Клиент сам правит статьи и баннеры в админке, не дергая вас по мелочам.
• Пуши о сбоях в телегу. Клиент не должен узнавать о проблеме первым.
Резервные копии (хоть раз обязательно восстановите сайт из копии, иначе вы не знаете, работает ли она)
• ТО по календарю. Раз в месяц обновить библиотеки и прогнать агентом аудит на уязвимости.

Сайт нашей школы с рассрочками, чеками и блогом работает ровно так. Еще летом мы перенесли 4 проекта клиентов с Webflow на этот стек, а сложный клиентский e-com с CRM и оплатами стабильно крутится на нем с июля.


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


Итак, вы собрали сайт с ИИ-агентом. Кто его ЦА? Разложил клиентов по сегментам 🙂

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

Клиенты с сайтами без привязки к платформе. Раньше приходилось отсекать заявки под свой узкий стек (битрикс мимо, магазин со сложной базой мимо). Теперь платформа не имеет значения: РФ или зарубеж, лендинг или интернет-магазин. Стек больше не ограничивает, важно только ваше умение поставить задачу и принять результат.

Бизнес с запусками: онлайн-школы, ивенты, маркетологи, которым страницы нужны каждые пару недель. Для них связка «быстро, без потери в дизайне и с чистым кодом» – способ тестить гипотезы в разы дешевле. А каждый некст проект вы собираете еще быстрее за счет готовых компонентов 🙂

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

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


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

1️⃣ Начинать без референса. Без него агент выдаст усредненный дизайн, который выглядит как AI-слоп. Возьмите понравившийся сайт и попросите сначала собрать дизайн-систему: «Разбери сайт [ссылка]: цвета, шрифты, размеры, отступы, скругления, тени и hover-эффекты. Адаптируй систему под мои цвета [коды] и шрифт [название] и покажи все компоненты на одной странице. Сам сайт пока что не делай».

2️⃣ Просить весь сайт одним запросом. Агент соберет все сразу и везде понемногу промахнется, а править придется по всему сайту. Собирайте по одной секции: посмотрели на компе и телефоне, поправили, перешли дальше. Когда первая страница готова, попросите: «Опиши, как ты ее собирал, и сохрани в documentation инструкцию для остальных страниц».

3️⃣ Не давать агенту памяти. Каждый новый разговор он начинает с нуля и повторяет уже исправленные ошибки. Главный файл проекта (AGENTS md) держите коротким, до 200 строк. Всe остальное храните в documentation: отдельный док на каждое решение (что сделали, почему и какие были ошибки). В AGENTS md оставьте одно правило: «Перед задачей прочитай нужный документ из documentation. После зафиксируй, что изменилось».

4️⃣ Принимать работу на слово. Агент может написать «готово», ничего не проверив. Добавьте в AGENTS md: «Не пиши ГОТОВО, пока сборка без ошибок, сайт проверен на компьютере и телефоне, все кнопки и ссылки работают, тестовая заявка дошла, аналитика видит страницы». Сложное чекайте в новой чистой сессии: дайте агенту только результат и чек-лист. Без контекста разработки он смотрит на сайт свежим взглядом и находит то, что до этого мог упустить.

5️⃣ Сдавать сайт, который без вас не поправить. Если тексты зашиты в код, каждую правку клиент понесет вам. Сразу вынесите тексты и картинки в CMS, чтобы он мог менять их сам. Например, в Directus: «Вынеси все тексты и картинки сайта в Directus и подготовь инструкцию со скриншотами: как менять текст и картинки, добавлять кейсы».

Какую ошибку добавите шестой? ↙️


🎞 Ловите запись вчерашнего эфира

Коля 🙂 и Даня 😎 в лайве с агентами собрали интернет-магазин под РФ. Работали на Opus 5.5. Показали пайплайн работы с агентом и рассказали, как подключать российские платежки, доставку и 1С.

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


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

Научиться этому можно на 10-недельном курсе AI Native Websites. Коля и Даня научат вас в одиночку доводить сложные проекты до деплоя 😎

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

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

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

🦝 забронировать место


Как насчет собрать интернет-магазин с агентами? В эфире завтра 18:00 мск 🙂😎

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

Если делать это руками, то закопаешься в коде, если на конструкторах – упрешься в ограничения. Завтра на Opus 5.5 покажем третий путь: когда сложную архитектуру берет на себя агент, а вы управляете процессом.


✨ Что будет:
• покажем пайплайн сборки дизайна с AI-агентом
• соберем бэкенд и задеплоем его на реальный домен
• расскажем, как подключать российские платежки, доставку и обмен с 1С
• зальем тысячу товаров из 1С
• в конце отдадим скиллы для сборки магазина, чтобы вы повторили это со своим агентом.

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

🖇️ Зарегистрироваться на эфир


Да ты там все токены сжег 🔥

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

Токены я не покупаю. Работаю в подписке: фикс. сумма в месяц, а внутри лимиты. Уперся в лимит – ждешь, пока сбросится (у Claude окно 5 часов + недельный потолок), и едешь дальше. Если сами не включили докупку, счет в конце месяца тот же.

Что касается тарифа: $20 хватит, чтобы попробовать, но проект до продакшена на таком не довести. Реальный вход от $100: Claude Max или ChatGPT Pro (там же Codex). По курсу ЦБ (85 ₽ за доллар) это около 8500 ₽ в месяц.

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

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

• Webflow, сайт с CMS: $25/месяц при оплате за год, $39 помесячно. Это 2100–3300 ₽ за каждый сайт.
• Тильда: 500 ₽/месяц при оплате за год, 750 ₽ помесячно. Убрать значок «Made on Tilda» можно только на годовом тарифе.
• Свой код: простой сайт живет на обычном хостинге от 420 ₽/месяц, а сервер за 900–1000 ₽ тянет сразу несколько сайтов.


Дальше интереснее. Сайт масштабируется, и на конструкторе вместе с ним растет счет. У Webflow второй язык – доплата от $9 в месяц, трафик сверх тарифа – еще доплата. У Тильды 5+ сайтов еще один тариф. В своем коде новая функция – это задача агенту, а счет за хостинг тот же. Понадобится сервер мощнее – следующий тариф стоит 1080-1800 ₽.

Следить за сервером придется вам, но это и отдельная услуга для клиента 😉

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

Как посчитать у себя:
• для клиента: сравните стоимость тарифа конструктора со стоимостью хостинга.
• для себя: разделите стоимость подписки на всех клиентов и на всю работу, которую вы с ее помощью выполняете.
• на вырост: посчитайте, во сколько обойдутся второй язык, интернет-магазин или рост трафика (отдельно для конструктора и для собственного кода)


Напишите в комментах, на чем держите сайты сейчас и сколько выходит в месяц. Интересно сравнить :)


Сайт на ИИ-агентах и 152-ФЗ. Почему это безопаснее для бизнеса, чем популярные конструкторы? 🤝🏻

Главный страх бизнеса при словах 152-ФЗ – получить штраф от РКН за ошибки с персональными данными. Поэтому, когда сайт делает ИИ, возникает вопрос: не уйдут ли данные лидов на зарубежные серверы?

Давайте разбираться 🌚

Какие есть нюансы у зарубежных конструкторов:

•
Транзит через зарубежные серверы. Данные из формы могут сначала попасть на серверы конструктора, а уже потом в вашу CRM. Если первый сервер за пределами РФ, это может нарушать требования 152-ФЗ.
• Ограниченный доступ к коду. Нельзя самостоятельно изменить обработку формы, если конструктор этого не позволяет.
• Нет гарантии хранения в РФ. Зарубежные платформы не всегда обеспечивают хранение данных на ру серверах.


Когда ИИ-агенты верстают, пишут код и собирают вам кастомный сайт, ИИ выступает архитектором и программистом, но не хранителем данных.

Здесь важно соблюдать 3 правила, чтобы разработка через агентов была безопасной:

1. Размещайте сайт не на зарубежных платформах (вроде Vercel, Netlify или Render), а на проверенных российских серверах: Timeweb, Selectel, Reg ru, beget, Ростелеком ЦОД.

2. Имя, телефон и email должны сразу попадать в российскую CRM или базу – например, Битрикс24 или amoCRM (без транзитных сторонних сервисов вроде Make / Zapier).

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


Закону все равно, кто написал код – человек или ИИ-агенты. Для РКН важно, куда попадают данные: если они сразу отправляются в российскую CRM или базу и хранятся в РФ, требования закона соблюдены.

Более того, сайт с агентом безопаснее готового конструктора, тк вы сами контролируете, где хранятся данные и куда они отправляются ☕️


Наш новый лендос собрал Claude

Код, адаптив, интерактив, аналитика – все он. Но попроси мы просто «сделай красиво», вышел бы очередной сайт, в котором ИИ чувствуется с первого экрана. Поэтому сначала была система, а уже потом страница.


⚡️ Что делали руками
Выбрали эталон и направление. Задали свою палитру и шрифт. Из 124 находок разбора решили, что берем в первую очередь. Написали бриф по каждой секции и принимали каждый экран.

⚡️ Что делал агент
Разобрал эталон замерами: размеры шрифтов, отступы, сетку, поведение элементов при наведении, на экране компа и мобилки. Прошел 10 шаблонов страниц, 94 файла стилей и 51 скрипт.

Из этого собрал нашу ДС: 30+ компонентов на старте, потом еще 19, в Storybook 300+ состояний. Все уже в нашей палитре и нашем шрифте, а также то, чего в эталоне не было.

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

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


Если хотите повторить у себя, порядок такой:
1. Один эталон вместо мудборда на двадцать картинок
2. Разбор замерами, никаких «сделай похоже»
3. Своя система поверх разбора: приемы проверенные, а палитра, шрифт и контент ваши
4. Страница только из компонентов. Нужен новый блок – сначала в систему, потом на страницу
5. Каждый экран принимаете вы сами

➡️ На видео в посте его часть, а тут можно чекнуть лендинг целиком: pixelperfect.school/ai-native-website

Если бы не знали, догадались бы, что его собрал Клод?

859 0 13 3 17

А что если агент всегда будет делать что-то не так? 🤦‍♀️

При первом контакте с агентами этот вопросик возникает довольно быстро.

Вроде все найс, но тут он не так понял задачу, там пошел не туда, где-то собрал не совсем то, что вы представляли. Легко подумать: а что если так будет всегда и мне придется бесконечно его поправлять?

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


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

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

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


Поэтому первые ошибки я бы вообще воспринимал как часть настройки. Вы постепенно собираете систему, которая все лучше понимает, как именно вы хотите работать 😎

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




Коля и Даня протестировали GPT-6 Astra и с нуля собрали сайт AI-консультанта по косметике. От дизайна до публикации на домене за один эфир: работа, на которую у команды обычно уходят недели, и ни строчки кода руками.

Этот проект +1 пруф того, что разделение на дизайнеров, которые рисуют макеты и разработчиков, которые верстают их, почти исчезло.


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

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

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

Чтобы вы могли освоить вайбкодинг и научиться делать с ИИ кастомные сайты под ключ,
Коля с Даней запустили курс
AI Native Websites
.
10 недель практики для дизайнеров и диджитал-спецов, которые хотят реализовывать проекты студийного уровня в соло.

Если у вас есть клиенты, то сдадите их проекты прямо во время обучения. Если нет – завайбкодите 4 готовых кейса в портфолио: лендинг с CRM, корп. сайт с админкой и блогом, интернет-магазин с оплатой и интерактивный сайт с 3D и анимацией по скроллу.


➡️ Посмотреть программу курса


Эфир в 18:00 МСК | Сайт для AI бьюти-помощника за один эфир без кода 😎🙂

Сегодня Даня и Коля в прямом эфире тестируют новую GPT-6 Astra на реальной задаче: собирают с AI-агентами сайт AI-консультанта по косметике. Интерактивный пример консультации, анимация по скроллу и визуал, сгенерированный под проект. Даня отвечает за дизайн, Коля за разработку.

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

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

Ждем всех! Ссылка на эфир уже в канале Коли: https://t.me/+LYNzETj9ogI0NGEy


Раньше эффектная веб-анимация выглядела так: дизайнер делает в After Effects → экспортирует в Lottie → разработчик внедряет → что-то ломается → круг повторяется.

Сейчас агент может собрать анимацию сразу кодом. Ниже мой набор инструментов.


Начну с главного, про что многие не знают: GSAP стал бесплатным. Раньше самые топовые плагины вроде разбивки текста на буквы или морфинга фигур были за подпиской. После того как библиотеку купил Webflow, открыли все.

Готовые компоненты, которые агент ставит за один запрос:

— React Bits (47К звезд на GitHub). 100+ анимированных компонентов. Самая быстрорастущая библиотека в этой нише.
— Aceternity UI (~28К звезд). Про эффектные штуки: 3D-карточки, светящиеся лучи, магнитные кнопки, частицы.
— Magic UI (~15К звезд). Аккуратные микровзаимодействия и анимации под маркетинговые страницы.
— 21st.dev. Библиотека на 10К компонентов, а главное (!) есть подключение для агента. В Claude Code / Cursor пишешь, что нужно, он собирает компонент и кладет в проект.
— Osmo. ~200 готовых вещей: переходы между страницами, навигации, слайдеры, эффекты. Делают ребята, у которых больше 35 наград «сайт дня» на Awwwards.

И то, без чего агент пишет анимацию криво: скиллы.

— Официальные скиллы от GSAP. Учат агента пользоваться библиотекой правильно: какие приемы и плагины, как не сделать типовые ошибки.
— Web Animation Skills. GSAP, SVG, Lottie, переходы между страницами и отдельный упор на плавные 60 кадров. Работают в Claude Code, Cursor, Codex.
— Motion Skills. Полсотни скиллов под моушн-графику, анимацию и видео.

Почему скиллы – это важно.
Без них агент пишет устаревший / тормозящий код. Скиллы дают ему правила и лучшие практики. Чтобы не получить шаблонную анимацию, покажите конкретный реф или компонент + подключите нужный скилл. Тогда агент не угадывает, а собирает результат по образцу.


Сохраняйте для следующего проекта. Если знаете годные инструменты, кидайте в комменты 🚀


Как быть, когда клиент хочет сайт как у Apple: с 3D, сложной анимацией, динамичными интерфейсами? 🗿

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

Или нет? 16 сентября в 18:00 мск Даня и Коля в эфире покажут, как собирать такие проекты без команды – только с помощью ИИ-агентов.

С нуля соберут сайт для ИИ Бьюти-помощника. Реализуют ту самую сложную динамику: интерактивное 3D и покадровую разметку рентгена, которая плавно разворачивается при прокрутке страницы.


Научат управлять агентом на уровне арт-директора + отдадут зрителям настроенную среду, которую можно сразу использовать в своих проектах 🔍

Ссылку на трансляцию Коля выложит в свой тг-канал. Подписывайтесь, чтобы не пропустить: https://t.me/+vk7mYYTC2qhlZmRi


Где физически живет сайт, собранный с ИИ? 😯

У многих, кто только начинает вайбкодить, есть заблуждение: такой сайт будет жестко завязан на инфраструктуру OpenAI или Anthropic. Будто проект физически живет внутри моделей. Но реальность проще: ИИ участвует только на этапе написания кода.


Архитектура проекта устроена супер стандартно:

Пока вы вайбкодите сайт, он живет у вас на жестком диске. Все исходники лежат в папке на ноуте: картинки, шрифты, код. Агент не держит проект у себя в облаке. Он просто считывает файлы с вашего диска, коммитит изменения в Git и правит проект прямо на вашем ноуте.

Готовый сайт деплоется на стандартный сервер (хоть на российский Timeweb или Selectel, хоть на зарубежный Vercel). Когда человек открывает вашу ссылку, его браузер загружает файлы напрямую с этого хостинга. Никакие запросы к серверам OpenAI или Anthropic в этот момент не идут. Сайт работает автономно, как и любой другой сайт в сети.

А где хранятся данные юзеров?
Здесь работает изоляция: клиентский трафик вообще не соприкасается с нейросетями. Когда человек оставляет заявку или оформляет заказ, контакты отправляются напрямую в вашу базу данных или в CRM. У модели нет доступа к серверам вашего сайта. Она не видит посетителей, не хранит их контакты и не может обучаться на этих данных.


⚡️ Из этого следует главный вывод:

Любые сбои в инфраструктуре OpenAI, блокировки аккаунтов или отключение зарубежных API никак не влияют на работу проекта. Сайт не обращается к внешним ИИ-сервисам при загрузке страниц, анимации или отправке форм.

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


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

Многие думают, что это видео. Но на самом деле нет :)

Браузер не умеет надежно перематывать видео покадрово, особенно на телефоне. Будет дергаться и подвисать. Поэтому ролик режется на отдельные кадры: около 250 файлов на 15 сек. Дальше на странице делается высокая зона прокрутки, около 6 экранов. А внутри нее экран залипает на месте. Пока крутите, страница считает прогресс от 0 до 1 и по нему выбирает, какой кадр показать. Прокрутили треть — увидели кадр из первой трети, отмотали назад — вернулись обратно.

Отсюда и берется ощущение, которого обычное видео не даёт: движением управляете вы, а не наоборот

3 нюанса, без которых все развалится:

• Хвост прокрутки. Последние 15% кадр не меняется — появляются заголовок и кнопка. Иначе финальный кадр промелькнет слишком быстро.
• Загрузка. Кадры подгружаются пачками, чтобы не отдавать сразу мегабайты. Если нужного ещё нет, показывается ближайший загруженный.
• Текст. Он привязан к прогрессу прокрутки, а не к таймеру. Поэтому при прокрутке назад все синхронно возвращается.


🟥 Кстати, в новом видео показываю, как собрать такой сайт с нуля: смотреть на YouTube (полезные материалы из видео — в комментах)

Всю эту механику мы не собираем руками каждый раз. Она разложена на 3 скилла:

1 скилл. Движение — разбирает референс по этапам, строит маршрут камеры и задания для генерации кадров. Важный нюанс: клип с монтажными склейками здесь не подойдет, его нельзя нормально отмотать назад.
2 скилл. Визуал — отвечает за композицию, картину, текст, цвета, шрифты и мобильную версию. Это адаптированный Scrollcraft (открытый скилл, который мы переделали под свою концепцию)
3 скилл. Код — связывает кадры со скроллом, настраивает загрузку, мобильную версию и плавность.

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


Сайт собран, все работает, выложили на домен. Но возникает нюанс... 🤨

На связи Коля! Я как-то писал, что агент пишет код по нормальным практикам. Так и есть: он не станет по своей воле оставлять дыру в форме или собирать запрос к базе склейкой строк. В этом смысле «из коробки» правда.


Но безопасность сайта ведь не только код. Здесь работает то же правило, что и во всем остальном: агент делает ровно то, о чем его попросили. Не попросили – не сделал. А по умолчанию никто не просит.

✨ Что забывают чаще всего:
— Заголовки безопасности. Их 6, и в свежем проекте обычно нет ни одного. Это базовая гигиена: запрет встраивать сайт во фрейм, принудительный HTTPS, контроль загрузки ресурсов. Настраивается один раз на сервере.
— Формы. Проверки в браузере недостаточно, ее легко обойти. Нужны серверная валидация, ограничение частоты отправок и простая защита от ботов. Иначе форма быстро превратится в источник спама.
— Секреты. Ключи от почты, платежей и других сервисов нельзя хранить в коде, который попадает в браузер. Исходник может посмотреть любой.
— Все, что за логином. Админки и ЛК главная цель для ботов. Предсказуемый URL, отсутствие лимита попыток, небезопасная загрузка файлов – все это перебирается автоматически.
— Персональные данные. Форма с телефоном это уже обработка ПДн. В России это отдельные требования, которые обязательно нужно закрыть до запуска.

Время практики. Попросите агента пройтись по проекту по этому списку. Главное нормально и по пунктам поставить ему задачу: заголовки, проверка форм на сервере, ограничение частоты, секреты в коде фронта, доступ к админке, загрузка файлов. Разница в результате заметная (как раз потому, что вы перестали надеяться, что он догадается сам).


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

🌚 У кого сайт после запуска ловил ботов / спам через форму – что именно прилетало? Подозреваю, у многих одно и то же.


Как передать клиенту сайт, собранный через AI, если сам он в нейронках не шарит?

Если не решить этот вопрос заранее, то когда клиент захочет поменять текст или добавить блок, он просто не сможет понять, где и как это делать. Будет как на гифке...


За время работы с AI-сайтами мы выделили для себя такие решения:

▶️Headless CMS (Sanity, Contentful, Strapi)
Контент хранится отдельно от сайта: клиент управляет текстами, изображениями и товарами через админку, а сайт на Next.js, React или другом стеке подтягивает данные через API. Подходит, если нужен гибкий сайт без привязки фронта к CMS.

▶️WordPress как headless CMS
Тот же подход, но с привычным WordPress в качестве админки. Подойдет, если клиент уже работал с WordPress и не хочет осваивать новый интерфейс. А вы при этом можете пилить фронтенд на любом современном стеке.

▶️Визуальный редактор (по типу Tina)
Здесь клиент может редачить контент прямо на сайте: менять заголовки, картинки, текст и сразу видеть результат. Для небольших сайтов это удобный компромисс – не нужна полноценная CMS + клиенту не приходится лезть в код.

▶️Дать доступ к Dev Mode
Самый быстрый вариант, но он только для подготовленных. Если клиент или кто-то с его стороны разбирается в коде – тогда берем.

Кстати, от способа передачи AI-сайта клиенту может зависеть даже то, как вы будете собирать сам сайт. Поэтому лучше продумать этот момент еще до начала разработки (а не в момент передачи)


🤩 Мы сейчас как раз готовим новый продукт про сборке AI-сайтов, где этот вопрос учтен с самого начала. Расскажем в ближайших постах!


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

Сначала о выборе подхода. Такой эффект можно сделать на 3D в браузере, но для обычного сайта это слишком тяжело и дорого. 3D оправдан на промо-проектах, где сам эффект – часть продукта. Для большинства сайтов оптимальна и легче секвенция. Кстати Apple использует этот подход в своих скролл-анимациях (например, страница AirPods)

Итак, кадры и видео генерируем в Higgsfield. Главное правило: дешево тестируем, дорого рендерим только после аппрува.


Порядок такой:
1. Генерим стартовый кадр. Делаем несколько вариантов, выбираем лучший.
2. Черновое видео в 720p. На этом разрешении гоняем анимацию хоть 10 раз, пока не получим нужное движение. Смотрим клип целиком, раскадровку и стоп-кадр в конце.
3. Финальный рендер в 4K. Запускаем только тогда, когда движение утверждено.

Это сильно экономит бюджет: 15 сек в 720p стоят ~50 кредитов, а в 4K уже ~330. Если искать идею сразу в 4K, бюджет сгорит на 3-ей попытке.


Две ловушки
1. Докрутить 720p до 4K через апскейлер дешевле, но сетка неизбежно перерисует мелкие детали. Если в кадре есть интерфейсы, мониторы или надписи — только нативный 4K, иначе получите рандомный набор букв.
2. Сюжет должен быть из трех актов: было → переход → стало. Если объект просто распадается и превращается во что-то другое, это воспринимается как исчезновение. Поэтому важно показать, как новый образ собирается до конца.

И не забываем про композицию: объект – максимум 40% высоты кадра, остальное пространство оставляем под заголовок. Картинка «во весь экран» выглядит эффектно, но делает текст нечитабельным.


Готовый видосик режем на кадры:
— Частота: 15 fps
— Размер: ширина 2560px, формат строго WebP (сильно экономит вес)
— Финал: дублируем последний кадр 3–5 раз в конец, чтобы анимация плавно залипала, а не дергалась.
— Итого: 15 сек видео превращаются в ~230 кадров.

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

Обязательно сохраняйте ID и сиды всех удачных генераций в отдельную табличку. Без них результаты потом не найти.


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

Если хотите, отдельно разберем, как собрать сам scroll-scrub. Ставьте 🔥


Актуально?
Опрос
  •   Да
  •   Нет
151 голосов

Показано 20 последних публикаций.