10 промтов для HTML/CSS вёрстки: от макета до адаптива — шпаргалка 2026
Вёрстка сайтов — это искусство превращать дизайн-макет в живой, интерактивный интерфейс. С появлением генеративных нейросетей (ChatGPT, Claude, Gemini) процесс создания кода ускорился в разы. Теперь не нужно помнить наизусть все свойства Flexbox или Grid — достаточно правильно сформулировать запрос (промт), и AI сгенерирует рабочий код за секунды.
Но есть нюанс: промты должны быть конкретными. Абстрактное «напиши мне сайт» не сработает. Нужно указать структуру, цвета, отступы, поведение на мобильных. В этой статье я собрал 10 готовых промтов для типовых задач вёрстки — от создания сеток до анимаций и адаптива. Каждый промт снабжён пояснением и примером использования.
Почему промты — это новый стандарт в вёрстке?
По данным опроса JetBrains Developer Ecosystem 2025, более 60% фронтенд-разработчиков уже используют AI-ассистентов для написания кода. И это не про замену человека — это про скорость. Вместо того чтобы вручную прописывать 50 строчек CSS для грид-раскладки, вы пишете один грамотный промт и получаете готовый код, который остаётся только проверить и адаптировать.
Важно понимать: AI не всегда генерирует идеальный код. Он может ошибиться с вендорными префиксами или забыть про box-sizing. Поэтому каждый сгенерированный фрагмент нужно тестировать в браузере. Но как черновик или первый прототип — инструмент незаменим.
10 промтов для вёрстки: от Flexbox до анимаций
1. Базовая сетка на Flexbox
Для чего: Создание горизонтального меню, карточек товаров, галереи изображений с выравниванием.
Промт:
Напиши HTML и CSS код для блока с классом .flex-container, который использует CSS Flexbox. Внутри — 4 элемента с классом .item. Сделай так, чтобы элементы располагались в ряд, равномерно распределялись по ширине, имели отступы 16px между собой, были центрированы по вертикали, а на мобильных устройствах (ширина экрана меньше 768px) переносились на новую строку. Цвет фона контейнера — #f5f5f5, элементов — #ffffff с тенью box-shadow: 0 2px 8px rgba(0,0,0,0.1).
Пример использования: Вы склепали макет интернет-магазина. Вместо того чтобы вручную мучиться с justify-content и flex-wrap, вы даёте промт — и получаете готовую раскладку за 5 секунд.
2. Сложная грид-сетка (CSS Grid)
Для чего: Многоуровневые макеты, дашборды, блоги с сайдбаром.
Промт:
Создай HTML и CSS код для страницы с использованием CSS Grid. Сетка должна состоять из трёх колонок: левый сайдбар (250px), основной контент (1fr), правый сайдбар (200px). В первой строке — шапка на всю ширину (grid-column: 1 / -1), во второй — сайдбары и контент, в третьей — подвал на всю ширину. Высота шапки — 80px, подвала — 60px. Цвета: шапка — #333, подвал — #222, сайдбары — #f0f0f0, контент — #fff. На экране уже 768px перестраивай в одну колонку.
Пример использования: Типичный макет новостного сайта или админ-панели. Промт создаёт каркас, который потом легко наполнить контентом.
3. Адаптивное меню с бургером
Для чего: Навигация, которая на десктопе — строка ссылок, на мобильных — скрытая панель с кнопкой-бургером.
Промт:
Напиши код для адаптивного навигационного меню. Используй HTML и CSS. На десктопе (ширина > 768px) ссылки отображаются в строку, есть логотип слева. На мобильных (ширина < 768px) ссылки скрыты, показывается кнопка-бургер (три горизонтальные линии). При клике на бургер меню открывается вертикальным списком. Анимация открытия — плавное появление через max-height. Цвет фона меню — #2c3e50, текст — #ecf0f1.
Пример использования: Любой лендинг или многостраничный сайт. Промт избавляет от ручного прописывания медиа-запросов и скриптов.
4. Карточка товара с сеткой и тенями
Для чего: Типовая карточка в интернет-магазине: изображение, название, цена, кнопка.
Промт:
Напиши HTML и CSS для карточки товара. Используй Flexbox для вертикального расположения элементов. Карточка содержит: изображение (заполни placeholder через Unsplash или просто серый блок), заголовок h3, описание (короткий текст), цену (жирным шрифтом, красный цвет), кнопку «В корзину» (зелёная, закруглённые углы 8px). Карточка должна иметь тень, скругления 12px, отступы 20px внутри. При наведении — подниматься вверх на 5px с плавным transition.
Пример использования: Быстрая вёрстка каталога для магазина на Shopify или WooCommerce.
5. Анимация при скролле (Intersection Observer + CSS)
Для чего: Эффект появления элементов при прокрутке страницы — fade-in, slide-up.
Промт:
Напиши HTML, CSS и JavaScript код для эффекта появления элементов при скролле. Используй Intersection Observer API. Элементы с классом .fade-in изначально имеют opacity: 0 и transform: translateY(30px). Когда они попадают в область видимости, добавляется класс .visible, который меняет opacity на 1 и transform на translateY(0) с transition 0.6s ease. Сделай задержку для каждого последующего элемента (nth-child) на 0.1 секунды.
Пример использования: Лендинги с красивыми появлениями блоков. Без библиотек вроде AOS — чистый нативный код.
6. Форма с валидацией на CSS
Для чего: Контактная форма, форма регистрации, подписка на рассылку.
Промт:
Напиши HTML и CSS код для формы обратной связи. Поля: имя (text), email (email), сообщение (textarea), кнопка отправки. Используй Flexbox для выравнивания. Стилизуй поля: ширина 100%, padding 12px, border: 1px solid #ccc, border-radius 6px. При фокусе — border становится синим (#3498db). Если поле невалидно (например, email не соответствует формату) — покажи красную рамку через псевдокласс :invalid. Кнопка — синяя, на hover — темнеет.
Пример использования: Быстрая форма для лендинга без подключения Bootstrap.
7. Hero-секция с фоновым видео
Для чего: Полноэкранный блок на первом экране сайта с видеофоном и текстом поверх.
Промт:
Напиши HTML и CSS код для hero-секции. Она должна занимать 100vh высоты и 100% ширины. В качестве фона — видео (используй тег video с source). Видео должно быть позиционировано абсолютно, растянуто на весь блок, с object-fit: cover. Поверх видео — слой с полупрозрачным чёрным фоном (rgba(0,0,0,0.5)). В центре — заголовок h1 белого цвета, подзаголовок p, кнопка «Узнать больше» (белая с прозрачным фоном, при наведении — заполняется белым).
Пример использования: Главная страница агентства, студии, ресторана.
8. Аккордеон (раскрывающиеся блоки)
Для чего: FAQ, разделы с подробной информацией, которые можно сворачивать.
Промт:
Напиши HTML, CSS и JavaScript код для аккордеона. Блоки с классом .accordion-item содержат заголовок (кликабельный) и контент (скрыт по умолчанию). При клике на заголовок — контент плавно раскрывается через max-height анимацию. Если кликнуть на другой заголовок — предыдущий закрывается (только один открытый). Стили: заголовок — серый фон, padding 12px, border-bottom; контент — padding 12px, белый фон.
Пример использования: Страница «Вопросы и ответы» для любого сайта.
9. Таблица с зеброй и фиксированной шапкой
Для чего: Отображение данных — прайс-листы, таблицы характеристик, расписания.
Промт:
Напиши HTML и CSS код для таблицы. У неё должна быть фиксированная шапка (thead) при скролле (position: sticky). Строки таблицы чередуются по цвету: белый и #f9f9f9 (зебра). При наведении на строку — фон меняется на #e8f4fd. Границы ячеек — 1px solid #ddd. Шапка — тёмно-синий фон (#34495e), белый текст. Ширина таблицы — 100%, ячейки имеют padding 10px.
Пример использования: Админ-панели, отчёты, каталоги с большим объёмом данных.
10. CSS-слайдер (без JavaScript)
Для чего: Галерея изображений, которая переключается автоматически, без скриптов.
Промт:
Напиши HTML и CSS код для слайдера изображений, работающего только на CSS. Используй анимацию @keyframes для смены слайдов. Контейнер слайдера имеет фиксированную ширину 800px и высоту 400px. Внутри — 3 изображения, каждое занимает 100% ширины контейнера. Анимация циклически показывает каждое изображение по 3 секунды, затем плавно переключается на следующее за 1 секунду. Добавь точки-навигаторы (radio-кнопки) для ручного переключения.
Пример использования: Портфолио, лендинг с демонстрацией работ.
Как адаптировать промты под свою задачу?
Универсального промта не существует. Но есть принципы, которые помогут получить хороший код:
- Указывай конкретные размеры. Вместо «сделай отступ» пиши «padding: 20px».
- Определи поведение на мобильных. Если не указать медиа-запросы, AI часто генерирует только десктоп-версию.
- Добавь цвета. AI может выбрать случайные, если их не задать.
- Проси валидный код. Уточни: «без ошибок, используй современные стандарты HTML5 и CSS3».
Частые ошибки при работе с AI-промтами для вёрстки
- Слишком абстрактный запрос. «Сделай красивый сайт» — AI выдаст что угодно, но не то, что нужно.
- Отсутствие указания на адаптив. Многие забывают упомянуть медиа-запросы, и код работает только на широких экранах.
- Игнорирование семантики. AI часто использует
divдля всего, вместо<header>,<main>,<section>. Поправляйте промт. - Отсутствие тестирования. Код от AI — это черновик. Всегда проверяйте в браузере и через валидатор W3C.
Заключение
Промты для вёрстки — это не магия, а инструмент ускорения. Они не заменят понимания CSS, но помогут быстрее прототипировать, избавиться от рутины и сосредоточиться на сложных задачах. Используйте приведённые выше шаблоны как стартовую точку, адаптируйте под свои проекты и не забывайте тестировать код.
Если вы хотите углубиться в тему интеграции AI-инструментов в веб-разработку, обратите внимание на курсы, где разбираются реальные кейсы — от простых лендингов до сложных дашбордов. В любом случае, главный навык современного верстальщика — это умение правильно формулировать задачу, будь то для человека или для нейросети.
Комментарии