Руководство по промптам
Определитесь до того, как начнете печатать, собирайте по частям, используйте реальный контент и направляйте каждый запрос подходящему agent. Эти привычки превращают идеи в одну строку в готовые результаты.
Определитесь до того, как начнете печатать, собирайте по частям, используйте реальный контент и направляйте каждый запрос подходящему agent. Эти привычки превращают идеи в одну строку в готовые результаты.
Начинайте в чате проекта. Откройте чат проекта, который хотите изменить, затем выберите или укажите agent, чья роль соответствует задаче. Если вы не уверены, какой agent подходит, попросите команду уточнить это до начала работы.
В этом руководстве собраны приемы, которые стабильно помогают получать лучшие результаты от вашей команды agent. Ни один из них не требует особых навыков. Важно то, что вы говорите, а не то, как вы это форматируете. Пишете ли вы свой самый первый запрос или дорабатываете зрелый проект, действуют одни и те же принципы: ясное мышление на входе — ясные результаты на выходе.
Позвольте команде задать вопросы до начала работы
Один из самых эффективных способов получить лучший результат: если запрос большой или расплывчатый, предложите задавать вопросы вместо того, чтобы надеяться, что команда сама все правильно поймет. Сформулируйте, чего вы хотите, а затем добавьте в конце одну строку:
Задайте мне любые вопросы, которые нужны, чтобы полностью понять, чего я хочу, прежде чем вы начнете.
Часто вы получите вопросы, на которые сами не догадались бы ответить заранее, будь то крайние случаи, аудитория или компромиссы. Уточнить это в начале стоит минуту; обнаружить это после сборки означает переделку. В результате итог с первой попытки оказывается гораздо ближе к вашему замыслу.
Шаг 1: Определитесь до того, как начнете печатать
Поймите, что именно вы создаете
Несколько минут размышлений в начале могут сэкономить много повторных промптов позже. Прежде чем начать, убедитесь, что можете ответить на четыре простых вопроса: что вы создаете, для кого это, зачем они будут этим пользоваться и какое главное действие вы хотите, чтобы они совершили.
Это главное действие часто называют CTA, сокращение от call to action. Это кнопка, ссылка или следующий шаг, который вы больше всего хотите, чтобы пользователи выбрали, например Sign Up, Book a Demo, Start Free или Buy Now.
Вам не нужно писать полную спецификацию. Цель — просто задать проекту четкое направление. Чем конкретнее ваша отправная точка, тем легче получить результат, который соответствует тому, что вы задумали.
Создайте одностраничный сайт для приложения по ведению бюджета, ориентированного на фрилансеров. Главный CTA — “Start Saving Smarter.” Используйте смелый, выразительный стиль с крупной типографикой и яркими цветами.
Намечайте путь, а не только экраны
Хороший дизайн живет не только на экранах, но и между ними. Пройдите путь пользователя: что он видит сначала, что вызывает доверие, что дает уверенность действовать и к чему это действие ведет? Даже схема из трех частей — hero, proof, call to action — делает ваши запросы значительно эффективнее, потому что у каждого раздела теперь есть причина существовать и причина вести к следующему.
Задайте визуальное направление заранее
Стиль гораздо легче задать, чем внедрять задним числом. Выберите направление: спокойное и элегантное, смелое и дерзкое, премиальное и гладкое — и укажите его в первом запросе, используя слова, описывающие тон, с которыми команда может работать: minimal, playful, cinematic, developer focused. Эти слова — не просто украшение: они формируют типографику, интервалы, цвет, тени и радиус скругления уже с самого первого компонента. Повторно используйте ту же строку со стилем в последующих запросах, чтобы сохранить целостность.
Используйте спокойный дизайн в духе wellness: мягкие градиенты, приглушенные природные тона, скругленные углы, щедрые отступы. Общий тон — мягкий и успокаивающий.
Шаг 2: Пишите запросы, которые точно попадают в цель
Описывайте результат, а не реализацию
Описывайте результат, который хотите получить, а не шаги по его созданию. Например, “Добавьте раздел с ценами с тремя вариантами и сделайте средний более заметным” полезнее, чем подробно объяснять, как именно должна быть устроена страница. Сосредоточьтесь на том, что должно появиться и почему это важно; команда сама решит, как это реализовать.
Работайте по частям, а не страницами
Запросы, ограниченные одним компонентом — hero, сетка функций, ряд отзывов, таблица цен — дают вам ясность и контроль. Если какая-то часть не попала в цель, вы корректируете именно ее, а не генерируете заново все вокруг. Создайте блок, просмотрите его, доработайте, затем переходите к следующему. Запрос на целую страницу создает шум; запрос на компонент создает сигнал.
Создайте раздел с функциями: заголовок по центру, затем три карточки в ряд, каждая с иконкой, заголовком и одной строкой описания. Мягкие тени, легкий подъем при наведении.
Используйте реальные слова
Текст-заполнитель скрывает проблемы; реальный текст их выявляет. Настоящему заголовку могут понадобиться две строки; настоящий CTA может лучше работать как глагол. Пишите то, что пользователь действительно будет читать, даже если это черновик: макеты, интервалы и дизайнерские решения становятся лучше, когда контент реален.
Заголовок hero: “Design Calmly.” Подтекст: “Turn stress into structure.” CTA: “Start Building Free.” Макет с акцентом на текст и щедрыми вертикальными отступами.
Называйте реальные элементы
Используйте ясные и конкретные слова, чтобы описать, что вы хотите видеть на странице. Вам не нужно знать дизайнерскую терминологию — просто назовите вещи, которые пользователи должны видеть или с которыми должны взаимодействовать, например карточку профиля, кнопку или форму.
Конкретные запросы легче реализовать, чем общие. Начните с базового элемента, который вам нужен, а затем добавляйте детали по одной.
Создайте карточку профиля с фотографией, именем и кнопкой подписки. Добавьте небольшой ярлык “Verified” рядом с именем и показывайте короткое пояснение при наведении на него.
Шаг 3: Вносите изменения точно
Ограничивайте каждое изменение: что меняется, что остается
При корректировке существующей работы четко указывайте обе стороны: что должно измениться и что не должно. Используйте направляющие слова вроде “replace”, “update” и “adjust” вместо “make this better” и отделяйте части, которые вам нравятся. Точность здесь — то, что не дает итерациям превратиться в регрессию.
Измените текст CTA на “Get Started” и увеличьте его горизонтальные внутренние отступы. Сохраните текущие цвета, шрифт и все остальное в этом разделе без изменений.
Одно значимое изменение за раз
Сначала обновите текст, затем макет, затем взаимодействия и проверяйте каждый результат перед следующим запросом. Маленькие, осознанные шаги складываются в отполированный продукт; десять изменений в одном сообщении складываются в неоднозначность, и если что-то пойдет не так, вы не поймете, какое именно изменение это вызвало.
Исправления по ходу задачи происходят в чате. Когда Промпт Queue доступна в вашем чате и работа Agent активна, последующие сообщения ставятся в очередь за уже выполняющейся работой. Убедитесь, что ваше сообщение появилось в очереди, прежде чем отправлять еще одну копию. Если элементы управления очередью не видны, не отправляйте повторно: дождитесь завершения текущей работы или используйте элемент прерывания, если он есть в вашем чате, затем подтвердите статус задачи перед отправкой следующего сообщения. Подробности см. в чате проекта.
Думайте на шаг вперед относительно UI
Если вашему проекту нужно не только хорошо выглядеть, но и работать, определяйте поведение наряду с внешним видом. Уточняйте, что пользователи видят, когда вошли в систему или вышли из нее, откуда берется динамический контент и как интерфейс обрабатывает пустые состояния, загрузку и ошибки. Вам не нужен рабочий 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. Ожидается: заказ подтверждается, и пользователь попадает на страницу благодарности. Воспроизведение: [шаги]. Исправьте причину, не изменяя итоговые суммы корзины или платежный сценарий, затем проверьте один успешный и один случай отклоненного платежа. Я удалил все секретные значения из приложенного лога.”
Как написать промпт для изменения макета страницы или стилей?
При запросе изменений страницы укажите:
1. Конкретную страницу, модуль и элемент, которые нужно изменить.
2. Текущее состояние и целевой результат.
3. Ссылки на примеры или скриншоты.
4. Функции, которые должны остаться без изменений.
5. Критерии приемки (например, должно работать и на desktop, и на mobile).
Пример: "На странице /pricing измените сетку карточек тарифов с 2 колонок на 3 колонки на desktop. На mobile сохраните макет в одну колонку. Ориентируйтесь на этот скриншот [attach]. Не изменяйте содержимое карточек или стили кнопок."
Что делать, если agent продолжает вносить неправильные изменения, несмотря на исправления?
Когда Agent снова и снова промахивается, добавление новых инструкций иногда только усиливает путаницу. Вместо этого:
1. Сохраните текущее состояние — Прекратите отправлять пересекающиеся исправления. Если в вашем чате есть элемент управления Revert, прочитайте текст подтверждения перед его использованием, отметьте все более поздние изменения, которые нужно сохранить, и проверьте проект afterward. Если объем изменений неясен, не продолжайте; воспользуйтесь рекомендациями по Project chat или обратитесь в Support, приложив отредактированную Chat Link и скриншот.
2. Уберите шум — Вместо того чтобы добавлять новые инструкции поверх старых, заново и четко сформулируйте основную проблему с нуля.
3. По одной задаче за раз — Сосредоточьтесь на решении одной проблемы, прежде чем переходить к следующей.
Шаг назад и поэтапная работа над изменениями обычно решают проблемы гораздо быстрее, чем попытка исправить несколько пересекающихся проблем в одном промпте.