Профессиональный промпт: «Создай интернет-магазин на JAMstack с использованием Next.js. Главная страница должна выводить каталог товаров, данные о которых загружаются через внешний REST API. Обеспечь функциональность фильтрации товаров по категориям и ценовому диапазону. Каждая карточка товара должна вести на отдельную страницу с детальной информацией, включая изображения, описание и кнопку «Купить». Дизайн должен быть адаптивным и современным, с плавными анимациями переходов между страницами.»

Ожидаемый результат: AI сгенерирует проект Next.js, включающий API-запросы для получения данных о товарах, шаблоны для генерации статических страниц каталога и деталей товара, а также стили CSS для создания адаптивного дизайна. Промпт позволяет запустить интернет-магазин, не требуя глубоких знаний JavaScript.

Итоги

Каждый из приведённых примеров демонстрирует, как правильно структурированный и детализированный промпт для архитектуры JAMstack позволяет AI генерировать готовый к запуску код для различных типов веб-приложений. Основные рекомендации при составлении промптов для JAMstack:

Ясное описание функционала. Опишите, какие данные и как должны обрабатываться, а также как пользователи будут взаимодействовать с сайтом.

Разделение на статическую генерацию и динамическое подключение. Укажите, какие части сайта генерируются заранее, а какие – динамически через API.

Указание используемого фреймворка. Обязательно уточните, что решение должно быть реализовано с помощью Gatsby или Next.js для корректного формирования статической разметки.

Детальные требования к дизайну и адаптивности. Укажите необходимость современного и адаптивного дизайна, а также дополнительные функциональные элементы (поиск, фильтры, анимации).

Эти примеры помогут начинающему вайб-кодеру, не обладающему специальными знаниями, создавать масштабируемые и быстрые веб-приложения на основе JAMstack, превращая идеи в рабочие проекты с помощью четко сформулированных промптов и возможностей AI.

.NET Stack – включает ASP.NET для серверной части, C как основной язык программирования, SQL Server для работы с базами данных и другие компоненты экосистемы Microsoft.

Корпоративный сайт с разделом новостей

Описание задачи: Создать корпоративный сайт, где на главной странице размещён раздел новостей. Каждая новость должна храниться в базе данных SQL Server, а система должна позволять создавать, редактировать и удалять новости через административную панель.

Профессиональный промпт: «Создай корпоративный сайт на базе ASP.NET MVC. На главной странице размести раздел новостей, где каждая новость берётся из SQL Server. Реализуй CRUD-операции для новостных записей с помощью Entity Framework. Используй C для серверной логики и Razor для представлений. Дизайн должен быть современным, адаптивным и оформленным в минималистичном стиле.»

Ожидаемый результат: AI сгенерирует шаблоны представлений Razor, контроллеры на C для обработки операций создания, чтения, обновления и удаления новостей, а также SQL-скрипты или миграции для создания необходимых таблиц в базе данных.

Система бронирования встреч для сотрудников

Описание задачи: Разработать веб-приложение для бронирования встреч внутри компании. Пользователи должны иметь возможность просматривать доступные временные интервалы, бронировать встречи и отменять их. Данные о встречах хранятся в SQL Server, а серверная логика реализована с использованием ASP.NET Core MVC и Entity Framework Core.

Профессиональный промпт: «Разработай систему бронирования встреч на ASP.NET Core. Приложение должно позволять сотрудникам просматривать календарь доступных временных интервалов, бронировать встречи и отменять их. Используй C для бизнес-логики, ASP.NET Core MVC для организации серверной части, и Entity Framework Core для работы с SQL Server. Интерфейс должен быть интуитивно понятным и адаптивным, с календарным представлением для выбора времени.»