Перейти до основного вмісту
Screenshot 2026 05 06 At 14 19 49
Коли ви готові поділитися дизайном або передати його, Flowstep дозволяє експортувати його як статичне зображення — JPG або PNG. Обидва формати широко підтримуються інструментами дизайну, програмним забезпеченням для презентацій та браузерами, тому ви можете використовувати свої AI-генеровані дизайни у будь-якому місці.

​
Як експортувати ваш дизайн

1

Відкрийте ваш дизайн

Перейдіть до дизайну, який ви хочете експортувати, в Flowstep.
2

Відкрийте меню експорту

Знайдіть параметр експорту на панелі інструментів або на панелі дизайну. Виберіть його, щоб відкрити параметри експорту.
3

Виберіть ваш формат

Виберіть JPG або PNG залежно від вашого використання (див. порівняння нижче).
4

Завантажте файл

Підтвердіть ваш вибір та завантажте експортоване зображення на ваш пристрій.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: який формат вам вибрати?

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

​
Експорт коду

На додаток до зображень, кнопка Code експортує ваш дизайн як код React + Tailwind — скопіюйте фрагмент або завантажте повний пакет як ZIP. Ви можете експортувати один екран, кілька вибраних екранів або весь файл одразу. Коли ви експортуєте більше одного екрана, кожен стає своїм файлом компонента, а всяка навігація, яку ви налаштували між екранами, вбудована в генерований код, тому експортована програма повністю інтерактивна. Пакети самодостатні: зображення, які використовуються в дизайні (включаючи ті, які ви прикріпили на панелі чату), включаються у папку public/assets/ з кодом, що посилається на них локальним шляхом, тому експорт запускається як є. Завантажені файли — як зображення, так і пакети коду — називаються за екраном, якому вони належать (повертаючись до назви файлу, якщо екран без імені), що зберігає експорти легко ідентифікованими при роботі з багатьма екранами.

​
Надішліть дизайни вашому агентові з кодування

Замість завантаження файлу, ви можете передати дизайн прямо помічнику AI з кодування. Натисніть Send to your coding agent на панелі інструментів — або відкрийте діалог експорту та виберіть той самий параметр — щоб скопіювати готовий до вставлення промпт для вашого агента:
Ваш агент читає ці екрани через MCP і будує їх у вашому репозиторії. Вставте цей промпт у Claude, Cursor або свого переважного агента.
Промпт повідомляє вашому агентові отримати екрани через сервер Flowstep MCP та перебудувати їх у вашій кодовій базі. Ви можете передати один екран, кілька вибраних екранів або весь файл одразу — промпт адаптується до того, що ви вибрали. Це використовує сервер Flowstep MCP, тому спочатку підключіть MCP-клієнт. Див. огляд сервера MCP для підтримуваних клієнтів та Швидкий старт для підключення одного.
Якщо вам потрібно взяти свій дизайн у робочий процес редагування векторів, скопіюйте його прямо в Figma натомість. Див. Миттєво копіюйте дизайни Flowstep в Figma.