Промпты: фронтенд

Готовые формулировки под конкретные задачи: собрать проект, найти баг, отрефакторить, написать тесты. Копируйте целиком — они рассчитаны на агентные режимы Cursor, Claude Code и Windsurf. У каждого промпта написано, зачем в нём та или иная строка.

Свёрстать блок по описанию

v0 · Cursor
Свёрстай {блок}: {описание содержимого}.
Стек: {…}. Существующие компоненты переиспользуй,
новые создавай только если без них никак.
Адаптив: {точки перелома}.
Цвета и шрифты бери из существующих переменных.

Указание на переиспользование не даёт агенту наплодить дубли компонентов.

Починить адаптивную вёрстку

Любой агент
На экране шириной {ширина} ломается {что именно}.
Покажи причину: какое свойство даёт переполнение.
Почини минимальной правкой, не переписывая
всю раскладку блока.

Локальная правка вместо переписывания всего блока.

Привести к дизайн-системе

Любой агент
Вот компонент: {файл}. Вот наши токены: {файл}.
Замени захардкоженные цвета, отступы и размеры
на переменные из дизайн-системы.
Если для значения нет подходящего токена —
не придумывай, а выпиши его списком.

Оговорка про отсутствующие токены не даёт агенту изобретать новые значения.

Доступность интерфейса

Любой агент
Проверь {компонент} на доступность:
семантика тегов, фокус с клавиатуры, подписи
к полям и кнопкам, контраст, состояния
для скринридера.
Выдай список проблем с приоритетом.
Правки — после подтверждения.

Доступность агент делает хорошо, но только если попросить явно.

Оптимизировать загрузку страницы

Любой агент
Страница {путь} грузится медленно.
Проверь: размер и формат картинок, блокирующие
скрипты и стили, шрифты, лишние запросы.
Выдай список с оценкой выигрыша по каждому пункту.
Начни с того, что даёт наибольший эффект.

Приоритизация по выигрышу вместо длинного списка мелочей.

Состояния интерфейса

Любой агент
Для {компонент} реализуй состояния:
загрузка, пусто, ошибка, успех.
Для каждого — что видит пользователь и что
может сделать дальше.
Сначала опиши текстом, потом код.

Состояния «пусто» и «ошибка» забывают чаще всего.

Как пользоваться промптами

Фигурные скобки — это места, куда нужно подставить своё: {стек}, {файл}, {текст ошибки}. Промпт без подстановки работать будет, но хуже: агент начнёт угадывать.

Второе правило — не склеивать несколько промптов в один запрос. Каждый рассчитан на одну задачу, и вместе они дают три посредственных результата вместо одного хорошего.

Что работает лучше промптов

Файл правил проекта в корне репозитория. То, что вы иначе повторяли бы в каждом сообщении — стек, запреты, порядок работы, — пишется один раз и действует во всех сессиях у всей команды.

Как его составить, разобрано в гайде «Правила проекта для агента».