OpaGPT Конструктор промптов для фронтенд-разработчика
ИИ-ассистенты ускоряют вёрстку, рефакторинг и генерацию компонентов. Чтобы получать точный код, пишите промпт по формуле: роль + контекст + задача + формат + ограничения.
Разбор эффективного промпта
- Роль — задаёт стиль ответа: «ты — senior frontend-разработчик».
- Контекст — стек, версия фреймворка, существующий код.
- Задача — конкретное действие: «создай компонент», «исправь баг».
- Формат — структура вывода: «код с комментариями», «перечисли варианты».
- Ограничения — запреты и требования: «без TypeScript», «адаптивность по БЭМ».
Готовые шаблоны запросов
| Ситуация | Шаблон | Настройка |
|---|---|---|
| Генерация компонента | «Ты — senior frontend. Создай компонент Button на React + TypeScript. Свойства: variant, size, disabled. Используй CSS Modules. Приведи код и пример использования». | Замените стек и список свойств под свой проект. |
| Рефакторинг | «Улучши этот код: [вставь код]. Сохрани поведение, разбей на функции, добавь JSDoc». | Укажите критерии: производительность, читаемость, тесты. |
| Адаптивность | «Сделай секцию адаптивной: mobile-first, брейкпоинты 576, 768, 992px. Используй Flexbox и clamp()». | Перечислите свои брейкпоинты и метод (grid/flex). |
Как настраивать промпты
- Уточняйте стек и версии: «React 18 + Next.js 14».
- Задавайте критерии приёмки: «валидный HTML, без console.log, доступность 100%».
- Просите альтернативы: «предложи 3 варианта решения с trade-off».
- Добавляйте примеры входных данных и ожидаемый результат.
Совет: один промпт — одна задача. Если нужно больше, разбейте на серию диалогов и уточняйте результат на каждом шаге.