Дизайн + Верстка сайта с Искусственным интеллектом Midjourney и ChatGPT в России

• Анатолий Ивашов рассказывает о верстке сайта с помощью искусственного интеллекта.  

• Используются два ИИ: ChatGPT и Midjourney.  

• Midjourney позволяет создавать потрясающие дизайны, а ChatGPT может писать код на любом языке программирования.  

• Регистрация на сайте Midjourney.com.  

• Вход в Discord-канал и выбор чата.  

• Ввод команды для бота и указание ключевых слов для создания изображения.  

• Ввод ключевых слов для создания дизайна, например, "фруктовый сок".  

• Добавление параметров для создания широкоформатного изображения.  

• Ожидание генерации изображения и выбор понравившегося варианта.  

• Перегенерация изображений для выбора лучшего варианта.  

• Midjourney предоставляет 25 бесплатных генераций, после чего нужно платить или искать обходные пути.  

• Выбор нескольких изображений для генерации в большом разрешении.  

• Скачивание выбранного дизайна на компьютер.  

• Использование сервиса для увеличения изображения без потери качества.  

• Ожидание завершения процесса обсциляции и сравнение с оригиналом.  

• Копирование увеличенного изображения и переход в Photoshop.  

• Создаем разрешение картинки на full HD.  

• Уменьшаем картинку, сохраняя пропорции.  

• Дублируем изображение и удаляем текст.  

• Увеличиваем размер кисти для удаления текста.  

• Удаляем ненужные элементы, сохраняя структуру.  

• Экспортируем изображение в папку сайта.  

• Переименовываем изображение фона.  

• Создаем файлы index.html и style.css.  

• Подключаем файл стилей и используем плагин для перезагрузки страницы.  

• Сбрасываем стандартные стили и устанавливаем размеры.  

• Создаем блок для первого экрана и задаем ему стили.  

• Центрируем фоновое изображение.  

• Задаем начальную структуру сайта.  

• Начинаем верстку хедера, логотипа, навигационных ссылок и контента.  

• Используем ChatGPT для генерации кода.  

• Пишем ChatGPT код для тегов и стилей.  

• Исправляем ошибки и корректируем результат.  

• Продолжаем верстку, описывая структуру следующего блока.  

• Написание HTML-кода для текстового блока.  

• Включение заголовка третьего уровня, заголовка первого уровня, описания и кнопки с серой обводкой и скругленными углами.  

• Прозрачный фон и жирный текст по центру.  

• Выравнивание текста по горизонтали и центру.  

• Адаптация текстового блока под все устройства.  

• Использование стилей CSS для адаптивности.  

• Генерация иконки пользователя с помощью ChatGPT.  

• Вставка кода в редактор и корректировка стилей.  

• Проверка и корректировка верстки.  

• Вставка верстки в секцию first-screen.  

• Корректировка стилей и выравнивание текста по центру.  

• Настройка высоты текстового блока.  

• Подключение иконочного шрифта и иконки пользователя.  

• Корректировка фона и выравнивание контента.  

• Подключение иконочного шрифта в CSS.  

• Генерация HTML-кода с картинкой из сервиса картинок.  

• Подключение картинки и настройка её класса.  

• Вставка картинки вместо логотипа.  

• Задаем класс и сохраняем изменения.  

• Логотип представлен как картинка с высотой 50 пикселей.  

• Корректируем контент и выравниваем его по центру.  

• Меню навигации сдвигаем вправо и выравниваем с помощью margin-left.  

• Используем ChatGPT для генерации кода подключения шрифта.  

• Подключаем шрифт Rubik в CSS.  

• Проверяем, что шрифт действительно изменился.  

• Задаем цвета для ссылок и текста.  

• Используем пипетку для копирования цветов.  

• Применяем цвета к элементам, таким как меню навигации и кнопки.  

• Добавляем обводку и меняем цвет текста кнопки.  

• Убираем белый цвет текста и добавляем бордюр.  

• Скругляем углы кнопки и увеличиваем размер шрифта.  

• Прописываем стили для заголовков.  

• Делаем заголовки заглавными и жирными.  

• Используем ChatGPT для генерации кода подключения шрифта Rubik.  

• Задаем несколько строчек текста для дискрипшена.  

• Ограничиваем ширину блока до 450 пикселей.  

• Устанавливаем межстрочный интервал и цвет текста.  

• Подключаем шрифт и задаем отступы.  

• Изменяем отступ сверху, чтобы текст не растягивался вверх.  

• Проверяем и корректируем размеры шрифтов.  

• Задаем межстрочный интервал для заголовков.  

• Корректируем размеры шрифтов и отступы.  

• Проверяем и корректируем текст и кнопки.  

• Завершаем работу над сайтом, потратив около 50 минут.  

• Обсуждаем ограничения и возможности ChatGPT и Midjourney.  

• Призываем к обучению фронтенд-разработке и использованию ИИ.