Higgsfield + Fable 5.1 ile Animasyonlu Uygulama Çıkarmak

Duolingo'nun ya da Finch gibi uygulamaların tuttuğunu biliyoruz ve sebebi çoğu zaman özellik listesi değil: ekranda yaşayan bir karakter var. Bu tür animasyonlar şimdiye kadar illüstratör ve motion designer ekibi gerektiriyordu — yani tek kişilik bir geliştiricinin kapısı kapalıydı.

Artık değil. Üretken görsel ve video modelleri bu boşluğu dolduruyor ve daha önemlisi, modelleri kodlama ajanınızın içinden çağırabiliyorsunuz. Bu yazıda karakter üretiminden telefonda önizlemeye kadar akışın tamamını anlatıyorum.

Yöntemi Jason Lee'nin Watch Me Vibe Code an Animated App with Claude Fable 5.1 + Seedance 2.5 başlıklı kaydından ilerleterek derledim; oradaki akışı kendi çalışma biçimime göre yeniden düzenledim.

Parçalar

Parça	İş
Kodlama ajanı (Fable 5.1 gibi tasarım tarafı güçlü bir model)	planlama, kod, tasarım kararları
Higgsfield MCP	ajanın içinden görsel ve video üretimi
Görsel modeli	karakter ve arka plan üretimi
Video modeli (Seedance gibi)	üretilen varlığı canlandırma
LottieFiles	hazır mikro animasyonlar (konfeti, onay)
React Native + Expo	uygulamanın kendisi ve telefonda önizleme

Kritik parça MCP bağlayıcısı. Onsuz akış şöyle oluyor: ajana sor, görsel aracına git, yönerge yaz, üret, indir, projeye kopyala, ajana geri dön. Bağlayıcıyla bunların hepsi tek sohbet oturumunda kalıyor; siz ne istediğinizi anlatıyorsunuz, yönergeyi model yazıyor, üretilen dosya doğrudan projeye düşüyor.

1. Bağlamı ekran kaydıyla verin

Akışın en değerli numarası burada ve maliyeti sıfır: referans aldığınız uygulamayı ekran kaydına alıp modele verin.

Neden bu kadar işe yarıyor? Çünkü bir uygulamayı anlatmak zor. "Ana ekranda bir karakter var, altında görev kartları, tamamlayınca konfeti çıkıyor" cümlesi, 40 saniyelik bir kaydın anlattığının onda birini anlatıyor. Model kaydı izlediğinde sayfaları, düğme davranışlarını ve geçişleri görüyor.

Uygulamada şu üç şeyi verin:

• Referans uygulamanın ekran kaydı (ana akış ve onboarding ayrı ayrı).
• Karakter için bir görsel referans.
• Mağaza sayfasının bağlantısı — model özellikleri ve yorumları okuyabiliyor. Yorumlar özellikle değerli: insanların istediği ama olmayan özellik oradan çıkıyor.

Sonra plan isteyin, kod değil: "önce özellikleri ve ekranları çıkar, hiçbir şey yazma." İlk turda kod üretmeye başlayan bir oturum, yanlış iskeleti hızlıca kuruyor.

2. Karakteri ve arka planı ürettirin

Karakter üretiminde en sık yapılan hata, tek bir görsel üretip geçmek. Uygulamada aynı karakterin onlarca hâli gerekiyor: mutlu, üzgün, uykulu, kutlayan.

Şu sırayı öneriyorum:

1. Tek bir referansta karar kılın. Stil, renk paleti ve oran burada belirleniyor.
2. Temizletin. Referans görselde işinize yaramayan şeyler oluyor — çıkartma kenarlığı, yıldızlar, kalpler. Bunların kaldırılmasını isteyin; yoksa hepsi uygulamaya taşınıyor.
3. İfade setini tek seferde isteyin. "Aynı karakterin şu altı ifadesi" demek, altı ayrı üretimden hem ucuz hem tutarlı.
4. Arka planı karaktere göre üretin. Stil eşleşmezse uygulama kolaj gibi duruyor. Referans olarak karakterin kendisini verin.

Renk temasını da karakterden türetmek iyi sonuç veriyor: uygulamanın paleti karakterle aynı aileden olduğunda tasarım kendiliğinden toparlanıyor.

3. Önce iskelet, sonra animasyon

Buradaki sıralama önemli. Animasyon üretimi dakikalar sürüyor — tek bir varlık için on dakikayı bulabiliyor. O sırada ajan boş beklemesin.

Doğru sıra:

1. Statik varlıklarla bütün ekranları kur.
2. Onboarding akışını kur (uygulamanın en çok ihmal edilen ve dönüşümü en çok etkileyen kısmı).
3. Animasyon üretimini başlat.
4. Beklerken arka uç işini yaptır: veri modeli, durum yönetimi, kalıcılık.

Dördüncü madde akışı gerçekten hızlandırıyor. Üretken video beklemesi, boşa geçmesi gereken bir süre değil.

4. Animasyonu tarif etmek

"Karakteri canlandır" yönergesi işe yaramıyor; çıkan şey genelde titrek ve döngüsü bozuk oluyor. İşe yarayan yönerge bir koreografi:

"Karakter soldan sağa yürüsün, dursun, ekranın ortasına dönsün, kahve fincanını alsın, içsin, geri bıraksın ve başladığı noktaya yürüsün. Arka planda bulutlar sabit kalsın, su ve bitkiler hareket etsin."

Buradaki üç kural:

• Başlangıç ve bitiş aynı olsun. Döngü ancak böyle dikişsiz görünüyor.
• Neyin hareket etmeyeceğini de söyleyin. Uygulama içi animasyonda sürekli kıpırdayan bir arka plan, kullanıcıyı yoruyor.
• Tek bir olay tarif edin. Üç ayrı davranış, üç ayrı varlık demek.

Düzeltme isterken ekran görüntüsü yerine kısa bir ekran kaydı alıp sesli yorum yapmak çok daha hızlı: imleci gezdirirken "şurası titriyor, şu döngü tutmuyor" demek, ok çizip açıklama yazmaktan kolay.

5. Her animasyonu modele ürettirmeyin

Konfeti, onay işareti, yükleniyor göstergesi gibi standart mikro animasyonlar için üretken model kullanmak israf. LottieFiles gibi kaynaklarda bunların hazırı var, üstelik renk ve hız ayarlanabiliyor — uygulamanızın paletine oturtup indiriyorsunuz.

Ayrım şu: karaktere ait olan üretilir, arayüze ait olan hazır alınır. Lottie dosyaları vektör olduğu için küçük kalıyor ve her çözünürlükte keskin duruyor; üretilmiş video ise büyük ve sabit çözünürlüklü.

6. Telefonda önizleme: Expo Go mu EAS Build mi?

Tarayıcıdaki mockup yanıltıcı. Animasyonun gerçekten nasıl hissettirdiği ancak telefonda anlaşılıyor. İki yol var:

Expo Go — hızlı ve ücretsiz. Sayfaları gezip akışı görmek için yeterli. Ama veritabanı, Google ile giriş gibi şeyler çalışmıyor.

EAS Build — uygulamayı mağazadan inmiş gibi önizliyorsunuz; kendi simgesi oluyor, gerçek giriş akışları çalışıyor. Bunun için Apple geliştirici hesabı (yıllık ücretli) ve bir Expo hesabı gerekiyor.

Sadece deniyorsanız Expo Go, gerçekten mağazaya çıkacaksanız EAS Build. Mağaza sürecinin tamamını App Store yayınlama rehberinde anlattım.

Maliyet ve beklenti

Dürüst çerçeve:

• Görsel üretimleri ucuz, animasyon üretimleri pahalı ve yavaş. Kaç animasyona gerçekten ihtiyacınız olduğunu baştan yazın; "her ekran canlansın" fikri hem bütçeyi hem uygulamayı bozuyor.
• İlk sonuç kullanılabilir değil. Karakterin ölçeğinin kayması, döngünün tutmaması, kenarların kırpılması normal; düzeltme turu akışın parçası.
• Bu akış tasarım ve varlık tarafını çözüyor. Ürünün kendisi — veri modeli, abonelik, bildirimler, mağaza süreci — hâlâ normal yazılım işi.

Bir de kopyalama konusu: referans almak ile kopyalamak arasındaki çizgiyi baştan çizin. Ekran kaydı vermek, akışın nasıl kurulduğunu öğrenmek için; ekranları birebir çıkarmak için değil. Karakteriniz, konunuz ve tonunuz sizin olmalı.

Bunun asıl anlamı

Birkaç yıl önce bu işin önünde iki duvar vardı: illüstrasyon ve animasyon. İkisi de öğrenmesi uzun, dışarıdan alması pahalı işlerdi. Şimdi ikisi de bir sohbet oturumunun içinde, doğrudan projenize düşüyor.

Geriye kalan darboğaz yönetmenlik: ne istediğinizi bilmek, kötüyü ayırt etmek, düzeltmeyi tarif etmek. Vibe coding yazılarımda tekrarladığım cümlenin video tarafındaki karşılığı bu: kararlar sizde, uygulama modelde.

Referans videolar

• Watch Me Vibe Code an Animated App with Claude Fable 5.1 + Seedance 2.5 — bu yazıdaki akışın uçtan uca kaydı.

Araç adları, model sürümleri ve fiyatlar hızla değişiyor; başlamadan önce güncel dokümantasyondan doğrulayın.

Sık Sorulan Sorular

Higgsfield MCP ne işe yarıyor?

Higgsfield'ın MCP bağlayıcısı, görsel ve video üretimini kodlama ajanınızın içinden çağırmanızı sağlıyor. Ajan yönergeyi kendisi yazıyor, üretilen dosya doğrudan projeye düşüyor; görsel aracına gidip üretip indirip kopyalama turu ortadan kalkıyor.

Yapay zekâ ile uygulama içi animasyon nasıl yapılır?

Karakteri ve arka planı bir görsel modeliyle üretip bir video modeliyle canlandırıyorsunuz. Yönergeyi koreografi gibi yazmak şart: başlangıç ve bitiş aynı olsun, neyin sabit kalacağını da söyleyin, tek üretimde tek olay isteyin. Konfeti gibi arayüz animasyonlarını ise üretmek yerine Lottie gibi hazır kaynaklardan almak daha doğru.

Animasyon üretmek ne kadar sürüyor?

Görsel üretimi saniyeler sürerken animasyon üretimi dakikalar, tek bir varlık için on dakikayı bulabiliyor. Bu yüzden akışı ona göre kurun: animasyonu başlatıp beklerken ajana arka uç işini yaptırın.

Uygulamayı telefonda nasıl önizlerim?

İki seçenek var. Expo Go ücretsiz ve hızlıdır, sayfaları gezmek için yeterlidir ama veritabanı ve sosyal giriş gibi özellikler çalışmaz. EAS Build ise uygulamayı mağazadan inmiş gibi önizletir; bunun için Apple geliştirici hesabı ve bir Expo hesabı gerekir.

Karakterin her ekranda aynı görünmesini nasıl sağlarım?

Tek bir referans görselde karar kılın, gereksiz öğeleri (kenarlık, süs) temizletin ve ihtiyacınız olan ifadeleri tek seferde, aynı referansla ürettirin. Uygulamanın renk paletini de karakterden türetin; stil eşleşmediğinde ekranlar kolaj gibi duruyor.

Bu yöntemle başka bir uygulamayı kopyalamış olur muyum?

Referans almakla kopyalamak farklı şeyler. Ekran kaydı vermek akışın nasıl kurulduğunu öğrenmek içindir; ekranları birebir çıkarmak için değil. Karakter, konu ve ton sizin olmalı — hem hukuki hem de ürünün kendi kimliğini kurması açısından.