OpaGPT Промпты для frontend-разработчика интернет-магазина
Эффективный промпт для ИИ — это задание, в котором учтены роль, контекст проекта и критерии приёмки. Для интернет-магазина важны скорость, SEO-разметка и адаптивность.
Структура эффективного промпта
| Компонент | Что указать |
|---|---|
| Роль | Ты — senior frontend-разработчик |
| Задача | Создать компонент «Карточка товара» |
| Контекст | Каталог на Next.js, стили CSS Modules |
| Формат | Код + пояснение ключевых решений |
| Ограничения | Без TypeScript, поддержка IE11 не нужна |
Разбор примера
Плохо: «Напиши код карточки товара». Хорошо: «Ты — frontend-разработчик. Создай компонент карточки товара для интернет-магазина на React. Используй Product из API: name, price, oldPrice, image, rating. Выведи скидку, рейтинг в виде звёзд, кнопку «В корзину». Стили — CSS Modules, классы BEM. Код должен быть доступным: alt, aria-label. Покажи код и перечисли, как проверить.»
Готовые шаблоны
- Код компонента: «Роль + задача + стек + API + требования к доступности + формат ответа».
- Рефакторинг: «Упрости этот код, сохрани поведение. Предложи 2 варианта и объясни разницу.»
- Верстка по макету: «Опиши сетку каталога по описанию макета. Используй Grid, укажи breakpoints для 320, 768, 1200px.»
- SEO-разметка: «Сгенерируй JSON-LD для товара: schema.org/Product. Включи offers, aggregateRating.»
Настройка: подставляйте специфику магазина: фреймворк, бэкенд, дизайн-систему, типы товаров. Уточните, что важно в ответе: код, пояснения, тесты, список рисков.
Совет: всегда указывайте «не делай» — например, не добавляй jQuery, не меняй API. Это сокращает итерации и убирает лишний код.
Как адаптировать шаблон
- Замените стек и версию библиотеки.
- Добавьте пример данных из вашего API.
- Опишите целевую аудиторию: мобильные, десктоп.
- Потребуйте чек-лист самопроверки.