00:00:00Почему передача дизайна в код до сих пор считается самым слабым звеном при разработке с ИИ?
00:00:04Казалось бы, к этому моменту уже должен был появиться удобный способ создать дизайн,
00:00:06изменить его и сразу увидеть обновления в коде.
00:00:08Но все инструменты, что мы пробовали, работают либо с дизайном, либо с кодом. Никогда вместе.
00:00:13Stitch и Bolt работают по принципу «промпт в код». Там нет холста, куда можно вернуться и внести правки.
00:00:17Figma MCP работает только на чтение: ИИ может брать оттуда макеты, но не может в них рисовать.
00:00:22А если использовать ИИ-агента напрямую, каждое изменение дизайна требует написания промпта с нуля.
00:00:26Поэтому, когда Pencil.dev начал набирать популярность, обещая стать двусторонним мостом между
00:00:31дизайном и кодом, это привлекло наше внимание. Но когда мы начали реально в нем работать,
00:00:35этот мост оказался не таким уж бесшовным. И то, что начиналось как простой тест инструмента,
00:00:40заставило нашу команду погрузиться гораздо глубже, чтобы заставить этот процесс работать.
00:00:44Скорее всего, вы уже слышали о Pencil.dev —
00:00:47новом ИИ-инструменте, который в последнее время стал очень популярен среди дизайнеров.
00:00:51По сути, это связующее звено между привычными инструментами для проектирования
00:00:56и инструментами ИИ-разработки, заточенными под реализацию этих паттернов.
00:01:00Он подключается ко всем популярным агентным IDE и содержит функции,
00:01:04которые упрощают рабочий процесс: генерацию компонентов,
00:01:08поддержку UI-библиотек и автоматическое создание CSS-классов.
00:01:11Для тех, кто привык к Figma, интерфейс покажется максимально знакомым.
00:01:15Сейчас инструмент бесплатен, и наша команда скачала его для тестирования.
00:01:18Мы установили десктопное приложение, которое предложило подключиться ко всем
00:01:23установленным у нас ИИ-платформам. Мы выбрали Claude Code, так как это наш
00:01:27основной инструмент. Pencil.dev использует такие платформы, как
00:01:32Claude Code и Codex «под капотом». После установки приложения
00:01:36MCP был автоматически настроен для Pencil.dev, и все инструменты сразу появились в Claude Code.
00:01:41Теперь в чате стали доступны все модели OpenAI и Anthropic.
00:01:46Мы выбрали Opus 4.6. У этого инструмента мощные возможности проектирования.
00:01:51Он хранит файлы дизайна в формате .pen внутри папки проекта,
00:01:56что по сути является JSON-файлом, который можно версионировать через Git. Но функция,
00:02:01которая реально выделяет его — это возможность двусторонней связи между
00:02:06агентом и дизайном в приложении. Хотя эта синхронизация работала не совсем так, как мы ожидали.
00:02:10Мы думали, что Claude или любой агент будет сам обновлять код при смене дизайна и наоборот.
00:02:16Но на деле нам приходилось вручную просить его синхронизироваться,
00:02:21так как автоматического обновления нет. Агент анализировал дизайн секцию за секцией
00:02:26и переносил это в HTML-файл. Результат в коде точно соответствовал макету,
00:02:32но делать это вручную после каждой правки — слишком большая нагрузка.
00:02:37Наша команда работала над лендингом для студии креативного направления,
00:02:41который мы уже спроектировали в Pencil.dev с подключенным Claude Code. На первый взгляд
00:02:46сайт выглядел отлично, а визуальный стиль передавался именно так, как мы и задумывали.
00:02:51Мы внедрили дизайн через Claude и синхронизировали его с проектом на Next.js,
00:02:56но на странице было много элементов, которые нам не нравились и требовали правок.
00:03:01Нам приходилось постоянно что-то менять, но мы не могли каждый раз просить Claude
00:03:06снова и снова синхронизироваться с проектом — это слишком рутинно.
00:03:10Чтобы решить проблему, мы написали скрипт. В нем использовались библиотеки JavaScript,
00:03:15предназначенные для отслеживания изменений в файлах. Также мы добавили периоды ожидания (cooldown),
00:03:20чтобы Claude не срабатывал слишком часто, не тратил токены и не достигал лимитов сессии.
00:03:25Суть скрипта проста: он следит за файлом .pen с дизайном, и как только
00:03:29в нем происходят изменения, он запускает Claude CLI с промптом о синхронизации.
00:03:34Тот самый период ожидания создает паузу между сохранениями, чтобы не
00:03:39синхронизировать каждую мелкую правку мгновенно. Для запуска достаточно команды «npm run sync»,
00:03:44после чего воркер начинает мониторить наш .pen файл.
00:03:49Теперь при любых изменениях, как только мы нажимали комбинацию клавиш для сохранения,
00:03:54автоматически срабатывал Claude CLI и обновлял проект без наших лишних команд.
00:03:59Но перед использованием скрипта нужно сделать один важный шаг: заранее настроить
00:04:04все разрешения на редактирование (чтение, запись и вызовы инструментов MCP)
00:04:10в файле setting.json внутри папки .claude. Если этого не сделать, Claude
00:04:15бесконечно зависнет на запросе доступа. Без этого Claude не сможет вносить правки
00:04:20и корректно завершить внедрение. С запущенным скриптом всё стало проще —
00:04:24нам больше не нужно было вручную запускать синхронизацию.
00:04:29Каждая итерация отслеживалась скриптом и отправлялась в Claude для реализации.
00:04:34Этот скрипт вместе с исходным кодом приложения доступен в AI Labs Pro.
00:04:39Для тех, кто не знает: это наше сообщество с готовыми шаблонами,
00:04:43которые можно внедрять в свои проекты. Если вы цените нашу работу
00:04:48и хотите поддержать канал, это лучший способ. Ссылка в описании. Одна из
00:04:52мощных сторон Claude Code — использование мультиагентной системы, которая ускоряет задачи.
00:04:57Мы решили попробовать такую настройку и с Pencil.dev. Поскольку он подключен через MCP,
00:05:02мы задействовали сразу несколько агентов для реализации на Next.js,
00:05:07чтобы каждый работал над своей частью приложения одновременно. Использовать это с
00:05:12Claude Code удобно, так как у него есть доступ к PRD и UI-гайдам, которые мы готовим заранее.
00:05:18Нам нужно было создать остальные страницы сайта, а не оставлять только лендинг.
00:05:23Мы поставили эту задачу, явно указав, чтобы каждый агент взял на себя
00:05:28отдельный аспект приложения. Мы начали с исследования и вызвали инструменты MCP.
00:05:33Так как страниц было пять, Claude создал пять агентов, закрепив за каждым по одной странице.
00:05:39Спустя короткое время первая версия дизайна была готова. Были созданы все
00:05:44нужные страницы, при этом дизайн полностью соответствовал лендингу по шрифтам и стилям.
00:05:48Закончив с дизайном, мы нажали Cmd+S для сохранения, и скрипт
00:05:54тут же начал внедрять изменения в приложение, избавляя нас от рутины.
00:05:58На тот момент сайт выглядел неплохо, но ему чего-то не хватало. В нем не было динамики.
00:06:03Нужна была анимация прокрутки, которая вела бы взгляд пользователя по странице.
00:06:08Для этого мы обратились к GSAP — нашей любимой библиотеке для сложных,
00:06:14но легко внедряемых JS-анимаций. Чтобы всё сработало как надо,
00:06:19мы составили детальный промпт в формате XML. Мы выбрали XML, потому что модели Claude
00:06:26оптимизированы под такую структуру и лучше парсят инструкции. Промпт содержал
00:06:31детали задачи, список зависимостей и важные примечания для каждого
00:06:36конкретного элемента, описывая его поведение в соответствующих тегах.
00:06:41Когда мы дали этот промпт в Claude Code, он внес правки, добавил компоненты
00:06:46с анимацией GSAP и установил саму библиотеку. По завершении
00:06:51мы проверили результат. С анимациями сайт стал гораздо живее и интерактивнее.
00:06:56Впечатления от него полностью изменились по сравнению с предыдущей
00:07:00статичной версией. Этот промпт также доступен в нашем сообществе
00:07:04AI Labs Pro, где вы можете скачать его для своих нужд. И если вам нравится
00:07:09наш контент, нажмите кнопку «Хайп» — это помогает нам расти и делать больше видео.
00:07:14Хотя мы уже добавили визуальные эффекты через GSAP, мы решили наложить
00:07:19поверх еще один слой с помощью Lenis. Это библиотека для плавного скролла
00:07:25с открытым кодом, одна из лучших для создания эффекта погружения на сайте.
00:07:30Вы спросите: зачем еще одна библиотека, если GSAP уже настроен? Дело в том,
00:07:35что Lenis и GSAP отлично дополняют друг друга. GSAP управляет тем, что происходит
00:07:39при скролле, а Lenis — тем, как ощущается сама прокрутка. Без Lenis
00:07:44скролл может быть дерганым, а с ней страница течет плавно, и анимации GSAP выглядят естественнее.
00:07:49Мы составили еще один подробный XML-промпт для этой задачи.
00:07:54Подход был тот же, что и с GSAP. Промпт для Lenis был сфокусирован на
00:07:59улучшении уже созданных анимаций. В нем были перечислены зависимости,
00:08:04настройки, описания элементов и правила поведения анимаций.
00:08:09Мы передали это в Claude Code, и он внес изменения по всему репозиторию.
00:08:13После внедрения сайт стал на порядок лучше. Основное изменение —
00:08:18плавная прокрутка, которая сделала навигацию по-настоящему приятной.
00:08:23Когда сайт был готов и наполнен функциями, оставалось последнее —
00:08:28проверить его на соответствие стандартам UX перед финальной сдачей.
00:08:32Для этого мы создали навык (Skill) с помощью Skill Creator под названием UX Audit.
00:08:38Этот навык заточен под проверку качества UI-элементов и аудит сайта на
00:08:44соответствие UX-стандартам. Процесс включал несколько фаз: сбор контекста,
00:08:49анализ по чеклисту из 9 пунктов и фазу отчета с выставлением баллов.
00:08:54Туда также вошли Python-скрипты, предназначенные для программного поиска
00:08:59тех UX-ошибок, которые человеческий глаз может легко пропустить.
00:09:04Запустив аудит, мы получили список проблем: 2 критические, а также ряд средних
00:09:08и мелких недочетов. К критическим относился недостаточный контраст цветов.
00:09:14Изначально сайт получил оценку «C». Нам выдали подробный список правок,
00:09:19и мы попросили ИИ их внедрить. После исправлений сайт,
00:09:24хоть и не изменился радикально внешне, стал намного удобнее
00:09:29и теперь полностью соответствует стандартам доступности WCAG.
00:09:34При повторном аудите оценка поднялась с «C» до «B»: все важные ошибки исчезли,
00:09:40остались лишь мелкие детали. На этом мы подошли к концу видео.
00:09:45Если хотите поддержать наш канал и выход новых роликов,
00:09:50вы можете сделать это через кнопку «Super Thanks». Как обычно, спасибо за просмотр,
00:09:55и увидимся в следующем видео!