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.
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.
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.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.