Промт для создания сайта (с примерами готовых промтов)

Способен ли искусственный интеллект заменить команду профессиональных разработчиков? Мечтатели полагают, что достаточно ввести в чат-строку пару слов вроде «создай мне крутой магазин», чтобы уже завтра стать владельцем цифровой империи уровня Amazon. Реальность же, как водится, бьёт наотмашь: без чёткого технического задания и понимания внутренней кухни нейросеть выдает лишь безжизненный набор тегов или откровенную галиматью. Проблема здесь кроется вовсе не в ограниченности алгоритмов, а в неумении человека правильно сформулировать запрос. Ведь промт — это не просто просьба, а самый настоящий программный код, только написанный на естественном языке. И чтобы получить на выходе добротный, рабочий продукт, а не цифровую «кашу», придётся освоить искусство общения с машиной, превращая абстрактные «хотелки» в жёсткую логическую структуру. Начать же стоит с фундамента — определения роли.

С чего начинается диалог?

С установки контекста. Представьте, что вы нанимаете сотрудника. Если вы скажете ему «сделай что-нибудь», результат будет соответствующим. Поэтому первый шаг — это присвоение нейросети конкретной квалификации (Role Prompting). Вы должны сказать машине, кто она есть. Простейший пример, который, впрочем, работает довольно неплохо:

«Действуй как Senior Frontend Developer с 10-летним опытом работы с React и Tailwind CSS».

Зачем это нужно? Дело в том, что языковая модель обучалась на миллиардах текстов, от форумов домохозяек до документации NASA. Задавая роль, вы отсекаете лишний шум и заставляете алгоритм обращаться к профильному сегменту знаний.

Но ограничиваться одной лишь ролью не стоит. Сразу после «назначения на должность» следует описать задачу. И вот тут многие совершают фатальную ошибку, пытаясь запихнуть в один запрос создание целого портала. Это так не работает. Машине нужно скармливать слона по частям. Начните со структуры или прототипа. Пример рабочего запроса может звучать так:

«Твоя задача — спроектировать структуру Landing Page для кофейни спешелти-сегмента. Целевая аудитория — хипстеры и удалёнщики. Тон — дружелюбный, минималистичный. Опиши секции сайта, их последовательность и ключевые элементы интерфейса (CTA-кнопки, формы)».

Такой подход позволяет сначала утвердить «чертёж», а уже потом переходить к кладке «кирпичей».

Промт для вёрстки: Landing Page

Когда структура утверждена, можно приступать к кодингу. И здесь важна дьявольская детализация. Если вы просто попросите «напиши код», нейросеть может выдать вам чистый HTML образца 2005 года. Уточняйте стек технологий. Допустим, нам нужен современный одностраничник. Вводим следующий запрос:

«Напиши полный код для секции Hero (первый экран) ранее обсужденного сайта кофейни. Используй HTML5 и CSS-фреймворк Tailwind (подключение через CDN). Фон — тёмный (#1a1a1a), заголовок — крупная типографика белого цвета, подзаголовок — серый. По центру — кнопка «Заказать столик» с ховер-эффектом (смена цвета на оранжевый). Код должен быть семантическим, адаптивным для мобильных устройств».

Обратите внимание на конструкцию. Сначала идет техническое требование (HTML + Tailwind), затем визуальные параметры (цвета, поведение кнопок), и, наконец, условия адаптивности. Нейросеть поймёт, что от неё требуется не абстрактная «красота», а конкретные классы и стили. Следующим шагом можно попросить сгенерировать блок «О нас» или «Меню», используя тот же стиль.

«Теперь создай секцию «Наше меню». Используй CSS Grid для отображения карточек товаров (3 колонки на десктопе, 1 на мобильном). В карточке должно быть: изображение-заглушка, название напитка, описание и цена».

Подобная разбивка на итерации — это, пожалуй, единственный способ получить валидный код, который не придётся переписывать с нуля.

А что насчёт функционала?

Красивая картинка — это лишь половина дела. Сайт должен работать. И здесь мы вступаем на территорию JavaScript. Сложно ли заставить ИИ писать скрипты? Довольно просто, если вы понимаете логику работы браузера. Допустим, нам нужен калькулятор стоимости ремонта. Наивный запрос «сделай калькулятор» приведёт к появлению примитивной формы, которая, скорее всего, ничего не будет считать.

Правильный подход выглядит иначе. Сначала опишите логику вычислений.

«Напиши JavaScript-код для калькулятора. Входные данные: площадь помещения (input type number), тип ремонта (select: косметический, капитальный, дизайнерский). Базовая цена за метр: 5000, 10000 и 20000 соответственно. При нажатии на кнопку «Рассчитать» скрипт должен брать значение площади, умножать на коэффициент типа ремонта и выводить итог в div с id=»result». Обработай также ошибку, если поле площади пустое».

Такой промт работает безотказно. Вы даёте алгоритм, а нейросеть переводит его на язык JS. К слову, львиная доля ошибок в коде, сгенерированном ИИ, приходится именно на логические нестыковки, когда пользователь забывает указать условия («что делать, если…»). Не забудьте попросить прокомментировать каждую строку кода — это спасательный круг для новичка, когда придётся вносить правки вручную. И, кстати, всегда просите разделять HTML, CSS и JS на разные блоки или файлы, иначе модель может выдать «спагетти-код», где всё намешано в одну кучу.

Работа с базами данных

Если ваш проект выходит за рамки простой визитки, вам неизбежно придётся столкнуться с бэкендом и базами данных. Доверить проектирование архитектуры БД нейросети — решение смелое, но вполне оправданное на этапе прототипирования. Главное здесь — описать связи между сущностями. Не стоит писать «сделай базу для магазина». Это слишком размыто.

Попробуйте следующий вариант:

«Я разрабатываю интернет-магазин одежды. Действуй как SQL-архитектор. Спроектируй схему базы данных PostgreSQL. Мне нужны таблицы: Users (покупатели), Products (товары), Categories (категории), Orders (заказы) и OrderItems (состав заказа). Учти связи: один товар может быть только в одной категории, в одном заказе может быть много товаров. Напиши SQL-запрос для создания этих таблиц с правильными типами данных и внешними ключами (Foreign Keys)».

Удивительно, но с такими задачами модели справляются даже лучше, чем с творческим копирайтингом. SQL — язык строгой логики, и ИИ чувствует себя в нём как рыба в воде. Однако подводные камни есть и здесь. Обязательно проверяйте типы данных (например, для денег лучше использовать DECIMAL, а не FLOAT, о чём ИИ иногда «забывает»). И ещё один нюанс: после генерации схемы сразу попросите наполнить её тестовыми данными. «Напиши SQL-скрипт для вставки 5 тестовых пользователей и 10 товаров, чтобы я мог проверить работу базы». Это сэкономит вам уйму времени.

SEO и наполнение контентом

Сайт готов, код валиден, база данных развернута. Но в поиске его нет. Почему? Потому что пустая оболочка никому не интересна. Наполнение сайта контентом и мета-тегами — этап, который многие откладывают на потом, а зря. Ведь именно сейчас нейросеть может проявить себя во всей красе. Однако и тут есть свои правила. Не просите «написать текст для главной». Вы получите набор штампов про «динамично развивающуюся компанию» и «индивидуальный подход».

Действуйте хитрее. Используйте промт для генерации семантической разметки и мета-данных.

«Действуй как SEO-специалист. Для созданной нами страницы кофейни сгенерируй содержимое тегов