80/20 Mühendisliği: Sitemi Bir Haftasonunda Nasıl Yeniden İnşa Ettim

Size bir sır vereyim: Kişisel web sitemi bir haftasonunda yeniden yazmam tamamen kodlama hızım yüzünden değildi. Hemen hemen hiç kod yazmadığım için bunu başardım.

Bunun yerine, zamanımın çoğunu çoğu geliştiricinin hastalıktan kaçtığı şeyle geçirdim—hazırlık yapmak. Dokümantasyon oluşturmak. Notlar almak. Ve sonunda editörümü açıp OpenAI'nin Codex'iyle çalışmaya başladığımda, gerçek uygulama iyi çalışılmış bir sihirbazlık gösterisi gibi hızla geçti.

Bu, tek bir kod satırı yazmadan önce işin %80’ini yapmak ve bunun her şeyi nasıl değiştirdiğinin hikayesidir.

Neden Siteyi Yeniden Yazdım?

Sitem Qwik v3 üzerinde çalışıyordu. Sağlam teknoloji, hoş atmosfer ama daha fazla esneklik istiyordum—özellikle yönlendirme konusunda. Framework modunda React Router'a geçiş yaptım. Tam bir yeniden inşa, bir refaktör değil. Yeni mimari, temiz dosya yapısı, güncel stiller (merhaba Tailwind v4) ve tamamen boş bir sayfa.

Ama beni asıl şaşıran şey şuydu: Asıl kodlama yaklaşık 2–3 saat sürdü. Baştan sona. Ve ilk denemede çalıştı.

Peki diğer 5 saatte ne oldu?

%80: Bir Danışmanın Sunum Dosyası Hazırlaması Gibi Codex'i Hazırlamak

Çabanın çoğu "mega prompt sistemi" oluşturmak için harcandı—gösterişli bir arayüzde değil, doğrudan proje klasörümde. Codex’e tek bir bileşen yazdırmadan önce şunları yaptım:

• React Router dokümantasyonunun tamamını indirdim ve /guides dizinine kaydettim.

• Aynısını Tailwind CSS v4 için de yaptım, en ilgili sayfaları Firecrawl kullanarak Markdown formatına çevirdim.

• PROMPT.md dosyası oluşturdum, içinde proje genel bakışı vardı:

  • "Eski kod / altında, yeni kod /app klasöründe."
  • "Minimal UI, iş mantığına odaklanılacak."
  • "Tailwind v4 kullanılacak. React Router'da framework modunda kalınacak."
  • Ve devamı.

Bu bir dolgu metni değildi. Bu, operasyonel bağlamdu—bir ekip üyesine ilk gününde verilecek detaylı brifing gibiydi. Codex ne istediğimi sadece tahmin etmiyordu. Depoda dokümantasyon vardı. Açık ve net kurallar vardı. Kısıtlamalar vardı.

Sonunda şunu yazdığımda:

"PROMPT.md’yi oku. Öncelikle tüm rotaları yeni uygulamaya taşı."

Codex, bu görev için hayatı boyunca bekliyormuş gibi yanıt verdi.

Mega Prompts, Minimum Halüsinasyon

Sonuçlar şaşırtıcıydı. Codex direktiflere bağlı kaldı. Halüsinasyonlar yapmadı. Şeyler icat etmeye çalışmadı. "UI'ya odaklanma" talimatına uydu. Sunucu mantığı özenle taşındı. Rota yapılandırması, sanki benim yazdığım ama bir derleyicinin sabrına sahip olduğum bir iş gibiydi.

Bu sadece "prompt mühendisliği" değildi. Bu, Codex'i gerçek ve güncel spesifikasyonlara oturtmaktı. Belirsiz bir görev listesi değil. İstek listesi değil. Yapılandırılmış giriş, net örnekler ve ihtiyaç duyduğu gerçek dokümanlara doğrudan erişim vardı.

Zamanı Ne Aldı? Kod Değil

Temel atıldıktan sonra iş ikiye ayrıldı:

1. Codex modu – Hızlı, yapılandırılmış, tekrar edilebilir yürütme. Göç, mantık ve hatta bazı düzen iskeletlerinde neredeyse kusursuz doğrulukla çalıştı.
2. Tasarım keşfi modu – Yavaş, manuel ve açık uçlu. İnsan tarafıydı: görünüm seçmek, düzenleri denemek, bileşenlerle denemeler yapmak. Çalışan bir görsel stil oluşunca, Codex tekrar devreye girip tasarım kalıplarını yaydı.

Tek gerçek yavaşlama, bir şeyin nasıl görünmesini istediğimi bilmediğimden kaynaklandı—nasıl çalışması gerektiğinden değil.

Gerçek İçgörü: Codex, Ancak Senin Hazırlığın Kadar İyidir

Bu haftasonu, işimde fark ettiğim bir değişimi pekiştirdi:

Kodlama kolay haline geliyor. Planlama zor ve en önemli kısım.

Küçük ve orta ölçekli projeler için uygulamayı %20’lik görev olarak görüyorum artık. %80'i ön tarafa koyuyorum: doküman toplamak, kapsamlı görevler yazmak, bağlamsal promptlar oluşturmak.

Codex bu tür yapılarla gelişir. Eğer muğlaklık verirsen, muğlaklık alırsın. Ama ortamını niyetle inşa edersen—dokümanlar, kısıtlamalar, net tanımlar—kusursuz hafızaya sahip kıdemli bir geliştiriciden farksız performans gösterir.

İleriye Dönük: Yapay Zekayı Cin Değil, Bir Ekip Arkadaşı Gibi Gör

Alınacak ders basit: AI kodlama araçlarını iş arkadaşın gibi gör. Onlara gerçek bir mühendise vereceğin materyalleri ver. Bağlamı hazırla. Spesifik ol. Kapsamlı ol.

Sonraki büyük proje için şunları da yapacağım:

• Tüm proje kapsamını tanımlayan ana plan dokümanı.
• Alt sistem veya bileşen başına bireysel görev spesifikasyonları.
• Yerel referans olarak kullanılacak çalışan markdown dokümanlar ve örnek dosyalar.

Codex büyülü sözcüklere ihtiyaç duymaz—yapıya ihtiyaç duyar.

Daha hızlı inşa mı etmek istiyorsun? Önce inşa etmemeyi öğren. Önce planla. Sonra niyetle prompt at.

Tasarımın Evrimi: Görsel Bir Yolculuk

Zamanla sitem birçok dönüşümden geçti—her biri yeni fikirlerin, araçların ve öğrenilen derslerin bir yansımasıydı. İşte hızlı bir görsel tur:

Versiyon 1: Başlangıç Noktası

Versiyon 2: Daha Belirgin Bir Ses

Versiyon 2.1: İnce Ayarlar ve Düzeltmeler

Versiyon 3: Qwik Dönemi

Versiyon 4: Remix ile Odaklanmış Sadelik

Her versiyon, bir sitenin etkili olmasını sağlayan unsurlar hakkında yeni içgörüler getirdi—sadece estetikte değil, açıklık, kullanılabilirlik ve sürdürülebilirlikte de. Tasarım yolculuğu, geliştirme yolculuğuyla paraleldi: bilinçli, yinelemeli ve her zaman ileriye bakıyordu.