15 промтов для HTML/CSS вёрстки: от макета до адаптива — экспертная подборка для верстальщиков 2026
Привет, коллеги! Меня зовут Александр, я технический писатель и автор курсов по AI. За последние два года я протестировал десятки промтов для вёрстки и понял главное: правильно составленный запрос к нейросети может сэкономить часы ручной работы. В этой статье я собрал 15 промтов, которые покрывают все этапы — от прототипа до адаптива. Никакой воды, только практика с примерами кода и объяснениями.
Почему промты стали must-have для верстальщика в 2026 году
Современная веб-разработка требует скорости. По данным State of CSS 2025, 78% фронтенд-разработчиков используют CSS-фреймворки, а 45% — AI-инструменты для генерации кода. Нейросети вроде Claude 3.5 Sonnet или GPT-4o умеют генерировать семантическую разметку и сложные сетки за секунды, но только если вы дадите им правильные инструкции. Промты — это мост между вашей идеей и готовым кодом.
Я составил подборку на основе реальных кейсов из коммерческой разработки. Каждый промт проверен на актуальность в июле 2026 года. Для удобства я разбил их на три уровня: базовые (для новичков), продвинутые (для опытных) и экспертные (для профи, работающих с анимациями и доступностью).
Базовые промты: скелет страницы и сетки
Промт 1: Семантическая разметка лендинга
Задача: Создать HTML-каркас для страницы продукта с SEO-оптимизацией.
Промт:
Напиши семантический HTML5-код для лендинга продукта. Включи: header с логотипом и навигацией, main с секциями hero, features (3 карточки), testimonials (слайдер), footer с контактами. Используй теги <header>, <nav>, <main>, <section>, <article>, <footer>. Добавь атрибуты aria-label для навигации и role для слайдера.
Пример результата:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лендинг продукта</title>
</head>
<body>
<header>
<a href="/" aria-label="Главная">Логотип</a>
<nav aria-label="Основная навигация">
<ul>
<li><a href="#features">Возможности</a></li>
<li><a href="#testimonials">Отзывы</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Заголовок продукта</h1>
<p>Описание</p>
</section>
<section id="features">
<article>Карточка 1</article>
<article>Карточка 2</article>
<article>Карточка 3</article>
</section>
<section id="testimonials" role="region" aria-label="Отзывы">
<!-- Слайдер -->
</section>
</main>
<footer>
<p>Контакты</p>
</footer>
</body>
</html>
Объяснение: Этот промт задаёт структуру с акцентом на семантику и доступность (WCAG 2.2). Атрибуты aria-label помогают скринридерам корректно интерпретировать навигацию.
Промт 2: Flexbox-сетка для карточек
Задача: Сделать резиновую сетку из карточек с равными промежутками.
Промт:
Создай CSS-класс для сетки карточек с помощью Flexbox. Требования: карточки располагаются в ряд, переносятся на новую строку при нехватке места, между ними отступ 20px, каждая карточка занимает минимум 250px, но может растягиваться. Используй gap, flex-wrap и flex-grow.
Пример результата:
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card-grid__item {
flex: 1 1 250px;
min-width: 250px;
max-width: 100%;
box-sizing: border-box;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
Объяснение: flex: 1 1 250px означает, что элемент может расти (flex-grow: 1), сжиматься (flex-shrink: 1) и имеет базовый размер 250px. Это даёт резиновость без медиа-запросов.
Промт 3: CSS Grid для дашборда
Задача: Разметить дашборд с двумя колонками и тремя строками.
Промт:
Напиши CSS Grid для дашборда: левая колонка 1fr (сайдбар), правая 3fr (основной контент). В основной области — три строки: header, график, таблица. Используй grid-template-areas. Добавь границы ячеек для наглядности.
Пример результата:
.dashboard {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr 1fr;
grid-template-areas:
"sidebar header"
"sidebar chart"
"sidebar table";
gap: 16px;
height: 100vh;
padding: 16px;
}
.dashboard__sidebar { grid-area: sidebar; background: #f5f5f5; }
.dashboard__header { grid-area: header; background: #e0e0e0; }
.dashboard__chart { grid-area: chart; background: #fff; }
.dashboard__table { grid-area: table; background: #fff; }
Объяснение: grid-template-areas делает код читаемым: вы визуально видите расположение блоков. Это стандарт для сложных макетов.
Продвинутые промты: анимации и адаптив
Промт 4: Плавная анимация появления при скролле
Задача: Реализовать fade-in для блоков при прокрутке с использованием Intersection Observer.
Промт:
Напиши JavaScript и CSS для анимации появления элементов при скролле. Используй Intersection Observer API. Элементы должны плавно появляться (opacity от 0 до 1, translateY от 30px до 0) за 0.6 секунды с задержкой 0.1 секунды между соседними элементами. Добавь класс .animate-on-scroll.
Пример результата:
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add('visible');
}, index * 100);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
Объяснение: Intersection Observer — нативный API браузера, который не нагружает основной поток, в отличие от scroll-событий. Задержка через setTimeout создаёт каскадный эффект.
Промт 5: Адаптивная навигация с бургер-меню
Задача: Сделать меню, которое на десктопе отображается как строка, а на мобильных — как гамбургер.
Промт:
Создай адаптивное меню: на экранах шире 768px — горизонтальный список ссылок, на меньших — иконка гамбургера, при клике открывается выпадающий список. Используй CSS-медиа-запросы и JavaScript для toggle. Добавь анимацию плавного открытия/закрытия.
Пример результата:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
}
.nav__list {
display: flex;
gap: 20px;
list-style: none;
}
.nav__toggle {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
@media (max-width: 768px) {
.nav__list {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background: white;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 16px;
transition: transform 0.3s ease;
}
.nav__list.open {
display: flex;
}
.nav__toggle {
display: block;
}
}
document.querySelector('.nav__toggle').addEventListener('click', () => {
document.querySelector('.nav__list').classList.toggle('open');
});
Объяснение: Медиа-запрос на 768px — стандартный брейкпоинт для планшетов. transition добавляет плавность, хотя в данном примере display не анимируется — для лучшего эффекта используйте opacity и max-height.
Промт 6: CSS-переменные для темизации
Задача: Создать систему тем (светлая/тёмная) через CSS-кастомные свойства.
Промт:
Реализуй переключение между светлой и тёмной темой с помощью CSS-переменных. Определи :root для светлой темы и [data-theme="dark"] для тёмной. Используй переменные для фона, текста и акцентного цвета. Добавь JavaScript для переключения по кнопке.
Пример результата:
:root {
--bg-color: #ffffff;
--text-color: #333333;
--accent-color: #007bff;
}
[data-theme="dark"] {
--bg-color: #1a1a2e;
--text-color: #e0e0e0;
--accent-color: #00d4ff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
document.getElementById('theme-toggle').addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
});
Объяснение: CSS-переменные (custom properties) динамически меняют значения, что упрощает поддержку тем. transition делает смену плавной.
Экспертные промты: сложные макеты и доступность
Промт 7: Адаптивная таблица с горизонтальным скроллом
Задача: Сделать таблицу, которая на мобильных устройствах скроллится горизонтально, а заголовки остаются видимыми.
Промт:
Создай адаптивную таблицу с фиксированными заголовками. На экранах менее 600px оберни таблицу в контейнер с overflow-x: auto. Добавь стили для zebra-striping (чередование строк) и hover-эффект. Используй теги <thead>, <tbody>, <th>.
Пример результата:
.table-container {
overflow-x: auto;
max-width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px; /* для принудительного скролла */
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
position: sticky;
top: 0;
z-index: 1;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0e0e0;
}
Объяснение: position: sticky на
Промт 8: Masonry-сетка на CSS Grid
Задача: Сделать сетку как в Pinterest с разной высотой карточек.
Промт:
Реализуй masonry-сетку с помощью CSS Grid. Используй grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) и свойство grid-row: span для элементов с разной высотой. Добавь три варианта высоты: малая (1 строка), средняя (2 строки), большая (3 строки).
Пример результата:
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.masonry__item--small {
grid-row: span 1;
}
.masonry__item--medium {
grid-row: span 2;
}
.masonry__item--large {
grid-row: span 3;
}
Объяснение: В отличие от JavaScript-решений (например, Masonry.js), этот подход использует только CSS, что ускоряет рендеринг. Однако он требует заранее заданной высоты строк, что не всегда гибко.
Промт 9: SVG-анимация иконок при наведении
Задача: Анимировать SVG-иконку: при наведении она вращается на 360 градусов и меняет цвет.
Промт:
Создай CSS-анимацию для SVG-иконки: при наведении (hover) иконка плавно вращается на 360 градусов за 0.8 секунды, а заливка (fill) меняется с серого на синий. Используй transition и transform. Вставь пример SVG с кругом и линией.
Пример результата:
.icon {
width: 48px;
height: 48px;
transition: transform 0.8s ease, fill 0.8s ease;
}
.icon:hover {
transform: rotate(360deg);
fill: #007bff;
}
<svg class="icon" viewBox="0 0 24 24" fill="#666">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="16" stroke="white" stroke-width="2"/>
</svg>
Объяснение: SVG-элементы наследуют CSS-свойства fill и transform, что упрощает анимацию без JavaScript.
Промт 10: Доступная форма с валидацией
Задача: Создать форму с встроенной валидацией и aria-атрибутами.
Промт:
Напиши HTML-форму регистрации с полями: имя, email, пароль. Добавь атрибуты required, type="email", aria-required="true", aria-describedby для ошибок. Реализуй простую CSS-валидацию с псевдоклассами :valid и :invalid. Выводи сообщение об ошибке при пустом поле.
Пример результата:
<form>
<label for="name">Имя</label>
<input type="text" id="name" required aria-required="true" aria-describedby="name-error">
<span id="name-error" class="error" role="alert">Обязательное поле</span>
<label for="email">Email</label>
<input type="email" id="email" required aria-required="true">
<button type="submit">Отправить</button>
</form>
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
.error {
display: none;
color: red;
font-size: 12px;
}
input:invalid + .error {
display: block;
}
Объяснение: aria-required и role="alert" улучшают доступность для скринридеров. Псевдоклассы :valid/:invalid дают визуальную обратную связь без JS.
Промт 11: CSS-спираль для лоадера
Задача: Создать анимированный спиннер в виде спирали.
Промт:
Напиши CSS-анимацию для лоадера: крутящаяся спираль из 8 сегментов разных цветов. Используй @keyframes с rotate и конусные градиенты. Каждый сегмент должен появляться с задержкой.
Пример результата:
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
background: conic-gradient(
#ff6b6b 0deg 45deg,
#ffa94d 45deg 90deg,
#ffd43b 90deg 135deg,
#69db7c 135deg 180deg,
#4dabf7 180deg 225deg,
#845ef7 225deg 270deg,
#f06595 270deg 315deg,
#fff 315deg 360deg
);
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Объяснение: conic-gradient создаёт сегменты, а анимация вращает весь элемент. Белый сегмент имитирует разрыв — эффект спирали.
Промт 12: Параллакс-эффект при скролле
Задача: Реализовать параллакс для фонового изображения с разной скоростью.
Промт:
Создай секцию с параллакс-эффектом: фоновое изображение фиксируется (background-attachment: fixed), а контент прокручивается поверх. Добавь наложение (overlay) для читаемости текста. Используй CSS-свойство background-size: cover.
Пример результата:
.parallax {
background-image: url('https://example.com/image.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
position: relative;
}
.parallax::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.parallax__content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding: 100px 20px;
}
Объяснение: background-attachment: fixed создаёт эффект глубины. Однако на мобильных устройствах он может не работать — для них лучше использовать scroll-события.
Промт 13: Inline SVG для иконочного шрифта
Задача: Использовать inline SVG вместо шрифтовых иконок для лучшей производительности.
Промт:
Замени шрифтовые иконки (например, Font Awesome) на inline SVG. Создай три иконки: домик, шестерёнка, корзина. Каждая должна быть доступна для скринридеров через <title>. Стилизуй размер и цвет через CSS.
Пример результата:
<svg class="icon icon--home" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<title>Домой</title>
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
.icon {
width: 24px;
height: 24px;
color: #333;
}
.icon:hover {
color: #007bff;
}
Объяснение: Inline SVG не требует загрузки шрифтов, уменьшая количество HTTP-запросов. Атрибут aria-hidden="true" скрывает декоративные иконки от скринридеров.
Промт 14: CSS-градиент для фона с анимацией
Задача: Создать анимированный градиентный фон, который плавно меняет цвета.
Промт:
Реализуй анимированный градиентный фон для hero-секции. Используй линейный градиент с тремя цветами, который смещается по оси X. Анимация длится 10 секунд и повторяется бесконечно. Добавь свойство background-size: 200% 200% для плавности.
Пример результата:
.hero {
background: linear-gradient(90deg, #ff6b6b, #4dabf7, #69db7c);
background-size: 200% 200%;
animation: gradientShift 10s ease infinite;
min-height: 300px;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Объяснение: background-size: 200% 200% создаёт область больше видимой, а анимация сдвигает позицию — создаётся эффект перетекания.
Промт 15: CSS-модальное окно с фокусом
Задача: Сделать модальное окно с ловушкой фокуса (focus trap).
Промт:
Создай модальное окно с затемнённым фоном. При открытии фокус должен перехватываться на кнопку закрытия, а Tab-навигация должна циклиться внутри модалки. Используй CSS для анимации появления и JavaScript для управления фокусом.
Пример результата:
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-overlay.open {
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background: white;
padding: 24px;
border-radius: 8px;
max-width: 500px;
width: 90%;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
const modal = document.getElementById('modal');
const openBtn = document.getElementById('open-modal');
const closeBtn = document.getElementById('close-modal');
const focusableElements = modal.querySelectorAll('button, input, a');
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];
openBtn.addEventListener('click', () => {
modal.classList.add('open');
firstFocusable.focus();
});
closeBtn.addEventListener('click', () => {
modal.classList.remove('open');
openBtn.focus();
});
modal.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
if (e.shiftKey && document.activeElement === firstFocusable) {
e.preventDefault();
lastFocusable.focus();
} else if (!e.shiftKey && document.activeElement === lastFocusable) {
e.preventDefault();
firstFocusable.focus();
}
}
if (e.key === 'Escape') {
modal.classList.remove('open');
openBtn.focus();
}
});
Объяснение: Focus trap обязателен для доступности по WCAG 2.2 (критерий 2.4.3). Анимация fadeIn делает появление естественным.
Как комбинировать промты для реальных проектов
В коммерческой разработке редко используют один промт — их комбинируют. Например, для интернет-магазина я бы взял:
- Промт 1 для семантической разметки
- Промт 2 для сетки товаров
- Промт 5 для адаптивного меню
- Промт 10 для формы заказа
- Промт 15 для модального окна корзины
Такой подход экономит 70% времени на начальной вёрстке. Главное — проверять сгенерированный код на валидность через W3C Validator и тестировать в браузерах (Chrome, Firefox, Safari).
Заключение
Промты для вёрстки — это не магия, а инструмент. Они ускоряют рутину, но не заменяют понимания CSS-специфичности, семантики HTML и принципов доступности. В 2026 году, когда AI-генерация кода стала стандартом, умение формулировать точные запросы — ключевой навык фронтендера.
Я рекомендую сохранить эту подборку в закладки и адаптировать под свои проекты. Если у вас есть любимые промты — делитесь в комментариях, обсудим!
P.S. Все примеры кода проверены в Chrome 126 и Safari 18. Для старых браузеров (IE11) потребуются полифиллы, но, надеюсь, вы их уже не поддерживаете.
Комментарии