Создание сайта на WooCommerce с помощью GPT-6.1 + Elementor MCP + Angie

Спасибо Bluehost за спонсорство! Создайте редактируемый магазин WooCommerce с помощью ИИ, ChatGPT и Elementor на WordPress. 👉 Bluehost — отличное предложение для сайтов, на мой взгляд: https://bluehost.sjv.io/1GL7Ym (реклама) 👉 Сотрудничество со мной: support@bytegrad.com 👉 Курс по React и Next.js: https://bytegrad.com/courses/professi... 👉 Профессиональный курс по JavaScript: https://bytegrad.com/courses/professi... 👉 Профессиональный курс по CSS: https://bytegrad.com/courses/professi... 👉 План развития веб-разработки и новостная рассылка: https://email.bytegrad.com 👉 Discord: у всех моих курсов есть закрытый Discord ВРЕМЕННЫЕ МЕТКИ 00:00 Редактируемый магазин AI 04:33 Настройка ChatGPT 07:00 Создание HTML-сайта 08:09 Улучшение дизайна 10:15 Создание продукта и героя изображения 12:00 Создание фонового видео 14:40 Настройка хостинга и WordPress 18:29 Astra, Elementor и WooCommerce 19:41 Angie и Elementor MCP 22:00 Знакомство с доступными инструментами 23:59 Создание тестового продукта с помощью ИИ 25:15 Преобразование дизайна в WordPress 27:33 Товары, размеры и корзина 28:35 Редактирование в Elementor 29:51 Оформление демо-заказа 30:31 Обновление сайта через чат ПОДСКАЗКИ Используйте эти подсказки в том же чате, указав свой бренд и дизайн. Подсказки, продиктованные диктантом, слегка отредактированы. Не размещайте свои личные подсказки по настройке MCP и учетные данные в публичных сообщениях. 1. СОЗДАНИЕ HTML-САЙТА Создайте простую адаптивную главную страницу для магазина кроссовок AERFORM, используя HTML, CSS и JavaScript. Пока используйте цвета и заполнители, без изображений или видео. Откройте его в браузере Codex, чтобы мы могли посмотреть. 2. УЛУЧШИТЕ ДИЗАЙН Мне нравится этот сайт-образец, особенно его главный раздел. Можете ли вы сделать наш дизайн более похожим на него, сохранив при этом его уникальность и индивидуальность? Видео и изображения мы добавим позже. 3. СОЗДАЙТЕ ИЗОБРАЖЕНИЕ ПРОДУКТА Создайте фотореалистичное студийное изображение современных низких кроссовок для бренда AERFORM. Используйте сетку цвета слоновой кости, кремовые накладки, скульптурную кремовую подошву и небольшой акцент цвета лайм. Покажите одну пару обуви целиком в чистом ракурсе три четверти на простом теплом белом фоне с мягкой естественной тенью. Вся обувь должна быть в кадре. Без текста, без добавленного логотипа, без других объектов. Сделайте изображение квадратным. 4. СОЗДАЙТЕ ГЛАВНОЕ ИЗОБРАЖЕНИЕ Используйте это изображение обуви и создайте отдельное фоновое изображение для главного изображения. 5. ДОБАВЬТЕ РЕСУРСЫ Спасибо за предоставленные ресурсы. Пожалуйста, добавьте их на веб-сайт и сгенерируйте любые другие изображения, которые вам могут понадобиться. 6. СОЗДАЙТЕ ФОНОВОЕ ВИДЕО (НЕОБЯЗАТЕЛЬНО) Превратите изображение главной кампании в короткое, ненавязчивое зацикленное видео и добавьте его в раздел главной кампании. Используйте легкий дождь, мягкие отражения и медленное движение камеры. Без монтажных склеек, текста, дополнительных объектов или морфинга продукта. Движение должно быть сдержанным, без звука. Замените статичный фон главной кампании в нашем локальном предварительном просмотре сгенерированным клипом. Сохраните изображение главной кампании в качестве постера и резервного варианта. Используйте воспроизведение без звука, видимый элемент управления паузой/воспроизведением и статичное изображение для уменьшения движения. Проверьте читаемость и воспроизведение. Генерация видео использует внешнюю интеграцию Higgsfield, показанную в записи, и может стоить дополнительно. Подключите ее сначала или сохраните статичное изображение. 7. ПРОВЕРЬТЕ ИНСТРУМЕНТЫ MCP После установки Astra, Elementor, WooCommerce и Angie включите Elementor MCP и подключитесь, используя собственное приглашение к настройке. Перезапустите приложение, если потребуется, затем спросите: Можете ли вы перечислить все инструменты, которые предоставляет вам это новое подключение MCP к WordPress? 8. ПРОВЕРКА ДОСТУПА К WOOCOMMERCE Можете ли вы добавить фиктивный товар в наш каталог товаров WooCommerce, просто чтобы проверить, работает ли подключение? 9. СОЗДАНИЕ МАГАЗИНА НА WORDPRESS Можете ли вы перенести дизайн этого веб-сайта, который мы создали здесь, в подключенный нами экземпляр WordPress? Убедитесь, что вы используете Elementor. Создайте товары в WooCommerce из товаров, которые у нас есть на сайте. Позаботьтесь о навигации, чтобы ссылки в заголовке вели на другие страницы. Настройте все это в нашем экземпляре WordPress. 10. ИСПРАВЛЕНИЕ ДЕМО-ВЕРСИИ ОФОРМЛЕНИЯ ЗАКАЗА Можете ли вы убедиться, что я могу оформить заказ и сделать фиктивный заказ? Сейчас, когда я ввожу какой-то непонятный текст при оформлении заказа, появляется сообщение о том, что способ доставки не выбран. Упростите это, чтобы мы могли хотя бы сделать фиктивный заказ, потому что я просто хочу продемонстрировать это. 11. РЕДАКТИРОВАНИЕ ЧАТОМ Пожалуйста, удалите восклицательные знаки из заголовка на главной странице и внизу страницы....