Вёрстка — это искусство превращать дизайн-макет в живую, отзывчивую страницу. В 2026 году, когда браузеры поддерживают CSS Grid, Subgrid, Container Queries и сложные анимации, рутина уходит на второй план. Но как ускорить процесс, не жертвуя качеством? Ответ — промты. Ниже — подборка из 12 проверенных промтов для ChatGPT, Claude и Gemini, которые покрывают все этапы: от Flexbox до адаптива.
1. Flexbox: выравнивание по центру
Задача: Центрировать блок по горизонтали и вертикали внутри родителя.
Промт: «Напиши CSS-код для центрирования элемента с классом .child внутри .parent с помощью Flexbox. Родитель занимает 100% высоты экрана».
Пример результата:
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.child {
width: 200px;
height: 100px;
background: #007bff;
}
Комментарий: Этот паттерн — база. Используйте gap для отступов между дочерними элементами.
2. CSS Grid: сетка карточек
Задача: Создать адаптивную сетку из 3 колонок с автоматическим переносом.
Промт: «Сгенерируй CSS Grid для галереи карточек. На десктопе — 3 колонки, на планшете — 2, на мобильных — 1. Между карточками отступ 16px».
Пример результата:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
Совет: auto-fill заполняет ряд, даже если карточек меньше, чем колонок. auto-fit схлопывает пустые колонки.
3. Адаптивная типографика
Задача: Настроить размер шрифта, который плавно меняется от 16px на мобильных до 24px на десктопе.
Промт: «Напиши CSS с clamp() для заголовка h1: минимальный размер 1.5rem, предпочтительный 4vw, максимальный 3rem».
Пример результата:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
}
Почему это работает: clamp() — встроенная функция CSS, поддерживаемая всеми современными браузерами (Can I Use: ~98% поддержки).
4. CSS-анимация: появление элемента
Задача: Анимировать появление блока сдвигом снизу и изменением прозрачности.
Промт: «Создай CSS @keyframes для fadeInUp: элемент сдвигается на 30px вверх и становится видимым за 0.6 секунды».
Пример результата:
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.element {
animation: fadeInUp 0.6s ease-out;
}
Важно: Используйте animation-fill-mode: forwards, чтобы элемент оставался в конечном состоянии.
5. Container Queries: адаптив внутри компонента
Задача: Сделать компонент, который меняет стили в зависимости от ширины контейнера, а не окна браузера.
Промт: «Напиши CSS с container query: если ширина контейнера меньше 400px, карточка становится вертикальной, иначе — горизонтальной».
Пример результата:
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (max-width: 400px) {
.card {
flex-direction: column;
}
}
Контекст: Container Queries поддерживаются в Chrome и Firefox с 2023 года, в Safari — с 2024. Это стандарт для компонентной вёрстки.
6. Тёмная тема через CSS Custom Properties
Задача: Реализовать переключение между светлой и тёмной темой.
Промт: «Создай CSS-переменные для цветов фона и текста, и медиа-запрос prefers-color-scheme для тёмной темы».
Пример результата:
:root {
--bg: #ffffff;
--text: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #e0e0e0;
}
}
body {
background: var(--bg);
color: var(--text);
}
Примечание: Для ручного переключения добавьте класс .dark к body.
7. Sticky header с тенью при скролле
Задача: Шапка фиксируется сверху и получает тень, когда пользователь прокручивает вниз.
Промт: «Напиши CSS для position: sticky с box-shadow, которая появляется при скролле (используй JavaScript для добавления класса)».
Пример результата:
header {
position: sticky;
top: 0;
z-index: 100;
transition: box-shadow 0.3s;
}
header.scrolled {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
JS-триггер: window.addEventListener('scroll', () => { header.classList.toggle('scrolled', window.scrollY > 0); });
8. Адаптивное изображение с srcset
Задача: Загружать разные версии картинки в зависимости от разрешения экрана.
Промт: «Сгенерируй HTML-тег picture с srcset для трёх размеров: 480w, 768w, 1200w».
Пример результата:
<img src="photo-1200.jpg"
srcset="photo-480.jpg 480w,
photo-768.jpg 768w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
alt="Описание">
Зачем: Экономит трафик и ускоряет загрузку на мобильных.
9. Subgrid: выравнивание вложенных сеток
Задача: Выровнять элементы внутри карточек, которые находятся в Grid-сетке, по одной линии.
Промт: «Используй subgrid, чтобы заголовки внутри карточек были на одной высоте».
Пример результата:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
Поддержка: Subgrid работает в Firefox, Chrome, Safari с 2023-2024 годов. Проверяйте на Can I Use.
10. Плавный скролл и Scroll Snap
Задача: Сделать постраничную прокрутку с привязкой к секциям.
Промт: «Настрой scroll-snap-type для контейнера, чтобы каждая секция останавливалась по центру».
Пример результата:
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.section {
scroll-snap-align: start;
height: 100vh;
}
Применение: Идеально для лендингов и портфолио.
11. CSS-счётчик для нумерации
Задача: Автоматически пронумеровать заголовки h2 в статье.
Промт: «Используй CSS counter-reset и counter-increment для нумерации h2».
Пример результата:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Глава " counter(section) ". ";
}
Без JS: Чистый CSS, работает во всех современных браузерах.
12. Адаптивная форма с focus-visible
Задача: Стилизовать поля ввода с учётом фокуса и видимости для клавиатуры.
Промт: «Напиши CSS для input с outline при :focus-visible, но без дефолтного outline при :focus (для мыши)».
Пример результата:
input:focus {
outline: none;
border-color: #005fcc;
}
input:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
Доступность: :focus-visible — стандарт WAI-ARIA, улучшает UX для пользователей клавиатуры.
Заключение
Эти 12 промтов покрывают 80% рутинных задач вёрстки: от центрирования до сложных адаптивных сеток. Копируйте их в свою IDE, адаптируйте под проект и не забывайте проверять поддержку браузеров через Can I Use. А если хотите автоматизировать генерацию таких промтов — ASI Biont поддерживает подключение к API ChatGPT и Claude через собственные курсы — подробнее на asibiont.com/courses.
Вёрстка в 2026 году — это не магия, а набор инструментов. Промты просто экономят время.
Комментарии