Современная вёрстка — это не просто расстановка блоков. Это искусство баланса между гибкостью, производительностью и эстетикой. В 2026 году, когда браузеры поддерживают CSS Grid, Subgrid, Container Queries и каскадные слои, разработчику приходится держать в голове десятки спецификаций. Чтобы ускорить рутину и не отвлекаться на синтаксис, я собрал подборку из 10 промтов для HTML/CSS вёрстки — от макета до адаптива. Они помогут вам генерировать чистый код, избегать багов и быстрее переходить к решению архитектурных задач.
1. Базовый: генерация каркаса страницы
Задача: Создать семантическую структуру HTML5 с шапкой, навигацией, основным контентом и подвалом.
Промт:
«Сгенерируй HTML-шаблон страницы блога с использованием тегов
,
<!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 role="banner">
<nav aria-label="Основное меню">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<!-- Основной контент -->
<main role="main">
<section aria-labelledby="hero-title">
<h1 id="hero-title">Добро пожаловать в блог</h1>
<p>Здесь вы найдёте советы по CSS и HTML.</p>
</section>
<article>
<h2>Как использовать Flexbox</h2>
<p>Flexbox — это одномерная модель раскладки...</p>
</article>
<aside role="complementary" aria-label="Боковая панель">
<h3>Популярные теги</h3>
<ul>
<li>CSS Grid</li>
<li>Анимации</li>
</ul>
</aside>
</main>
<footer role="contentinfo">
<p>© 2026 Блог о вёрстке</p>
</footer>
</body>
</html>
Этот промт даёт старт любому проекту: вы получаете семантически корректную разметку, готовую к стилизации.
2. Продвинутый: сетка на CSS Grid с адаптивом без медиа-запросов
Задача: Создать адаптивную сетку карточек, которая меняет количество колонок в зависимости от ширины контейнера, без единого медиа-запроса.
Промт:
«Напиши CSS Grid для галереи изображений, где количество колонок автоматически подстраивается под ширину родителя. Используй auto-fit, minmax() и gap. Минимальная ширина колонки — 250px. Добавь aspect-ratio для картинок и border-radius.»
Пример результата:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
.gallery__item {
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
}
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
Свойство auto-fit автоматически заполняет строку колонками, а minmax() задаёт их гибкий размер. Это избавляет от написания десятков медиа-запросов. По данным MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_responsive_design), такой подход снижает объём CSS на 30-40% при сохранении полной адаптивности.
3. Экспертный: анимация появления элементов при скролле
Задача: Реализовать анимацию fade-in с использованием Intersection Observer API и CSS transitions.
Промт:
«Создай JavaScript-функцию, которая добавляет класс .visible к элементам с классом .animate-on-scroll, когда они попадают в viewport. Используй IntersectionObserver с порогом 0.2. В CSS пропиши transition для opacity и transform: translateY(). Сделай анимацию с задержкой, кратной индексу элемента.»
Пример результата:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
Такая анимация не нагружает основной поток, так как IntersectionObserver работает асинхронно. Это стандарт для современных лендингов и портфолио.
4. Базовый: стилизация форм с фокусами и валидацией
Задача: Создать стилизованную форму входа с псевдоклассами :focus, :invalid и :valid.
Промт:
«Напиши CSS для формы логина: поле ввода email, поле пароля и кнопка отправки. Используй :focus для подсветки границы синим, :invalid для красной рамки, :valid для зелёной. Добавь transition на border-color. Кнопка должна менять фон при наведении.»
Пример результата:
.form__input {
border: 2px solid #ccc;
padding: 8px;
border-radius: 6px;
transition: border-color 0.3s;
}
.form__input:focus {
border-color: #007bff;
outline: none;
}
.form__input:invalid {
border-color: #dc3545;
}
.form__input:valid {
border-color: #28a745;
}
.form__button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.form__button:hover {
background: #0056b3;
}
Эти стили улучшают UX: пользователь сразу видит, корректно ли заполнено поле, без перезагрузки страницы.
5. Продвинутый: тёмная тема через CSS Custom Properties
Задача: Реализовать переключение между светлой и тёмной темой с помощью CSS-переменных и медиа-функции prefers-color-scheme.
Промт:
«Определи набор CSS-переменных для цветов фона, текста, ссылок и карточек. Создай два набора: для светлой темы (по умолчанию) и тёмной (через prefers-color-scheme: dark). Добавь возможность переключать тему через класс .dark на body с более высоким приоритетом.»
Пример результата:
:root {
--bg: #ffffff;
--text: #222222;
--link: #0066cc;
--card-bg: #f5f5f5;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #e0e0e0;
--link: #bb86fc;
--card-bg: #1e1e1e;
}
}
body.dark {
--bg: #121212;
--text: #e0e0e0;
--link: #bb86fc;
--card-bg: #1e1e1e;
}
body {
background: var(--bg);
color: var(--text);
}
Такой подход обеспечивает плавный переход и поддержку системных настроек. Ссылка на спецификацию: https://drafts.csswg.org/css-custom-properties/.
6. Экспертный: адаптивная типографика с clamp()
Задача: Сделать размер заголовка и текста, который плавно меняется между минимальным и максимальным значением в зависимости от ширины экрана.
Промт:
«Используй CSS-функцию clamp() для h1 и p. Для h1: минимум 1.5rem, максимум 3rem, предпочтительное значение 5vw. Для p: минимум 1rem, максимум 1.25rem, предпочтительное 2vw. Добавь line-height: 1.6 для текста.»
Пример результата:
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
line-height: 1.2;
}
p {
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.6;
}
Функция clamp() поддерживается всеми современными браузерами (Can I use — 97.8% глобального охвата на 2026 год). Она заменяет несколько медиа-запросов для шрифтов.
7. Базовый: выравнивание элементов по центру
Задача: Отцентрировать блок по горизонтали и вертикали внутри родителя.
Промт:
«Напиши CSS-класс .center, который центрирует дочерний элемент как по горизонтали, так и по вертикали с помощью Flexbox. Родитель должен иметь минимальную высоту 100vh. Добавь поддержку для случая, когда контента мало.»
Пример результата:
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Это универсальный паттерн, который работает для любых элементов — от одной кнопки до сложного блока.
8. Продвинутый: каскадные слои для организации стилей
Задача: Использовать @layer для разделения стилей на сброс, базовые, компоненты и утилиты.
Промт:
«Определи три слоя: reset, base, components. В слое reset — normalize.css. В base — типографика и цвета. В components — стили для карточек и кнопок. Покажи, как переопределить стиль компонента в слое с более высоким приоритетом.»
Пример результата:
@layer reset, base, components;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer base {
body { font-family: sans-serif; color: #333; }
}
@layer components {
.btn { background: blue; color: white; }
}
Слои решают проблему специфичности: вы можете контролировать порядок применения стилей без !important. Это рекомендовано в CSS Cascade 5 (https://www.w3.org/TR/css-cascade-5/).
9. Экспертный: контейнерные запросы для виджетов
Задача: Сделать карточку товара, которая меняет layout в зависимости от ширины контейнера, а не viewport.
Промт:
«Используй Container Queries: задай контейнеру type inline-size. Внутри карточки: при ширине контейнера больше 400px — flex-direction: row, при меньшей — column. Добавь transition для плавности.»
Пример результата:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}
@container (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}
Контейнерные запросы — мощный инструмент для создания переиспользуемых компонентов, которые адаптируются к любому месту размещения. Они поддерживаются в Chrome, Firefox и Safari с 2023 года.
10. Базовый: простая анимация на @keyframes
Задача: Создать пульсирующую кнопку, которая привлекает внимание.
Промт:
«Определи @keyframes pulse с изменением transform: scale() от 1 до 1.1 и обратно. Примени к кнопке с animation: pulse 1.5s infinite. Добавь hover-эффект, который останавливает анимацию.»
Пример результата:
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.btn-pulse {
animation: pulse 1.5s infinite;
}
.btn-pulse:hover {
animation: none;
transform: scale(1.05);
}
Такая кнопка используется для CTA-элементов, чтобы повысить конверсию.
Заключение
Эти 10 промтов покрывают 80% повседневных задач верстальщика: от создания каркаса до сложных анимаций и адаптивных сеток. Главное — не копируйте код слепо. Адаптируйте его под свои проекты, экспериментируйте с параметрами и следите за поддержкой браузеров. Вёрстка в 2026 году — это про гибкость и производительность, а промты лишь инструмент, чтобы не тратить время на синтаксис. Удачи в кодинге!
Комментарии