Руководство по промптам

Начинайте в чате проекта. Откройте чат проекта, который хотите изменить, затем выберите или упомяните агента, чья роль соответствует задаче. Если вы не уверены, какой агент подходит, попросите команду уточнить это до начала работы.

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

Позвольте команде задать вопросы до начала работы

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

Спросите у меня все, что вам нужно, чтобы полностью понять, чего я хочу, прежде чем вы начнете.

Часто вы получите вопросы, на которые сами не догадались бы ответить заранее, будь то пограничные случаи, аудитория или компромиссы. Уточнить это в начале стоит минуту; обнаружить это после выполнения работы означает переделку. В результате с первой попытки итог будет гораздо ближе к вашему замыслу.

Шаг 1: Определитесь до того, как начнете печатать

Поймите, что именно вы создаете

Несколько минут размышлений в начале могут сэкономить много повторных промптов позже. Прежде чем начать, убедитесь, что можете ответить на четыре простых вопроса: что вы создаете, для кого это, зачем они будут это использовать и какое основное действие вы хотите, чтобы они совершили.

Это основное действие часто называют CTA — сокращение от call to action. Это кнопка, ссылка или следующий шаг, который вы больше всего хотите, чтобы пользователи выбрали, например Sign Up, Book a Demo, Start Free или Buy Now.

Вам не нужно писать полную спецификацию. Цель лишь в том, чтобы задать проекту четкое направление. Чем конкретнее ваша отправная точка, тем проще получить результат, соответствующий тому, что вы задумали.

Создайте одностраничный сайт для приложения по ведению бюджета, ориентированного на фрилансеров. Основной CTA — “Start Saving Smarter.” Используйте смелый, выразительный стиль с крупной типографикой и яркими цветами.

Продумайте путь, а не только экраны

Хороший дизайн живет не только на экранах, но и между ними. Пройдите путь пользователя: что он видит сначала, что вызывает доверие, что придает уверенности действовать и к чему ведет это действие? Даже схема из трех шагов — hero, proof, call to action — делает ваши запросы значительно эффективнее, потому что у каждого раздела теперь есть причина существовать и причина вести к следующему.

Задайте визуальное направление заранее

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

Используйте спокойный дизайн в духе wellness: мягкие градиенты, приглушенные природные тона, скругленные углы, щедрые внутренние отступы. Общий тон — мягкий и успокаивающий.

Шаг 2: Пишите запросы, которые точно попадают в цель

Описывайте результат, а не реализацию

Описывайте результат, который хотите получить, а не шаги по его созданию. Например, “Add a pricing section with three options and make the middle one stand out” полезнее, чем подробно объяснять, как именно должна быть устроена страница. Сосредоточьтесь на том, что должно появиться и почему это важно; команда сама решит, как это реализовать.

Работайте по частям, а не страницами

Запросы, ограниченные одним компонентом — hero, сетка функций, ряд отзывов, таблица тарифов — дают вам ясность и контроль. Если какая-то часть не удалась, вы корректируете именно ее, а не генерируете заново все вокруг. Создайте блок, проверьте его, доработайте, затем переходите к следующему. Запрос на целую страницу создает шум; запрос на компонент создает сигнал.

Создайте секцию с функциями: заголовок по центру, затем три карточки в ряд, каждая с иконкой, заголовком и одной строкой описания. Мягкие тени, легкий подъем при наведении.

Используйте реальные слова

Текст-заполнитель скрывает проблемы; реальный текст их выявляет. Настоящему заголовку могут понадобиться две строки; настоящий CTA может лучше работать в форме глагола. Пишите то, что пользователь действительно будет читать, даже если это черновик: макеты, отступы и дизайнерские решения становятся лучше, когда контент реален.

Заголовок hero: “Design Calmly.” Подтекст: “Turn stress into structure.” CTA: “Start Building Free.” Макет с акцентом на текст и щедрыми вертикальными отступами.

Называйте реальные элементы

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

Конкретные запросы проще реализовать, чем общие. Начните с базового элемента, который вам нужен, а затем добавляйте детали по одной.

Создайте карточку профиля с фото, именем и кнопкой follow. Добавьте маленькую метку “Verified” рядом с именем и показывайте короткое пояснение при наведении на нее.

Шаг 3: Вносите изменения точно

Ограничивайте каждое изменение: что меняется, что остается

При корректировке существующей работы четко указывайте обе стороны: что должно измениться и что должно остаться нетронутым. Используйте такие слова, как “replace”, “update” и “adjust”, вместо “make this better”, и явно отделяйте части, которые вам нравятся. Такая точность не дает итерациям превратиться в откат назад.

Измените текст CTA на “Get Started” и увеличьте его горизонтальные внутренние отступы. Сохраните текущие цвета, шрифт и все остальное в этом разделе без изменений.

По одному значимому изменению за раз

Сначала обновите текст, затем макет, затем взаимодействия и проверяйте каждый результат перед следующим запросом. Небольшие, осознанные шаги складываются в отполированный продукт; десять изменений в одном сообщении складываются в неоднозначность, и если что-то пойдет не так, вы не поймете, какое именно изменение это вызвало.

Исправления по ходу задачи происходят в чате. Когда в вашем чате доступна Промпт Queue и работа Agent активна, последующие сообщения ставятся в очередь за уже выполняющейся работой. Убедитесь, что ваше сообщение появилось в очереди, прежде чем отправлять еще одну копию. Если элементы управления очередью не видны, не отправляйте повторно: дождитесь завершения текущей работы или используйте элемент управления прерыванием, если он доступен в вашем чате, затем подтвердите статус задачи перед отправкой следующего сообщения. Подробности см. в статье Чат проекта.

Думайте на шаг впереди интерфейса

Если вашему проекту нужно не только хорошо выглядеть, но и делать больше, чем просто производить впечатление, определяйте поведение наряду с внешним видом. Укажите, что пользователи видят, когда вошли в систему или вышли из нее, откуда берется динамический контент и как интерфейс обрабатывает пустые, загрузочные и ошибочные состояния. Вам не нужен работающий backend, чтобы проектировать с учетом этих сценариев — раннее планирование помогает избежать серьезной переделки UI позже.

Если пользователь вошел в систему, показывайте его аватар и имя в правом верхнем углу. Если нет, показывайте кнопку “Log In”, которая ведет на экран авторизации.

FAQ

Как написать эффективный промпт для AI agent?

Структурируйте свой промпт с помощью этих ключевых элементов:

1. Контекст — Опишите ситуацию. Объясните, что вы создаете и на каком этапе сейчас все находится.

2. Цель — Четко укажите точный результат или функцию, которую хотите получить.

3. Требования & ограничения — Ясно перечислите, что должно измениться и что должно остаться нетронутым.

4. Ожидаемый результат — Определите, как выглядит успех (например, поведение UI, обработка ошибок, сохранение состояния).

5. Материалы — По возможности прикладывайте скриншоты, ссылки, шаги рабочего процесса или примеры кода. Перед отправкой удаляйте пароли, коды подтверждения, API keys, cookies, персональные данные и платежные реквизиты.

Пример: "Я создаю dashboard с боковой панелью. Добавьте кнопку выхода в нижнюю часть боковой панели. Она должна очищать сессию и перенаправлять на /login. Не изменяйте макет боковой панели или навигационные ссылки. После нажатия пользователь должен увидеть страницу входа в течение 1 секунды."

Как обрабатывать сложные запросы, которые включают несколько функций?

Для сложных запросов разбивайте их на более мелкие задачи:

1. Опишите текущую проблему и конечную цель.

2. Перечислите каждую подзадачу отдельно (задача 1, задача 2, задача 3).

3. Проверяйте каждую задачу перед переходом к следующей.

4. В конце протестируйте полный сценарий.

Такой подход уменьшает количество неожиданных изменений, когда вы просите Agent сделать слишком много за один раз. Каждый промпт должен быть сосредоточен на одном проверяемом результате.

Как написать промпт для исправления ошибки?

Полезный промпт для исправления ошибки должен включать:

• Страницу, функцию, окружение и затронутых пользователей
• Точные шаги для воспроизведения проблемы
• Фактическое поведение и ожидаемое поведение
• Полный текст ошибки и момент, когда она возникла
• Соответствующие скриншоты или логи, из которых удалены пароли, tokens, cookies, персональные данные и платежные реквизиты
• Что должно остаться без изменений
• Как проверить исправление и какие проверки на регрессию нужно выполнить

Пример: “На странице оформления заказа в Preview при выборе Submit возвращается ошибка 500. Ожидается: заказ подтвержден, и пользователь попадает на страницу благодарности. Воспроизведение: [steps]. Исправьте причину, не изменяя итоговые суммы корзины или процесс оплаты, затем проверьте один успешный и один отклоненный платеж. Я удалил все секретные значения из приложенного лога.”

Как написать промпт для изменения макета страницы или стилей?

При запросе изменений страницы укажите:

1. Конкретную страницу, модуль и элемент, которые нужно изменить.

2. Текущее состояние и целевой результат.

3. Ссылки на материалы или скриншоты.

4. Функции, которые должны остаться без изменений.

5. Критерии приемки (например, должно работать и на desktop, и на mobile).

Пример: "На странице /pricing измените сетку карточек тарифов с 2 колонок на 3 колонки на desktop. На mobile сохраните макет в одну колонку. Ориентируйтесь на этот скриншот [attach]. Не изменяйте содержимое карточек или стили кнопок."

Что делать, если агент продолжает вносить неправильные изменения, несмотря на исправления?

Если Agent снова и снова промахивается мимо цели, дополнительные инструкции иногда только усиливают путаницу. Вместо этого:

1. Сохраните текущее состояние — Прекратите отправлять пересекающиеся исправления. Если в вашем чате есть элемент управления Revert, прочитайте текст подтверждения перед его использованием, отметьте все более поздние изменения, которые нужно сохранить, и затем проверьте проект. Если объем изменений неясен, не продолжайте; воспользуйтесь рекомендациями Чат проекта или обратитесь в Support, приложив отредактированные Chat Link и скриншот.

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

3. По одной задаче за раз — Сосредоточьтесь на решении одной проблемы, прежде чем переходить к следующей.

Если сделать шаг назад и вносить изменения постепенно, это обычно решает проблемы гораздо быстрее, чем попытки исправить несколько пересекающихся проблем в одном промпте.