Tasarım için Codex: OpenAI Codex ile UI oluşturun

Codex, OpenAI'nin kodlama ajanıdır. Product Design eklentisi ve Figma entegrasyonu ile ciddi bir tasarım aracı haline geldi. Open Design, Codex'i açık kaynaklı bir tasarım iş akışına bağlar, OpenAI anahtarınız veya ChatGPT aboneliğiniz, dosyalarınız, yerel öncelikli.

Codex tasarım geri bildirim döngüsü: terminal ajanı, UI'ı işleyen tarayıcı ve bir çalışma alanı, geri döngü oluşturan bir geri bildirim okuyla

Open Design, Codex'i yerel öncelikli, açık kaynaklı bir tasarım ajanına dönüştürür, OpenAI anahtarınız, dosyalarınız ve etrafında özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi.

OpenAI Codex bir kod üreticisi olarak başladı, ancak 2026'da, ona doğru referansları, skill'leri ve doğrulama döngüsünü verdiğinizde, gerçek arayüzler tasarlamak için inandırıcı bir araç haline geldi. Bu, Codex'i UI, frontend ve tasarım sistemi çalışmaları için kullanmaya ve onu Open Design ile yapılandırılmış bir tasarım iş akışına bağlamaya dair pratik, uçtan uca bir rehberdir.

Codex'in bugün ne olduğunu, frontend'de neden birden iyi olduğunu, sıfırdan nasıl kurulacağını, ekran görüntüsünden UI'a döngüyü, gerçek frontend ve UI oluşturmayı, Codex'e bir tasarım sistemi vermeyi, resmi Figma gidiş-dönüşünü, Cursor ve Claude Code ile nasıl karşılaştırıldığını, tasarımcılar için kodsuz bir yolu, AI çıktısını jenerik gösteren tuzakları, BYOK'un OpenAI anahtarınızı nasıl yerel tuttuğunu ve Open Design'ın açık, yerel öncelikli bir tasarım katmanı olarak bu boşluğu nasıl kapattığını ele alır.

OpenAI Codex gerçekte nedir (ve ne değildir)

Önce, “Codex” arayan hemen herkesi tökezleten bir kavram karmaşasını giderelim. Orijinal OpenAI Codex, erken GitHub Copilot'a güç veren ve 2023'te kullanımdan kaldırılan 2021 tarihli bir kod tamamlama modeliydi. Bu sayfanın konusu o değil. Bugünün Codex'i, OpenAI'nin ajansal kodlama aracıdır, doğal dildeki görevlerden kodu planlar, yazar, çalıştırır ve doğrular.

Modern Codex dört yüzey üzerinden sunulur: bir terminal CLI'si (Rust ile yeniden yazılmış, Apache-2.0 lisanslı), VS Code, Cursor ve Windsurf için bir IDE eklentisi, devredilen asenkron görevler için bir bulut/web deneyimi ve uygulama içi bir tarayıcı ve Computer Use'a sahip bir masaüstü uygulaması.

  • Varsayılan model: 2026 ortası itibarıyla önerilen model gpt-5.5'tir; gpt-5.4 ise OpenAI'nin frontend ve bilgisayar kullanımı için açıkça eğittiği modeldir.
  • Talimat dosyası: Codex, proje kuralları için projenizdeki bir AGENTS.md dosyasını (araçlar arası bir standart) okur, tasarım kurallarınızı kodlamak için doğal yer.
  • Sandbox: Çekirdek düzeyinde bir sandbox'ta çalışır (varsayılan olarak workspace-write), böylece UI'ınızı düzenleyen bir ajan projenin dışına çıkamaz.
  • Sağlayıcı: OpenAI
  • Kimlik bilgisi: OpenAI API anahtarı (BYOK) veya ChatGPT aboneliği (Free / Go / Plus / Pro / Business / Enterprise)
  • CLI'nin lisansı: Apache-2.0, açık kaynak

Codex artık tasarımda neden iyi

2026'nın başlarında üç şey bir araya gelerek Codex'i jenerik bir kod üreticisi yerine gerçek bir tasarım aracı haline getirdi.

  • Frontend için eğitilmiş bir model: OpenAI, frontend ve bilgisayar kullanımı için eğitilmiş ilk ana hat modeli olan GPT-5.4'ü, tasarım iş akışı boyunca çok daha iyi görsel anlama ve daha güçlü kendi kendini doğrulama ile yayınladı. Hatta son varlıklara bağlanmadan önce mood board'lar ve görsel seçenekler bile üretebilir.
  • Resmi bir frontend design skill: openai/skills kataloğu, gerçek bir estetiği zorunlu kılan özenle seçilmiş bir frontend design skill sunar: kartsız düzenler, tam ekran hero'lar, marka öncelikli hiyerarşi, ölçülü hareket, en fazla iki yazı tipi ve tek bir vurgu rengi, ve Codex'i inşaya başlamadan önce görsel bir tez yazmaya zorlar. Bu frontend design skill'i eklemek, Codex'in çıktısını yükseltmenin en hızlı tek hamlesidir.
  • Tarayıcı doğrulaması: Playwright skill'i ile Codex, yalnızca derlemenin geçtiğini kontrol etmek yerine gerçek bir tarayıcı açar, kırılma noktalarına yeniden boyutlandırır ve çıktısını referansla karşılaştırır.
Tasarım sistemi, skill ve referans görselin iyi tasarım çıktısına yakınsadığını gösteren diyagram
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir skill ve gerçek referans görseller.

Üçünün de ardındaki ders: Codex varsayılan olarak zevke sahip değildir. Ona kısıtlar verdiğinizde iyi tasarım üretir, bir tasarım sistemi, estetik bir skill ve somut referanslar. Open Design tam olarak bu girdileri paketler; ikisinin neden birbirine uyduğunun nedeni de budur (daha fazlası aşağıda).

Codex'i tasarım çalışması için sıfırdan kurun

Temiz bir makineden, UI oluşturabilen ve doğrulayabilen bir Codex'e giden tam yol şudur.

Tek tıkla ilerlemeyi mi tercih edersiniz? Open Design masaüstü uygulamasını indirin, Codex'i özenle seçilmiş bir skill ve tasarım sistemi kütüphanesiyle bir arada sunar; böylece agent olarak Codex'i seçmeniz yeterli olur ve hiçbir CLI kurulumu olmadan tasarıma başlarsınız. Aşağıdaki adımlar, Codex'i kendiniz bağlamayı tercih ederseniz izleyeceğiniz manuel yoldur.

# 1. Codex CLI'yi kurun
npm install -g @openai/codex
# veya: brew install --cask codex
# veya: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Kimlik doğrulaması (daha yüksek limitler için ChatGPT ile giriş önerilir)
codex            # ardından “Sign in with ChatGPT” seçin

# 3. Proje bağlamını oluşturun
codex            # projenizin içinde AGENTS.md oluşturmak için /init çalıştırın

# 4. Resmi frontend skill'ini ekleyin, ardından Codex'i yeniden başlatın
# (Codex uygulamasında) $skill-installer frontend-skill

# 5. Figma MCP sunucusunu bağlayın (isteğe bağlı, tasarım devri için)
codex mcp add figma --url https://mcp.figma.com/mcp
Beş adımlı kurulum akışı: kur, kimlik doğrula, yapılandır, skill kur, doğrula
Kurulum sırası: kur → kimlik doğrula → AGENTS.md yapılandır → frontend skill'ini kur → tarayıcı doğrulamasını etkinleştir.
  • Tasarım kurallarınızı kodlayın: Token'larınızı, ilkellerinizi ve kurallarınızı AGENTS.md veya bir DESIGN.md içine koyun ve Codex'i bunlara yönlendirin; böylece çıktı jenerik bir görünüme dönmek yerine bir markayla eşleşsin.
  • Doğru akıl yürütme seviyesini seçin: OpenAI, düşük-orta akıl yürütme seviyelerinin sıklıkla en yüksek ayardan daha güçlü frontend sonuçları ürettiğini belirtiyor.

Ekran görüntüsünden UI'a iş akışı

Codex ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görseli çalışan, duyarlı bir UI'a dönüştürmek ve eşleşene kadar yinelemektir. OpenAI'nin kendi rehberliği beş adıma indirgenir.

  1. Sahip olduğunuz en net görsel referanslardan başlayın, ve yalnızca tek bir hero görseli değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
  2. Komutta spesifik olun; belirsiz komutlar jenerik UI üretir.
  3. Bir tasarım sistemi hazırlayın ve Codex'e token'ların ve kanonik ilkellerin nerede yaşadığını söyleyin.
  4. Playwright etkileşimli skill'ini etkinleştirin, böylece Codex gerçek bir tarayıcıda işler ve kırılma noktalarına yeniden boyutlandırır.
  5. Codex'in uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin, yalnızca derlendiğini onaylamasın.

Bir ekran görüntüsünü terminale sürükleyerek veya image bayrağı ile görselleri besleyin, ardından somut kısıtlarla komut verin:

codex -i reference-desktop.png -i reference-mobile.png \
  "Bu tasarımı React + Vite + Tailwind + TypeScript ile uygula.
   Mevcut tasarım sistemi bileşenlerimi ve token'larımı yeniden kullan.
   Boşlukları, düzeni ve hiyerarşiyi eşleştir; responsive yap.
   UI'nin referanslarla eşleştiğini doğrulamak için Playwright skill'ini
   kullan ve eşleşene kadar yinele."

İkinci bir terminalde bir dev sunucusu çalıştırın, komutları küçük ve odaklı tutun ve iyi yinelemeleri commit edin / kötü olanları geri alın (geri aldığınızda Codex'e söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilsin.

Frontend ve UI tasarımı için Codex

Tek bir ekran görüntüsünü bir sayfaya dönüştürmek demodur; gerçek bir frontend'i yayına almak ise asıl iştir. Codex ile UI tasarım çalışması, onu tek bir hero görseli olarak değil bir sistem kurmak olarak, yeniden kullanılabilir bileşenler, duyarlı düzenler ve her etkileşim durumu, ele aldığınızda iyi sonuç verir. GPT-5.4'ün daha güçlü görsel anlaması ve kendi kendini doğrulaması bunu pratik hale getirir, ancak yapı yine sizden gelir.

  • Önce bileşenler: Tüm sayfaları oluşturmadan önce Codex'ten token'larınıza karşı atomik, yeniden kullanılabilir bileşenler (düğmeler, girdiler, kartlar, gezinme) oluşturmasını isteyin; böylece frontend tek seferlik olmak yerine tutarlı kalır.
  • Varsayılan olarak duyarlı: Masaüstü ve mobil referanslar verin ve kırılma noktalarını adlandırın; Codex'in gerçek bir tarayıcıda yeniden boyutlandırmasını ve tek bir görünüm alanına güvenmek yerine bozulan düzenleri düzeltmesini sağlayın.
  • Her etkileşim durumu: hover, odak, etkin, boş, yükleniyor ve hata durumlarını açıkça belirtin, UI'ı bitmiş hissettiren ve jenerik AI çıktısının genellikle atladığı durumlar.
  • Erişilebilir işaretleme: Anlamsal HTML, etiketli kontroller, görünür odak halkaları ve yeterli kontrast talep edin ve Codex'ten bunları derlemenin bir parçası olarak kontrol etmesini isteyin.

Bir bileşeni ve durumlarını açıkça isteyen bir komut verin, ardından Codex'in referansa karşı doğrulamasını sağlayın:

codex "React + Tailwind + TypeScript ile duyarlı bir fiyatlandırma bölümü oluştur.
   design-system token'larımı ve Button/Card bileşenlerimi yeniden kullan.
   hover, focus ve mobilde alt alta yığılan durumları dahil et.
   Playwright skill'ini kullanarak bunu 375px ve 1280px'te pricing-desktop.png
   ve pricing-mobile.png ile karşılaştır ve eşleşene kadar yinele."

İyi frontend çıktısını “AI çöplüğünden” ayıran örüntü doğrulamadır: Codex UI'ı işler, kırılma noktaları boyunca referanslarınızla karşılaştırır ve yineler, yalnızca derlemenin geçtiğini onaylamak yerine.

Codex ile bir tasarım sistemi oluşturma

Bir tasarım sistemi, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır, jenerik Inter-ve-mor görünüme varsayılan olarak kaymak yerine Codex'in renklerinizi, yazı tipi ölçeğinizi, boşluklarınızı ve bileşenlerinizi bu sayede bilmesini sağlar. Codex'e karşı çalışacağı bir tasarım sistemi verin; ürettiği her ekran aynı zevki miras alsın.

  • Token'ları tanımlayın: Rengi, tipografiyi, boşluğu, yarıçapı ve gölgeyi adlandırılmış token'lar olarak yakalayın, Codex'in ekran başına değerler icat etmek yerine yeniden kullandığı sözcük dağarcığı.
  • İlkelleri yakalayın: Codex'i kanonik bileşenlerinize (Button, Input, Card, Modal) yönlendirin; böylece her birini yeniden çizmek yerine bunlardan oluştursun.
  • Codex'in okuduğu yere yazın: Kuralları, ajanın her çalıştırmada yüklediği bir AGENTS.md veya DESIGN.md içine kodlayın: hero kartı yok, en fazla iki yazı tipi, bir vurgu rengi, marka öncelikli hiyerarşi.
  • Her geçişte uygulayın: Codex'ten yeni UI'ı sisteme karşı kontrol etmesini ve sapmaları işaretlemesini isteyin; böylece tasarım sistemi ilk ekrandan sonra çürümek yerine gerçek kalsın.

Diğer yönde de çalışabilirsiniz: Codex'e birkaç referans ekranı verin ve ondan bir başlangıç tasarım sistemi, token'lar artı ilkeller, çıkarmasını isteyin, ardından bunu siz iyileştirin. Her iki durumda da sistem, sonuçları tekrarlanabilir kılan artefakttır.

Codex + Figma: tasarım ↔ kod gidiş-dönüşü

Şubat 2026'da OpenAI ve Figma resmi bir ortaklık duyurarak önceki Figma MCP beta'sını birinci sınıf, çift yönlü bir entegrasyona dönüştürdü. Her iki yönde de çalışır.

  • Tasarım → Kod: Figma'da bir frame'in “link to selection” bağlantısını kopyalayın, onu get_design_context ile Codex'e yapıştırın ve ondan mevcut bileşen kütüphanenizi kullanarak tasarımı uygulamasını isteyin.
  • Kod → Tasarım: generate_figma_design aracı (“Code to Canvas”), canlı, çalışan bir UI'ı düzenlenebilir Figma frame'lerine geri dönüştürür, tüm ekran, seçili bir öğe veya bütün bir dosya.

Figma MCP, uzak bir sunucu olarak çalışır ve hız sınırlarından muaftır. Bir kez ekleyin ve Codex, Claude Code, Cursor, VS Code ve daha fazlası için kullanılabilir olsun, tam olarak Open Design'ın düzenlemek için inşa edildiği türden taşınabilir, çok ajanlı bir yetenek.

Tasarım için Codex, Cursor ve Claude Code

Tasarım çalışması için tek bir kazanan yoktur, her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları üst üste yığar. Adil bir özet:

AjanTasarım gücüEn iyi olduğu alan
CodexGPT-5.4 + frontend-skill sonrası güçlü görsel cila; görsel anlamaDevredilen asenkron derlemeler, sandbox'lanmış çalıştırmalar, taşınabilir AGENTS.md kuralları
CursorCanlı önizleme ve satır içi düzenlemelerle görsel oluştur-ve-gör döngüsüBir IDE içinde sıkı yinele-ve-izle UI çalışması
Claude CodeSpesifik tasarım kararları (hex, boşluk, tipografi) ve kod tabanının farkında UXFrontend akıl yürütmesi ve geniş bağlamlı yeniden düzenlemeler

Tekrarlanan topluluk kararı, zevkin insanlardan geldiğidir: üçü de skill'ler, referanslar ve kısıtlar olmadan jenerik bir estetiğe varsayılan olarak kayar. Çözülmesi gereken asıl sorun budur, ve bu sorun, model biçimli değil, tasarım aracı biçimlidir.

Codex tasarım eklentileri karşılaştırması (Open Design dahil)

Codex'in tasarım yeteneği neredeyse tamamen ona neyi bağladığınıza bağlıdır. İşte bugün Codex ile kullanabileceğiniz başlıca tasarım eklentileri ve araçları ile Open Design'ın bunların arasındaki yeri:

Eklenti / araçNe katarAçık kaynakEn uygun kullanım
OpenAI Product Design pluginOpenAI'nin resmi rol eklentisi: yön keşfetme, kullanıcı akışlarını denetleme, canlı bir URL'den prototip oluşturma, ekran görüntülerini etkileşimli hale getirme, Figma veya Canva'ya dışa aktarmaHayırCodex içinde hızlı ve resmi tasarım işleri
openai/skills frontend-skillÖzenle seçilmiş bir estetik, kartsız düzenler, markayı öne alan hiyerarşi, ölçülü hareket, oluşturmadan önce bir görsel tezEvet (Apache-2.0)Ham çıktı kalitesini yükseltmek
Figma entegrasyonu (MCP)İki yönlü Figma ↔ kod: frame'leri kodda uygulama, çalışan bir arayüzü düzenlenebilir Figma'ya geri göndermeHayır (resmi)Figma içinde yaşayan ekipler
Open DesignCodex'in etrafında açık, yerel öncelikli bir tasarım katmanı: özenle seçilmiş skill + tasarım sistemi kütüphanesi, bir render hattı, bir masaüstü arayüzü ve BYOKEvet (Apache-2.0)Sahibi olduğunuz gerçek ve taşınabilir bir tasarım iş akışı

Nasıl seçilir: Codex içinde OpenAI'nin kendi tasarım akışını istiyorsanız, Product Design plugin yön keşfetmeyi, akışları denetlemeyi ve canlı bir URL'den prototip oluşturmayı kapsar. Ham çıktı kalitesi için frontend design skill en yüksek kaldıraca sahip eklentidir. Resmi Figma entegrasyonu, ekibiniz Figma içinde yaşıyorsa vazgeçilmezdir, ve taşınabilir olduğundan, Claude Code ve Cursor dahil diğerlerinden herhangi biriyle birlikte kullanabilirsiniz.

Open Design, baştan sona açık kaynak, yerel öncelikli ve BYOK olan tek seçenektir. Codex'i özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzü ile sarar, böylece Codex'i iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her projede elle bir araya getirilmesi gerekmez ve her çıktı kendi deponuzda kalır.

Kod yazmayan tasarımcılar için Codex

Codex ile tasarım yapmak için mühendis olmanız gerekmez. Ajan, düz dildeki niyeti ve gerçek referansları alır ve çalışan, duyarlı UI döndürür, bu da onu yalnızca frontend geliştiricileri için değil, tasarımcılar ve ürün insanları için gerçek bir araç yapar. İşin püf noktası, onu bir kodlama oturumu gibi değil, bir tasarım brief'i gibi yönlendirmektir.

  • Düz dille tarif edin: İstediğinizi tasarım terimleriyle söyleyin, düzen, hiyerarşi, ton, his, ve Codex'in bunu işaretlemeye çevirmesini sağlayın.
  • Referanslardan çalışın: Ekran görüntüleri, bir moodboard veya bir markanın sitesini bırakın; görünümü doğru yakalamak için somut referanslar, ne kadar metin olursa olsun ondan üstündür.
  • Gerçek bir tarayıcıda önizleyin: Codex'in sonucu işlemesine ve açmasına izin verin; böylece onu kendi gözlerinizle değerlendirin, yeniden boyutlandırın ve neyin yanlış olduğunu gösterin.
  • Güvenle yineleyin ve geri alın: Ajan sandbox içinde çalışır; böylece bir yön deneyebilir, iyi geçişleri saklayabilir ve hiçbir şeyi bozmadan kötü olanları geri alabilirsiniz.

Tuzaklar ve “AI çöplüğü” görünümünden nasıl kaçınılır

Codex tarafından üretilen tasarımla ilgili en yaygın şikayet, jenerik görünmesidir, yumuşak degradeler, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir AI yaptı diye bağıran” bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler, UI metnine sızan talimatlar ve kullanım sınırlarına hızla ulaşmak yer alır.

  • Bir frontend skill'i kurun: Özenle seçilmiş bir estetik skill, Codex'i varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
  • Playwright doğrulamasını etkinleştirin: Codex'in kırılma noktaları boyunca işlemesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmasın.
  • Token ve referans sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
  • Kuralları AGENTS.md içinde kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” gibi kuralları, ajanın her çalıştırmada okuduğu yere koyun.

Her hafifletmenin, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmettir.

BYOK: OpenAI anahtarınız, ChatGPT planınız, sınırlarınız

Codex, kendi anahtarını getir (BYOK) yaklaşımını benimser: kendi OpenAI API anahtarınız veya ChatGPT aboneliğinizle kimlik doğrularsınız ve kimlik bilgileri size aittir. Bu, maliyet kontrolü ve gizlilik açısından önemlidir, anahtarınız veya çalışmanızla ilgili hiçbir şeyin üçüncü bir taraf üzerinden geçmesi gerekmez.

SeçenekNasıl ücretlendirilirEn iyi olduğu alan
OpenAI API key (BYOK)Token başına kullandıkça ödeİnce ayarlı maliyet kontrolü, otomasyon ve CI
ChatGPT subscriptionPlus / Pro / Business / Enterprise'a dahilGünlük etkileşimli tasarım için daha yüksek, daha öngörülebilir sınırlar
  • Doğru akıl yürütme seviyesini seçin: OpenAI, düşük-orta akıl yürütmenin sıklıkla en yüksek ayardan daha güçlü frontend sonuçları verdiğini belirtiyor, ve daha ucuza mal olur.
  • Komutları küçük ve odaklı tutun: Kısa, spesifik görevler daha az token kullanır ve tek bir dev komuttan daha temiz diff'ler üretir.
  • İyi yinelemeleri commit edin: İşe yarayan geçişleri kaydedin ve geri kalanını geri alın; böylece her seferinde temiz bir temeli yeniden üretmek için ödeme yapmazsınız.

Open Design içinde Codex ile tasarım

Open Design, yukarıdaki iş akışının sürekli istediği açık kaynaklı tasarım katmanıdır. Codex'i birinci taraf bir adaptör olarak ele alır ve onu özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü UI'sı ile sarmalar, böylece Codex'i iyi yapan tasarım bağlamı, her seferinde elle bir araya getirilmek yerine ilk çalıştırmadan itibaren oradadır.

'What do you want to design?' başlıklı Open Design masaüstü uygulamasının ana ekranı; bir plugin seçici ve agent olarak seçili Codex ile, terminal gerekmez.
Open Design'ın masaüstü uygulaması: bir plugin seçin, ne istediğinizi anlatın, Codex onu oluştursun, komut satırı yok.
  1. Open Design'ı kurun ve ajanınız olarak Codex'i seçin.
  2. OpenAI API anahtarınız (BYOK) veya ChatGPT aboneliğinizle kimlik doğrulayın, kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.
  3. Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
  4. Her artefakt ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi reponuzda yaşar.
Bölünmüş ekran: solda Codex CLI, Open Design'ı yerel olarak dağıtıp açtığını bildiriyor; sağda Codex'in uygulama içi tarayıcısında çalışan Open Design ana ekranı.
Codex, Open Design'ı yerel olarak dağıtır, uygulama içi tarayıcısında açar ve tuvali oradan yönetir.

Aynı Codex ajanı, aynı anahtar, artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, bu yüzden çalışmanız veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.

Gerçekten üretilmiş birden fazla çıktıyı, slayt deck'leri, landing page'ler ve render edilmiş bir video, gösteren Open Design Projects galerisi.
Tek bir Codex + Open Design oturumundan gerçek çıktı: deck'ler, landing page'ler ve render edilmiş bir video, hepsi kendi deponuza kaydedilmiş.

Sıkça sorulan sorular

  1. 01 OpenAI Codex gerçekten tasarım çalışması yapabilir mi?

    Evet, bağlamda bir frontend skill'i, bir tasarım sistemi ve gerçek referans görsellerle Codex (özellikle GPT-5.4 üzerinde) üretim kalitesinde, duyarlı UI üretir ve bunu bir tarayıcıda doğrulayabilir. Bu bağlam olmadan jenerik bir görünüme dönme eğilimindedir; Open Design'ın doldurduğu boşluk da budur.

  2. 02 Bu, OpenAI Codex Product Design eklentisi mi?

    Hayır. Open Design, Codex'i bir ajan olarak entegre eden bağımsız bir açık kaynaklı projedir. OpenAI'nin kendi araçlarını yerel öncelikli, açık bir skill ve tasarım sistemi kütüphanesiyle tamamlar.

  3. 03 Codex ile tasarım yapmak için bir ChatGPT aboneliğine ihtiyacım var mı?

    Bir OpenAI API anahtarı (BYOK) veya ChatGPT aboneliğinizi kullanabilirsiniz. ChatGPT ile oturum açmak genellikle daha cömert sınırlar verir; Open Design her iki durumda da kimlik bilgilerinizi asla proxy'lemez.

  4. 04 Frontend tasarımı için Codex mi yoksa Claude Code mu?

    İkisi de güçlüdür. Claude Code, spesifik, kod tabanının farkında tasarım kararlarıyla bilinir; Codex'in GPT-5.4 sonrası güçlü bir görsel cilası vardır ve devredilen, sandbox'lanmış derlemelerde öne çıkar. Birçok ekip ikisini de kullanır, Open Design, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.

  5. 05 Codex'i Figma'ya nasıl bağlarım?

    Resmi Figma MCP sunucusunu ekleyin (codex mcp add figma --url https://mcp.figma.com/mcp). Ardından get_design_context ile Figma frame'lerini kod olarak uygulayabilir ve çalışan bir UI'ı generate_figma_design ile düzenlenebilir Figma frame'lerine geri gönderebilirsiniz.

  6. 06 Jenerik “AI çöplüğü” estetiğinden nasıl kaçınırım?

    Bir frontend skill'i kurun, gerçek tasarım token'ları ve referans ekran görüntüleri sağlayın, marka kurallarını AGENTS.md içinde kodlayın ve Playwright doğrulamasını etkinleştirin. Open Design bunları özenle seçilmiş bir kütüphane olarak sunar, böylece proje başına kurulumu atlarsınız.

  7. 07 Open Design, OpenAI ile bağlantılı mı?

    Hayır. Codex, OpenAI'nin bir ürünüdür; Open Design, onu birinci taraf bir adaptör olarak destekleyen bağımsız bir açık kaynaklı projedir. OpenAI ve Codex, OpenAI'nin ticari markalarıdır.

  8. 08 Dosyalarım ve kimlik bilgilerim güvende mi?

    Evet, Open Design yerel önceliklidir. Dosyalarınız, artefaktlarınız ve DESIGN.md'niz kendi reponuzda kalır ve OpenAI kimlik bilgileriniz doğrudan ajanınız tarafından kullanılır, asla Open Design sunucuları üzerinden yönlendirilmez.

  9. 09 Codex duyarlı frontend UI oluşturabilir mi?

    Evet. Masaüstü ve mobil referanslar ile Playwright skill'i sayesinde Codex, duyarlı frontend UI oluşturur, bunu her kırılma noktasında gerçek bir tarayıcıda işler ve eşleşene kadar yineler, bileşenler, düzenler ve etkileşim durumları dahil. Çıktıyı jenerik olmaktan çıkarıp tutarlı tutan şey, ona tasarım sistemi token'larınızı vermenizdir.

  10. 10 Codex'e bir tasarım sistemini nasıl veririm?

    Token'larınızı (renk, yazı tipi, boşluk) ve kanonik bileşenlerinizi, Codex'in her çalıştırmada okuduğu bir AGENTS.md veya DESIGN.md dosyasına kodlayın ve ondan bunlara karşı oluşturmasını isteyin. Open Design, özenle seçilmiş bir tasarım sistemi kütüphanesi sunar; böylece sıfırdan bir sistem yazmak yerine bir sistem seçebilirsiniz ve Codex ardından her ekranı ona karşı oluşturur.

  11. 11 Kod yazamıyorsam Codex'i tasarım için kullanabilir miyim?

    Evet. Codex, düz dildeki brief'leri ve referans görselleri çalışan UI'a dönüştürür; böylece tasarımcılar ve ürün insanları onu kod yazmadan kullanabilir. Open Design'ın masaüstü uygulaması terminali ve kurulumu tamamen ortadan kaldırır, bir ajan, bir tasarım sistemi ve bir skill seçer, ardından yerel bir UI'da üretip önizlersiniz.

  12. 12 Open Design, Codex ile BYOK'u destekliyor mu?

    Evet. Open Design, kendi anahtarını getir yaklaşımını benimser: Codex'i kendi OpenAI API anahtarınız veya ChatGPT aboneliğinizle doğrulayın; kimlik bilgisi doğrudan ajanınız tarafından kullanılır, asla Open Design üzerinden proxy'lenmez. Yerel önceliklidir, bu yüzden dosyalarınız ve DESIGN.md'niz kendi reponuzda kalır.

  13. 13 Codex'e bir frontend design skill nasıl eklerim?

    Resmi frontend design skill'i openai/skills kataloğundan kurun: Codex uygulamasında frontend-skill için skill yükleyicisini çalıştırın, ardından Codex'i yeniden başlatın. Frontend design skill, Codex'in tektip varsayılan görünüm yerine gerçek bir estetiğe bağlı kalmasını sağlar, kartsız düzenler, marka öncelikli hiyerarşi, en fazla iki yazı tipi ve tek bir vurgu rengi, ve Codex'in tasarım kalitesi üzerindeki en büyük kaldıraçtır.

Codex ile açık yolla tasarlayın.

Kendi OpenAI anahtarınızı getirin, her dosyayı yerel tutun ve zaten kullandığınız ajanın etrafında özenle seçilmiş bir tasarım kütüphanesi edinin.

● Apache-2.0 Apache-2.0 · Dünya üzerinde yapıldı · BYOK Desteklenen tüm ajanları görün