Skip to main content

1. Ekran oluşturma ve önizlemesi

En yaygın iş akışı: bir ekran oluşturun (dosyayı aynı adımda oluşturarak), sonra sonucu görüntüleyin.
fileId’yi atlayarak otomatik olarak yeni bir dosya oluşturur. Ekranları o dosyaya eklemek için mevcut bir fileId geçin. AI yardımcınıza sorun:
Flowstep tasarımı oluşturun: bir geliştirici aracı için mobil oturum açma ekranı, e-posta/şifre ve koyu temada Google SSO düğmesi ile, sonra görüntüyü gösterin.

2. React bileşenini görselleştirme

.jsx veya .tsx dosyasını ek olarak yükleyin ve Flowstep’ten eşleşen bir tasarım oluşturmasını isteyin. Flowstep kaynağı okur ve bir ekran oluşturur — uygulamayı çalıştırmanıza gerek yoktur.
AI yardımcınıza sorun:
src/components/settings/ApiKeys.tsx dosyasını oku, onu ek olarak yükle ve bileşen düzenini ile eşleşen Flowstep ekranı oluştur. İşlenmiş görüntüyü göster.

3. MCP tarafından oluşturulan ekran üzerinde yineleme yapma

edit-design ve regenerate-design, designs dizisi ile oluşturulan ekranlarda yalnızca mevcut olan tasarım bağlamı gerektirir. Bunun olmayan ekranlar için geçici çözüm, ekranı ek olarak işlemek ve create-new-design’i görüntü ile çağırmaktır.
Tasarım bağlamına sahip ekranlar için, edit-design’i doğrudan message’daki değişiklik ve targets’taki ekran ile çağırın.

4. Ekranı tam bir akışa genişletme

Mevcut bir tasarıma devam eden ekranlar ekleyin.
Kenar durum ekranları eklemek için Adım 2’yi operationVariant: "error_state" veya "empty_state" ile tekrarlayın.
operationVariant, expand-design için gerekli bir parametredir. Temel ekran ayrıca designs dizisi (tasarım bağlamı) ile oluşturulmuş olmalıdır — bunun olmayan ekranlar için, Örnek 3’teki ek geçici çözümünü kullanın.

5. Toplu iş öncesinde kotayı denetleme

Birden fazla oluşturmaya başlamadan önce kalan kapasiteyi kontrol edin.
daily düşükse, toplu işi 00:00 UTC sonrasında sıfırlanırken planlayın.