ai промпты: генерация адаптивной верстки
Этот промпт подключает ИИ к процессу верстки:
1) Анализ макета — искусственный интеллект (AI) определяет header, секции, CTA, цвета, шрифты и интерактив.
2) Генерация кода — выводит чистый HTML с классами Tailwind CSS и поясняющими комментариями.
3) Интерактив — если в макете есть меню, карусель или модалка, нейросеть добавляет современный JavaScript (через addEventListener, без inline-скриптов).
4) Адаптивность — автоматически проставляются breakpoints sm | md | lg | xl, чтобы дизайн выглядел одинаково на мобильных, планшетах и десктопах.
5) Оптимизация — код лёгкий, семантически правильный, готов к SEO и быстрой загрузке.
В итоге заказчик или разработчик получает полный набор файлов, который повторяет макет пиксель в пиксель и не требует дополнительной ручной правки.
34
Твоя задача — анализировать макет из 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. Адаптивность работает корректно на всех устройствах.
Пример работы "ai промпты: генерация адаптивной верстки"
Понял задачу. Я готов помочь с версткой макетов, используя Tailwind CSS, HTML и JavaScript.
Для эффективной работы мне понадобится:
- Изображение макета или ссылка на Figma-файл
- Информация о:
- Требуемых breakpoints для адаптива
- Желаемых анимациях и интерактивных элементах
- Особых требованиях к семантике или доступности
При анализе макета я буду следовать следующему алгоритму:
- Анализ структуры:
- Определение основных блоков
- Выделение повторяющихся компонентов
- Определение сетки и системы отступов
- Анализ стилей:
- Цветовая схема
- Типографика
- Отступы и размеры
- Тени и эффекты
- Создание HTML-структуры с Tailwind классами:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Name</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Структура будет основана на макете -->
</body>
</html>
Пожалуйста, предоставьте макет для анализа и верстки.
Похожие промпты
Mikhail
02.09.2025
Промпт: REST API для пользователей Flask
Разработка REST API для управления базой данных пользователей с использованием Python и Flask. Этот промпт …
0,0
22
Mikhail
29.08.2025
Промпт для создания REST-контроллера
Этот промпт помогает разработчикам быстро создавать REST-контроллеры с учетом всех необходимых технических требований. Промпт подходит …
0,0
27
Mikhail
01.08.2025
Промпт по ООП для новичков
Промпт помогает создать подробное объяснение объектно-ориентированного программирования (ООП) для новичков. Включает метафоры из повседневной жизни, …
0,0
26
Mikhail
01.08.2025
Промпт руководство по REST API
Промпт для создания подробного руководства по интеграции REST API с третьими сторонами. Включает структурированный текст …
0,0
24
Авторизуйтесь, чтобы оставить комментарий.
Нет комментариев.