ИИ Дизайнер Cursor Становится ЕЩЁ Лучше? (Playwright MCP, Cursor)
11:28

ИИ Дизайнер Cursor Становится ЕЩЁ Лучше? (Playwright MCP, Cursor)

ИИшенка | AI Automation 18.11.2025 4 273 просмотров 148 лайков обн. 18.02.2026
Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI
Описание видео
🚀 Pro-сообщество тут (там даже есть исходный код этой автоматизации с командами для Cursor): https://t.me/iishenka_pro_bot ⭐️ Бесплатные материалы из этого видео тут: https://t.me/+W1SnvvkcV6A3NWMy В этом видео я расскажу, как скопировать целевой дизайн любой страницы в интернете (Vibe Coding, Playwright MCP) за пару простых шагов. Что особенного в этом видео? Мы не только изучим, как работает MCP сервер Playwright, но и научимся итерировать автоматически ваши дизайн-варианты прямо в коде. 🔥 Независимо от того, работаете ли вы с AI-агентами или только начинаете осваивать автоматизации в n8n, этот урок поможет вам овладеть процессом настройки ИИ для любых задач. ⏱ Таймкоды 00:00 – Введение. Что такое Vibe-дизайн, почему простой промт в курсоре не работает 00:21 – Почему нужны референсы и контекст для нейросети 00:33 – Типы референсов: дизайн-система, сайты, скриншоты 00:47 – Автоматизация работы со скриншотами через MCP 00:52 – Установка Playwright MCP Server 01:12 – Настройка Cursor для работы с MCP и создание Next.js проекта 01:27 – Подключение MCP-сервера в Cursor 01:52 – Выбор сайта-референса (лендинг Cursor) 02:27 – Подготовка ссылки и запуск MCP команды 02:58 – Нейросеть открывает браузер и делает первый скриншот 03:33 – Анализ скриншота и создание первого варианта страницы 04:10 – Запуск процесса автоматического сравнения с оригиналом 04:55 – Где взять все материалы: Telegram группа, pro-группа 05:22 – Первая версия страницы готова. Сравнение с оригиналом 06:10 – Сравнение отдельных элементов страницы 06:33 – Итерации: автоматическое улучшение дизайна 06:53 – Как MCP находит нужные секции (changelog) 07:04 – Улучшение конкретных блоков 07:09 – Результат 2-й итерации. Улучшение секции и проблемы с другой 07:30 – Переход к созданию стиля (style guide) 08:01 – Создание Style Guide: объяснение логики 08:56 – Нейросеть создает style-guide файл 09:03 – Обзор готового Style Guide 09:35 – Создание новой страницы по стайлгайду (pricing) 09:49 – Результат: сравнение pricing со стартовой страницей 10:07 – Добавление header и footer 10:13 – Готовая страница с шапкой и футером 10:29 – Проверка преемственности стиля и качество результата 10:46 – Итоги: две команды, один URL — готовый дизайн + style guide 11:05 – Создание любых страниц под бизнес-задачи 11:15 – Где взять исходники и материалы 11:27 – Завершение 💡 Не забудьте поставить лайк и подписаться, чтобы не пропустить новые уроки по n8n и AI-агентам. Давайте сделаем AI-автоматизации простыми! 🙌 Я — Илья Бовкунов, основатель и СЕО Sendforsign — это компания, занимающаяся AI-автоматизацией договоров и документооборота. В прошлом был Директором по продукту и продуктовому дизайну в международных AI-стартапах. Позвать в подкаст или предложить другое сотрудничество aiiszdes@gmail.com Не забудьте поставить лайк, подписаться и нажать на колокольчик, чтобы не пропустить новые видео об AI-агентах и автоматизациях!

Оглавление (31 сегментов)

  1. 0:00 Введение. Что такое Vibe-дизайн, почему простой промт в курсоре не работает 61 сл.
  2. 0:21 Почему нужны референсы и контекст для нейросети 35 сл.
  3. 0:33 Типы референсов: дизайн-система, сайты, скриншоты 37 сл.
  4. 0:47 Автоматизация работы со скриншотами через MCP 15 сл.
  5. 0:52 Установка Playwright MCP Server 54 сл.
  6. 1:12 Настройка Cursor для работы с MCP и создание Next.js проекта 45 сл.
  7. 1:27 Подключение MCP-сервера в Cursor 76 сл.
  8. 1:52 Выбор сайта-референса (лендинг Cursor) 94 сл.
  9. 2:27 Подготовка ссылки и запуск MCP команды 83 сл.
  10. 2:58 Нейросеть открывает браузер и делает первый скриншот 106 сл.
  11. 3:33 Анализ скриншота и создание первого варианта страницы 95 сл.
  12. 4:10 Запуск процесса автоматического сравнения с оригиналом 116 сл.
  13. 4:55 Где взять все материалы: Telegram группа, pro-группа 74 сл.
  14. 5:22 Первая версия страницы готова. Сравнение с оригиналом 109 сл.
  15. 6:10 Сравнение отдельных элементов страницы 59 сл.
  16. 6:33 Итерации: автоматическое улучшение дизайна 57 сл.
  17. 6:53 Как MCP находит нужные секции (changelog) 28 сл.
  18. 7:04 Улучшение конкретных блоков 10 сл.
  19. 7:09 Результат 2-й итерации. Улучшение секции и проблемы с другой 58 сл.
  20. 7:30 Переход к созданию стиля (style guide) 87 сл.
  21. 8:01 Создание Style Guide: объяснение логики 145 сл.
  22. 8:56 Нейросеть создает style-guide файл 16 сл.
  23. 9:03 Обзор готового Style Guide 70 сл.
  24. 9:35 Создание новой страницы по стайлгайду (pricing) 28 сл.
  25. 9:49 Результат: сравнение pricing со стартовой страницей 43 сл.
  26. 10:07 Добавление header и footer 15 сл.
  27. 10:13 Готовая страница с шапкой и футером 43 сл.
  28. 10:29 Проверка преемственности стиля и качество результата 50 сл.
  29. 10:46 Итоги: две команды, один URL — готовый дизайн + style guide 38 сл.
  30. 11:05 Создание любых страниц под бизнес-задачи 24 сл.
  31. 11:15 Где взять исходники и материалы 30 сл.
0:00

Введение. Что такое Vibe-дизайн, почему простой промт в курсоре не работает

Друзья, всем привет. Ну что, мы с вами возвращаемся сегодня к теме Vipe-код дизайна или вайб-дизайна. И мы с вами уже несколько раз касались этой тематики. Мы с вами уже обсуждали, каким образом можно создавать интерфейсы с помощью нейронок, каким способом создавать лендинг страницы. И в прошлые разы мы выяснили, что просто писать промт в ваш курсор - это плохой вариант
0:21

Почему нужны референсы и контекст для нейросети

потому что версии дизайна, которые получаются, мегабазовые, квадратные и совершенно далеки от того, что нам нужно. Но к чему мы с вами пришли? Это к тому, что перед созданием дизайна необходимо создавать контекст для вашей
0:33

Типы референсов: дизайн-система, сайты, скриншоты

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

Автоматизация работы со скриншотами через MCP

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

Установка Playwright MCP Server

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

Настройка Cursor для работы с MCP и создание Next.js проекта

сегодняшнее видео у нас получилось, нам необходимо с вами будет установить себе один MCP сервер. Он называется Playri MCP Server. Это мегакрутая штука, которая разработана Microsoft. И если объяснять простым языком, то, по сути, это некоторый браузер, с которым может коммуницировать ваша нейронка, с помощью
1:27

Подключение MCP-сервера в Cursor

которой она может открывать необходимые страницы, делать скриншоты, выяснять, что на этой странице пошло не так или что так, менять разрешение этих страниц и масса-масса других дел, которые нам очень пригодятся, как людям, которые хотят создать свой первый дизайн. Устанавливается MCP-сервер просто. Здесь есть config, который мы просто с вами забираем. Для того, чтобы у нас всё с вами получилось, нам надо будет с вами настроить правильно проект в курсоре. Мы уже настраивали несколько раз в
1:52

Выбор сайта-референса (лендинг Cursor)

предыдущих видео наш курсор. В общем и целом, вам потребуется вбить сюда, в окно чата, просьбу настроить вам новый Next JS проект. Мы даже не будем с вами глубоко погружаться в то, что это такое, но, в общем и целом вы получите вот такую себе структуру. После этого вам нужно будет пойти в файл, настройки, настройки курсора, открыть вкладку Tools NMCP, здесь нажать добавить новый MCP сервер и вставить вот сюда ваш Play MCP сервер, который вам понадобится, чтобы делать ваш дизайн. Дальше давайте выберем с вами какой-то дизайн, какую-то лендинг-страницу, которая нам подходит.
2:27

Подготовка ссылки и запуск MCP команды

Ну, раз мы уже работаем в курсоре, давайте выберем прямо страницу курсора. Мне нравится, на самом деле, минималистичный стиль. Здесь очень прикольные пастельные цвета и очень простая, но действенная структура, прямо по которой можно полистать и увидеть, что здесь всё очень крепенько, в порядке. Давайте попробуем создать с вами страницу, которая будет очень похожа на эту с помощью нашей конфигурации и MCP-серверов. Забираем URLSOR. com, возвращаемся в наш курсор и вставляем сюда этот URL. Теперь нам нужно будет попросить Неронку запустить наш MCP
2:58

Нейросеть открывает браузер и делает первый скриншот

сервер PlayR, сходить по этому URL и сделать базовый скриншот для того, чтобы начать на основе этого скриншота разрабатывать лендинг. Но мы с вами пойдём сразу дальше и напишем команду. Команда очень большая, но я вам хочу объяснить, в чём её прикол. Мы просим сделать первоначальный скриншот сайта, который мы предоставим. После этого по скриншоту мы просим создать страницу. Вот так, как неронка сможет, так и создаст. Мы с вами по опыту знаем, что создаст она не очень. Поэтому нам нужно будет с вами прописать остаток команды. После того, как первая версия страницы сделана, сделай скриншот и этой страницы с помощью того же самого MCP-сервера и
3:33

Анализ скриншота и создание первого варианта страницы

внеси правки в нашу страницу для того, чтобы добиться полного сходства с оригинальной страницей URL, которуй мы предоставили. И мы просим итерировать нейронку до тех пор, пока визуальных различий не останется. Это будет работать как магия. Давайте пробовать. Что нам нужно сделать? Давайте просто скажем, что веб-сайт такой-то. И дальше делаем сш и выбираем нашу команду. В этом вся сущность команд. Мы можем очень просто добавлять их в наш чат, и Неронка будет следовать этой команде, выполняя наш запрос. Ну что, нажимаем Enter и смотрим, каким образом происходит весь процесс. Нажали. Мы видим, что Неронка
4:10

Запуск процесса автоматического сравнения с оригиналом

просит запустить браузер и открыть kurрсоor. com. Разрешаем. Это прямо происходит в прямом эфире. Смотрите, какая магия. Открывается браузер и Неронка пытается сделать теперь сNпшот этого браузера. Разрешаем. Скриншотим и видим, как у нас появился наш скриншот. Открываем, проверяем скриншот. Видим, что это как раз тот самый лендинг, который мы хотим повторить у себя. Неронка отсматривает этот скриншот и формирует себе тудулист, по которому она теперь будет создавать наш дизайн. Этот удулист основан на том, что мы предоставили нейронки в нашей команде. И видим, как пошло создание страницы. Ну что, самая выражительная часть. Ждём. Пока мы ждём, я, конечно, напомню, что все ресурсы, которые мы используем, ссылки, которые мы посещаем, PlayRй, серверы и остальные ресурсы, я
4:55

Где взять все материалы: Telegram группа, pro-группа

всегда прикрепляю в своей бесплатной Telegram-группе. Заходите туда и забирайте, чтобы вы могли поэкспериментировать. А если вам понадобится исходный код вместе вот с этими подробными командами и финальными страницами, которые у нас получатся, то обязательно залетайте в нашу про группу. Там вообще очень горячо. Мы изучаем там искусственный интеллект, автоматизации, погружаемся очень глубоко, там есть мастер-класс по N CN, например, и там всегда можно глубоко погрузиться в тематику. Но тем временем мы видим, как
5:22

Первая версия страницы готова. Сравнение с оригиналом

наша первая ветерация страницы готова, и Неронка просит открыть браузер для того, чтобы сделать скриншот и сравнить его с оригинальным скриншотом целевой страницы. Разрешаем. Видим, как открывается наша. Отлично. Так, открылась. Ох, ничего себе, он даже снипиты коды сюда вставил. Ну, это, конечно, круто. видим, что стиль, конечно же, пока отличается, поэтому неронка делает скриншот и сейчас должна сравнить оригинальный скриншот с этим скриншотом и внести какие-то правки, которые приведут к сходству нашу страницу и оригинальный сайт. Опять же запускаем наш курсор. Видим, как неронка вносит правки в страницу на основе сравнения двух скриншотов и создаёт нам новую версию страницы. Пока готовится вторая версия страницы, давайте сравним оригинальную страницу.
6:10

Сравнение отдельных элементов страницы

с нашей построенной страницей. Что мне нравится? Мне нравится, что здесь совершенно не случайные компоненты, то есть хорошо выглядящий хедер, но структура не похожа, но похожа цветовая палитра. Здесь динамический компонент для снипетов кода. Вот дальше уже плоховато всё выглядит. Явно здесь можно будет постараться. Ну что, ждём следующую итерацию. Видим, что сейчас неронка как раз делает скриншоты для
6:33

Итерации: автоматическое улучшение дизайна

того, чтобы ещё раз сравнить. Да, весь этот процесс может занимать довольно длительное время, но его кайф в том, что он происходит абсолютно на автомате. Мы с вами написали всего лишь одну команду, и эта команда исполняется и неронка следует этому чек-листу и итеративно сравнивает скриншоты каждой версии. Обратите внимание, как MCP-сервер прикольно отрабатывает. Я его попросил
6:53

Как MCP находит нужные секции (changelog)

найти именно место, где содержится change log секция, для того, чтобы сфокусировать свою работу именно на этой секции. Play позволяет такое делать. и запускаем браузер. И вот начинается
7:04

Улучшение конкретных блоков

обновление секции в соответствии с оригиналом. Но опять придётся подождать.
7:09

Результат 2-й итерации. Улучшение секции и проблемы с другой

Так, ну, следующая итерация завершилась. Идём смотреть. Меня интересовала секция The New Way to Build Software. Да, посмотрите, он, в принципе, довольно хорошо её смог повторить, выдержал цветовой стиль, и, в принципе, она уже стала выглядеть намного лучше. Посмотрим change А вот change не очень у него прошёл. Change в оригинале, конечно, посимпатичней, но мы теперь знаем, каким
7:30

Переход к созданию стиля (style guide)

образом это делается. Вместо того, чтобы скриншотить секции, мы просто общаемся с нашей неронкой и говорим про конкретные блоки и описываем по чуть-чуть, что нужно поправить там или там. Ну и, как видите, за пару итераций мы получаем вполне себе приемлемые и крепкие результаты. Допустим, нас уже устраивает этот результат, и мы хотим понять, каким образом можно создавать оставшиеся страницы для нашего лендинга. Причём эти страницы могут соответствовать именно нашим бизнес-задачам, и референсов на них уже нету в оригинальном URL. Чтобы сделать это, нам нужно вернуться в
8:01

Создание Style Guide: объяснение логики

курсор. Я здесь рекомендую новый чат открыть и написать ещё одну команду. Опять же, нам нужно понять её суть. Давайте ненадолго вернёмся к нашей схеме. Мы только что пришли на позицию дизайн. Мы только что с вами создали страницу, которая нас полностью устраивает в визуальном плане. И мы хотим создавать оставшиеся страницы на основе этой. Это значит, что нам потребуется сейчас описать некоторый стиль, с помощью которого мы будем создавать оставшиеся страницы. Как его описать? Обычно хорошо работает подход, когда мы описываем секции, цветовые палитры, типографику, стили компонентов и прочее, что вы считаете нужным и что нейронка в последующем должна использовать при создании других страниц. И очень важно, мы с вами создадим отдельный файл с этим стилем для того, чтобы нейронка в каждом следующем своём промте могла его использовать как референс. Давайте пробовать. Я запускаю команду номер два, потому что тут описано всё, что нужно
8:56

Нейросеть создает style-guide файл

сделать неронки. Погнали. Смотрим, как нейронка создаёт наш style guideй. Ну что, видим, как наша нейронка
9:03

Обзор готового Style Guide

завершает задачу и пишет всё, что ей удалось сделать. И вот мы видим новый файл, который называется Style Guide. Я хочу сказать, что это довольно массивный файл, но обратите внимание, давайте закроем чат. Здесь описаны все характеристики, которые нужно использовать: light mode, dark mode, бэкграунды, акценты, вся типографика, конкретные примеры применения и масса-масса других нюансов, которые потребуются нейронке, чтобы создавать новые страницы идентично. Ну и что, давайте попробуем мегапростой промт.
9:35

Создание новой страницы по стайлгайду (pricing)

Используй строго стили нашего стайлгайда и создай новую страницу прайсинга. Давайте смотреть, что у нас получится. Ну что, идёмте смотреть. Открываем нашу оригинальную страницу и идём на страницу
9:49

Результат: сравнение pricing со стартовой страницей

pricing. Так, ну я вижу, да, что всё сохранено, стили сохранены. Очень похоже. Здесь ошибочка, да, должны быть аккордеоны, но, в принципе, стиль похож. Единственное, здесь хедеры и футеры не приехали. Возвращаемся в курсор и пишем добавь туда header, footter, как на page
10:07

Добавление header и footer

one. И вот он добавляет header ифotter с page one на страницу прайсинга. Так, ну
10:13

Готовая страница с шапкой и футером

вот он завершает свою работу. Идём смотреть на хедеры и футеры. Так, хедеры появились. Я даже вижу, что он общий стиль преобразил. Смотрите, карточки стали соответствовать. Вот здесь небольшой косяк. Ну, смотрите, вот наш фудер. И вообще, надо сказать, страница выглядит довольно крепко.
10:29

Проверка преемственности стиля и качество результата

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

Итоги: две команды, один URL — готовый дизайн + style guide

построили нашу первую страницу на базе стиля и вайба оригинального URL. После этого с помощью второй команды мы создали некоторый стиль или styleга guideй, с помощью которого теперь наша неронка может продолжать создавать подобные страницы, но уже которые
11:05

Создание любых страниц под бизнес-задачи

соответствуют нашим бизнес-задачам и нашему контенту. Ну что, это следующий крутой способ делать Vibe-дизайн или Vipe-код дизайн, поэтому обязательно пробуйте. Все источники, которые мы
11:15

Где взять исходники и материалы

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

Ещё от ИИшенка | AI Automation

Ctrl+V

Экстракт Знаний в Telegram

Транскрипты, идеи, методички — всё самое полезное из лучших YouTube-каналов.

Подписаться