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

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

@pixeleperfect

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

Сайт школы: https://pixelperfect.school
Subscribers
8.49K
Photos
913
Videos
231
Links
939
Recent Posts 20 shown
Post #2830 275
Да ты там все токены сжег 🔥

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

Токены я не покупаю. Работаю в подписке: фикс. сумма в месяц, а внутри лимиты. Уперся в лимит – ждешь, пока сбросится (у 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 вещи: разобраться, как правильно ставить задачи агенту, и собрать для него рабочую среду (инструкции и готовые сценарии). Зато среда переезжает с проекта на проект, и следующий сайт начинается не с нуля.

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


Напишите в комментах, на чем держите сайты сейчас и сколько выходит в месяц. Интересно сравнить :)
  • ❤‍🔥 2
Post #2829 435
Сайт на ИИ-агентах и 152-ФЗ. Почему это безопаснее для бизнеса, чем популярные конструкторы? 🤝🏻

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

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

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

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


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

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

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

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

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


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

Более того, сайт с агентом безопаснее готового конструктора, тк вы сами контролируете, где хранятся данные и куда они отправляются ☕️
  • 💯 7
  • 😁 2
Post #2828 589
Наш новый лендос собрал Claude

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


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

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

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

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

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


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

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

Если бы не знали, догадались бы, что его собрал Клод?
  • 🥰 3
  • 😁 2
  • 😈 1
  • 👀 1
Post #2827 732
А что если агент всегда будет делать что-то не так? 🤦‍♀️

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

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

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


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

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

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


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

Чем больше сил вы в нее вкладываете, тем меньше она становится похожа на универсального агента из коробки и тем больше на инструмент, собранный конкретно под вас.
Post #2826 741
<< Запись эфира здесь >>

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

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


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

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

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

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

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


😱 Всего 20 мест! До 19.09 включительно можно забрать свое со скидкой 49%

➡️ Посмотреть программу курса
  • 💔 4
  • 🥰 1
Post #2825 636
➡️ Даня и Коля уже в эфире, подключайтесь: https://www.youtube.com/live/fddZkuSY2mw

Тестируют GPT-6 Astra на реальной задаче и собирают с AI-агентами сайт AI-консультанта по косметике: с интерактивным примером консультации, анимацией по скроллу и сгенерированным визуалом. Ребята показывают весь путь от идеи до рабочего сайта: что дать агенту на старте, чтобы избежать нейрослопа и получить нужный результат с первых итераций. А на выходе будет сайт, готовый к деплою ⚡️
YouTube GPT-6 Astra: НЕВЕРОЯТНЫЙ сайт без нейрослопа за один эфир ⚡️ Научись создавать сайты с AI-агентами. Дизайн, вайбкодинг, передача клиенту: https://pixelperfect.school/ai-native-website?utm_source=youtube&utm_medium=video&utm_campaign=webinar_siteswithai_09_26 📲 Остались вопросы, пиши моему менеджеру: https://t.me/pixelpsale…
  • 💯 1
Post #2824 642
Эфир в 18:00 МСК | Сайт для AI бьюти-помощника за один эфир без кода 😎🙂

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

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

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

Ждем всех! Ссылка на эфир уже в канале Коли: https://t.me/+LYNzETj9ogI0NGEy
  • 💔 3
Post #2823 778
Раньше эффектная веб-анимация выглядела так: дизайнер делает в 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. Полсотни скиллов под моушн-графику, анимацию и видео.

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


Сохраняйте для следующего проекта. Если знаете годные инструменты, кидайте в комменты 🚀
  • 💯 2
Post #2822 741
Как быть, когда клиент хочет сайт как у Apple: с 3D, сложной анимацией, динамичными интерфейсами? 🗿

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

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

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


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

Ссылку на трансляцию Коля выложит в свой тг-канал. Подписывайтесь, чтобы не пропустить: https://t.me/+vk7mYYTC2qhlZmRi
Post #2821 864
Где физически живет сайт, собранный с ИИ? 😯

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


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

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

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

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


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

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

На выходе получается полностью автономный продукт на базе открытых веб-стандартов, который разворачивается на любом сервере.
  • 💯 2
Post #2820 866
Есть эффект, который многие видели, но мало кто знает, как он сделан: крутишь страницу — камера летит сквозь изображение и оказывается в другом пространстве. В любой момент можно остановиться или прокрутить назад.

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

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

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

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

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


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

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

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

Смысл разделения в том, что ни один скилл не пытается быть универсальным. Каждый знает свою зону и знает, где начинается соседняя. Один огромный скилл на все превращается в кашу, из которой агент выбирает наугад.
  • 🥰 5
  • 😁 2
Post #2819 1.01K
Сайт собран, все работает, выложили на домен. Но возникает нюанс... 🤨

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


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

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

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


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

🌚 У кого сайт после запуска ловил ботов / спам через форму – что именно прилетало? Подозреваю, у многих одно и то же.
  • 💯 4
Post #2818 1.04K
Как передать клиенту сайт, собранный через AI, если сам он в нейронках не шарит?

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


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

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

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

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

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

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


🤩 Мы сейчас как раз готовим новый продукт про сборке AI-сайтов, где этот вопрос учтен с самого начала. Расскажем в ближайших постах!
  • 🥰 7
  • 😁 3
  • 💯 1
Post #2817 1.1K
Видели сайты, где скроллишь вниз и кадр за кадром разворачивается сюжет? Мы собрали пару таких проектов через 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. Ставьте 🔥
  • 💯 7
  • 🎉 2
Post #2815 1.4K
Есть одна идея, которую мы разгоняем в команде уже несколько месяцев. Решил первым делом поделиться ею с вами тут 👀

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

По сути это возможность вообще отказаться от конструкторов и собирать сайты просто голосом.

Сейчас проверяем гипотезу и хотим понять, насколько такой продукт актуален. Было бы вам интересно попробовать и поучаствовать? ↙️
  • 🎉 10
Post #2814 1.69K
В новом видео Коля собрал онлайн-магазин без кода и за три (!) промпта: каталог, корзину, чекаут, личный кабинет и админку с заказами и складом. Сам движок бесплатный – из расходов только сервер, около 1000 ₽ в месяц.

Сначала магазин выглядел как обычный шаблон, но Коля подключил Open Design по MCP, попросил привести все к дизайн-системе Apple, и магазин стал выглядеть как полноценный продукт.

📹 Включайте видосик, чтобы увидеть весь процесс от начала
  • 😁 2
  • 🎉 1
Post #2813 2.05K
Привет, на связи Коля 🙂

За последние полгода мы в команде поменяли подход к корпоративным сайтам. Раньше собирали на Webflow, сейчас работаем через Claude Code, подвязываем CMS. В такой связке результат получается заметно быстрее и гибче.

Недавно вышла Kimi K3. Я не стал делать очередной обзор модели, а решил сразу протестить ее в реальной задаче.

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

И заодно разбираюсь, чем среда Kimi K3 отличается от Claude Code и Codex, и насколько легко в нее перенести привычный подход к разработке.

📹 Включайте видео на YouTube

А для тех, кто захочет повторить мой проект, я подготовил полную среду, скиллы и все промпты. Забирайте в комментах под этим постом ↓
  • 🥰 4
Post #2812 1.7K
Возвращаемся с каникул с крутыми новостями ☺️

Тут Webflow на днях выкатили MCP 2.0. Теперь AI-агенты Claude, Cursor, Codex можно напрямую подключать к вф-проектам и работать с ними без костылей.

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

MCP 2.0 умеет создавать компоненты и подтягивать ваши переменные, поэтому ИИ верстает строго по дизайн-системе. Но у меня есть сомнения, насколько четко он удержит логику на действительно тяжелых ДС.

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


Самое крутое. Если раньше агенту требовался заранее созданный сайт Webflow, то MCP 2.0 позволяет агентам самостоятельно создавать и разворачивать новые сайты в Webflow Cloud без ручного участия человека.

Уверен, еще 1-2 года и главными юзерами вебфлоу и похожих ноукод платформ будут уже не люди, а ИИ-агенты. А наша роль окончательно станет в стратегии и арт-дирекшене 🌚

Делитесь, кто уже пробовал mcp 2.0?
  • 👀 5
  • 🎉 3
  • 💔 1
Post #2811 2.21K
😌 Лично у меня самая сильная мотивация изучать новые инструменты появляется тогда, когда сразу видишь осязаемый результат, который не уходит в стол, а забирается в реальную работу.

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

✅ Вы можете взять фичу со своего текущего проекта, которую давно хотите показать команде, но ждете ресурсов разработки. Или заготовку под сайд-проект из заметок. А если своей идеи нет — возьмете любой из 5-ти концептов Дани.


Опыт в коде не нужен, всё пишет агент. Если умеете работать в Figma и когда-либо устанавливали десктопное приложение – этого хватит.

🤩 За 4 дня прогоняете выбранную идею через сквозной пайплайн: сборка PRD с OpenCode → генерация экранов через Google Stitch → бренд-пак в Figma Weave → HTML/JS-прототип, запущенный в браузере на локальном сервере.

Доступ Даня скоро закроет, так что успевайте)

➡️ Запускайте мини-курс
  • 🎉 8
  • 🥰 4
Older posts →

About this channel

How can I read @pixeleperfect without a Telegram account?
TGViewer shows the public web preview Telegram publishes for Pixel Perfect | AI для диджитал-специалистов: recent posts, photos, videos and the subscriber count, with no app, login or account.
How many subscribers does Pixel Perfect | AI для диджитал-специалистов have?
Pixel Perfect | AI для диджитал-специалистов (@pixeleperfect) has 8.49K subscribers on Telegram, refreshed roughly every 30 minutes.
Does Pixel Perfect | AI для диджитал-специалистов know I viewed it here?
No. Public channel previews carry no viewer identity, and TGViewer has no accounts or tracking of what you look up.
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →