15 промтов для HTML/CSS вёрстки: от макета до адаптива
Если ты верстальщик или frontend-разработчик, ты знаешь, как много времени уходит на рутину: выравнивание блоков, подгонка отступов, создание адаптивных сеток. Я ежедневно использую AI (ChatGPT, Claude, Gemini) для ускорения этих задач. В этой подборке — 15 проверенных промтов, которые я сам применяю в работе. Каждый промт включает пример кода и пояснение. Поехали.
1. Flexbox-сетка для карточек
Промт: «Сгенерируй HTML и CSS для трёх карточек одинаковой ширины, выровненных по центру с помощью Flexbox. Карточки должны иметь отступы 16px, тень, и адаптироваться под мобильные устройства (на экранах меньше 768px — одна колонка).»
Пример использования: Ты быстро получаешь готовую структуру для блога или товаров.
<div class="card-grid">
<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
</div>
<style>
.card-grid { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.card { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 24px; border-radius: 8px; flex: 1 1 300px; }
@media (max-width: 768px) { .card-grid { flex-direction: column; } }
</style>
2. CSS Grid для макета страницы
Промт: «Создай макет страницы с помощью CSS Grid: шапка, боковая панель (200px), основной контент, подвал. Шапка и подвал на всю ширину. На мобильных устройствах боковая панель уходит вниз.»
Пример использования: Быстрая заготовка для админки или лендинга.
body {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
@media (max-width: 600px) {
body { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; }
}
3. Анимация появления элемента при скролле
Промт: «Напиши CSS-анимацию для плавного появления блока (fade-in) при скролле. Используй Intersection Observer API для триггера. Класс .visible добавляется, когда элемент в зоне видимости.»
Пример использования: Создание параллакс-эффектов без библиотек.
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
document.querySelectorAll('.fade-in').forEach(el => {
new IntersectionObserver(entries => entries.forEach(e => e.isIntersecting && e.target.classList.add('visible'))).observe(el);
});
4. Адаптивное изображение с srcset
Промт: «Сгенерируй HTML для адаптивного изображения с использованием атрибутов srcset и sizes. Изображения: mobile.jpg (480px), tablet.jpg (768px), desktop.jpg (1200px). Добавь fallback на PNG.»
Пример использования: Оптимизация загрузки для разных устройств.
<img src="fallback.png" srcset="mobile.jpg 480w, tablet.jpg 768w, desktop.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw" alt="описание">
5. CSS-переменные для темизации
Промт: «Создай CSS-файл с переменными для светлой и тёмной темы. Используй :root и [data-theme="dark"]. Включи цвета фона, текста, ссылок.»
Пример использования: Быстрое переключение темы без дублирования кода.
:root { --bg: #fff; --text: #222; --link: #1a73e8; }
[data-theme="dark"] { --bg: #1a1a2e; --text: #e0e0e0; --link: #bb86fc; }
body { background: var(--bg); color: var(--text); }
a { color: var(--link); }
6. Flexbox для центрирования
Промт: «Напиши CSS для центрирования блока по горизонтали и вертикали с помощью Flexbox. Блок имеет фиксированную ширину 400px и высоту 300px.»
Пример использования: Модальные окна, прелоадеры.
.parent { display: flex; justify-content: center; align-items: center; height: 100vh; }
.child { width: 400px; height: 300px; background: #f0f0f0; }
7. CSS Grid для галереи
Промт: «Создай галерею из 6 изображений с помощью CSS Grid. Колонки автоматически заполняются (auto-fill), минимальная ширина 200px, максимальная 1fr. Добавь gap 12px.»
Пример использования: Фотогалерея без медиа-запросов.
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery img { width: 100%; height: auto; }
8. Анимация загрузки (спиннер)
Промт: «Создай CSS-анимацию для спиннера загрузки в виде круга. Используй border и border-radius. Круг должен вращаться бесконечно.»
Пример использования: Индикатор загрузки данных.
.spinner { width: 40px; height: 40px; border: 4px solid #ddd; border-top-color: #333; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
9. Responsive-типографика с clamp()
Промт: «Напиши CSS для заголовка h1 с адаптивным размером шрифта: от 24px (мобильные) до 48px (десктоп). Используй функцию clamp().»
Пример использования: Плавное изменение размера текста.
h1 { font-size: clamp(24px, 4vw, 48px); line-height: 1.2; }
10. Фиксированная шапка с тенью
Промт: «Создай CSS для фиксированной шапки сверху, которая при скролле получает тень. Используй position: sticky и box-shadow.»
Пример использования: Навигация на сайте.
header { position: sticky; top: 0; background: #fff; transition: box-shadow 0.3s; }
header.scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
window.addEventListener('scroll', () => document.querySelector('header').classList.toggle('scrolled', window.scrollY > 10));
11. Кнопка с градиентом и ховером
Промт: «Напиши CSS для кнопки с градиентным фоном (синий-фиолетовый) и эффектом при наведении: сдвиг вверх и тень.»
Пример использования: CTA-кнопки.
.btn { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; padding: 12px 24px; border: none; border-radius: 8px; transition: transform 0.3s, box-shadow 0.3s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }
12. Карточка с эффектом переворота
Промт: «Создай CSS-анимацию для карточки, которая переворачивается при наведении. Лицевая сторона — изображение, обратная — текст. Используй perspective и transform-style: preserve-3d.»
Пример использования: Портфолио или товары.
.card { perspective: 1000px; width: 200px; height: 300px; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.card:hover .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); }
13. Фильтры для изображений
Промт: «Напиши CSS-фильтры для изображения: чёрно-белое при наведении, с эффектом сепии в обычном состоянии.»
Пример использования: Галерея с эффектами.
img { filter: sepia(0.5); transition: filter 0.3s; }
img:hover { filter: grayscale(1); }
14. Анимация текста (печатающийся)
Промт: «Создай CSS-анимацию для эффекта печатающегося текста. Используй steps() и overflow: hidden. Текст: "Привет, мир!".»
Пример использования: Заголовки на лендинге.
.typing { overflow: hidden; white-space: nowrap; border-right: 2px solid; animation: typing 3s steps(12) forwards, blink 0.5s step-end infinite; width: 0; }
@keyframes typing { to { width: 12ch; } }
@keyframes blink { 50% { border-color: transparent; } }
15. Медиа-запросы для retina-экранов
Промт: «Напиши медиа-запрос для retina-дисплеев (device-pixel-ratio: 2), который меняет фон на изображение с высоким разрешением.»
Пример использования: Оптимизация для Retina.
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero { background-image: url('hero@2x.jpg'); }
}
Заключение
Эти 15 промтов — моя ежедневная база. Они экономят часы на рутинной вёрстке и помогают быстро прототипировать. Сохрани подборку в закладки — она пригодится каждому верстальщику. Попробуй применить один из промтов прямо сейчас, вставив в ChatGPT или Claude. Увидишь, как ускоряется работа.
Комментарии