ИИ Дизайнер 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-агентах и автоматизациях!