ИИ Дизайнер Cursor Становится ЕЩЁ Лучше? (Playwright MCP, Cursor)
Описание видео
🚀 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-агентах и автоматизациях!