Flowstep генерує UI-екрани з промптів природною мовою, тож ви можете перейти від ідеї до візуального дизайну за лічені секунди. Чи потрібен вам один екран, щоб перевірити концепцію, чи повний набір екранів для всього шляху користувача, для початку достатньо добре написаного промпту.
Створення дизайну
1
Відкрийте новий проєкт
На панелі Flowstep створіть новий проєкт або відкрийте наявний, куди хочете додати екрани.
2
Напишіть промпт
Введіть опис екрана або екранів, які хочете отримати. Вкажіть тип застосунку, мету користувача та контент, який очікуєте побачити.
3
Вкажіть кількість екранів
За замовчуванням Flowstep створює один екран. Якщо потрібно кілька екранів, прямо вкажіть це в промпті: Flowstep може згенерувати до 6 екранів з одного промпту.
4
Генерація
Надішліть промпт. Flowstep створить екрани й відобразить їх у редакторі, готові до перегляду або доопрацювання.
Коли ви створюєте новий файл і надсилаєте перший промпт, Flowstep називає файл на основі цього промпту, щоб його було легко знайти згодом. Файл, який уже має назву або попередні промпти, зберігає назву. Ви можете перейменувати будь-який файл самостійно в будь-який час.
Зупинка генерації
Поки Flowstep відповідає, кнопка надсилання перетворюється на кнопку зупинки (Stop Flowstep response). Натисніть її, щоб зупинити генерацію. У запиті на кілька екранів уже готові екрани залишаються на полотні, а незавершені видаляються. Якщо зупинити генерацію після того, як Flowstep почав створювати екрани, повідомлення все одно витрачається. Див. повідомлення та ліміти.Один екран чи кілька екранів
Ви можете згенерувати один екран або до 6 екранів з одного промпту. Обидва підходи пасують різним етапам роботи над дизайном.- Один екран — найкраще для дослідження конкретного стану інтерфейсу, компонента або окремої концепції.
- Кілька екранів — найкраще для планування потоків, порівняння варіантів макета або швидкого охоплення повного шляху користувача.
Інші способи створити промпт
Текст — не єдиний спосіб введення. Ви також можете:- Прикріплювати файли — додавайте до промпту зображення (JPG, PNG, WEBP) або документи (PDF, MD, TXT) розміром до 3 МБ кожен: перетягуванням, через вибір файлу або вставкою. Посилайтеся на прикріплене зображення в промпті, і Flowstep включить його до згенерованих екранів. Див. Використання референсів дизайну.
- Диктувати промпт — натисніть кнопку мікрофона на панелі промптів (або натисніть Cmd+Shift+V на Mac чи Ctrl+Shift+V у Windows) і говоріть до 60 секунд. Розшифровка додається до тексту, який ви вже ввели.
- Дозволити Flowstep шукати в інтернеті — коли промпт цього потребує (наприклад, «створи копію сторінки цін Stripe»), Flowstep може шукати в інтернеті, зчитувати фірмовий стиль сторінки (кольори, шрифти, логотип, UI-компоненти) і використовувати його в згенерованих екранах. Flowstep сам вирішує, чи шукати інформацію, тож це не спрацьовуватиме з кожним промптом. Зверніть увагу: відтворені вебсайти використовують інші зображення та навігацію, ніж оригінал.
- Задавати рекомендації з дизайну — визначте постійні правила стилю, які застосовуються до кожної генерації у файлі. Див. рекомендації з дизайну.
Як писати ефективні промпти
Пам’ятайте про такі принципи під час написання промптів:- Вкажіть платформу (мобільна, десктопна, планшетна), щоб Flowstep правильно підібрав розміри екранів.
- Опишіть мету користувача, а не лише елементи інтерфейсу: Flowstep визначає макет на основі наміру.
- Додайте ключовий контент, як-от написи, дії чи дані, якщо вони важливі для дизайну.
- Використовуйте фрази на кшталт «згенеруй кілька екранів» або «охопи повний шлях користувача», щоб отримати результат із кількома екранами.