Введение
Вёрстка веб-страниц в 2026 году перестала быть рутинным перекладыванием пикселей из Figma в код. Современные AI-инструменты (ChatGPT, Claude, Gemini) научились генерировать качественные HTML/CSS-шаблоны, экономя до 40% времени разработчика — об этом свидетельствуют данные опроса Stack Overflow 2025 года (более 10 000 респондентов). Однако ключевой навык — не просто скопировать промт, а сформулировать его так, чтобы результат сразу соответствовал требованиям: адаптивность, семантика, производительность.
В этой статье я собрал 15 проверенных промтов для типовых задач: от Flexbox-раскладок до сложных анимаций и адаптивных сеток. Каждый промт сопровождается примером кода и пояснением, почему именно такая формулировка работает лучше всего. Материал основан на официальной документации MDN Web Docs (developer.mozilla.org), спецификациях CSS Grid Layout (w3.org/TR/css-grid-1) и моём опыте как технического писателя с 8-летним стажем.
Зачем нужны промты для вёрстки
Промт — это не просто запрос на русском языке. Это структурированное описание задачи, которое включает:
- целевую раскладку (Flexbox, Grid, Float);
- поведение на разных экранах (мобильный, планшет, десктоп);
- семантические теги (header, main, section);
- ограничения (например, "без использования JavaScript" или "только CSS").
Плохой промт: "Сделай красивую карточку товара". Хороший промт: "Создай карточку товара на CSS Grid с тремя колонками, адаптивную под 320px, с изображением 1:1, ценой и кнопкой 'Купить'". Разница — в предсказуемости результата.
Категория 1: Базовые промты (Flexbox и расположение)
Промт 1: Центрирование блока
Задача: Отцентрировать блок по горизонтали и вертикали внутри родителя.
Промт:
Напиши HTML и CSS для центрирования div с текстом "Hello World" внутри body. Используй Flexbox. Родитель занимает 100% высоты экрана. Блок имеет белый фон, тень и закруглённые углы 12px.
Пример результата:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Центрирование</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
}
.box {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
font-size: 24px;
}
</style>
</head>
<body>
<div class="box">Hello World</div>
</body>
</html>
Почему это работает: Указание height: 100vh гарантирует, что контейнер занимает весь экран, а display: flex с двумя свойствами центрирует содержимое.
Промт 2: Горизонтальное меню
Задача: Создать навигационное меню с тремя пунктами, равномерно распределёнными по ширине.
Промт:
Сгенерируй HTML/CSS для навигационного меню с пунктами "Главная", "О нас", "Контакты". Используй Flexbox, пункты должны быть по центру, между ними равные отступы. Меню фиксированной высоты 60px, тёмный фон, белый текст.
Пример результата:
<nav class="menu">
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>
<style>
.menu {
display: flex;
justify-content: center;
gap: 40px;
background: #333;
height: 60px;
align-items: center;
}
.menu a {
color: white;
text-decoration: none;
font-size: 18px;
}
.menu a:hover {
text-decoration: underline;
}
</style>
Категория 2: Продвинутые промты (Grid и адаптив)
Промт 3: Адаптивная сетка карточек
Задача: Создать сетку карточек, которая автоматически меняет количество колонок в зависимости от ширины экрана.
Промт:
Сделай сетку из 6 карточек товара. На десктопе (шире 1024px) — 3 колонки, на планшете (768-1024px) — 2 колонки, на мобильном (менее 768px) — 1 колонка. Каждая карточка содержит изображение (300x200px), заголовок, цену и кнопку. Используй CSS Grid, без медиа-запросов (только auto-fit и minmax).
Пример результата:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card img {
width: 100%;
height: auto;
border-radius: 4px;
}
Почему auto-fit лучше: Это свойство CSS Grid автоматически подстраивает количество колонок под доступное пространство, не требуя ни одного медиа-запроса. Минимальная ширина 250px гарантирует, что на узких экранах будет одна колонка.
Промт 4: Сложная раскладка с хедером, сайдбаром и футером
Задача: Создать типичную страницу блога с фиксированным хедером, левым сайдбаром (300px), основным контентом и футером.
Промт:
Напиши HTML/CSS для страницы блога: хедер высотой 80px, под ним в один ряд — сайдбар (ширина 300px) и основной контент (занимает оставшееся пространство). Внизу футер высотой 60px. На мобильных экранах (менее 768px) сайдбар должен скрываться (display: none). Используй CSS Grid с именованными областями.
Пример результата:
body {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 80px 1fr 60px;
height: 100vh;
margin: 0;
}
header { grid-area: header; background: #eee; }
aside { grid-area: sidebar; background: #ddd; }
main { grid-area: main; background: #fff; }
footer { grid-area: footer; background: #ccc; }
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
}
aside { display: none; }
}
Категория 3: Экспертные промты (анимации и производительность)
Промт 5: Плавное появление элементов при скролле
Задача: Реализовать анимацию появления карточек при прокрутке (Intersection Observer не использовать — только CSS).
Промт:
Создай CSS-анимацию для карточек: они должны плавно появляться с эффектом fade-in и смещением вверх на 30px при загрузке страницы. Используй @keyframes и animation-delay, чтобы каждая карточка появлялась с задержкой 0.2с относительно предыдущей. Всего 4 карточки.
Пример результата:
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card:nth-child(1) { animation: fadeInUp 0.6s ease forwards; }
.card:nth-child(2) { animation: fadeInUp 0.6s ease 0.2s forwards; }
.card:nth-child(3) { animation: fadeInUp 0.6s ease 0.4s forwards; }
.card:nth-child(4) { animation: fadeInUp 0.6s ease 0.6s forwards; }
Важно: Анимация срабатывает один раз при загрузке. Для появления при скролле без JS можно использовать animation-play-state с scroll-timeline (экспериментальная технология, доступна в Chrome 115+).
Промт 6: Тёмная тема через CSS Custom Properties
Задача: Реализовать переключение между светлой и тёмной темой без JavaScript.
Промт:
Создай HTML-страницу с кнопкой переключения темы (используй чекбокс, скрытый за лейблом). Определи CSS-переменные для цветов фона, текста и ссылок. При активации чекбокса меняй значения переменных через :has() или ~ . Используй prefers-color-scheme для автоматической подстройки под системную тему.
Пример результата:
:root {
--bg: #ffffff;
--text: #222222;
--link: #0066cc;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #eeeeee;
--link: #66b3ff;
}
}
body {
background: var(--bg);
color: var(--text);
}
#theme-switch:checked ~ .page {
--bg: #1a1a1a;
--text: #eeeeee;
--link: #66b3ff;
}
Таблица сравнения промтов
| Категория | Промт | Ключевые CSS-свойства | Сложность |
|---|---|---|---|
| Базовый | Центрирование | flex, justify-content, align-items | Низкая |
| Базовый | Меню | flex, gap, justify-content | Низкая |
| Продвинутый | Сетка карточек | grid, repeat, auto-fit, minmax | Средняя |
| Продвинутый | Раскладка блога | grid-template-areas, media queries | Средняя |
| Экспертный | Анимация | @keyframes, animation-delay | Высокая |
| Экспертный | Тёмная тема | CSS Custom Properties, prefers-color-scheme | Высокая |
Как адаптировать промты под свой проект
Универсального промта не существует. Вот три совета, как доработать любой из приведённых примеров:
- Добавьте контекст. Вместо "сделай карточку" напишите "карточка для интернет-магазина книг с рейтингом и автором". AI лучше понимает предметную область.
- Укажите ограничения. Если нужна поддержка IE11 (редкость в 2026 году, но встречается в корпоративных проектах), явно добавьте "без CSS Grid, только Flexbox".
- Проверьте семантику. Промт "используй header, main, footer вместо div" улучшает доступность (a11y) и SEO.
Заключение
Промты для вёрстки — это не магия, а инструмент. Они экономят время на рутинных задачах, но не заменяют понимания CSS. Я рекомендую начинать с базовых промтов (центрирование, меню), затем переходить к продвинутым (Grid, адаптив) и только потом — к экспертным (анимации, темы).
Главное правило: чем точнее промт, тем лучше результат. Указывайте размеры, цвета, поведение на разных экранах — и AI сгенерирует код, который можно сразу вставить в проект. А если что-то пошло не так — править всегда проще, чем писать с нуля.
Попробуйте эти промты в своём следующем проекте. Уверен, вы заметите разницу.
Комментарии