> ## 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 bilan matn promptlaridan UI ekranlarni yaratish

> Bitta matn promptidan bir ekran yoki bir vaqtning o'zida 6 gacha ekran yaratish uchun Flowstep-dan foydalaning — tez UI g'oyalarini ishlab chiqish va to'liq oqimlarni o'rganish uchun ideal.

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

Flowstep tabiiy til promptlaridan UI ekranlarni yaratadi, shu bilan siz g'oyadan vizual dizaynlarigacha sekundlar ichida o'tishingiz mumkin. Agar siz kontseptsiyani tekshirish uchun bitta ekran yoki butun foydalanuvchi sayohatini qoplagan to'liq ekranlar to'plamiga muhtoj bo'lsangiz, boshlash uchun yaxshi yozilgan prompt etarli.

## Dizaynni Yaratish

<Steps>
  <Step title="Yangi proyektni oching">
    Flowstep dashbordingizdan yangi proyekt yarating yoki ekran qo'shmoqchi bo'lgan mavjud proyektni oching.
  </Step>

  <Step title="Prompt yozing">
    Kerakli ekran yoki ekranlarning tavsifini kiriting. Ilova turi, foydalanuvchi maqsadi va ko'rmoqchi bo'lgan kontent haqida aniq bo'ling.
  </Step>

  <Step title="Siz nechta ekran xohlayotganingizni belgilang">
    Sukut bo'yicha Flowstep bitta ekran yaratadi. Agar siz bir nechta ekran xohlasangiz, buni promptingizda aniq qoling — Flowstep bitta promptdan 6 gacha ekran yarata oladi.
  </Step>

  <Step title="Yaratish">
    Prompting-ni yuboring. Flowstep sizning ekranlarni yaratadi va ularni muharrir-da ko'rsatadi, sharhlab yoki tozalash uchun tayyor.
  </Step>
</Steps>

## Bitta ekran vs. bir nechta ekranlar

Siz bitta promptdan bitta ekran yoki 6 gacha ekran yarata olasiz. Ikkala usul ham dizayn ishining turli bosqichlariga mos keladi.

* **Bitta ekran** — ma'lum UI holati, komponent yoki markazlashgan kontseptsiyani o'rganish uchun eng yaxshi.
* **Bir nechta ekranlar** — oqimlarni rejalastirish, tayyotlanish variantlarini solishtirish yoki to'liq foydalanuvchi sayohatini tez qoplash uchun eng yaxshi.

Agar siz bir nechta ekran xohlasangiz, promptingizda aniq bo'ling. Flowstep prompting-ning ifodasini ishlatib, nechta ekran yaratishni hal qiladi, shuning uchun noaniq promptlar odatda bitta ekran qaytaradi. Yaratilgan ekranlar **Screen 1**, **Screen 2** va hokazo deb nomlanadi — keyingi promptlarda ma'lum ekranga murojaat qilish uchun ushbu nomlarni ishlating.

## Prompting-ning boshqa usullari

Matn yagona kiritish emas. Siz, shuningdek, qilishingiz mumkin:

* **Fayllarni biriktirish** — shurkali-shurkal, fayl tanlovchi yoki joylashtirish orqali promptingizga rasm (JPG, PNG, WEBP) yoki hujjatlarni (PDF, MD, TXT) har biri 3 MB gacha qo'shing. Prompting-da biriktilgan rasmga murojaat qiling va Flowstep uni yaratilgan ekranlarga kiritadi. [Dizayn namunalari](/uz/design-references) bo'limiga qarang.
* **Prompting-ni diktofonga olish** — prompting panelida mikrofon tugmasini bosing (yoki Mac-da **Cmd+Shift+V**, Windows-da **Ctrl+Shift+V** tugmasini bosing) va 60 soniyagacha gapiring. Steno siz allaqachon yozgan narsaga qo'shiladi.
* **Flowstep-ga veb-saytni o'rganishga ruxsat berish** — prompting buni talab qilganda (masalan, "Stripe narxi sahifasini klon qiling"), Flowstep veb-saytni qidirib, sahifaning brending-ini o'qiy oladi — ranglar, shriftlar, logo, UI komponentlar — va uni yaratilgan ekranlarda ishlatadi. Flowstep o'zi o'rganish kerak yoki yo'qligini hal qiladi, shuning uchun u har bir prompting-da ishga tushmaydi; qayta yaratilgan veb-saytlar asl-dan farq qilib olingan rasmlar va navigatsiyadan foydalanishini aytib o'tish kerak.
* **Dizayn yo'riqnomalarini o'rnatish** — faylda har bir avlodga qo'llanadigan doimiy stil qoidalarini aniqlang. [Dizayn yo'riqnomalari](/uz/design-guidelines) bo'limiga qarang.

## Samarali promptlar yozish

<Tip>
  **Bitta ekran prompting namunasi:** "Fitnes kuzatish ilovasi uchun email va parol maydonlari, login tugmasi va parolni unutdim havolasi bilan mobil login ekranini dizayn qiling."
</Tip>

<Tip>
  **Ko'p-ekranli prompting namunasi:** "Ovqat yetkazib berish ilovasi uchun bir nechta ekranlarni yarating, ular kirish oqimini qoplashi kerak—taomlar turini tanlash, yetkazib berish manzilini kiritish va birinchi buyurtmani tasdiqlash."
</Tip>

<Tip>
  **To'liq sayohat prompting namunasi:** "Xarajatlar hisob-kitob ilovasida to'liq foydalanuvchi sayohatini qoplang, kvitantsiyani topshirish-dan menejer ma'qullash-gacha."
</Tip>

Promptlar yozayotganda bu tamoyillarni aytib o'tib oling:

* Platformani nomi (mobil, desktop, planshet) bering, shunda Flowstep ekranlarni to'g'ri o'lchamda o'rnatadi.
* Foydalanuvchining maqsadini, nafaqat UI elementlarini tavsif qiling—Flowstep tayyotlanishni niyatdan xulosa qiladi.
* Agar ular dizaynni muhimsa, yorliqlar, harakatlar yoki ma'lumotlar kabi asosiy kontentni kiriting.
* "Bir nechta ekranlarni yarating" yoki "to'liq foydalanuvchi sayohatini qoplang" kabi iboralarni ishlatib, ko'p-ekranli chiqish-ni ishlatish uchun.