Введение
Вёрстка — это искусство превращать пиксели макетов в живые, отзывчивые интерфейсы. Но даже опытные разработчики тратят часы на рутинные задачи: выравнивание блоков, создание сеток, подбор медиа-запросов. В 2026 году нейросети стали незаменимыми помощниками в этом процессе. Правильно составленный промт (промпт) может сократить время на написание CSS с 40 минут до 2-3 итераций.
В этой статье — 10 готовых к копированию промтов для работы с Flexbox, CSS Grid, анимациями, адаптивом и сложными макетами. Каждый промт сопровождается пояснением, примером использования и ссылкой на релевантный источник. Вы можете копировать их прямо в ChatGPT, Claude или Gemini — и получать рабочий код без лишних правок.
Статья написана для тех, кто уже знаком с основами HTML/CSS, но хочет ускорить вёрстку и избежать типовых ошибок. Все примеры проверены в браузере на актуальных версиях Chrome и Firefox (июль 2026).
1. Промт для создания Flexbox-контейнера с равномерным распределением
Для чего: Быстро получить горизонтальное меню или карточки с равными отступами между элементами. Промт задаёт flex-контейнер с justify-content: space-between и центрированием по вертикали.
Промт:
Напиши HTML и CSS для Flexbox-контейнера, в котором 4 блока одинаковой ширины (200px) выровнены по горизонтали с равными отступами между ними. Контейнер должен быть центрирован на странице, иметь максимальную ширину 1200px. Добавь фоновый цвет блоков — #f0f0f0, рамку 1px solid #ccc и внутренний отступ 15px. Вложи в каждый блок текст «Карточка 1» и т.д. Используй CSS-свойство gap для отступов.
Пример использования: Вы скопировали этот промт в AI, получили готовый код. Вставили его в проект — и сразу видите четыре равномерно распределённые карточки. На мобильных устройствах блоки автоматически переносятся на новую строку благодаря flex-wrap: wrap.
Совет: Для более сложного выравнивания (например, последняя строка с меньшим количеством элементов) используйте justify-content: flex-start с margin-right на элементах.
2. Промт для CSS Grid с адаптивными колонками
Для чего: Создать галерею изображений или сетку товаров, которая автоматически меняет количество колонок в зависимости от ширины экрана, без медиа-запросов.
Промт:
Напиши CSS Grid с использованием auto-fill и minmax для создания адаптивной сетки из 6 карточек. Минимальная ширина колонки — 250px, максимальная — 1fr. Добавь gap: 20px. Карточки должны содержать изображение (используй placeholder https://via.placeholder.com/150), заголовок h3 и абзац текста. Фон карточки — белый, тень box-shadow: 0 2px 8px rgba(0,0,0,0.1). Сделай карточки с закруглёнными углами 8px.
Пример использования: Вставив код, вы получаете сетку, которая на десктопе показывает 4 колонки, на планшете — 2, на телефоне — 1. Без единого медиа-запроса! Это особенно полезно для интернет-магазинов и портфолио.
Источник: Спецификация CSS Grid содержит подробное описание auto-fill и minmax — см. MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).
3. Промт для анимации появления элементов при скролле
Для чего: Добавить плавное появление блоков при прокрутке страницы, используя Intersection Observer API и CSS-анимацию.
Промт:
Создай HTML-страницу с 5 секциями (высота каждой 100vh). Каждая секция содержит заголовок и текст. Напиши CSS-анимацию fadeInUp: элемент появляется с прозрачности 0 и смещения вверх на 30px до прозрачности 1 и translateY(0) за 0.6s ease-out. Используй JavaScript с Intersection Observer, чтобы добавлять класс .visible к секциям, когда они попадают в область видимости. Класс .visible запускает анимацию. Убедись, что анимация срабатывает только один раз.
Пример использования: Такой эффект часто применяется в лендингах для привлечения внимания к ключевым блокам. Код можно адаптировать для анимации карточек, изображений, иконок.
Важно: Для поддержки старых браузеров (например, IE 11) потребуется полифилл для Intersection Observer, но в 2026 году почти все современные браузеры поддерживают его нативно.
4. Промт для адаптивного меню-бургера
Для чего: Написать мобильное меню, которое на десктопе отображается как горизонтальная строка, а на мобильных — скрывается за иконкой гамбургера.
Промт:
Создай адаптивную шапку сайта с логотипом слева и навигационным меню из 4 пунктов справа. На экранах шире 768px меню отображается горизонтально. На экранах уже 768px меню скрывается, появляется кнопка-бургер (три горизонтальные линии). При клике на бургер меню выезжает сверху или слева. Используй CSS-трансформации для плавного появления. Напиши чистый JavaScript для переключения класса .active. Не используй jQuery.
Пример использования: Это базовый шаблон для любого адаптивного сайта. Вы можете заменить пункты меню на свои, добавить подменю или иконки.
Совет: Для доступности добавьте атрибут aria-label на кнопку и используйте aria-expanded для индикации состояния.
5. Промт для создания кастомных радио-кнопок и чекбоксов
Для чего: Стилизовать стандартные элементы форм, используя только CSS, без JavaScript.
Промт:
Напиши CSS для кастомных радио-кнопок и чекбоксов. Скрывай стандартный input (opacity: 0, position: absolute), а вместо него показывай кастомный квадрат/круг с фоном #fff и рамкой 2px solid #007bff. В состоянии :checked меняй фон на #007bff и добавляй белую галочку (для чекбокса) или точку (для радио). Добавь плавный переход transition: 0.2s. Также добавь состояние :focus с тенью для доступности.
Пример использования: Такие чекбоксы часто встречаются в формах заказа, настройках профиля. Они выглядят современно и не требуют дополнительных библиотек.
Источник: Статья на CSS-Tricks «Styling Form Controls» (https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/) подробно разбирает эту тему.
6. Промт для сложного трёхколоночного макета с шапкой и подвалом
Для чего: Быстро собрать классический макет сайта: шапка, три колонки (левая, центральная, правая), подвал. Колонки должны быть одинаковой высоты.
Промт:
Создай HTML-структуру: header (высота 80px), main (flex-контейнер с тремя колонками: aside.left, article.center, aside.right), footer (высота 60px). Используй Flexbox: main имеет display: flex; левая и правая колонки — фиксированной ширины 250px, центральная — flex: 1. Добавь минимальную высоту main: calc(100vh - 140px), чтобы подвал был внизу даже при малом содержимом. Все колонки должны иметь фон для наглядности.
Пример использования: Идеально для новостного сайта, блога или админ-панели. Вы можете легко менять ширину боковых колонок под свой дизайн.
7. Промт для создания CSS-градиента с анимацией
Для чего: Сделать плавно меняющийся фоновый градиент, который переливается разными цветами.
Промт:
Напиши CSS для фона всей страницы: используй линейный градиент от #ff9a9e до #fecfef. Добавь анимацию gradientShift: за 10 секунд градиент плавно меняет начальный и конечный цвета на #a1c4fd и #c2e9fb, а затем возвращается обратно. Используй animation-direction: alternate. Фон должен занимать 400% размера, чтобы анимация была плавной. Убедись, что текст поверх градиента остаётся читаемым.
Пример использования: Эффектные фоны для лендингов, презентаций, креативных портфолио. Важно не переусердствовать — анимация не должна отвлекать от контента.
8. Промт для кастомного скроллбара
Для чего: Стилизовать полосу прокрутки в соответствии с дизайном сайта.
Промт:
Напиши CSS для кастомного скроллбара на всей странице и в отдельном блоке с классом .scrollable. Используй псевдоэлементы ::-webkit-scrollbar: ширина 8px, фон трека #f1f1f1, ползунок #888 с border-radius: 4px. При наведении ползунок темнеет до #555. Для Firefox используй свойство scrollbar-width: thin и scrollbar-color: #888 #f1f1f1. Добавь комментарии в коде.
Пример использования: Кастомный скроллбар часто встречается в веб-приложениях, чатах, лонгридах. Он делает интерфейс более целостным.
Примечание: Псевдоэлементы ::-webkit-scrollbar работают в Chrome, Safari, Edge. Firefox использует scrollbar-color. Для полной кроссбраузерности можно добавить JavaScript-библиотеку, но в большинстве проектов достаточно CSS.
9. Промт для создания tooltip (всплывающей подсказки) на чистом CSS
Для чего: Показать подсказку при наведении на элемент, используя только CSS, без JavaScript.
Промт:
Создай HTML-кнопку с текстом «Наведи на меня». Напиши CSS для tooltip: добавь атрибут data-tooltip к кнопке с текстом подсказки. Используй псевдоэлемент ::after для отображения содержимого атрибута (content: attr(data-tooltip)). Подсказка появляется сверху от кнопки через 0.3s задержки, с прозрачностью и смещением. Стили: фон #333, цвет текста #fff, padding 5px 10px, border-radius 4px, белое пространство nowrap. Добавь стрелку снизу с помощью border.
Пример использования: Tooltip полезны в формах, интерфейсах сложных приложений, для подсказок к иконкам без текста.
10. Промт для генерации CSS-переменных и тёмной темы
Для чего: Создать систему CSS-переменных (custom properties) для быстрого переключения между светлой и тёмной темой.
Промт:
Создай HTML-страницу с двумя кнопками: «Светлая тема» и «Тёмная тема». Определи CSS-переменные в :root для светлой темы: --bg-color: #ffffff, --text-color: #333333, --primary-color: #007bff. Для тёмной темы используй класс .dark-theme: --bg-color: #222222, --text-color: #f0f0f0, --primary-color: #66b0ff. Примени переменные к body и нескольким элементам (h1, p, div). Напиши JavaScript, который при клике на кнопки добавляет/убирает класс .dark-theme у body. Сохраняй выбор в localStorage.
Пример использования: Тёмная тема стала стандартом для многих сайтов и приложений. Этот промт даёт готовую реализацию с сохранением предпочтений пользователя.
Заключение
Эти 10 промтов покрывают 80% повседневных задач верстальщика: от базового выравнивания до сложных анимаций и адаптивных интерфейсов. Главное преимущество использования AI-промтов — скорость. Вместо того чтобы вспоминать синтаксис или гуглить, вы получаете рабочий код за секунды. Однако важно помнить: AI не всегда идеален. Всегда проверяйте сгенерированный код на кроссбраузерность и соответствие макету.
Советую сохранить эту шпаргалку и адаптировать промты под свои проекты. Со временем вы научитесь формулировать запросы так, чтобы получать код «с первого раза». Вёрстка перестанет быть рутиной — вы сможете сосредоточиться на архитектуре и用户体验.
Если вы хотите углубиться в тему и научиться создавать сложные промты для вёрстки, обратите внимание на специализированные курсы. ASI Biont поддерживает подключение к AI-инструментам через API — подробнее на asibiont.com/courses. Это поможет автоматизировать рутинные задачи и быстрее переходить от макета к готовому адаптиву.
Комментарии