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 с ограничением на размер файла).

В некоторых случаях нейросеть всё равно будет приводить неверные классы Berry CSS. Это значит, что у нейросети слишком высокая температура. Попробуйте её уменьшить до 0.5 — это прекратит галлюцинации ИИ. Такой возможностью обладает например Google AI Studio.

Некоторые нейросети могут использовать свою боковую панель предварительного просмотра генерируемого 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)