Tasarım için Codex.

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 skill'i: openai/skills kataloğu, gerçek bir zevki dayatan özenle seçilmiş bir frontend-skill sunar: kartsız düzenler, tam genişlikte hero'lar, marka öncelikli hiyerarşi, ölçülü hareket, en fazla iki yazı tipi ve bir vurgu rengi — ve Codex'in oluşturmadan önce bir görsel tez yazmasını sağlar.
• 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.

Üçü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.

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• 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 \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

İ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.

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:

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.

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.

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.

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.

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.

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.