OpaGPT Конструктор промптов для frontend-разработчика
Маркетплейсы требуют быстрой разработки и адаптации интерфейсов. ИИ-ассистенты помогают генерировать код, но результат зависит от качества промпта. Разберём структуру эффективного запроса.
Структура промпта
Эффективный промпт состоит из четырёх блоков: роль, контекст, задача, требования.
| Блок | Назначение | Пример |
|---|---|---|
| Роль | Задаёт уровень экспертизы | Ты senior frontend-разработчик |
| Контекст | Описывает проект | Маркетплейс на React, Next.js, TypeScript |
| Задача | Что нужно сделать | Создай компонент карточки товара |
| Требования | Ограничения | Без UI-библиотек, CSS Modules, SSR |
- Указывайте стек технологий и версии.
- Описывайте структуру данных из API.
- Задавайте стиль кода и доступность.
Готовые шаблоны запросов
Шаблон 1. Генерация карточки товара
Ты frontend-разработчик маркетплейса. Стек: React 18, TypeScript, CSS Modules. Создай компонент ProductCard для списка товаров. На вход product: { id, title, price, oldPrice, rating, image }. Выводи цену со скидкой, рейтинг звёздами. Добавь кнопку «В корзину». Используй aria-label, семантическую разметку, loading='lazy'.
Пояснение: промпт покрывает роль, стек, входные данные, UI-элементы и требования к производительности. Модель вернёт полный код.
Шаблон 2. Оптимизация рендера списка
Предложи способы ускорить рендер списка из 1000 товаров в React. Код: [вставьте код]. Учти виртуализацию, мемоизацию, пагинацию. Дай примеры с react-window или react-virtualized.
Пояснение: если добавить текущий код и ограничения, получаем адресные рекомендации, а не общую теорию.
Шаблон 3. Адаптация под требования маркетплейса
Проверь вёрстку карточки на соответствие требованиям Ozon: размер изображения 600x600, кнопка «Купить» с брендированием, отзывы в 2 строки. Ниже код компонента. Найди несоответствия и исправь.
Пояснение: шаблон задаёт внешний стандарт и просит найти дельту между текущим кодом и требованиями.
Как настраивать промпты под свои задачи
- Начните с роли и контекста проекта.
- Добавьте конкретную задачу с примерами данных.
- Укажите желаемый формат ответа: код, список шагов, таблицу.
- Ограничьте библиотеки и инструменты.
- Уточните требования к тестам и доступности.
- Итерируйте: уточняйте промпт, если ответ не подошёл.
- Храните удачные промпты в отдельном файле.
- Используйте переменные: {stack}, {задача}.
- Проверяйте сгенерированный код на реальных данных.