
Руководство по промптам
Полное руководство по мастерству написания промптов в enter.converge.ai
Вы, вероятно, уже обнаружили, что главная магия enter.converge.ai заключается в промпте. Это язык, который вы используете для общения, совместной работы и создания чего-либо с нашим ИИ.
Чем лучше ваш промпт, тем впечатляющее результат.
Представьте Enter как блестящего, невероятно быстрого младшего разработчика... который ужасно читает мысли. Он может создать все, что вы попросите, но он не может угадать ваше намерение. Ваша работа — предоставить предельно ясный набор инструкций, как идеальный документ с бизнес-требованиями (BRD).
Это руководство познакомит вас с искусством и наукой эффективного промптинга, проведя вас путь от новичка до профи.
Часть 1: Основные принципы — создание прочного фундамента
Прежде чем что-либо создавать, запомните эти три золотых правила.
Правило 1: Ясность превыше всего (хватит быть расплывчатым)
Двусмысленность — ваш злейший враг. Ваши инструкции должны быть точными до пикселя.
Плохой промпт 👎:
"Мне нужны тарифные планы для моего сайта."
Хороший промпт 👍:
"Создай интерактивный компонент раздела цен со следующими функциями: 3 тарифных плана (Starter, Professional, Enterprise) с переключателем месячной/годовой оплаты; анимированный фон 'звездное поле', реагирующий на движение мыши с помощью Framer Motion; анимация конфетти при переключении на годовой биллинг; плавные переходы цен с использованием @number-flow/react; профессиональная карточка с бейджем 'Most Popular', которая приподнимается при наведении на десктопе; переключатель Месяц/Год с эффектом анимированного сдвига; адаптивная верстка с каскадной анимацией карточек при прокрутке; современная синяя цветовая схема с использованием семантических токенов дизайна"
https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro
Совет: начинайте промпты с сильных, активных глаголов, таких как Create (Создать), Generate (Сгенерировать), Refactor (Рефакторить), Write (Написать), Design (Разработать), или List (Составить список)
Правило 2: Контекст — это королева (объясняйте "почему")
Enter понятия не имеет, что это за проект, для кого он и каковы ваши цели. Вы должны предоставить "почему" за "что".
Плохой промпт 👎:
"Создай для меня лендинг."
Хороший промпт 👍:
"Я создаю лендинг для 'Chroma', нового ИИ-генератора цветовых палитр для дизайнеров. Дизайн должен выглядеть футуристично, художественно и премиально, чтобы впечатлить эту аудиторию. Мне нужна секция 'hero' в стиле 'стекломорфизм' (glassmorphism) с тонким анимированным градиентным фоном. Вместо скучного списка 'преимуществ' я хочу интерактивную секцию, где пользователь может увидеть образцы цветовых палитр, динамически примененные к макету UI-карточки. Это главное торговое преимущество."
https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro
Правило 3: Обеспечьте согласованность (определите свою "рамку")
У ИИ нет вкуса по умолчанию. Без правил он превратится в небрежного художника. Вы должны определить "рамку" — вашу систему дизайна — в которой ИИ будет работать. Это секрет отполированного профессионального приложения.
Плохая практика 👎:
"Сделай синюю кнопку CTA."
"Создай карточку тарифа и выдели план 'Pro'."
Хорошая практика 👍:
"Приложение является высококлассным инструментом финансовой аналитики, поэтому тема должна быть 'только темная', профессиональная и плотная по данным, как терминал Bloomberg или Linear. Соблюдайте эти правила: Тема: Только темный режим. Фон: '#111111'. Фон основного модуля/карточки: '#1A1A1A'. Типографика: Используйте 'Inter' для всего текста. Используйте 'SF Mono' для всех чисел и финансовых данных. Акцентный цвет: Один яркий акцент: '#00F5D4' (ярко-бирюзовый). Используйте его только для основных CTA и активных точек данных. Стиль: Никакого скругления углов; все элементы должны иметь острые, 90-градусные углы. Используйте границы в 1px цветом '#333333' для определения компонентов, а не тени."
https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro
Часть 2: Руководство enter.converge.ai — строим как из Lego
Это самая важная стратегия для создания целых приложений, а не просто страниц.
Стратегия 1: Стройте модульно, а не монолитно (метод Lego)
Это ошибка номер один у новичков. Не пытайтесь заставить Enter сгенерировать целое сложное приложение за один раз.
Профессиональный подход — создавать по одному полноценному экрану или пользовательскому сценарию за раз.
Плохой промпт 👎:
"Создай мне приложение, как Airbnb."
Хороший промпт 👍:
"Давай создадим полный сценарий бронирования для нашего клона Airbnb, 'Roam'. Мы будем делать это экран за экраном. Начни с Экрана 1: Страница деталей объекта. На этом экране нужна сетка фотографий (как у Airbnb, одно главное изображение и 4 поменьше), 'липкий' (sticky) боковой бар справа с модулем бронирования/цены за ночь, и основная колонка контента слева."
"Окей, отлично. Теперь создай Экран 2: Страница 'Подтвердить и оплатить'. Когда пользователь нажимает 'Забронировать' на Экране 1, он попадает сюда. Эта страница должна содержать сводку бронирования, разбивку цены и простую, высоконадежную форму для ввода кредитной карты. Дизайн должен быть максимально чистым и заслуживающим доверия, чтобы максимизировать конверсию."
https://26985927857e4d70be5075c634aae015.prod.enterapp.pro
Стратегия 2: Предоставляйте примеры (Few-Shot промптинг)
Когда желаемый шаблон дизайна трудно описать, покажите его, а не просто рассказывайте. Предоставьте мини-пример входных/выходных данных, чтобы обучить Enter вашему желаемому визуальному паттерну.
Плохой промпт 👎:
"Мне нужно показать список членов моей команды."
Хороший промпт 👍:
"Мне нужно сгенерировать страницу 'Наша команда'. У меня есть список людей, но я хочу применить к ним определенный визуальный шаблон. Вот мой паттерн: Входной паттерн: [Имя], [Роль], [Краткая биография], [URL изображения]. Выходной паттерн (визуальная верстка): Создай карточку. У [URL изображения] должно быть соотношение сторон 3:4 с фильтром 'оттенки серого' по умолчанию. Взаимодействие: При наведении мыши изображение переходит в полноцветный режим и слегка увеличивается (масштаб 1.05). Под изображением отобрази [Имя] заглавными буквами шрифтом 'Inter' (с широким трекингом). Под именем отобрази [Роль] шрифтом с засечками, курсивом и светло-серым цветом. * Теперь примени этот визуальный паттерн к следующим данным: [Данные для 3 членов команды...]. Затем отрисуй все 4 карточки в адаптивной 3-колоночной сетке."
https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro
Часть 3: Продвинутые техники — сделайте ИИ своим партнером
Как только освоите основы, используйте эти техники, чтобы улучшить ваш рабочий процесс.
Техника 1: Попросите ИИ задавать вам вопросы
Не уверены, что предоставили достаточно деталей для сложного экрана приложения? Переверните сценарий и заставьте Enter сгенерировать требования.
Плохой промпт 👎:
"Я хочу страницу профиля пользователя."
Хороший промпт 👍:
"Я хочу разработать полный раздел 'Настройки аккаунта' для пользователя. Это будет сложная страница с несколькими вкладками. Прежде чем начать создание, задай мне 5 критических вопросов о необходимых разделах, данных и действиях пользователя (например, 'опасные зоны' для удаления аккаунта), чтобы ты смог создать идеальный дизайн."
Техника 2: Говорите как арт-директор
Enter знает профессиональный сленг. Используйте отраслевые ключевые слова, чтобы быстро определить сложную эстетику.
Плохой промпт 👎:
"Сделай мне сайт, чтобы показывать мои картинки."
Хороший промпт 👍
"Создай домашнюю страницу для высококлассного фотографа моды. Эстетика должна быть 'Editorial' (редакционная) и 'Minimalist'. Я хочу полноэкранную асимметричную 'ломаную сетку' (broken grid), вдохновленную 'Awwwards' или 'Vogue'. Сетка должна быть интерактивной: при наведении курсора на изображение оно должно слегка увеличиваться (например, масштаб 1.05) и переходить из серого в полноцветный режим. Типографика должна быть жирным, элегантным шрифтом с засечками (например, 'Playfair Display'), с заголовками, накладывающимися на изображения. Навигация должна быть крошечной, минималистичной, без засечек, закрепленной в левом верхнем углу."
https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro
Техника 3: Как отлаживать (когда что-то идет не так)
Когда Enter застревает или совершает визуальную ошибку в вашем приложении, не говорите просто "Исправь это". Направляйте его, как старший разработчик.
Предоставьте скриншот 🌟: Это самый быстрый способ. Загрузите скриншот сломанной секции и сообщение об ошибке.
"Как вы видите на этом мобильном скриншоте, карточки выходят за пределы контейнера. Они должны быть в одноколоночной flex-верстке на экранах меньше 600px. Пожалуйста, проверьте медиа-запросы."
Спросите 'почему' 🌟:
"Какова первопричина этого сдвига верстки? Объясни мне простыми словами."
Смена подхода (Pivot) 🌟:
"Этот подход с CSS Grid, похоже, не работает. Давай попробуем совершенно другой метод. Рефактори всю эту секцию, используя Flexbox вместо этого."
Заключение: Ваше путешествие только начинается
Промптинг — это одновременно искусство и навык. Лучший способ научиться — это пробы, ошибки и итерации.
Не бойтесь экспериментировать. Чем яснее ваши инструкции, чем богаче контекст и чем более модульными являются ваши экраны приложения, тем потрясающими будут результаты.
А теперь переходите на enter.converge.ai и попробуйте свой первый промпт!
Приложение: Шпаргалка по промптингу в enter.converge.ai
Попробуйте использовать эти ключевые слова в своих промптах. Они помогут Enter с точностью понять ваши намерения.
| Категория | Ключевые слова |
|---|---|
| Верстка (Layout) | Responsive (Адаптивный), Grid layout (Сетка), Flexbox, Three-column layout (3 колонки), Sidebar (Боковая панель), Navbar (Навигация), Footer (Подвал), Header (Шапка), Full-width (Во всю ширину), Centered (По центру), Sticky (Липкий/Закрепленный), Split-screen (Разделенный экран), Masonry layout (Кладка), Dashboard layout (Верстка панели), Card-based layout (Карточная верстка) |
| Стиль (Style) | Glassmorphism, Neumorphism, Minimalist (Минимализм), Techy (Технологичный), Corporate (Корпоративный), Modern (Современный), Dark mode (Темная тема), Rounded corners (Скругленные углы), Shadow (Тень), Gradient (Градиент), Brutalist (Брутализм), Playful (Игривый), Editorial (Редакционный), Futuristic (Футуристичный), Retro (Ретро), Pastel (Пастельный), High contrast (Высокий контраст), Clean white (Чистый белый), Colorful accents (Яркие акценты) |
| Компоненты (Component) | Modal (Модальное окно), Popup (Всплывающее окно), Date picker (Выбор даты), Carousel (Карусель), Slider (Слайдер), Accordion (Аккордеон), Tabs (Вкладки), Breadcrumbs (Хлебные крошки), CTA button (Кнопка призыва), Form (Форма), Input field (Поле ввода), Dropdown (Выпадающий список), Table (Таблица), Pagination (Пагинация), Search bar (Строка поиска), Sidebar menu (Боковое меню), Chat bubble (Чат-пузырь), Notification toast (Уведомление), Progress bar (Индикатор прогресса), Stepper (Шаговый индикатор), Timeline (Таймлайн), Card (Карточка) |
| Анимация и движение | Hover animation (При наведении), Fade-in (Появление), Slide-up (Выезд вверх), Parallax scrolling (Параллакс), Microinteraction (Микровзаимодействие), Smooth transition (Плавный переход), Framer Motion, GSAP-like, Scroll-based reveal (Раскрытие по скроллу), Animated gradient (Анимированный градиент), Looping hero video (Зацикленное видео), Subtle hover glow (Легкое свечение при наведении), Animated icons (Анимированные иконки) |
| Вдохновение | Inspired by Linear (Как у Linear), Like Superhuman's onboarding (Как у Superhuman), Airbnb-style grid (Сетка в стиле Airbnb), Bloomberg-style (Bloomberg-стиль/плотный), Notion-like interface (Интерфейс в стиле Notion), Framer aesthetic (Эстетика Framer), Apple-style marketing page (Маркетинг-страница в стиле Apple), Stripe documentation look (Вид документации Stripe), Pitch deck vibe (Вайб презентации), Figma-like collaboration feel (Чувство коллаборации как в Figma) |






