Когда я впервые попробовал использовать промты для генерации кода, я думал, что это просто замена копипасты со Stack Overflow. Но за два года активного использования я понял: правильно составленный промт — это не просто запрос, а целая инженерная дисциплина. В 2026 году, когда AI-инструменты стали стандартом в веб-разработке, умение формулировать промты определяет, сколько времени вы тратите на рутину, а сколько — на архитектуру и креатив.
Согласно отчету State of AI in Software Development за 2025 год (исследование проводилось компанией CodeSignal), 78% разработчиков используют AI-ассистентов ежедневно, но только 23% из них применяют структурированные промты. Остальные тратят часы на итерации, пытаясь объяснить AI, что им нужно. В этой статье я собрал 15 проверенных промтов, которые я сам использую в работе каждый день. Они покрывают все этапы frontend-разработки: от генерации UI-компонентов до оптимизации производительности и написания тестов.
1. Генерация React-компонента с пропсами и типами
Промт:
Создай React-компонент `UserCard` на TypeScript. Он должен принимать пропсы `user: { name: string; email: string; avatarUrl?: string }` и `onClick?: () => void`. Используй функциональный компонент с хуками. Добавь стили через CSS-модули (файл `UserCard.module.css`). Покажи пример использования.
Почему это работает: Четкое описание пропсов, стилей и типа компонента позволяет AI сразу сгенерировать код, который не требует переделок. Я использую этот промт десятки раз в день — от простых кнопок до сложных дашбордов.
Пример результата:
// UserCard.tsx
import React from 'react';
import styles from './UserCard.module.css';
interface User {
name: string;
email: string;
avatarUrl?: string;
}
interface UserCardProps {
user: User;
onClick?: () => void;
}
export const UserCard: React.FC<UserCardProps> = ({ user, onClick }) => {
return (
<div className={styles.card} onClick={onClick}>
<img src={user.avatarUrl || '/default-avatar.png'} alt={user.name} className={styles.avatar} />
<div className={styles.info}>
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
</div>
);
};
2. Конвертация макета в адаптивный CSS
Промт:
У меня есть CSS-код для десктопной версии. Сделай его адаптивным для мобильных устройств (ширина 375px) и планшетов (768px). Используй mobile-first подход. Объясни, какие изменения ты внес.
Почему это работает: Вместо того чтобы вручную переписывать все медиа-запросы, я даю AI готовый код и прошу его адаптировать. Это экономит часы, особенно при работе с чужим legacy-кодом.
Пример:
/* Было: */
.container {
display: flex;
flex-direction: row;
gap: 20px;
padding: 40px;
}
/* Стало: */
.container {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
gap: 16px;
padding: 24px;
}
}
@media (min-width: 1024px) {
.container {
gap: 20px;
padding: 40px;
}
}
3. Создание CSS-анимации по описанию
Промт:
Создай CSS-анимацию для появления модального окна: плавное появление с прозрачности 0 до 1 и сдвигом вверх на 20px. Длительность 300ms, easing: ease-out. Добавь анимацию для оверлея (затемнение фона).
Почему это работает: AI отлично справляется с генерацией keyframes, особенно если вы описываете желаемый эффект словами. Это избавляет от необходимости помнить все свойства CSS-анимаций.
Пример:
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal {
animation: fadeInUp 300ms ease-out;
}
.overlay {
animation: fadeIn 300ms ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
4. Написание юнит-тестов для компонента
Промт:
Напиши юнит-тесты для React-компонента `UserCard` с помощью Jest и React Testing Library. Покрой следующие сценарии: отображение имени и email, отображение заглушки аватара, вызов onClick при клике.
Почему это работает: Тесты — это то, что разработчики часто откладывают на потом. С этим промтом AI генерирует тесты, которые покрывают основные кейсы, и я могу быстро их адаптировать под свои нужды.
Пример:
import { render, screen, fireEvent } from '@testing-library/react';
import { UserCard } from './UserCard';
describe('UserCard', () => {
const user = { name: 'Alice', email: 'alice@example.com' };
test('renders name and email', () => {
render(<UserCard user={user} />);
expect(screen.getByText('Alice')).toBeInTheDocument();
expect(screen.getByText('alice@example.com')).toBeInTheDocument();
});
test('renders default avatar when avatarUrl is missing', () => {
render(<UserCard user={user} />);
const img = screen.getByAltText('Alice');
expect(img).toHaveAttribute('src', '/default-avatar.png');
});
test('calls onClick when clicked', () => {
const onClick = jest.fn();
render(<UserCard user={user} onClick={onClick} />);
fireEvent.click(screen.getByText('Alice'));
expect(onClick).toHaveBeenCalled();
});
});
5. Оптимизация производительности React-компонента
Промт:
Проанализируй этот React-компонент и предложи оптимизации для улучшения производительности. Учти мемоизацию, ленивую загрузку, виртуализацию списков. Покажи измененный код.
Почему это работает: AI может выявить узкие места, такие как лишние рендеры, большие списки без виртуализации и т.д. Это особенно полезно при ревью кода.
Пример ответа:
// Было: компонент рендерился при каждом обновлении родителя
function List({ items }) {
return (
<ul>
{items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
);
}
// Стало: используем React.memo и useCallback
const List = React.memo(function List({ items, onSelect }) {
return (
<ul>
{items.map(item => (
<li key={item.id} onClick={() => onSelect(item.id)}>{item.name}</li>
))}
</ul>
);
});
function Parent() {
const [selectedId, setSelectedId] = useState(null);
const handleSelect = useCallback((id) => setSelectedId(id), []);
// ...
}
6. Генерация SVG-иконки по описанию
Промт:
Создай SVG-иконку корзины для удаления. Размер 24x24, stroke: currentColor, стиль outline. Используй стандартные иконки Feather Icons как референс.
Почему это работает: Вместо поиска иконки на сайтах, я просто описываю, что нужно, и получаю SVG, который можно встроить прямо в код.
Пример:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
7. Рефакторинг с использованием паттернов проектирования
Промт:
Отрефактори этот код, используя паттерн фабрика или стратегия. Объясни, почему это улучшит расширяемость.
Почему это работает: AI может предложить подходящий паттерн для конкретной задачи и переписать код, сохраняя функциональность.
8. Создание TypeScript-типов из JSON-ответа API
Промт:
Сгенерируй TypeScript-интерфейсы для следующего JSON-ответа API: [вставьте JSON]. Используй PascalCase для названий типов и camelCase для полей.
Почему это работает: Это экономит много времени при работе с новыми API. AI автоматически создает все необходимые типы, включая вложенные объекты и массивы.
9. Написание регулярного выражения для валидации
Промт:
Напиши регулярное выражение для валидации email-адреса в JavaScript. Учти простые адреса вроде test@example.com, но не слишком сложные. Объясни, как оно работает.
Почему это работает: Вместо того чтобы мучиться с регулярками, я прошу AI сгенерировать их и объяснить. Это полезно и для обучения.
10. Создание README для проекта
Промт:
Создай README.md для frontend-проекта. Включи: описание проекта, технологии (React, TypeScript, Vite), инструкцию по установке и запуску, структуру папок, примеры использования.
Почему это работает: Хорошая документация — залог поддержки проекта. AI генерирует структурированный README, который остается только дополнить деталями.
11. Генерация CSS-сетки по макету
Промт:
Создай CSS Grid layout для типичного макета: шапка, боковая панель слева, основной контент, футер. Ширина контента 1200px, отступы 24px. Используй grid-template-areas.
Почему это работает: AI быстро создает основу layout, которую можно адаптировать под конкретный дизайн.
12. Перевод кода на другую библиотеку/фреймворк
Промт:
Перепиши этот React-компонент с использованием Preact. Учти различия в импортах и API. Покажи оба варианта.
Почему это работает: Если вы переходите с одной библиотеки на другую, AI может автоматически конвертировать код, избавляя от рутинной работы.
13. Генерация мок-данных для разработки
Промт:
Сгенерируй массив из 20 объектов пользователей для мок-данных. Каждый объект должен содержать: id (UUID), name (случайное имя), email (валидный формат), age (от 18 до 60), role (одно из значений: admin, user, moderator).
Почему это работает: Мок-данные нужны почти в каждом проекте. AI генерирует их за секунды, а не вручную.
14. Создание кастомного хука
Промт:
Создай React-хук `useLocalStorage` для работы с localStorage. Он должен принимать ключ и начальное значение, возвращать значение и функцию для обновления. Обработай ошибки (например, недоступность localStorage).
Почему это работает: Кастомные хуки — часто используемый паттерн. AI генерирует их с учетом лучших практик.
15. Объяснение чужого кода
Промт:
Объясни, что делает этот код: [вставьте код]. Разбей по шагам, опиши назначение каждой функции и возможные побочные эффекты.
Почему это работает: Когда вы работаете с legacy-кодом или чужими проектами, этот промт помогает быстро разобраться. Я использую его, когда вступаю в новый проект.
Как я структурирую промты: три золотых правила
- Контекст — всегда указывайте стек технологий, версии библиотек и окружение.
- Конкретика — вместо «сделай красиво» пишите «используй цвет #333, шрифт Inter, отступы 16px».
- Ожидаемый результат — опишите, что должен сделать код, и попросите показать пример использования.
Эти правила я вывел из практики: без них AI генерирует абстрактный код, который приходится переписывать. С ними — код почти всегда работает с первого раза.
Вместо заключения
Эти 15 промтов — только вершина айсберга. Главное — не запоминать их, а понять принцип: чем точнее вы описываете задачу, тем лучше результат. Начните с этих промтов, адаптируйте под свой стиль, и вы заметите, как время на рутинные задачи сократится в разы. А если у вас есть свои любимые промты — делитесь в комментариях, я всегда ищу новые идеи.
Комментарии