Codex 
OpenDesign OpenDesign'da OpenAI Codex ile arayüz tasarlama: kurulum, brief'ten incelenmiş dosyaya kadar tam bir görev ve başlamadan önce bilmeniz gereken sınırlar.
“Daha sakin bir proje panosu.
Net öncelikler. Odaklanmaya alan.”
ÜÇ CODEX SAYFASI
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun EKLENTİLER VE KURULUMTasarım eklentilerine göz atın veya OpenDesign kurulum talimatlarını alın.
Kaynaklara gidin FARKLI BİR ÇIKTISlayt sunumlarının kendi iş akışına sahip ayrı bir kılavuzu vardır.
Codex Slaytlarını açınEksiksiz Bir Codex Tasarım Görevi
Baştan sona gösterilen tek bir görev: teslim ettiğiniz brief ve kısıtlar, geri gelen çıktı ve iş bitmeden önce hâlâ yaptığınız kontroller. Aşağıdaki arayüz bu sayfa için oluşturulmuş açıklayıcı bir örnektir, kayıtlı bir Codex çalıştırması değildir.
BriefKüçük bir ürün ekibi için bir proje ilerleme panosu tasarlayın. Genel ilerlemeyi, sıradaki kilometre taşını ve bloke olan işleri tek bakışta gösterin. Görevler Yapılacak, Devam ediyor ve Tamamlandı sütunları arasında hareket eder. Pano hem masaüstünde hem mobilde çalışmalıdır.
data-od-id kancalarına sahip kendi kendine yeterli tek bir HTML dosyasıBrief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
Düzeni planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve talep üzerine gözden geçirir.
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
Kenar çubuğu, üst bilgi, istatistikler ve sütunlar 8px ızgarada durur; 1440 veya 390'da hiçbir şey çakışmaz.
İlerleme, sonraki kilometre taşı ve engellenen sayısı sütun başlıklarının önüne geçer; vurgu rengi yalnızca bir kilometre taşı etiketini işaretler.
Sütunlar segmentli bir anahtara dönüşür; kilometre taşı çubuğu kalır; kenar çubuğu bir sekme çubuğuna katlanır.
Önizlemeyi burada masaüstü ve mobil arasında değiştirin. Kendi artifact'ınızda bir görevi açın ve filtreleri, klavye gezinmesini ve odak davranışını test edin.
Uygunluk
Uyumluluk
Bu kılavuz, yerel Codex'i kapsar. Diğer modlarda kurulum ve faturalandırma farklıdır. Yayınlanan referanslar 11 Eylül 2026 tarihinde kontrol edilmiştir.
OpenAI Codex, kodlama ajanı — eski kod tamamlama modeli değil. Bu sayfa Codex ile arayüz tasarlamakla ilgilidir, Codex uygulamasının kendi arayüzüyle değil. OpenDesign’ın kurulum notları, Codex’i mevcut ajanlar arasında listeler.
Yerel Codex için ChatGPT ile giriş yapın veya bir OpenAI API anahtarı kullanın. Bunların faturalandırma ve politika açısından farklı sonuçları vardır. OpenAI’nin kimlik doğrulama talimatlarını izleyin; bu sayfa bir kota veya fiyat garanti etmez.
Masaüstü sürümler için indirme sayfasına bakın. Kaynak hızlı başlangıç kılavuzundaki Node.js ve pnpm gereksinimleri, kaynak koddan çalıştırmaya uygulanır, bir masaüstü paketi kurulumuna değil. Uyumlu minimum Codex sürümü: burada doğrulanmadı.
Kurulu sürümünüzün gösterdiği bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Amaçlanan ajanın görevi ele aldığını ve üretilen artifact’in açıldığını doğrulayın. Sadece indirme işlemi, çalışan bir bağlantı kurulduğunu göstermez.
Masaüstü uygulamasıyla başlayın
Önce indirin, kurulu sürümünüz için Codex kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu izlemek için OpenDesign’ı kaynak koddan derlemeniz gerekmez.
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinKurulu sürümünüzdeki Codex talimatlarını izleyin. Yerel Codex için, bir görev göndermeden önce ChatGPT girişini veya API anahtarı ile kimlik doğrulamasını tamamlayın.
Codex kimlik doğrulama notlarını okuyunBir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.
Bir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Design kurallarımı kullanın. Masaüstü ve mobil genişliklerde kontrol edin.
Kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin. Eklentiyi Codex'e yüklemek için aşağıdaki kurulum girişini kullanın.
Codex tasarım iş akışı
Aynı progress-board görevi, brief'ten doğrulanmış dosyaya kadar takip edilir. Her adım; ne sağladığınızı, Codex'in ne yaptığını, OpenDesign'ın neye katkıda bulunduğunu ve neyi kontrol ettiğinizi listeler.
Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.
AGENTS.md dosyasını okur; bir şey belirsiz olduğunda sorar.Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.
Codex kendi içinde eksiksiz bir HTML dosyası yazar: düzen, stiller, etkileşimler ve stabil hook'lar.
Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. Tasarımın değerlendirildiği yer burasıdır.
data-od-id hedeflerini açığa çıkarır.Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.
Kaynaklar
Görsel bir eğitim değil, Codex'in okuması için kurulum talimatları içeren düz metin bir adres. İstemi Codex'e kopyalayın, gerisini kendisi okur.
https://open-design.ai/codex-plugin/ adresini okuyup kurulum talimatlarını izleyerek OpenDesign'ı Codex'e kurun. Yapılandırmayı değiştirmeden önce sorun.
Codex için, her biri kendi kaynağı ve kurulum talimatlarıyla birlikte gelen frontend ve tasarım sistemi eklentileri.
Codex'in OpenDesign içinde üretebileceği ürün türleri, her tür için bir skill.
Codex herhangi bir şey üretmeden önce bağlanacak marka token'ları ve bileşenleri.
Sunumlar için ayrı bir kılavuz vardır; çıktı ve iş akışı, ürün UI'sinden farklıdır.
Sınırlamalar
SSS
Küçük bir görevle başlayın, gidiş-dönüşü değerlendirin, ardından gerçek brief'i getirin. Kurulumunuza uyan seçeneği seçin; sayfa bunu algılamaz.