AI для Berry CSS
Вы можете использовать современные нейросети для верстки классами Berry CSS.
Для того, чтобы натренировать нейросеть для работы с Berry CSS, используйте текстовый файл с уже готовыми инструкциями. Вы можете загрузить этот файл в окно чата вашей нейросети и написать следующий запрос:
В предлагаемом файле находится описание css-фреймворка Berry CSS. Твоя задача прочитать этот файл и обучиться использовать классы Berry CSS при вёрстке блоков.
Некоторые нейросети могут сами загружать файл из Сети, тогда им достаточно указать только ссылку:
- https://raw.githubusercontent.com/maxsite/berry/refs/heads/master/berry-for-ai.txt («чистый» текст)
- https://github.com/maxsite/berry/blob/master/berry-for-ai.txt (для просмотра на GitHub)
После того, как нейросеть загрузит файл, вы можете проверить действительно ли нейросеть корректно обучилась. Для этого введите запрос (либо нейросеть сама выведет контрольную фразу сразу после анализа файла):
Приведи контрольную фразу.
Нейросеть должна вывести «Berry CSS анализ завершён». Если она не может вывести эту фразу, то скорее всего она не прочитала текст файла и будет придумывать классы произвольно (например так работает бесплатная версия ChatGPT с ограничением на размер файла). Проверенные нейросети с которыми не было проблем: Copilot, Deepseek, Gemini, Grok.
Некоторые нейросети могут использовать свою боковую панель предварительного просмотра генерируемого html-кода. Для корректного отображения классов Berry CSS, вам нужно будет попросить добавить css-файл из CDN: https://cdn.jsdelivr.net/gh/maxsite/berry/css/berry.css (если это будет возможно). Либо просто используйте Berry Builder для тестирования полученного кода.Примеры запросов
Приведи на своё усмотрение несколько готовых примеров с использованием классов Berry CSS. Я их буду использовать для контроля насколько ты хорошо понимаешь Berry CSS. ☑️ Цвет текста и фона ☑️ Работа со ссылками ☑️ Границы элементов ☑️ Размеры блоков ☑️ Работа с flex-сеткой ☑️ Работа с grid-сеткой ☑️ Таблицы ☑️ Адаптивность (-tablet) ☑️ Оформление кнопок ☑️ Тени и градиенты ☑️ Стилизация форм ☑️ Работа с dark-режимом
Создай карточку товара со следующими параметрами: ☑️ Изображение товара ☑️ Название ☑️ Описание ☑️ Цена ☑️ Кнопка "Купить" ☑️ Адаптивность для планшета ☑️ Тень блока
Создай блок отзывов клиентов со следующими параметрами: ☑️ Фото клиента (круг) ☑️ Имя ☑️ Оценка (звёзды) ☑️ Текст отзыва ☑️ Адаптивность для планшета ☑️ Тень блока
Создай блок FAQ со следующими параметрами: ☑️ Вопрос (выделенный) ☑️ Ответ (обычный текст) ☑️ Dark-режим ☑️ Анимация при раскрытии ☑️ Адаптивность
Создай модальное окно со следующими параметрами: ☑️ Заголовок ☑️ Текст описания ☑️ Кнопка закрытия ☑️ Тень блока ☑️ Dark-режим
Создай блок статистики со следующими параметрами: ☑️ Заголовок ☑️ Данные (число + подпись) ☑️ Иконка (круг) ☑️ Анимация появления ☑️ Адаптивность для планшетов
Создай блок контактов со следующими параметрами: ☑️ Заголовок ☑️ Адрес ☑️ Телефон ☑️ Email ☑️ Карта (изображение) ☑️ Dark-режим
Создай галерею изображений со следующими параметрами: ☑️ 3 изображения в строке ☑️ Скругление углов ☑️ Эффект увеличения при наведении ☑️ Адаптивность для планшета (2 изображения)
☑️ Заголовок ☑️ Дни, часы, минуты, секунды ☑️ Анимация чисел ☑️ Dark-режим
Создай карточку блога со следующими параметрами: ☑️ Изображение ☑️ Заголовок ☑️ Краткое описание ☑️ Кнопка "Читать далее" ☑️ Dark-режим ☑️ Тень блока
Создай блок команды со следующими параметрами: ☑️ Фото участника ☑️ Имя ☑️ Должность ☑️ Социальные сети ☑️ Адаптивность для планшетов
Создай блок преимуществ со следующими параметрами: ☑️ Иконка (круг) ☑️ Заголовок ☑️ Описание ☑️ Анимация появления ☑️ Dark-режим
Создай форму обратной связи со следующими параметрами: ☑️ Поле "Имя" ☑️ Поле "Email" ☑️ Поле "Сообщение" ☑️ Кнопка "Отправить" ☑️ Dark-режим
Создай блок цен со следующими параметрами: ☑️ Название тарифа ☑️ Цена ☑️ Список возможностей ☑️ Кнопка "Выбрать" ☑️ Тень блока
Создай блок контактов со следующими параметрами: ☑️ Адрес ☑️ Телефон ☑️ Email ☑️ Иконки Bootstrap Icons ☑️ Dark-режим
Создай карточку сотрудника со следующими параметрами: ☑️ Фото ☑️ Имя ☑️ Должность ☑️ Иконки соцсетей ☑️ Адаптивность для планшетов ☑️ Тень блока
Создай карточку блога со следующими параметрами: ☑️ Изображение ☑️ Заголовок ☑️ Краткое описание ☑️ Кнопка "Читать далее" ☑️ Иконка даты публикации ☑️ Dark-режим ☑️ Тень блока
Создай модальное окно со следующими параметрами: ☑️ Заголовок ☑️ Текст описания ☑️ Кнопка закрытия ☑️ Использование AlpineJS ☑️ Тень блока ☑️ Dark-режим
Создай блок переключения Dark-режима со следующими параметрами: ☑️ Кнопка "Переключить Dark-режим" ☑️ Текстовый блок с изменением цвета ☑️ Использование AlpineJS ☑️ Тень блока ☑️ Адаптивность
Создай аккордеон со следующими параметрами: ☑️ Заголовки секций ☑️ Контент секций (скрыт по умолчанию) ☑️ Использование AlpineJS для раскрытия ☑️ Адаптивность ☑️ Тень блока
Создай переключалку вкладок (tabs) со следующими параметрами: ☑️ Названия вкладок ☑️ Контент вкладок ☑️ Анимация при смене ☑️ Использование AlpineJS ☑️ Адаптивность для планшетов ☑️ Тень блока ☑️ Dark-режим
Создай адаптивную шапку сайта со следующими параметрами: ☑️ Логотип (иконка + название сайта) ☑️ Ссылки на соцсети ☑️ Кнопка поиска ☑️ Использование flex-сетки ☑️ Центрирование макета по ширине браузера ☑️ Адаптивность для планшетов (-tablet) Структура макета (псевдографика): ------------------------------------------------ | 🔵 Название сайта | 🔗 Соцсети | 🔍 Поиск | ------------------------------------------------
Создай адаптивную шапку сайта со следующими параметрами: ☑️ Логотип (иконка + название сайта) ☑️ Ссылки на соцсети ☑️ Кнопка поиска ☑️ Слоган сайта ☑️ Возможность добавить меню ☑️ Использование flex-сетки ☑️ Центрирование макета по ширине браузера ☑️ Адаптивность для планшетов (-tablet) Структура макета (псевдографика): ------------------------------------------------------- | 🔵 Название сайта | 🔗 Соцсети | 🔍 Поиск | | Слоган сайта | здесь будет меню (сам добавлю) | -------------------------------------------------------
Создай адаптивную шапку сайта со следующими параметрами: ☑️ Логотип (иконка + название сайта) ☑️ Ссылки на соцсети ☑️ Кнопка поиска ☑️ Слоган сайта ☑️ Возможность добавить меню ☑️ Использование grid-сетки (`grid-Xcol`) ☑️ Центрирование макета по ширине браузера ☑️ Адаптивность для планшетов (-tablet) Структура макета (псевдографика): ------------------------------------------------------- | 🔵 Название сайта | 🔗 Соцсети | 🔍 Поиск | | Слоган сайта | здесь будет меню (сам добавлю) | -------------------------------------------------------
Создай таблицу с основными данными о планетах Солнечной системы: ☑️ Название планеты ☑️ Диаметр (км) ☑️ Масса (в земных массах) ☑️ Среднее расстояние от Солнца (млн км) ☑️ Гравитация (м/с²) ☑️ Чередование строк (-striped) ☑️ Подсветка при наведении (-hover) ☑️ Границы ячеек (-border)