Latest posts
Pixel Perfect | AI для диджитал-специалистов
22 Sept, 15:19
Наш новый лендос собрал ClaudeКод, адаптив, интерактив, аналитика – все он. Но попроси мы просто «сделай красиво», вышел бы очередной сайт, в котором ИИ чувствуется с первого экрана. Поэтому сначала была система, а уже потом страница.⚡️ Что делали руками Выбрали эталон и направление. Задали свою палитру и шрифт. Из 124 находок разбора решили, что берем в первую очередь. Написали бриф по каждой секции и принимали каждый экран.⚡️ Что делал агент Разобрал эталон замерами: размеры шрифтов, отступы, сетку, поведение элементов при наведении, на экране компа и мобилки. Прошел 10 шаблонов страниц, 94 файла стилей и 51 скрипт.Из этого собрал нашу ДС: 30+ компонентов на старте, потом еще 19, в Storybook 300+ состояний. Все уже в нашей палитре и нашем шрифте, а также то, чего в эталоне не было.Страницу собирал только изPixel Perfect | AI для диджитал-специалистов
19 Sept, 09:12
А что если агент всегда будет делать что-то не так? 🤦♀️При первом контакте с агентами этот вопросик возникает довольно быстро.Вроде все найс, но тут он не так понял задачу, там пошел не туда, где-то собрал не совсем то, что вы представляли. Легко подумать: а что если так будет всегда и мне придется бесконечно его поправлять?Но тут важно понимать, что вы работаете не просто с моделью. Вы постепенно собираете свою среду вокруг нее, и она может накапливать ваш опыт.Поправили агента – он запомнил. Ошибка повторяется – правило можно вынести в skill. Нужно контролировать результат – добавить проверку. Можно вообще попросить агента анализировать ваши правки и самому находить закономерности в том, что вы постоянно исправляете.Архитектура здесь ограничена в основном вашим воображением: память, skills, хуки, сабагенты, тесты, отдельные проверки. СредаPixel Perfect | AI для диджитал-специалистов
16 Sept, 17:41
<< Запись эфира здесь >>Коля и Даня протестировали GPT-6 Astra и с нуля собрали сайт AI-консультанта по косметике. От дизайна до публикации на домене за один эфир: работа, на которую у команды обычно уходят недели, и ни строчки кода руками.Этот проект +1 пруф того, что разделение на дизайнеров, которые рисуют макеты и разработчиков, которые верстают их, почти исчезло.Во-первых, конструкторы уперлись в потолок, а запросы клиентов выросли. Им нужна своя логика под их бизнес, связки с их сервисами и сайт, который не зависит от ограничений и блокировок чужой платформы. Раньше за таким кастомом шли в студии, платили от 300к и ждали месяц. Сейчас можно выдать продакшн такого уровня в соло за несколько дней 😏Также между дизайнерами и разрабами образовалась огромная серая зона. 90% дизайнеров пока боятся открыть терминал, а разработчики не умеют в
Pixel Perfect | AI для диджитал-специалистов
16 Sept, 14:55
➡️ Даня и Коля уже в эфире, подключайтесь: https://www.youtube.com/live/fddZkuSY2mwТестируют GPT-6 Astra на реальной задаче и собирают с AI-агентами сайт AI-консультанта по косметике: с интерактивным примером консультации, анимацией по скроллу и сгенерированным визуалом. Ребята показывают весь путь от идеи до рабочего сайта: что дать агенту на старте, чтобы избежать нейрослопа и получить нужный результат с первых итераций. А на выходе будет сайт, готовый к деплою ⚡️YouTubeGPT-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…Pixel Perfect | AI для диджитал-специалистов
16 Sept, 09:43
Эфир в 18:00 МСК | Сайт для AI бьюти-помощника за один эфир без кода 😎🙂Сегодня Даня и Коля в прямом эфире тестируют новую GPT-6 Astra на реальной задаче: собирают с AI-агентами сайт AI-консультанта по косметике. Интерактивный пример консультации, анимация по скроллу и визуал, сгенерированный под проект. Даня отвечает за дизайн, Коля за разработку.Раньше на такой проект уходит недели, а то и месяца работы команды и шестизначный бюджет 🤩Приходите увидеть весь путь от идеи до готового сайта и понять, как делать сайты студийного уровня в одиночку и без знания кода. А в конце эфира Коля отдаст зрителям настроенный сетап с агентами и скиллами для ваших проектов.Ждем всех! Ссылка на эфир уже в канале Коли: https://t.me/+LYNzETj9ogI0NGEy
Pixel Perfect | AI для диджитал-специалистов
15 Sept, 08:42
Раньше эффектная веб-анимация выглядела так: дизайнер делает в After Effects → экспортирует в Lottie → разработчик внедряет → что-то ломается → круг повторяется.Сейчас агент может собрать анимацию сразу кодом. Ниже мой набор инструментов.Начну с главного, про что многие не знают: GSAP стал бесплатным. Раньше самые топовые плагины вроде разбивки текста на буквы или морфинга фигур были за подпиской. После того как библиотеку купил Webflow, открыли все.Готовые компоненты, которые агент ставит за один запрос:— React Bits (47К звезд на GitHub). 100+ анимированных компонентов. Самая быстрорастущая библиотека в этой нише. — Aceternity UI (~28К звезд). Про эффектные штуки: 3D-карточки, светящиеся лучи, магнитные кнопки, частицы. — Magic UI (~15К звезд). Аккуратные микровзаимодействия и анимации под маркетинговые страницы. — 21st.dev. Библиотека на 10К компонентов, а главное (!) естьPixel Perfect | AI для диджитал-специалистов
14 Sept, 14:26
Как быть, когда клиент хочет сайт как у Apple: с 3D, сложной анимацией, динамичными интерфейсами? 🗿На конструкторах такое часто тормозит и требует костылей. Привлекать верстальщика – ну такое, смета растет, сроки увеличиваются. В итоге концепт приходится сильно упрощать или откзываться и отдавать дорогой проект студии.Или нет? 16 сентября в 18:00 мск Даня и Коля в эфире покажут, как собирать такие проекты без команды – только с помощью ИИ-агентов.С нуля соберут сайт для ИИ Бьюти-помощника. Реализуют ту самую сложную динамику: интерактивное 3D и покадровую разметку рентгена, которая плавно разворачивается при прокрутке страницы.Научат управлять агентом на уровне арт-директора + отдадут зрителям настроенную среду, которую можно сразу использовать в своих проектах 🔍Ссылку на трансляцию Коля выложит в свойPixel Perfect | AI для диджитал-специалистов
12 Sept, 09:45
Где физически живет сайт, собранный с ИИ? 😯У многих, кто только начинает вайбкодить, есть заблуждение: такой сайт будет жестко завязан на инфраструктуру OpenAI или Anthropic. Будто проект физически живет внутри моделей. Но реальность проще: ИИ участвует только на этапе написания кода.Архитектура проекта устроена супер стандартно:Пока вы вайбкодите сайт, он живет у вас на жестком диске. Все исходники лежат в папке на ноуте: картинки, шрифты, код. Агент не держит проект у себя в облаке. Он просто считывает файлы с вашего диска, коммитит изменения в Git и правит проект прямо на вашем ноуте.Готовый сайт деплоется на стандартный сервер (хоть на российский Timeweb или Selectel, хоть на зарубежный Vercel). Когда человек открывает вашу ссылку, его браузер загружает файлы напрямую с этого хостинга. Никакие запросы к серверам OpenAI или Anthropic в этотPixel Perfect | AI для диджитал-специалистов
11 Sept, 14:57edited
Есть эффект, который многие видели, но мало кто знает, как он сделан: крутишь страницу — камера летит сквозь изображение и оказывается в другом пространстве. В любой момент можно остановиться или прокрутить назад.Многие думают, что это видео. Но на самом деле нет :)Браузер не умеет надежно перематывать видео покадрово, особенно на телефоне. Будет дергаться и подвисать. Поэтому ролик режется на отдельные кадры: около 250 файлов на 15 сек. Дальше на странице делается высокая зона прокрутки, около 6 экранов. А внутри нее экран залипает на месте. Пока крутите, страница считает прогресс от 0 до 1 и по нему выбирает, какой кадр показать. Прокрутили треть — увидели кадр из первой трети, отмотали назад — вернулись обратно.Отсюда и берется ощущение, которого обычное видео не даёт: движением управляете вы, а не наоборот3 нюанса, без которых все развалится:• Хвост прокрутки. ПоследниеPixel Perfect | AI для диджитал-специалистов
8 Sept, 10:51
Сайт собран, все работает, выложили на домен. Но возникает нюанс... 🤨На связи Коля! Я как-то писал, что агент пишет код по нормальным практикам. Так и есть: он не станет по своей воле оставлять дыру в форме или собирать запрос к базе склейкой строк. В этом смысле «из коробки» правда.Но безопасность сайта ведь не только код. Здесь работает то же правило, что и во всем остальном: агент делает ровно то, о чем его попросили. Не попросили – не сделал. А по умолчанию никто не просит.✨ Что забывают чаще всего: — Заголовки безопасности. Их 6, и в свежем проекте обычно нет ни одного. Это базовая гигиена: запрет встраивать сайт во фрейм, принудительный HTTPS, контроль загрузки ресурсов. Настраивается один раз на сервере. — Формы. Проверки в браузере недостаточно, ее легко обойти. Нужны серверная валидация, ограничениеPixel Perfect | AI для диджитал-специалистов
6 Sept, 10:08
Как передать клиенту сайт, собранный через AI, если сам он в нейронках не шарит?Если не решить этот вопрос заранее, то когда клиент захочет поменять текст или добавить блок, он просто не сможет понять, где и как это делать. Будет как на гифке...За время работы с AI-сайтами мы выделили для себя такие решения:▶️Headless CMS (Sanity, Contentful, Strapi) Контент хранится отдельно от сайта: клиент управляет текстами, изображениями и товарами через админку, а сайт на Next.js, React или другом стеке подтягивает данные через API. Подходит, если нужен гибкий сайт без привязки фронта к CMS.▶️WordPress как headless CMS Тот же подход, но с привычным WordPress в качестве админки. Подойдет, если клиент уже работал с WordPress и не хочет осваивать новый интерфейс. А вы при этом можете пилить фронтенд на любом современном стеке.Pixel Perfect | AI для диджитал-специалистов
4 Sept, 09:58edited
Видели сайты, где скроллишь вниз и кадр за кадром разворачивается сюжет? Мы собрали пару таких проектов через AI вместо дорогого продакшна. Делюсь процессом 🙂Сначала о выборе подхода. Такой эффект можно сделать на 3D в браузере, но для обычного сайта это слишком тяжело и дорого. 3D оправдан на промо-проектах, где сам эффект – часть продукта. Для большинства сайтов оптимальна и легче секвенция. Кстати Apple использует этот подход в своих скролл-анимациях (например, страница AirPods)Итак, кадры и видео генерируем в Higgsfield. Главное правило: дешево тестируем, дорого рендерим только после аппрува.Порядок такой: 1. Генерим стартовый кадр. Делаем несколько вариантов, выбираем лучший. 2. Черновое видео в 720p. На этом разрешении гоняем анимацию хоть 10 раз, пока не получим нужное движение. Смотрим клип целиком, раскадровку и стоп-кадр в конце. 3. ФиналPixel Perfect | AI для диджитал-специалистов
21 Aug, 07:58
Pixel Perfect | AI для диджитал-специалистов
21 Aug, 07:58
Есть одна идея, которую мы разгоняем в команде уже несколько месяцев. Решил первым делом поделиться ею с вами тут 👀Хотим сделать образовательный продукт по созданию полноценных сайтов с ИИ. То есть не одностраничных лендингов, а онлайн-магазинов, корпоративных сайтов со сложной логикой, интеграциями и CMS.По сути это возможность вообще отказаться от конструкторов и собирать сайты просто голосом.Сейчас проверяем гипотезу и хотим понять, насколько такой продукт актуален. Было бы вам интересно попробовать и поучаствовать? ↙️Pixel Perfect | AI для диджитал-специалистов
11 Aug, 14:40
В новом видео Коля собрал онлайн-магазин без кода и за три (!) промпта: каталог, корзину, чекаут, личный кабинет и админку с заказами и складом. Сам движок бесплатный – из расходов только сервер, около 1000 ₽ в месяц.Сначала магазин выглядел как обычный шаблон, но Коля подключил Open Design по MCP, попросил привести все к дизайн-системе Apple, и магазин стал выглядеть как полноценный продукт.📹 Включайте видосик, чтобы увидеть весь процесс от начала
Pixel Perfect | AI для диджитал-специалистов
24 Jul, 10:15edited
Привет, на связи Коля 🙂За последние полгода мы в команде поменяли подход к корпоративным сайтам. Раньше собирали на Webflow, сейчас работаем через Claude Code, подвязываем CMS. В такой связке результат получается заметно быстрее и гибче.Недавно вышла Kimi K3. Я не стал делать очередной обзор модели, а решил сразу протестить ее в реальной задаче.В новом видео я собираю киношный лендинг: модель помогает придумать концепт, сделать cinematic-анимацию со скроллом, написать код и опубликовать готовый лендос. Получившийся проект — здесь.И заодно разбираюсь, чем среда Kimi K3 отличается от Claude Code и Codex, и насколько легко в нее перенести привычный подход к разработке.📹 Включайте видео на YouTubeА для тех, кто захочет повторить мой проект, я подготовил полную среду, скиллы и все промпты. Забирайте в комментахPixel Perfect | AI для диджитал-специалистов
23 Jul, 13:38
Возвращаемся с каникул с крутыми новостями ☺️Тут Webflow на днях выкатили MCP 2.0. Теперь AI-агенты Claude, Cursor, Codex можно напрямую подключать к вф-проектам и работать с ними без костылей.Мы в школе сразу погнали тестить обновление на задачах (фича уже бесплатна для всех юзеров Webflow).MCP 2.0 умеет создавать компоненты и подтягивать ваши переменные, поэтому ИИ верстает строго по дизайн-системе. Но у меня есть сомнения, насколько четко он удержит логику на действительно тяжелых ДС.Агент также умеет работать с CMS: читать, создавать и обновлять записи в рамках доступных коллекций и полей. Плюс анализировать метрики сайта и оптимизировать дизайн на их основе.Самое крутое. Если раньше агенту требовался заранее созданный сайт Webflow, то MCP 2.0 позволяет агентам самостоятельно создавать и разворачивать новые сайты в Webflow Cloud без ручного
Pixel Perfect | AI для диджитал-специалистов
12 Jun, 07:41
😌 Лично у меня самая сильная мотивация изучать новые инструменты появляется тогда, когда сразу видишь осязаемый результат, который не уходит в стол, а забирается в реальную работу.Именно так Даня построил свой бесплатный мини-курс по AI-продакшену. Никаких скучных кейсов для галочки, каждый собирает интересную ему задачу.✅ Вы можете взять фичу со своего текущего проекта, которую давно хотите показать команде, но ждете ресурсов разработки. Или заготовку под сайд-проект из заметок. А если своей идеи нет — возьмете любой из 5-ти концептов Дани.Опыт в коде не нужен, всё пишет агент. Если умеете работать в Figma и когда-либо устанавливали десктопное приложение – этого хватит.🤩 За 4 дня прогоняете выбранную идею через сквозной пайплайн: сборка PRD с OpenCode → генерация экранов черезPixel Perfect | AI для диджитал-специалистов
10 Jun, 11:10
Даня релизнул бесплатный мини-курс по AI-продакшену 💜Сейчас многие дизы хотят освоить такой продакшен, но не понимают, как связать кучу разрозненных AI-инструментов в единый рабочий флоу. Поэтому Даня решил взять пайплайн, который мы используем на проектах, и упаковать его в 4 урока.▶️Суть: берете свою идею/фичу из текущего проекта/то, что давно хотели собрать руками, и за 4 урока превращаете это в кликабельный прототип.Если у вас нет ни идеи, ни фичи – не страшно. Даня даст вам пять готовых идей продуктов, которые вы сможете реализовать.Что внутри:• Урок 1. Загружаете идею в OpenCode, и агенты собирают PRD. • Урок 2. Отдаете текст агенту через Google Stitch, и он генерирует базовые экраны прямо в Figma. • Урок 3. Через нодовый граф в Figma Weave собираете под продукт уникальную айдентику и визуал. • Урок 4.
Pixel Perfect | AI для диджитал-специалистов
8 Jun, 08:21
Привет, это Коля! Сейчас как никогда популярно мнение, что AI-тулзы обесценивают труд специалистов. Если AI собирает макеты и пишет код, то в чем тогда ценность дизайнера/разработчика? 🐱Я вот смотрю на это иначе. Технологии обесценивают не труд человека, а, скорее, освобождают его от механической работы.Благодаря AI-пайплайну мне не нужно ломать голову, как именно это будет сверстано или собрано – я и так знаю, что инструменты это вытянут. Зато теперь у меня появилось много ресурса, чтобы сфокусироваться на главном: на конечном продукте и эмоции.🤩 Вот реальный пример. Сейчас на одном из проектов я проектирую флоу подарочных сертификатов. Обычно покупка сертификата – это заполнил дефолтную форму, оплатил, забыл.У меня же задача другая: сделать так, чтобы покупка подарка была эмоцией и для отправителя, и для
Related Channels
Other channels in the same section of the catalogue.
