Anasayfa Teknoloji Robotik Blog Bize Yazın

Codex ile Web Sitesi Tasarımı Nasıl Yapılır? (2026 Rehberi)

Codex yapay zeka kodlama ajanı ile bilgisayar ekranında oluşturulan web sitesi tasarımı

Kod yazmayı bilmeseniz bile artık bir fikri gerçek bir web sitesine veya uygulamaya dönüştürmek mümkün. OpenAI’nin ChatGPT içindeki geliştirme ajanı Codex, projeyi kurmaktan tasarımı profesyonelleştirmeye, harici uygulamalarla entegre etmekten internete yayınlamaya kadar tüm süreci tek bir arayüzde topluyor. Bu rehberde Codex ile sıfırdan bir uygulama geliştirirken izlenecek adımları, agents.md ve design.md dosyalarının işlevini, Zapier entegrasyonunu ve yayına alma sürecini baştan sona anlatıyoruz.

Codex yapay zeka kodlama ajanı ile bilgisayar ekranında oluşturulan web sitesi tasarımı
Codex, ChatGPT içindeki yapay zeka kodlama ajanıyla kod bilmeden web sitesi ve uygulama geliştirmeyi mümkün kılıyor.
Hızlı Özet

Codex, ChatGPT içinde çalışan bir geliştirme modu. Projeye agents.md dosyasıyla kalıcı bir bağlam kazandırılır, GPT Taste ve design.md ile tasarım standart yapay zeka görünümünden kurtarılır, Zapier SDK ile binlerce harici uygulama saniyeler içinde bağlanır. Geliştirme sırasında “local commit” ile kayıt noktaları oluşturulur, iş bittiğinde ise Site skill ile proje doğrudan Codex üzerinden internete açılır.


Codex Nedir ve Nasıl Kurulur?

Codex, kodlama bilgisi olmayan kullanıcıların bile adım adım ilerleyerek uygulama geliştirebilmesi için tasarlanmış, ChatGPT uygulaması içinde bir mod olarak çalışan bir yapay zeka ajanı. Geliştirmeye başlamak için öncelikle bir “Project” oluşturulur, bu aslında bilgisayarınızda kodların saklandığı bir klasördür. Codex’in genel kod yazma ve hata ayıklama yeteneklerine daha yakından bakmak isterseniz OpenAI Codex Nedir? Kod Yazan Yapay Zeka Nasıl Kullanılır? yazımıza göz atabilirsiniz.

1 Plan Seçimi

Ücretsiz sürüm sınırlı kullanım sunuyor. Uygulama geliştirmeyi ciddiye alacaksanız genellikle 20 dolarlık başlangıç planı öneriliyor.

2 Model ve Effort Ayarı

GPT 5.6 gibi güncel modeller seçilebiliyor. Modelin ne kadar çaba harcayacağını belirleyen “Effort” ayarı “High” seviyesinin üzerine çıkarılmamalı, aksi halde sonucu iyileştirmeden kullanım limitleri hızla tükeniyor. Hız ayarını da “Standard” seviyesinde tutmak, “Fast” moduna göre daha uzun kullanım ömrü sağlıyor.

agents.md Dosyası: Projenin Hafızası

agents.md, Codex’in projeniz üzerinde çalışmaya başlamadan önce okuduğu temel talimat ve bağlam dosyası. Bir projenin beyni gibi işlev görüyor. Bu dosya sayesinde her yeni sohbete başladığınızda projenin ne olduğunu, amacını ve teknik yapısını Codex’e tekrar anlatmak zorunda kalmıyorsunuz.

1 /init Komutuyla Otomatik Oluşturma

Sohbet satırına eğik çizgi yazıp /init komutunu seçtiğinizde Codex, ilk verdiğiniz talimatlardaki tüm bağlamı kullanarak agents.md dosyasını kendisi oluşturur. Oluşan dosyada proje yapısı ve klasör organizasyonu gibi bilgilerin doğru yerleştiğini kontrol etmek gerekir.

2 Otonom Çalışma Talimatı

Dosyanın en üstüne şu şekilde bir not eklemek, sürekli onay istemeden çalışmasını sağlar: “Kendi başına gerçekleştirebileceğin eylemleri (uygulamayı başlatmak, kodun doğru oluşturulduğunu doğrulamak, tarayıcı üzerinden görsel kontrol yapmak gibi) benden izin istemeden otonom olarak gerçekleştir.” Bu talimat, Codex’in web sitesinin görsel olarak doğru göründüğünü kendi başına tarayıcıdan kontrol edebilmesini de sağlıyor.

Tasarımı Profesyonelleştirmek: GPT Taste ve design.md

Yapay zeka ile üretilen web siteleri genellikle birbirine benzer, “AI slop” olarak adlandırılan tanıdık bir görünüme sahip oluyor. Codex bu sorunu iki farklı araçla çözüyor.

1 GPT Taste Becerisi

GPT Taste, Codex’e güncellenmiş görsel sistem kuralları sağlayarak modeli tekrarlanan tasarım kalıplarından uzaklaştıran bir beceri (skill). Özellikle animasyonlar konusunda başarılı, sayfa animasyonlarının çoğunu ek müdahaleye gerek kalmadan profesyonel şekilde yönetiyor. Kurulumdan sonra becerinin aktif olması için Codex’ten çıkıp ilgili sohbete tekrar girmek gerekiyor.

2 design.md ile Marka Kimliği

design.md, Google’ın Stitch adlı tasarım aracıyla tanıttığı bir format olup modele varsayılan tercihleri yerine takip etmesi gereken spesifik bir görsel yönlendirme veriyor. getdesign.md gibi kaynaklardan Claude, Cursor veya Discord’un tasarım sistemlerini indirip Codex’e yükleyebilir, ya da kendi renk paletinizi ve boşluk kurallarınızı içeren özgün bir dosya hazırlayabilirsiniz. Dosyayı ekledikten sonra Codex’e “Projede bir design.md dosyası oluştur, yüklediğim bu dosyanın içeriğini ona kopyala ve tüm siteyi bu yeni tasarıma göre revize et” talimatı verilir. Sayfa yapısının ve animasyonların değişmemesi için bunu ayrıca belirtmek gerekir.

3 Assets Klasörü

Codex’e “Bir assets klasörü oluştur ve bu klasörü agents.md dosyasına bağla” talimatı verildiğinde, üretilen her yeni görsel design.md’deki görsel sisteme uygun şekilde bu klasöre yerleştirilir. Görsel üretim limitlerini korumak için işlemden önce “Plan Mode” butonunu kullanmak, Codex’in kalıcı değişiklik yapmadan önce planını göstermesini sağlar.

Test ve Görsel Doğrulama: Browser Verification

Codex, yazdığı kodun ekranda nasıl göründüğünü kontrol edebiliyor. Uygulama içindeki tarayıcıyı kullanarak hataları tespit ediyor ve kaymış bir buton gibi görsel sorunları kendi başına düzeltebiliyor. Aynı kontrol mekanizması, sitenin hem mobilde hem masaüstünde düzgün görünüp görünmediğini (responsiveness) de otomatik olarak test ediyor.

Zapier SDK ile Harici Uygulama Entegrasyonu

Gmail, Slack veya HubSpot gibi harici servisleri projeye bağlamak normalde erişim token’larını düzenli yenilemek gibi karmaşık güvenlik adımları gerektirir. Zapier SDK bu süreci basitleştiriyor.

1 Bağlantı Kurma

Zapier hesabında “Add Connection” seçeneğinden ilgili uygulama (örneğin Gmail) seçilerek yetkilendirme yapılır.

2 Dokümantasyonu Codex’e Sağlama

Zapier SDK dokümantasyonunun bağlantısı veya içeriği Codex sohbetine yapıştırılır, ardından ne yapılmak istendiği net şekilde belirtilir. Örneğin: “Zapier SDK’yı projeme ekle ve belirli bir tetikleyici oluştuğunda şu adrese Gmail üzerinden e-posta gönder.”

3 Otomatik Kurulum ve Test

Codex, Zapier SDK’sını projeye yükler ve gerekli kod boru hattını kendisi oluşturur. İşlem tamamlandığında bir test çalıştırıp gönderilen e-postanın mesaj ID’si gibi bir onay üretebilir. Bu yöntemle Zapier’in desteklediği 9.000’den fazla uygulama benzer kolaylıkla projeye dahil edilebilir.

Versiyon Kontrolü: Branches ve Local Commit

Codex’teki dallanma (branches) özelliği, bir video oyunundaki kayıt noktalarına benziyor. Codex’e “yerel bir kayıt (local commit) oluştur” komutu verildiğinde, projenin o anki hali isimlendirilmiş bir kontrol noktası olarak kaydediliyor. Bir aşamada hata olursa bu noktalar listelenip proje istenilen ana kolayca geri döndürülebiliyor. Bu işlem için GitHub’a üye olmak veya bağlanmak zorunlu değil, tamamen bilgisayarda gerçekleşiyor. Yeni başlayanlar için sadece “main branch” üzerinden ilerlemek yeterli; daha ileri düzeyde “Cloud Work Tree” ile paralel ajanlar farklı dallarda çalıştırılabiliyor.

Yayına Alma: Site Skill ve Özel Alan Adı

Eskiden bir siteyi canlıya almak için GitHub üzerinden Vercel gibi platformlara bağlanmak gerekiyordu. Site skill, bu süreci doğrudan Codex üzerinden birkaç adıma indiriyor.

1 Yayına Alma

Artı butonundan Site skill eklenir ve Codex’e siteyi yayına alması söylenir. İşlem bittiğinde yan panelde bir “Site” bölümü belirir. Paylaşım ayarı başta “just me” olduğundan, başkalarının görebilmesi için bunu “anyone on the internet” yapıp yayınlamak gerekir.

2 Özel Alan Adı Ekleme

Site bölümünden ilgili projenin ayarlarına girip “Add custom domain” seçeneği tıklanır, Codex alan adını bağlamak için gereken teknik adımlarda adım adım rehberlik eder.

Site skill’in varsayılan tasarımı oldukça sade kaldığından, siteyi görsel olarak tasarlamak için değil, sadece yayına alma aşamasında kullanılması öneriliyor. Tasarım işini GPT Taste ve design.md üstleniyor.

Codex ile GitHub bağlantısı zorunlu mu?

Hayır. Local commit özelliği bilgisayarda çalışır, Site skill de GitHub’a ihtiyaç duymadan doğrudan yayına almayı sağlar. GitHub bağlantısı yalnızca kodu bir depoda saklamak veya profesyonel iş akışlarına dahil etmek isteyenler için isteğe bağlı bir seçenektir.

GPT Taste ve design.md aynı anda kullanılabilir mi?

Evet, hatta birlikte kullanılması öneriliyor. GPT Taste genel tasarım kararlarını ve animasyonları yönetirken, design.md sadece renk paleti ve görsel dil gibi marka detaylarını üstüne giydiriyor.

Görsel üretim limitlerini korumak için ne yapılmalı?

İşlemden önce Plan Mode kullanmak, agents.md ve design.md ile net bağlam sağlamak, Effort ayarını “High” üzerine çıkarmamak ve hız ayarını “Standard” tutmak limitlerin daha uzun süre yetmesini sağlıyor.

Güncel yapay zeka haberlerini, yeni promptları ve pratik ipuçlarını kaçırma. Haber bültenimize ücretsiz abone ol, doğrudan mailine gelsin!

Ücretsiz Abone Ol

PAYLAŞ

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site istenmeyenleri azaltmak için Akismet kullanır. Yorum verilerinizin nasıl işlendiğini öğrenin.

Yukarı Kaydır