10 промтов для HTML/CSS вёрстки: от макета до адаптива

# 10 промтов для HTML/CSS вёрстки: от макета до адаптива Вёрстка — это не просто расстановка блоков. Это искусство превращать дизайн-макет в живой, дышащий интерфейс. Я как разработчик с 7-летним стажем ежедневно использую AI-промты, чтобы ускорить рутину: от настройки Flexbox до адаптивных сеток. В этой статье — 10 проверенных промтов, которые реально работают в 2026 году. Без воды, только код и практика. ## Почему промты для вёрстки — must have в 2026? По данным опроса Stack Overflow 2025 года, 62% разработчиков используют AI-инструменты для генерации CSS-кода. И это не удивительно: современные нейросети (Claude 3.5 Sonnet, GPT-4o) понимают контекст макета и могут сгенерировать адаптивный код за секунды. Главное — правильно формулировать запрос. Моя подборка покрывает 80% задач: от базового позиционирования до анимаций. ## 1. Промт для Flexbox: центрирование и распределение **Текст промта:** «Напиши CSS для горизонтального центрирования трёх карточек внутри контейнера. Каждая карточка — 30% ширины, между ними отступ 20px. Используй Flexbox. Фон карточек — #f0f0f0, скругление углов 12px, тень box-shadow: 0 2px 8px rgba(0,0,0,0.1). Добавь медиа-запрос для экранов меньше 768px: карточки должны становиться на 100% ширины и располагаться вертикально.» **Результат:** ```css .container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .card { width: 30%; background: #f0f0f0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } @media (max-width: 768px) { .card { width: 100%; } } ``` **Комментарий:** Этот промт универсален. Меняйте цвета и отступы — структура остаётся. Я использую его для быстрого прототипирования лендингов. ## 2. Промт для CSS Grid: сложные сетки **Текст промта:** «Создай CSS Grid для галереи изображений: 4 колонки, ширина каждой — 1fr, отступы между ячейками 15px. Первая ячейка должна занимать 2 колонки по ширине и 2 строки по высоте. Используй grid-template-areas. Фон ячеек — #e0e0e0, высота по умолчанию 200px, для первой ячейки 420px.» **Результат:** ```css .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; grid-template-areas: "featured featured . ." "featured featured . ."; } .gallery__item { background: #e0e0e0; height: 200px; } .gallery__item--featured { grid-area: featured; height: 420px; } ``` **Комментарий:** Grid — мощный инструмент для нестандартных макетов. Этот промт спасает, когда дизайнер просит «выделить главный элемент». ## 3. Промт для адаптивной типографики **Текст промта:** «Напиши CSS с использованием clamp() для заголовков: h1 — от 2rem до 4rem, h2 — от 1.5rem до 3rem, основной текст — от 1rem до 1.25rem. Используй переменные CSS для цветов: —color-primary: #333, —color-secondary: #666. Добавь интерлиньяж 1.5 для body.» **Результат:** ```css :root { --color-primary: #333; --color-secondary: #666; } h1 { font-size: clamp(2rem, 4vw, 4rem); color: var(--color-primary); } h2 { font-size: clamp(1.5rem, 3vw, 3rem); color: var(--color-secondary); } p { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.5; } ``` **Комментарий:** clamp() — мой любимый CSS-функция. Она заменяет кучу медиа-запросов и делает типографику плавной. Источник: MDN Web Docs, раздел CSS clamp(). ## 4. Промт для CSS-анимации при скролле **Текст промта:** «Создай CSS-анимацию появления блока при скролле: элемент плавно появляется с opacity от 0 до 1 и смещением вверх на 50px. Используй @keyframes и класс .animate-on-scroll. Анимация должна длиться 0.6 секунды с easing ease-out. Добавь задержку 0.2 секунды.» **Результат:** ```css @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .animate-on-scroll { animation: fadeInUp 0.6s ease-out 0.2s both; } ``` **Комментарий:** Для триггера анимации при скролле используйте Intersection Observer API (JavaScript). Этот промт — основа для параллакс-эффектов. ## 5. Промт для кастомного скроллбара **Текст промта:** «Напиши CSS для кастомизации скроллбара в вебкит-браузерах: ширина 8px, цвет ползунка — #4A90D9, цвет трека — #f1f1f1, скругление 4px. Для Firefox используй scrollbar-width: thin и scrollbar-color: #4A90D9 #f1f1f1. Добавь hover-эффект: ползунок становится темнее на 20%.» **Результат:** ```css /* WebKit */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #4A90D9; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #357ABD; } /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #4A90D9 #f1f1f1; } ``` **Комментарий:** Скроллбар часто забывают, а он — часть UX. Этот промт делает интерфейс аккуратным. Проверено на Chrome 126 и Firefox 128. ## 6. Промт для адаптивного меню (гамбургер) **Текст промта:** «Напиши HTML и CSS для мобильного меню-гамбургера. На десктопе (шире 992px) — горизонтальное меню с логотипом слева и ссылками справа. На мобильных — скрытое меню, которое открывается по клику на иконку гамбургера (три полоски). Используй Flexbox. Ссылки: Главная, О нас, Услуги, Контакты. Цвет фона — #fff, текст — #333, активная ссылка — #4A90D9.» **Результат (фрагмент CSS):** ```css .nav { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 1rem 2rem; } .nav__links { display: flex; gap: 2rem; list-style: none; } .nav__link { color: #333; text-decoration: none; } .nav__link:hover { color: #4A90D9; } @media (max-width: 992px) { .nav__links { display: none; } .nav__links--open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } } ``` **Комментарий:** Этот промт — база для любого сайта. Обратите внимание: класс .nav__links—open добавляется через JavaScript. ASI Biont поддерживает подключение к сервисам анализа UX через API — подробнее на asibiont.com/courses. ## 7. Промт для CSS-сетки с фракциями **Текст промта:** «Создай CSS Grid для трёхколоночного макета: левая колонка — 250px, центральная — 1fr, правая — 200px. Высота — 100vh. Левая колонка — тёмный фон (#2c3e50), центральная — белый (#fff), правая — светло-серый (#ecf0f1). Добавь padding 20px для каждой колонки.» **Результат:** ```css .layout { display: grid; grid-template-columns: 250px 1fr 200px; height: 100vh; } .sidebar-left { background: #2c3e50; padding: 20px; } .content { background: #fff; padding: 20px; } .sidebar-right { background: #ecf0f1; padding: 20px; } ``` ## 8. Промт для эффекта наведения (hover) **Текст промта:** «Напиши CSS для карточки: при наведении она поднимается вверх на 10px, тень увеличивается до 0 8px 16px rgba(0,0,0,0.2), появляется тонкая граница цвета #4A90D9. Переход — 0.3 секунды ease. Фон карточки — #fff, padding 20px.» **Результат:** ```css .card { background: #fff; padding: 20px; transition: all 0.3s ease; border: 1px solid transparent; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); border-color: #4A90D9; } ``` ## 9. Промт для тёмной темы **Текст промта:** «Напиши CSS для тёмной темы с использованием prefers-color-scheme. Базовые цвета: фон — #fff, текст — #333. Для тёмной темы: фон — #1a1a2e, текст — #e0e0e0, ссылки — #64b5f6. Используй CSS-переменные. Добавь плавный переход для body — transition: background 0.3s, color 0.3s.» **Результат:** ```css :root { --bg: #fff; --text: #333; --link: #4A90D9; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1a2e; --text: #e0e0e0; --link: #64b5f6; } } body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } a { color: var(--link); } ``` ## 10. Промт для футера с иконками **Текст промта:** «Создай CSS для футера из трёх колонок: слева — копирайт, по центру — ссылки (Политика конфиденциальности, Условия использования), справа — иконки соцсетей (Twitter, GitHub). Используй Flexbox. Фон — #2c3e50, текст — #fff, ссылки — #bdc3c7, при наведении — #4A90D9. Padding по вертикали 2rem.» **Результат:** ```css .footer { display: flex; justify-content: space-between; align-items: center; background: #2c3e50; color: #fff; padding: 2rem; } .footer__links a { color: #bdc3c7; text-decoration: none; margin: 0 1rem; } .footer__links a:hover { color: #4A90D9; } .footer__social i { margin: 0 0.5rem; font-size: 1.5rem; color: #bdc3c7; } .footer__social i:hover { color: #4A90D9; } ``` ## Заключение Эти 10 промтов покрывают 90% задач, с которыми я сталкиваюсь ежедневно. Они экономят часы ручного кодинга и помогают сосредоточиться на архитектуре, а не на синтаксисе. Главное — адаптируйте промты под свои проекты: меняйте цвета, отступы, брейкпоинты. Помните, что AI — это инструмент, а не замена понимания CSS. Всегда проверяйте сгенерированный код в браузере. Удачной вёрстки!

10 промтов для HTML/CSS вёрстки: от макета до адаптива

Комментарии

Читайте также

15 промтов для SMM и контент-плана: посты, Stories, Reels, которые спасут ваш блог

Почему обучение по ПОД/ФТ в 2026 году требует большего, чем теория: взгляд на курс Asibiont

Product Management & Growth: Как стать продуктовым лидером в эпоху AI и данных

15 промтов для миграции кода: Python 2→3, JavaScript→TypeScript, REST→GraphQL

Mistral AI: Что нужно знать о главном европейском конкуренте OpenAI в 2026 году

Gobao выпустила АКБ для велосипедов с зарядкой до 80% за полчаса: обзор технологии, тесты и реальный опыт

Как AI-агент ASI Biont автоматизирует WooCommerce: от описаний товаров до SEO за 5 минут

Как обучение с ИИ раскрывает креативность: глубокое погружение в курс «Креативность и инновации» на Asibiont

«SQL и Базы данных»: Как заставить отчёты летать, а карьеру расти