Адаптивная вёрстка: responsive.md для ИИ-агента
Брейкпоинты, порядок блоков на телефоне и проверки по ширинам
Какую задачу решает
Задать ИИ правила адаптивной вёрстки под разные экраны
Что будет на выходе
Документ responsive.md: брейкпоинты, порядок блоков, проверки
- Кому подойдёт
Вайбкодер, у которого сайт разваливается на телефоне
- Тема
- Вайбкодинг
- Инструменты
- любой ИИ-чат
На ноутбуке страница выглядит как задумано, а на телефоне таблица тарифов уезжает за правый край, три карточки сжаты в столбики по два слова, а кнопка «Записаться» оказывается под четырьмя экранами отзывов. Агент делал «адаптив» сам, без правил, и на каждом блоке решил по-своему.
Промпт собирает файл responsive.md: на каких ширинах меняется раскладка, в каком порядке идут блоки на телефоне, что прячется или сворачивается, и как проверить результат. Файл кладёшь в проект и даёшь агенту перед любыми правками вёрстки.
Опиши блоки страницы по порядку и отметь, какое действие главное. ИИ решит, как каждый блок перестраивается на планшете и телефоне, и даст список ширин и проверок, по которым агент сверяет результат.
Что получишь
- 📏Брейкпоинты
Ширины, на которых меняется раскладка, привязанные к твоему стеку. Например, sm, md, lg в Tailwind.
- 🔀Порядок блоков
Что идёт первым на телефоне, что сворачивается, что уходит ниже, а главное действие остаётся рядом.
- 🔍Проверки
Ширины, на которых смотреть, и что должно быть на каждой: без горизонтальной прокрутки, кнопки нажимаются пальцем, текст читается.
Как использовать
- Выпиши блоки страницы сверху вниз, как они идут на компьютере: шапка, первый экран, преимущества, тарифы, отзывы, форма, подвал.
- Отметь главное действие страницы. На телефоне до него должно быть недалеко.
- Укажи стек. Если это Tailwind, ИИ опишет правила его классами, и агенту будет проще.
- Отправь промпт, ответь на вопросы, если они будут.
- Сохрани ответ как responsive.md и скажи агенту: «Переделай вёрстку по responsive.md, блок за блоком, и после каждого блока проверь на ширинах из раздела „Проверки“».
Рядом по теме: Мобильная версия без сюрпризов: чек-лист mobile-qa.md, Первая версия без лишнего: что делаем, а что нет, MVP на одну страницу: что делаем, а что нет, статья «Что такое вайбкодинг» и Чек-лист «Перед запуском» (бесплатно).
Что дальше
Если вёрстка уже готова и сломалась только на телефоне, быстрее пойти по гайду Почини вёрстку на телефоне и не устрой редизайн. Перед переделкой всей страницы составь мини-дизайн-систему, чтобы отступы и размеры были общими. А тексты для блоков лендинга собирает скилл Лендинг Мастер за 990 ₽.
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
