Вы замечали, что одна и та же задача — например, «сделай модалку» — у одних разработчиков занимает час, а у других пятнадцать минут? Дело не в скорости печати, а в умении формулировать запросы к ИИ. Среднестатистический фронтендер тратит до 30% рабочего времени на рутинные операции: написание шаблонных компонентов, типов, стилей. Грамотный промт сокращает это время вдвое, а иногда и втрое. Я собрал 15 промтов, которые реально использую в работе с React, Vue и Nuxt. Они закрывают самые частые боли: от генерации компонентов до оптимизации производительности. Каждый промт — с пояснением, почему он работает, и примером результата.
Эта подборка не про абстрактные «напиши код». Она про конкретные формулировки, которые заставляют нейросеть думать как senior-разработчик: учитывать edge cases, типизацию, доступность и структуру проекта.
Промты для React: от компонентов до хуков
1. Генерация компонента с пропсами и типами
Задача: Создать переиспользуемый компонент кнопки с вариантами, размерами и загрузкой.
Промт:
Создай компонент Button для React + TypeScript. Требования:
- пропсы: variant ('primary'
| 'secondary' | 'ghost'), size ('sm' | 'md' | 'lg'), loading?: boolean, disabled?: boolean, children: React.ReactNode
- используй CSS-модули для стилей
- добавь обработку loading: показывай спиннер и блокируй клики
- экспортируй тип ButtonProps
- в комментариях JSDoc опиши каждый проп
Почему работает: Чётко перечислены требования, типы, ожидаемый результат. Нейросеть не гадает, а следует спецификации.
Пример результата (фрагмент):
import styles from './Button.module.css';
import { Spinner } from './Spinner';
export type ButtonProps = {
variant?: 'primary'
| 'secondary' | 'ghost';
size?: 'sm'
| 'md' | 'lg';
loading?: boolean;
disabled?: boolean;
children: React.ReactNode;
};
export const Button = ({ variant = 'primary', size = 'md', loading, disabled, children }: ButtonProps) => {
const classes = [styles.btn, styles[variant], styles[size], loading ? styles.loading : ''].join(' ');
return (
<button className={classes} disabled={disabled || loading}>
{loading && <Spinner />}
{children}
</button>
);
};
2. Кастомный хук для работы с API
Задача: Создать хук, который абстрагирует загрузку данных с сервера, включая состояние, ошибки и отмену запроса.
Промт:
Напиши хук useFetch для React. Он должен принимать URL и параметры запроса, возвращать { data, error, isLoading, refetch }. Используй fetch и AbortController для отмены запроса при размонтировании. Типизируй возвращаемые данные через дженерик. Добавь обработку ошибок: если ответ не ok — выбрасывай ошибку с текстом из тела ответа.
Пример результата:
function useFetch<T>(url: string, params?: RequestInit) {
const [data, setData] = useState<T | null>(null);
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true);
const refetch = useCallback(async () => {
const controller = new AbortController();
setIsLoading(true);
try {
const res = await fetch(url, { ...params, signal: controller.signal });
if (!res.ok) throw new Error(await res.text());
setData(await res.json());
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
} finally {
setIsLoading(false);
}
}, [url, params]);
useEffect(() => {
refetch();
return () => controller.abort();
}, [refetch]);
return { data, error, isLoading, refetch };
}
3. Оптимизация производительности с React.memo и useCallback
Задача: Избавиться от лишних ререндеров в списке элементов.
Промт:
У меня есть компонент List, который рендерит 1000 элементов. Каждый элемент — сложный компонент Item. При изменении одного элемента перерисовывается весь список. Предложи оптимизацию: используй React.memo для Item, передавай стабильные колбэки через useCallback, а для списка используй виртуализацию, если нужно. Покажи код до и после оптимизации.
Пример результата:
const Item = memo(({ item, onToggle }) => {
// сложный рендер
return <div onClick={() => onToggle(item.id)}>{item.title}</div>;
});
function List({ items }) {
const handleToggle = useCallback((id) => {
// обновление состояния
}, []);
return (
<div>
{items.map(item => <Item key={item.id} item={item} onToggle={handleToggle} />)}
</div>
);
}
Промты для Vue и Nuxt
4. Композабл для пагинации
Задача: Создать переиспользуемый композабл для пагинации в Vue 3.
Промт:
Напиши композабл usePagination для Vue 3 Composition API. Он должен принимать общее количество страниц и текущую страницу (ref), возвращать массив страниц для отображения (с многоточиями), функции next, prev, setPage. Обработай крайние случаи: первая страница, последняя, маленькое общее число страниц.
Пример результата (фрагмент):
function usePagination(totalPages: number, currentPage: Ref<number>) {
const pages = computed(() => {
const result = [];
// логика с многоточиями
return result;
});
const next = () => { if (currentPage.value < totalPages) currentPage.value++; };
const prev = () => { if (currentPage.value > 1) currentPage.value--; };
return { pages, next, prev, setPage };
}
5. Middleware для авторизации в Nuxt
Задача: Защитить роут от неавторизованных пользователей.
Промт:
Создай middleware для Nuxt 3, который проверяет наличие токена в cookie (например, 'auth_token'). Если токена нет — редирект на страницу логина. Если есть — запрашивай данные пользователя через fetch и сохраняй в store (Pinia). Обработай случай, когда токен невалиден (ошибка 401) — удали токен и редирект на логин.
Пример результата:
export default defineNuxtRouteMiddleware(async (to) => {
const token = useCookie('auth_token');
if (!token.value) return navigateTo('/login');
try {
const user = await $fetch('/api/me', { headers: { Authorization: `Bearer ${token.value}` } });
const store = useAuthStore();
store.setUser(user);
} catch (err) {
if (err.statusCode === 401) {
token.value = null;
return navigateTo('/login');
}
}
});
6. Директив для анимации появления
Задача: Реализовать плавное появление элементов при скролле.
Промт:
Напиши кастомную директиву v-fade для Vue 3. При монтировании элемента она добавляет класс 'v-fade-enter', при пересечении с viewport (через IntersectionObserver) — удаляет его и запускает CSS-переход. Учитывай отключение на устройствах с prefers-reduced-motion.
Промты для типизации и архитектуры
7. Генерация TypeScript-типов из API-ответа
Задача: Создать типы для ответа от сервера на основе примера JSON.
Промт:
Преобразуй этот JSON в TypeScript интерфейсы. Учти вложенные объекты и массивы. Используй enum для полей со значениями 'active'
| 'inactive' | 'pending'. Добавь комментарии к полям, которые могут быть null.
Пример JSON: { "id": 1, "name": "John", "status": "active", "tags": ["a", "b"], "profile": { "age": 30, "city": "New York" } }
8. Рефакторинг с использованием паттерна Builder
Задача: Упростить создание сложного объекта конфигурации.
Промт:
У меня есть класс Config с 10 полями и множеством условий при создании. Предложи рефакторинг с паттерном Builder. Покажи, как изменится код создания экземпляра, и какие плюсы это даст.
Промты для стилей и UI-китов
9. Токены дизайн-системы
Задача: Сгенерировать CSS-переменные для цветов и типографики.
Промт:
Создай набор CSS-переменных (:root) для цветовой палитры (primary, secondary, accent, background, text) и типографики (шрифты, размеры, межстрочный интервал). Используй формат HSL для цветов. Добавь переменные для теней и радиусов.
10. Адаптивная сетка на CSS Grid
Задача: Сверстать карточки товаров, которые на десктопе — 4 колонки, на планшете — 2, на телефоне — 1.
Промт:
Создай CSS Grid для списка карточек. На десктопе (>=1024px) — 4 колонки, на планшете (768-1023px) — 2, на мобильном (<768px) — 1. Расстояние между карточками — 16px. Карточки должны быть одинаковой высоты. Используй grid-template-columns с auto-fit и minmax.
Продвинутые техники и оптимизация
11. Оптимизация бандла
Задача: Уменьшить размер итогового JS-бандла.
Промт:
Проанализируй типичный код React-приложения и предложи способы уменьшить размер бандла: code splitting через React.lazy, замена библиотеки (например, moment на date-fns), удаление мёртвого кода. Покажи примеры до и после.
12. Написание unit-тестов
Задача: Покрыть тестами компонент формы.
Промт:
Напиши unit-тесты для компонента LoginForm (React Testing Library + Jest). Проверь: рендер полей, валидацию email, отправку данных с правильными параметрами, отображение ошибки при неверных данных.
13. Доступность (a11y)
Задача: Сделать компонент аккордеона доступным.
Промт:
Создай компонент Accordion, который полностью соответствует WAI-ARIA Authoring Practices. Управление с клавиатуры (стрелки, Home/End). Используй кнопки с aria-expanded, регионы с role=region и aria-labelledby.
14. Генерация документации
Задача: Создать README для компонента.
Промт:
Создай README для компонента Button. Опиши: назначение, установку, использование (пример кода), пропсы (таблицей), варианты, кастомизацию. Добавь бейджи (npm, build).
15. Код-ревью
Задача: Найти ошибки в коде.
Промт:
Проведи код-ревью следующего кода. Найди потенциальные проблемы: memory leaks, race conditions, неправильную обработку ошибок, проблемы с производительностью. Предложи конкретные исправления.
[вставьте код]
Как получить максимум от промтов: 3 совета
- Уточняйте контекст. Добавьте информацию о вашей версии фреймворка (например, React 18 vs 19, Vue 3.4). Это критично, так как API меняется.
- Используйте итеративный подход. Первый ответ — черновик. Уточняйте детали: «сделай более переиспользуемым», «убери зависимость от lodash».
- Проверяйте сгенерированный код. Бездумное копирование — путь к багам. Всегда запускайте тесты и линтеры.
Заключение
ИИ — это не замена разработчику, а мощный ускоритель. Правильно сформулированный промт экономит часы работы и помогает поддерживать высокое качество кода. Начните с этих 15 шаблонов, адаптируйте их под свои задачи и экспериментируйте. Со временем вы выработаете собственный стиль общения с нейросетью, а рутина перестанет отнимать силы. Помните: лучший промт — тот, который даёт вам контроль над результатом. Пробуйте, тестируйте и делитесь своими находками в комментариях!
Комментарии