AI промпт: генерация адаптивной верстки
Этот промпт подключает ИИ к процессу верстки:
1) Анализ макета — искусственный интеллект (AI) определяет header, секции, CTA, цвета, шрифты и интерактив.
2) Генерация кода — выводит чистый HTML с классами Tailwind CSS и поясняющими комментариями.
3) Интерактив — если в макете есть меню, карусель или модалка, нейросеть добавляет современный JavaScript (через addEventListener, без inline-скриптов).
4) Адаптивность — автоматически проставляются breakpoints sm | md | lg | xl, чтобы дизайн выглядел одинаково на мобильных, планшетах и десктопах.
5) Оптимизация — код лёгкий, семантически правильный, готов к SEO и быстрой загрузке.
В итоге заказчик или разработчик получает полный набор файлов, который повторяет макет пиксель в пиксель и не требует дополнительной ручной правки.
4
Твоя задача — анализировать макет из Figma (или другого инструмента дизайна) и создавать качественный, семантически правильный и адаптивный код.
Контекст:
1. Целевая аудитория: Разработчики, дизайнеры или заказчики, которым нужен готовый код для реализации макета.
2. Формат:
- Входные данные: изображение макета из Figma (или ссылка на макет).
- Выходные данные: HTML-код с использованием Tailwind CSS и JavaScript (если требуется интерактивность).
3. Ограничения:
- Код должен быть чистым, легко читаемым и поддерживаемым.
- Использовать только Tailwind CSS для стилизации.
- Убедись, что верстка адаптивна для мобильных устройств и планшетов.
Цель:
Создать HTML-код, который:
1. Полностью соответствует макету из Figma.
2. Использует Tailwind CSS для всех стилей.
3. Включает JavaScript для реализации интерактивных элементов (если они есть).
4. Оптимизирован для производительности и кроссбраузерности.
Задача:
На основе предоставленного макета выполнить следующие шаги:
1. Анализ макета:
- Определить основные блоки (header, footer, секции, кнопки, текстовые блоки, изображения и т.д.).
- Выделить цветовую палитру, шрифты, отступы и другие стилистические элементы.
- Найти интерактивные элементы (например, меню, слайдеры, модальные окна).
2. Генерация HTML-кода:
- Использовать семантические теги (например, `<header>`, `<section>`, `<footer>`).
- Применять классы Tailwind CSS для всех стилей.
- Добавлять комментарии для объяснения сложных частей кода.
3. Добавление JavaScript:
- Реализовать интерактивные элементы (например, выпадающее меню, карусель, анимации).
- Использовать современные практики (например, `addEventListener` вместо inline-скриптов).
4. Проверка адаптивности:
- Убедиться, что верстка корректно отображается на экранах разных размеров (мобильные, планшеты, десктопы).
- Использовать Tailwind CSS breakpoints (`sm:`, `md:`, `lg:`, `xl:`).
Важно:
- Убедись, что все элементы макета учтены в коде.
- Используй Tailwind CSS breakpoints для адаптивности.
- Добавляй JavaScript только там, где это необходимо.
Убедись, что:
1. Верстка полностью соответствует макету.
2. Код оптимизирован для производительности.
3. Адаптивность работает корректно на всех устройствах.
Авторизуйтесь, чтобы оставить комментарий.
Нет комментариев.