(например, Algolia).
Профессиональный промпт: «Разработай документационный сайт на JAMstack с использованием Gatsby. Сайт должен генерировать страницы для разделов документации из Markdown-файлов. Добавь поисковый модуль, интегрированный с Algolia API, чтобы пользователи могли быстро находить нужные статьи. Дизайн должен быть минималистичным и удобным для чтения, с чёткой иерархией заголовков и адаптивной версткой для мобильных устройств.»
Ожидаемый результат: AI сгенерирует конфигурацию Gatsby для статической генерации страниц из Markdown, шаблоны для документации и интеграцию с Algolia для поиска. Это позволит начинающему вайб-кодеру создать удобный документационный сайт без написания сложного кода.
Интернет-магазин с поддержкой динамической каталогизации
Описание задачи: Создать простой интернет-магазин, где информация о товарах загружается через внешний API, а страницы генерируются статически для быстродействия. Использовать Next.js для создания сайта с динамическим подключением данных о продуктах, фильтрами и страницей деталей товара.
Профессиональный промпт: «Создай интернет-магазин на JAMstack с использованием Next.js. Главная страница должна выводить каталог товаров, данные о которых загружаются через внешний REST API. Обеспечь функциональность фильтрации товаров по категориям и ценовому диапазону. Каждая карточка товара должна вести на отдельную страницу с детальной информацией, включая изображения, описание и кнопку «Купить». Дизайн должен быть адаптивным и современным, с плавными анимациями переходов между страницами.»
Ожидаемый результат: AI сгенерирует проект Next.js, включающий API-запросы для получения данных о товарах, шаблоны для генерации статических страниц каталога и деталей товара, а также стили CSS для создания адаптивного дизайна. Промпт позволяет запустить интернет-магазин, не требуя глубоких знаний JavaScript.
Итоги
Каждый из приведённых примеров демонстрирует, как правильно структурированный и детализированный промпт для архитектуры JAMstack позволяет AI генерировать готовый к запуску код для различных типов веб-приложений. Основные рекомендации при составлении промптов для JAMstack:
Ясное описание функционала. Опишите, какие данные и как должны обрабатываться, а также как пользователи будут взаимодействовать с сайтом.
Разделение на статическую генерацию и динамическое подключение. Укажите, какие части сайта генерируются заранее, а какие – динамически через API.
Указание используемого фреймворка. Обязательно уточните, что решение должно быть реализовано с помощью Gatsby или Next.js для корректного формирования статической разметки.
Детальные требования к дизайну и адаптивности. Укажите необходимость современного и адаптивного дизайна, а также дополнительные функциональные элементы (поиск, фильтры, анимации).
Эти примеры помогут начинающему вайб-кодеру, не обладающему специальными знаниями, создавать масштабируемые и быстрые веб-приложения