> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Генеруйте екрани інтерфейсу з текстових промптів за допомогою Flowstep

> Використовуйте Flowstep для генерування одного екрану або до 6 екранів відразу з одного текстового промпту — ідеально для швидкої ідеації інтерфейсу та дослідження повних потоків користувачів.

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Flowstep генерує екрани інтерфейсу з природомовних промптів, дозволяючи вам перейти від ідеї до візуального дизайну за секунди. Якщо вам потрібен один екран для перевірки концепції або повний набір екранів, що охопивають всю подорож користувача, добре написаний промпт — це все, що вам потрібно для початку.

## Генеруйте дизайн

<Steps>
  <Step title="Відкрийте новий проект">
    На панелі інструментів Flowstep створіть новий проект або відкрийте існуючий, до якого ви хочете додати екрани.
  </Step>

  <Step title="Напишіть ваш промпт">
    Введіть опис екрану або екранів, які ви хочете. Будьте конкретні щодо типу застосунку, цілі користувача та змісту, який ви очікуєте побачити.
  </Step>

  <Step title="Укажіть кількість потрібних вам екранів">
    За замовчуванням Flowstep генерує один екран. Якщо ви хочете кілька екранів, скажіть про це явно у своєму промпті — Flowstep може генерувати до 6 екранів з одного промпту.
  </Step>

  <Step title="Генеруйте">
    Передайте ваш промпт. Flowstep створює ваші екрани та відображає їх у редакторі, готові до перегляду або удосконалення.
  </Step>
</Steps>

## Один екран порівняно з кількома екранами

Ви можете генерувати один екран або до 6 екранів з одного промпту. Обидва підходи підходять для різних етапів роботи над дизайном.

* **Один екран** — найкраще для дослідження конкретного стану інтерфейсу, компонента або зосередженої концепції.
* **Кілька екранів** — найкраще для відображення потоків, порівняння варіантів макета або швидкого охоплення повної подорожі користувача.

Коли вам потрібні кілька екранів, будьте явні у своєму промпті. Flowstep використовує формулювання вашого промпту, щоб вирішити, скільки екранів створити, тому розпливчасті промпти, як правило, повертають один екран. Генеровані екрани називаються **Screen 1**, **Screen 2** тощо — використовуйте ці назви, щоб посилатися на конкретний екран у подальших промптах.

## Більше способів писати промпти

Текст — не єдиний вхід. Ви також можете:

* **Додайте файли** — додайте зображення (JPG, PNG, WEBP) або документи (PDF, MD, TXT) розміром до 3 МБ кожен до промпту за допомогою перетягування, вибору файлу або вставлення. Посилайтеся на прикріплене зображення у своєму промпті, і Flowstep включить його до генерованих екранів. Дивіться [Референси дизайну](/uk/design-references).
* **Диктуйте свій промпт** — натисніть кнопку мікрофона на панелі промпту (або натисніть **Cmd+Shift+V** на Mac, **Ctrl+Shift+V** у Windows) та говоріть до 60 секунд. Стенограма додається до того, що ви вже набрали.
* **Дозвольте Flowstep дослідити веб** — коли ваш промпт цього потребує (наприклад, «клонувати сторінку цін Stripe»), Flowstep може шукати в Інтернеті та читати брендинг сторінки — кольори, шрифти, логотип, компоненти інтерфейсу — та використовувати їх у генерованих екранах. Flowstep вирішує самостійно, чи проводити дослідження, тому це не обов'язково спрацює для кожного промпту; зверніть увагу, що відтворені веб-сайти використовують різні зображення та навігацію, ніж оригінальні.
* **Встановіть рекомендації з дизайну** — визначте постійні правила стилю, які застосовуються до кожного генерування у файлі. Дивіться [Рекомендації з дизайну](/uk/design-guidelines).

## Написання ефективних промптів

<Tip>
  **Приклад промпту для одного екрану:** "Спроектуйте екран входу для мобільної програми з відстеженням фітнесу з полями електронної пошти та пароля, кнопкою входу та посиланням забув пароль."
</Tip>

<Tip>
  **Приклад промпту для кількох екранів:** "Генеруйте кілька екранів для потоку адаптації програми доставки їжі — охопліть вибір переваг кухні, введення адреси доставки та підтвердження першого замовлення."
</Tip>

<Tip>
  **Приклад промпту для повної подорожі:** "Охопліть повну подорож користувача в програмі подання витрат, від подання чека до затвердження менеджером."
</Tip>

Пам'ятайте про ці принципи при написанні промптів:

* Назвіть платформу (мобільна, настільна комп'ютерна, планшет), щоб Flowstep правильно розмістив екрани.
* Опишіть мету користувача, а не лише елементи інтерфейсу — Flowstep визначає макет на основі наміру.
* Включіть ключовий вміст, як-от етикетки, дії або дані, якщо вони важливі для дизайну.
* Використовуйте фрази на кшталт «генерувати кілька екранів» або «охопити повну подорож користувача», щоб активувати вихід кількох екранів.