Codex + gizli bir araç, ajansımızda kullandığımız tasarım iş akışı... ve çıktı gerçekten bambaşka bir seviyede.
Aylardır bunu söylüyorum. Uygulaman AI çıktısı gibi görünüyorsa, bu bir Codex sorunu değil. Bu bir iş akışı sorunu.
Çoğu geliştirici aynı döngüde takılıp kalıyor. AI ile özellikler çıkarıyorlar. Arka uç çalışıyor. Mantık sağlam. Ama arayüz, vibe kodlanmış diğer tüm uygulamalara benziyor. Kullanıcılar iki saniyede gerçek olup olmadığına karar veriyor.
Eski çözüm bir tasarımcı tutmaktı. Haftalarca Figma dosyalarını beklemek. Sonra geliştiricinin bu tasarımları yorumlamasını ve kodda yeniden oluşturmasını izlemek. Tasarım yayına girdiğinde, ivme kaybetmiş ve yakmanıza gerek olmayan parayı yakmıştınız.
Tüm bu süreç artık isteğe bağlı.
Bu anlatım için Haven'i, bir gayrimenkul mobil uygulama konseptini oluşturdum. 20 dakikada tam tasarım sistemi. Bir saatten kısa sürede tasarlanan her ekran. Codex aracılığıyla tek bir CSS satırını yeniden yazmadan gönderilen üretim kodu.
Şu anda yürüttüğüm iş akışı bu. Ve AI ile ürün çıkaran her geliştiricinin nasıl çalıştığını anlaması gerekiyor.
Moonchild Aslında Nedir?
Gizli araç Moonchild.
Geçen yıl piyasaya sürülen neredeyse tüm AI tasarım araçlarını test ettim. Çoğu ilk ekranda iyi görünüyor, ancak ikinci bir sayfa oluşturduğunuz anda dağılıyor. Sorun tutarlılık. Moonchild bunu başka hiçbir şeyin yapamadığı şekilde çözüyor.
Tasarım sisteminizden başlayan, sohbet tabanlı bir tasarım tuvalidir. Boş bir komut isteminden değil. Bir ekran görüntüsünden değil. Gerçek sisteminizden. Sisteminizi üç şekilde getiriyorsunuz:
→ Figma, GitHub veya canlı bir URL'den içe aktarın
→ Markanızı Aracı Tasarım Sistemi Oluşturucusu'na tanımlayın
→ Dribbble veya başka bir yerden tasarım ilhamı ekleyin
Sistem girdikten sonra, tasarımlar için eski yöntemle komut istemezsiniz. Bir PRD (Ürün Gereksinim Dokümanı) yapıştırırsınız. Sisteminize karşı tam ekranlar oluşturur. Oradan sanat yönetmenliği yaparsınız.
Döngüyü kapatan şey ise dışa aktarma yoludur. Moonchild, tasarımlarınızı yapılandırılmış çıktı olarak doğrudan Codex'e aktaran bir MCP bağlayıcısı gönderir. Codex'in yorumlaması için bir ekran görüntüsü değil. Gerçek tasarım verileri. Bileşenler, token'lar, düzen, her şey.
İş akışı bu. Şimdi aslında nasıl kullanılacağı.
Çoğu Geliştiricinin AI'ı Tasarım İçin Kullanma Şeklindeki Sorun
Çoğu geliştiricinin yaptığı şey şu.
Codex'e yeni bir özellik oluşturması için komut veriyorlar. Çıktı geliyor. İyi görünüyor. Sonra bir sonraki özellik için komut veriyorlar. Biraz farklı görünüyor. Beşinci özelliğe gelindiğinde uygulama, birbirine dikilmiş beş farklı ürün gibi görünüyor.
İnsanların AI tasarımı kötü derken kastettiği şey bu.
Model kötü değil. İş akışı kötü.
Codex'in tasarım diliniz hakkında hiçbir fikri yok. Her komut yeni bir bağlam. Her ekran bir tahmin. Her bileşen bir öncekinden sapıyor. Renkler kayıyor. Tipografi kayıyor. Her şey birbirini etkiliyor.
Çözüm basit. Codex'e takip etmesi için bir sistem verin. Ardından oluşturması için gerçek tasarımı verin.
Çoğu iş akışı bunlardan yalnızca birini verir. Moonchild artı MCP bağlantısı, ikisini aynı anda verir.
Adım 1: Tasarım Sisteminizi Önce Oluşturun. Her Zaman.
Herkesin atladığı adım budur. Aynı zamanda en önemlisidir.
@ignytlabs'ta her müşteri için bir ekrana dokunmadan önce bir tasarım sistemi oluşturuyoruz. Eskiden bir tasarımcının iki gününü alırdı. Moonchild bunu yaklaşık 20 dakikada yapıyor.
Bu anlatım için Haven'i, bir gayrimenkul mobil uygulama konseptini oluşturdum. Moonchild'a bir tasarım sistemi almanın birkaç yolu var. Figma, GitHub veya canlı bir URL'den içe aktarabilirsiniz. Markanızı Aracı Tasarım Sistemi Oluşturucusu'na tanımlayabilirsiniz. Haven için genellikle bir vibeyle başlarken yaptığım şeyi yaptım. Dribbble'dan tasarım ilhamı. Hedeflediğim hissi yakalayan mobil gayrimenkul uygulamalarının üç ekran görüntüsünü ve Haven'in ne olduğu ve kimin için olduğuna dair kısa bir açıklama ekledim. Araç, tasarım dilini çıkardı ve sistemi sıfırdan oluşturdu.
Beni şaşırtan şey, her şeyin ne kadar önizlenebilir olmasıydı. Son yazımda bahsettiğim Google Stitch iş akışı da dahil olmak üzere çoğu AI aracı, size düz bir token dosyası verir. Renkler. Yazı tipleri. Belki boşluk. Bu farklı bir şey yapıyor. Tam bir bileşen kütüphanesi ve bir galeri oluşturuyor. Her rozet, düğme, kart ve çip, uygulamanızın içinde gerçekte görüneceği şekilde işleniyor. Herhangi bir bileşene tıklayın ve canlı olarak görün, varyantları ve boyutları test etmek için kontrollerle. Önizlemenin hemen altında, o bileşen için gerçek JavaScript, CSS, örnekler ve bağımlılıkları alırsınız. Kod tabanına çekmeye hazır.
Galeri, tasarım yapma şeklinizi gerçekten değiştiren kısım. Bir "marka rozetinin" veya "puanlama rozetinin" bağlam içinde nasıl görünmesi gerektiğini tahmin etmek yerine, hepsini yan yana görüyorsunuz. Satılık. Kiralık. Öne Çıkan. Tüm aile bir kerede. Tek bir ekran oluşturulmadan önce bilinçli tasarım kararları alıyorsunuz.
Bir stil sayfası ile gerçek bir sistem arasındaki fark budur.
Adım 2: PRD'den Kullanıcı Arayüzüne
Tasarım sisteminiz girdikten sonra, tasarımlar için eski yöntemle komut istemezsiniz.
Bir PRD yapıştırırsınız.
Tek sayfalık bir özellik özeti. Bir ürün spesifikasyonu. Bir hedef beyanı. Ne varsa.
Haven için, ürün tanıtımını, hedefleri, hedef kullanıcıları ve rolleri, temel özellikleri ve MVP kapsamını, tam kullanıcı yolculuklarını, teknik yığını ve tasarım yönünü kapsayan yapılandırılmış bir PRD yapıştırdım. Yaklaşık bir sayfa. Araca gerçek bağlam verecek kadar spesifik. Doğru ayrıntıları doğru ekranlara çekecek kadar yapılandırılmış.
Sonra çoğu insanın atladığı bir şey yaptım.
Tek bir ekran oluşturmadan önce onunla beyin fırtınası yaptım.
Çoğu geliştiricinin gözden kaçırdığı kilit nokta budur. Sohbet modu, PRD'nin tam bağlamını tutar. PRD'yi bırakıp oluşturmaya basmak yerine, önce ürün hakkında konuşursunuz. Ekran listesini onaylayın. Gezinme modelini kilitleyin. Herhangi bir piksel var olmadan önce kilit ekranların hiyerarşisini önceden tanımlayın.
Haven için şunu sordum:
→ "Bu PRD'ye dayanarak, önce hangi ekranları oluşturmamızı önerirsiniz? Bir gayrimenkul uygulaması için kaçırdığım bir şey var mı?"
→ "Birincil gezinme, Ana Sayfa, Arama, Favoriler, Profil ile bir alt sekme mi olmalı? Yoksa farklı bir şey mi?"
→ "Oluşturmadan önce, Mülk Detayı ekranı için öncelik sırasını anlatır mısın? Önce fotoğraflar, sonra isim ve fiyat, sonra özellikler, sonra olanaklar, sonra emlakçı. Onayla veya iyileştir."
→ "Tamam, şimdi lütfen devam et ve bu ekranları hem açık hem de karanlık modda, şu anda bağlı olan tasarım sistemime sadık kalarak oluştur. Tüm kullanıcı yolculuğunu tamamladığından ve tüm ekranları oluşturduğundan emin ol."
Oluşturmaya bastığımda, araç ürünü çoğu tasarımcının ilk müşteri görüşmesinden sonra bileceğinden daha iyi biliyordu.
Şimdi varyantlar hakkında kısa bir not. Bunu dikkatlice okuyun.
Güzel bir özellik: Ekranlarınızın farklı varyantlarını oluşturabilirsiniz. Bunu Moonchild'a açıkça belirtmeniz yeterlidir, o da halleder. Haven için, birine karar vermeden önce tüm uygulama için üç farklı estetik yön istedim. İşte kullandığım tam komut:
“Haven için 3 tam mobil UI tasarım konsepti oluşturmanı istiyorum:
Konsept 1 - Sıcak Editoryal: Krem arka planlar, geniş boşluklar, mülk isimleri için serif başlıklar, yumuşak gölgeler, dergi tarzı görsel işleme.
Konsept 2 - Cesur Modern: Karanlık mod, yüksek kontrast, her yerde sans-serif, keskin köşeler, uçtan uca görsellerle fotoğraf odaklı.
Konsept 3 - Premium Minimal: Nötr palet (kirli beyaz, odun kömürü, tek vurgu), rafine tipografi, bol nefes alma alanı, ince mikro etkileşimler.
Bağlı tasarım sistemini temel olarak kullan, ancak her konseptin sistemi farklı bir estetik yöne çekmesine izin ver. Tam ekranlar oluştur, sadece bölümler değil. Ne yapacaksın?”
Sonundaki "Ne yapacaksın?" kısmına dikkat edin. Bunu işe yaratan küçük detay budur. Araç her şeyi körü körüne oluşturmak yerine bir planla geri döndü.
Konsept başına 5 temsili ekran oluşturacağını söyledi. Üç yönü yan yana incelerdim. İstediğim birini seçtiğimde, tüm uygulamayı o yönde tasarlamaya giderdi.
Bu, maliyet denklemini tamamen değiştiriyor. Üç tam yapı için ödeme yapmıyorsunuz. Üç hızlı örnekleyici için ödeme yapıyorsunuz, ardından gerçekten seçtiğiniz yönde tek bir tam yapı için.
Sıcak editoryal olanı seçtim. Ekranların tam seti sonra geldi.
Şimdi beni gerçekten şaşırtan kısım.
Moonchild'ın oluşturduğu her ekran, önizleme modunda etkileşimlidir. Statik bir maket değil. Gerçekten etkileşimli.
Giriş alanlarına tıklayabilirsiniz. Düğmelere dokunabilirsiniz. Herhangi bir kod yazılmadan önce prototipi test eden gerçek bir kullanıcı gibi ekranlar arasında hareket edebilirsiniz. Haven için önizlemede, aksi takdirde Codex'e gidecek olan iki akış sorunu yakaladım. Mülk detayı ekranında göz atmaya geri dönmenin belirgin bir yolu yoktu. Emlakçıyla iletişim CTA'sı, sayfanın çok altındaydı. Tasarımı önce tıklamadan Codex'e verseydim her ikisi de giderdi.
Kilit nokta budur. Herhangi bir kod yazılmadan önce ürünü test edersiniz.
İyileştirme döngüsü son parçadır.
Bir ekranın üzerinde çalışılması gerektiğinde, sıfırdan yeniden komut istemezsiniz. Ekranı seçersiniz, araca neyi değiştireceğini söylersiniz ve o da yerinde bir v2 oluşturur. Daha sinematik bir kahraman görseli mi istiyorsunuz? v2. Kart düzenini liste görünümüyle değiştirmek mi istiyorsunuz? v3. Varyantlar birikir, böylece karşılaştırabilir ve en güçlü olanı seçebilirsiniz.
Haven'in mülk detayı ekranı için üç yinelemeden geçtim. v1'de emlakçı bloğu çok yukarıdaydı. v2 hiyerarşiyi düzeltti ancak fotoğraf galerisi küçük geldi. v3 ikisini de mükemmel yaptı. Yaklaşık 8 dakikalık ileri geri.
Boş bir sayfadan kürasyon yapmıyorsunuz. Gerçek bir yönü iyileştiriyorsunuz. Bu, kıdemli bir tasarımcıyla çalışmaya en yakın hissettiren kısım.
Adım 3: Moonchild'ı MCP Üzerinden Codex'e Bağlayın
İş akışının ÇATALLANDIĞI yer burası.
Tasarım sistemi Codex'e kuralları verir. MCP bağlantısı Codex'e daha güçlü bir şey verir. Gerçek tasarım çıktısına doğrudan erişim. Ekran görüntüleri değil. Tasarımın metin açıklamaları değil. Codex'in okuyabileceği ve yeniden oluşturabileceği yapılandırılmış tasarım verileri.
İşte kurulum:
→ Moonchild Ayarları'na, ardından MCP'ye gidin
→ Kurulumunuz için kurulum komutunu kopyalayın
→ Codex CLI'yi açın
→ Kurulum komutunu yapıştırın
→ Moonchild hesabınızla kimlik doğrulaması yapın
→ Bitti
Bağlandıktan sonra Codex, hem tasarım sisteminizi hem de tasarladığınız belirli Haven ekranlarını görür.
Adım 4: Codex Kodu Gönderir
Şimdi Codex'e şu şekilde komut verirsiniz:
Moonchild MCP'yi kullanarak Haven Gayrimenkul Mobil Uygulama projesini getir ve içinde hangi ekranların olduğunu bana söyle.
Bu ilk komut iki işi yapar. MCP'nin doğru şekilde bağlandığını onaylar. Ve Codex'e tasarladığınız her ekrana tam görünürlük sağlar.
Codex'in daha ağır bir şey yapmasına izin vermeden önce küçük bir ipucu. Plan modunda kalın. Codex, yürütmeden önce ne yapacağını gösterir. Planı her seferinde okuyun. Hangi ekranları, hangi sırayla ve hangi kalitede istediğini anladığından emin olun. Codex'in gerçekten ihtiyacınız olanı kodlaması ile sizin ihtiyacınız olduğunu düşündüğü şeyi kodlaması arasındaki fark budur.
Planı inceledikten ve istediğiniz ekrana yönlendirdikten sonra Codex, tasarım verilerini doğrudan Moonchild'dan çeker, tasarım sisteminize başvurur ve kodu yazar. Hatta üzerine gelme durumlarını, geçişleri ve uç durum işlemeyi bile ekler çünkü bir komuttan tahmin etmek yerine gerçek tasarım verilerinden çalışır.
Sonuç. Gerçek kod tabanınızda, tasarımla birebir eşleşen, dakikalar içinde üretim kalitesinde UI.
@ignytlabs'ta her müşteri MVP'sinde tasarım için iki hafta bütçeleme yapardık. Bir tasarımcı Figma dosyasını oluştururdu. Bir geliştirici onu yorumlardı. Yorumlama sapardı. Düzeltirdik. Döngü. Bu iş akışıyla tüm döngü, tek bir öğleden sonra çalışmaya sıkışır. Aynı kalite. Daha yüksek marj. Çok daha az bağlam değiştirme.
Bu İş Akışı Ne Zaman Kullanılır
Bu iş akışı her ekip için doğru değildir. Ne zaman uyduğu konusunda dürüst olun.
Şu durumlarda kullanın:
→ Tek başınıza veya küçük bir ekiple MVP'ler çıkarıyorsanız
→ Tasarım tutarlılığı ekranlar arasında bozulmaya devam ediyorsa
→ Ayrı bir Figma'dan tasarımcıya geliştiriciye iş hattı sürdürmek istemiyorsanız
→ Zaten bir tasarım sisteminiz varsa ve her yerde uygulanmasını istiyorsanız
Şu durumlarda kullanmayın:
→ Tam zamanlı bir iç tasarım ekibiniz ve olgun bir Figma kütüphaneniz varsa ölçekteyseniz
→ Her gölgenin önemli olduğu bir pazarlama sitesi veya marka çalışması için piksel mükemmelliğinde aktarıma ihtiyacınız varsa
→ Kod tabanınız, özel tasarım çalışması gerektiren son derece özel UI kalıplarına sahipse
MVP'ler ve SaaS ürünleri çıkaran geliştiricilerin %80'i için bu iş akışı ihtiyacınız olan her şeyi kapsar.
Nelere Dikkat Etmelisiniz
Bunu çalıştırmadan önce birkaç dürüst uyarı.
Tasarım sisteminizin kalitesi, çıktı kalitenizi belirler. Çöp girdi, çöp çıktı. Üç renk token'ı olan yarım bırakılmış bir Figma dosyası vasat ekranlar üretecektir. Sisteme önceden zaman ayırın. Her ekranda size geri döner.
PRD kalitesi önemlidir. Belirsiz bir özet size genel ekranlar kazandırır. Kullanıcı akışları, uç durumlar ve net hiyerarşiye sahip belirli bir PRD size kullanışlı tasarımlar kazandırır. Bu bir araç sınırlaması değil. Bu bir düşünme sınırlaması.
Hala zevke ihtiyacınız var. Araç üretir. Siz yönlendirirsiniz. Doğru varyantı seçmek ve onu iyileştirmek, yargınızın yaşadığı yerdir. Kürasyon adımını atlarsanız, vibe tasarımına geri dönersiniz.
Bazı bileşenlerin manuel olarak ayarlanması gerekir. Karmaşık animasyon durumları, özel etkileşim kalıpları, tasarım sistemi dışındaki herhangi bir şey Codex'te manuel bir geçiş gerektirir. MCP sizi %90 oranında oraya götürür. Son %10 sizin zevkinizdir.
Bunun Asıl Anlamı
İşte dürüst görüşüm.
AI tarafından oluşturulan ürünleri göndermedeki darboğaz hiçbir zaman kod olmadı. AI kodu yazabilir. Darboğaz her zaman tasarım katmanı olmuştur. Tutarlılık, zevk, her şeyi birbirine bağlayan sistem.
Bu darboğaz az önce çöktü.
Ajansımızda her müşteri MVP'si için tasarıma iki hafta bütçeleme yapardık. Bir tasarımcı tut. Figma dosyalarını bekle. Geliştiricinin onu yorumlamasını izle. Döngü. Eskiden iki hafta süren şey artık iki gün sürüyor. Aynı kalite. Daha hızlı teslimat. Daha yüksek marj.
Bu, fonlanan ekiplerin Figma artı tasarımcı artı geliştirici iş hatlarıyla zaten sahip olduğu iş akışıdır. Fark şu ki, artık yalnız geliştiriciler, bağımsız ajanslar ve küçük stüdyolar, personel sayısı olmadan aynı kaldıracı elde ediyor.
2026, bunu ilk çözen ajanslar ve geliştiriciler için HAKSIZ olacak.
TLDR
→ Kötü UI için Codex'i suçlamayı bırakın. Codex sorun değil. Sizin iş akışınız sorun.
→ Adım 1: Tasarım sisteminizi Moonchild'ın içinde oluşturun. Figma, GitHub veya canlı bir URL'den içe aktarın. Veya markanızı tanımlayın. Veya Haven için yaptığım gibi Dribbble ilhamı ekleyin.
→ Adım 2: PRD'nizi yapıştırın. Oluşturmadan önce sohbet modunda beyin fırtınası yapın. Önce ekran listesini ve gezinme modelini kilitleyin.
→ Varsayılan olarak bir varyant oluşturur. Kahraman ekranlarında farklı vibeler belirtilmiş birden çok varyantı açıkça isteyin.
→ Herhangi bir kod yazılmadan önce akışı test etmek için etkileşimli önizlemeyi kullanın. Ekranları yerinde v2, v3 yinelemeleriyle iyileştirin.
→ Adım 3: Moonchild'ı MCP üzerinden Codex'e bağlayın. Bu, Codex'e ekran görüntüleri değil, gerçek tasarım verileri verir.
→ Adım 4: Codex'e MCP'yi kullanarak her ekranı oluşturması için komut verin. Üretim kalitesinde UI dakikalar içinde gönderilir.
→ Tasarım sisteminizin kalitesi, çıktı kalitenizi belirler. Oraya yatırım yapın.
→ Figma'dan aktarıma geliştiriciye döngüsü öldü. Tek bir iş akışı artık tasarımı ve kodu birlikte yürütüyor.
LFG.
