15 промптов ChatGPT для веб-разработки: код, архитектура, SQL и документация

ChatGPT — полезный инструмент для разработчика, но только если правильно ставить задачи. Расплывчатый запрос даёт нерабочий код. Чёткий запрос с контекстом — рабочий черновик, который нужно только проверить. Собрали 15 промптов для реальных рабочих задач.

Важно перед использованием

Всегда указывайте: язык и версию, фреймворк, библиотеки которые уже используете, что уже пробовали. ChatGPT не знает ваш проект — давайте ему контекст. Всегда проверяйте сгенерированный код перед использованием в продакшене.

Архитектура и планирование

Архитектура веб-приложения:
Разработай архитектуру для [описание веб-приложения]. Стек: [язык, фреймворки]. Требования: [масштабируемость / высокая нагрузка / быстрая разработка / offline-поддержка]. Включи: диаграмму компонентов (текстом), выбор базы данных с обоснованием, структуру папок проекта, ключевые архитектурные решения и их трейдоффы.

Структура WordPress-сайта:
Я создаю WordPress-сайт для [описание бизнеса]. Предложи оптимальную структуру: разделы и страницы, навигацию, типы записей (Custom Post Types) если нужны, рекомендуемые плагины (по одному для каждой задачи), базовые требования к хостингу. Аудитория сайта: [описание].

Список технических навыков:
Составь структурированный список из 10 наиболее востребованных навыков и технологий для [позиция: junior / middle / senior] веб-разработчика в [специализация: frontend / backend / fullstack] в [год]. Для каждого: почему важен, уровень которого достаточно для работы, ресурс для изучения.

JavaScript и TypeScript

Найти и исправить баги в коде:
Проанализируй следующий [JavaScript / TypeScript] код и найди все баги, проблемы с производительностью и нарушения лучших практик. Для каждой проблемы: что именно не так, почему это проблема, исправленная версия кода. Затем покажи финальную исправленную версию целиком. [вставить код]

Продолжить незаконченный код:
Продолжи следующий JavaScript-код. Контекст: [что должна делать функция/модуль]. Существующие зависимости: [список]. Сохраняй стиль кодирования, комментарии и naming conventions из имеющегося кода. Объясни что добавил и почему. [вставить код]

Разобрать сложное регулярное выражение:
Объясни что делает это регулярное выражение: [вставить regex]. Разбери пошагово каждую часть паттерна. Приведи 3 примера строк, которые совпадают, и 3, которые не совпадают. Если есть потенциальные проблемы (backtracking, крайние случаи) — укажи их.

Backend и API

REST API эндпоинт на Node.js/Express:
Напиши REST API эндпоинт для [описание функциональности] с использованием Node.js и Express. Включи: валидацию входных данных, обработку ошибок (try/catch с правильными HTTP-статусами), middleware для [аутентификация / логирование / rate limiting], JSDoc-комментарии. Покажи также пример cURL-запроса для тестирования.

Server-side rendering с Next.js:
Покажи как реализовать [функциональность] с использованием Next.js App Router. Используй: Server Components там где возможно, правильное кэширование (fetch с revalidate), обработку ошибок через error.tsx и loading.tsx, TypeScript типы. Объясни почему выбрал Server vs Client Component для каждой части.

Sticky header — CSS + JavaScript:
Покажи реализацию sticky header для веб-сайта. Требования: появляется после скролла на 100px, скрывается при скролле вниз, появляется при скролле вверх, с плавной анимацией. Предоставь: CSS (с CSS custom properties), vanilla JS без зависимостей, объяснение как адаптировать под React/Vue.

Базы данных и SQL

Сложный SQL-запрос:
Напиши SQL-запрос для [описание задачи]. Структура БД: [описание таблиц и связей]. Требования к производительности: [миллионы строк / нужна индексация / частые запросы]. Включи: сам запрос, объяснение логики, рекомендации по индексам, альтернативный вариант если есть.

Оптимизировать медленный запрос:
Оптимизируй следующий SQL-запрос, который выполняется слишком медленно: [вставить запрос] Таблицы и их размеры: [описание]. Текущие индексы: [список]. Предложи: оптимизированный запрос, необходимые индексы (с синтаксисом CREATE INDEX), объяснение что ускорит и почему.

Документация и ревью

Написать docstring для функции:
Напиши полную документацию для следующей функции в формате [JSDoc / TSDoc / Python docstring]. Включи: описание что делает, параметры (тип, описание, обязательность, дефолтное значение), возвращаемое значение, возможные исключения, пример использования. [вставить функцию]

Код-ревью с рекомендациями:
Проведи код-ревью следующего кода. Оцени по критериям: корректность логики, читаемость, производительность, безопасность, тестируемость, соответствие принципам SOLID. Для каждой проблемы: описание, серьёзность (блокер / важное / minor), конкретное исправление. [вставить код]

UX-совет для LinkedIn:
Сформулируй один нетривиальный UX-инсайт о [тема: мобильные интерфейсы / формы / навигация / микровзаимодействия] который будет полезен дизайнерам и разработчикам. Формат LinkedIn-поста: конкретный пример, почему это важно, что сделать. До 150 слов, без общих фраз.

Производительность и безопасность

Аудит производительности фронтенда:
Проведи аудит производительности следующего компонента/страницы и предложи улучшения. Рассмотри: размер bundle, рендеринг (лишние ре-рендеры, memo), загрузку ресурсов (изображения, шрифты, скрипты), Core Web Vitals (LCP, FID, CLS). Для каждой проблемы — конкретное решение с кодом. [вставить код или описание страницы]

Главный принцип: давайте ChatGPT стек, версии зависимостей и конкретный контекст задачи. «Напиши API» — плохо. «Напиши GET /api/users эндпоинт на Express 4 + Prisma 5 + PostgreSQL, с JWT-аутентификацией и пагинацией» — хорошо.