Codex Ne Yapar, OpenDesign Ne Yapar?
Codex ajandır: brief'inizi okur, kodu yazar ve çalıştırır, ardından revize eder. OpenDesign ise onun etrafındaki çalışma alanıdır: tasarım sistemleri, skill'ler, bir önizleme, yorumlar ve sürümlenmiş dosyalar. OpenDesign bağımsız bir açık kaynak projedir ve OpenAI ile bağlantılı değildir.
Başlamadan Önce Neye İhtiyacım Var?
Masaüstü uygulaması, seçtiğiniz mod için çalışan bir Codex bağlantısı ve test edilecek küçük bir görev.
Uyumluluk sayfasına bakın; kaynaktan derleme gereksinimleri ayrıdır. Bir tasarım sistemi işinizi kolaylaştırır; hiç yoksa kütüphaneden birini seçin.
OpenDesign'ı Zaten Kurdum. Sırada Ne Var?
Design Plugin Bu Kılavuzdan Nasıl Farklıdır?
Bu sayfa UI iş akışını açıklar.
Plugin dizini kaynak seçmenize yardımcı olur;
kurulum girişi ajanınızın izleyeceği talimatları içerir. Bunlar farklı görevlere hizmet eder.
Diğer Ajanları Nerede Görebilirim?
Ajanlar merkezi mevcut ajan kılavuzlarını listeler. Claude Code, Cursor ve OpenCode yukarıda ilgili ajanlar altında bağlantılıdır.
Sıradan görünen Codex tasarımlarından nasıl kaçınabilirim?
Codex'e somut referanslar ve tasarım belirteçleri verin, marka kurallarını AGENTS.md veya DESIGN.md gibi proje talimatlarında belirtin ve işlenen sayfayı hedef kesme noktalarında doğrulayın. Bir ön uç tasarım becerisi de daha bilinçli bir görsel yön sağlayabilir. Sonucu kendiniz inceleyin; tarayıcı kontrolleri tasarım yargısının yerini almaz.
Codex bir ekran görüntüsünden veya Figma tasarımından bir kullanıcı arayüzü oluşturabilir mi?
Bir ekran görüntüsü, bir uygulama için görsel referans işlevi görebilir. Figma iş akışları ayrıdır: tasarım dosyası bağlamına veya düzenlenebilir Figma çerçevelerine gidiş-dönüşe ihtiyaç duyduğunuzda resmi Figma entegrasyonunu kullanın. Bu kılavuz, düzenlenebilir bir vektör tasarım dosyası üretmeye değil, işlenen bir web arayüzünü incelemeye odaklanır.
Codex'e bir tasarım sistemi nasıl veririm?
Sistemin renk, tipografi, boşluk ve bileşen kurallarını
DESIGN.md veya
AGENTS.md gibi proje talimatlarında sağlayın ve Codex'ten bunlara uymasını isteyin. OpenDesign ayrıca bir arayüz oluşturmadan önce aralarından seçim yapabileceğiniz bir
tasarım sistemi kitaplığına sahiptir.
Codex'i Figma'ya bağlayabilir miyim?
Evet. OpenAI'nin Figma entegrasyonu, Figma tasarımları ile kod arasında çalışmayı destekler. Kurulumu
güncel Codex belgelerini kullanarak yapın; tam komutlar ve yetenekler değişebilir. Bu sayfanın birincil iş akışı HTML üretir ve inceler, düzenlenebilir Figma dosyaları değil.
Codex'i OpenDesign ile kullanırken BYOK ne anlama gelir?
Bring Your Own Key, Codex'te kendi OpenAI hesabınız veya API anahtarınızla kimlik doğrulamanız anlamına gelir; seçtiğiniz modun faturalandırma ve kullanım koşullarına tabidir. OpenDesign kimlik bilgilerinize proxy'lik yapmaz. Kurulumunuz için geçerli ayrıntılar için
uyumluluk bölümüne ve OpenAI'nin güncel kimlik doğrulama kılavuzuna bakın.
Codex UI, Codex uygulaması mı yoksa Codex ile oluşturulmuş bir arayüz mü demek?
Bu ifade, ya OpenAI'nin Codex uygulamasını ya da Codex ajanıyla üretilmiş bir ürün arayüzünü kastedebilir. Bu sayfa ikincisiyle ilgilidir: Codex ile bir web arayüzü tasarlamak ve gözden geçirmek.
Codex tarafından oluşturulan bir arayüzü yayınlamadan önce neyi kontrol etmeliyim?
Render edilen arayüzü masaüstü ve mobil genişliklerde inceleyin, her etkileşimi ve klavye yolunu test edin, odak ve erişilebilirliği kontrol edin ve sonucu brief ve referanslarla karşılaştırın. Başarılı bir derleme veya bir ajanın kendi tarayıcı kontrolü yalnızca ilk adımdır; teslimden önce bir kişi eseri doğrulamalıdır.
OpenAI Codex gerçekte nedir (ve ne değildir)
İlk olarak, “Codex.” arayan neredeyse herkesin kafasını karıştıran bir ayrım. Orijinal OpenAI Codex, 2021 yılında erken dönem GitHub Copilot'a güç veren ve 2023'te kullanımdan kaldırılan bir kod tamamlama modeliydi. Bu sayfa bununla ilgili değil. Bugünün Codex'i, OpenAI'nin ajan tabanlı kodlama aracıdır; doğal dil görevlerinden kod planlar, yazar, çalıştırır ve doğrular.
Modern Codex dört yüzeyde sunulur: bir terminal CLI (Rust ile yeniden yazılmış, Apache-2.0 lisanslı), VS Code, Cursor ve Windsurf için bir IDE eklentisi, devredilen async görevler için bir bulut/web deneyimi ve uygulama içi tarayıcı ile Computer Use içeren bir masaüstü uygulaması.
İkinci bir ayrım: “Codex UI” aramaları ikiye ayrılır. Biri Codex'in kendi arayüzüdür: OpenAI'nin ajanı çalıştırmak için sunduğu masaüstü ve web uygulaması. Diğeri ve bu sayfanın konusu olan ise, Codex ile oluşturduğunuz arayüzdür: ürününüzün bileşenleri, düzenleri ve ekranları.
Varsayılan model: 2026 ortası itibarıyla önerilen model gpt-5.5'tir; gpt-5.4 ise OpenAI'nin özellikle frontend ve computer use için eğittiği modeldir.
Talimat dosyası: Codex, proje kuralları için projenizdeki AGENTS.md dosyasını okur (araçlar arası bir standart); tasarım kurallarınızı kodlamak için doğal yerdir.
Sandbox: Çekirdek düzeyinde bir sandbox'ta çalışır (varsayılan olarak workspace-write), böylece arayüzünüzü düzenleyen bir ajan projenin dışına çıkamaz.
Kimlik bilgisi: OpenAI API anahtarı (BYOK) veya ChatGPT aboneliği (Free / Go / Plus / Pro / Business / Enterprise)
Sağlayıcı: OpenAI
CLI'nin lisansı: Apache-2.0, açık kaynak
Codex neden artık tasarımda iyi?
2026'nın başlarında üç şey bir araya gelerek Codex'i genel bir kod üreticisi yerine gerçek bir tasarım aracı haline getirdi.
Ön uç için eğitilmiş bir model: OpenAI,
ön uç ve bilgisayar kullanımı için eğitilmiş ilk ana akım modeli olan GPT-5.4'ü yayınladı; bu model, tasarım iş akışı boyunca çok daha iyi görüntü anlama ve daha güçlü öz doğrulama sunuyor. Hatta nihai varlıkları taahhüt etmeden önce mood board'lar ve görsel seçenekler üretebilir.
Resmî bir ön uç tasarım becerisi:
openai/skills kataloğu, gerçek zevki dayatan seçkin bir ön uç tasarım becerisi sunar: kartsız düzenler, tam kanamalı hero'lar, marka öncelikli hiyerarşi, ölçülü hareket, en fazla iki yazı tipi ve bir vurgu rengi ve Codex'in inşa etmeden önce görsel bir tez yazmasını sağlar. Bu ön uç tasarım becerisini eklemek, Codex'in çıktısına yapılabilecek en hızlı tek iyileştirmedir.
Tarayıcı doğrulaması: Playwright becerisiyle Codex gerçek bir tarayıcı açar, kesme noktalarına göre yeniden boyutlandırır ve yalnızca derlemenin geçtiğini kontrol etmek yerine çıktısını referansla karşılaştırır.
Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Üçünün arkasındaki ders: Codex'in varsayılan olarak zevki yoktur. Kısıtlamalar, bir tasarım sistemi, estetik bir beceri ve somut referanslar verdiğinizde iyi tasarım üretir. OpenDesign tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Sıfırdan Başlayarak Tasarım Çalışmaları İçin Codex Kurulumu
Temiz bir makineden UI oluşturabilen ve doğrulayabilen bir Codex'e giden tam yol burada.
Tek tıkla bir yol mu tercih edersiniz?
OpenDesign masaüstü uygulamasını indirin, Codex'i seçkin bir beceri ve tasarım sistemi kütüphanesiyle birlikte sunar, böylece Codex'i ajanınız olarak seçer ve hiç CLI kurulumu yapmadan tasarıma başlarsınız. Aşağıdaki adımlar, Codex'i kendiniz bağlamayı tercih ederseniz manuel yoldur.
Kurulum sırası: yükle → kimlik doğrula → AGENTS.md'yi yapılandır → ön uç becerisini yükle → tarayıcı doğrulamasını etkinleştir.
Tasarım kurallarınızı kodlayın: Token'larınızı, temel öğelerinizi ve kurallarınızı AGENTS.md'ye veya bir DESIGN.md'a koyun ve Codex'i bunlara yönlendirin, böylece çıktı genel bir görünüme varsayılan olmak yerine bir markayla eşleşir.
Doğru akıl yürütme düzeyini seçin: OpenAI, düşük-orta akıl yürütme düzeylerinin genellikle en yüksek ayardan daha güçlü ön uç sonuçları ürettiğini belirtiyor.
Komutlar ve sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın; bunlar değişebilir.
# 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Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Codex ile Ekran Görüntüsünden Arayüze İş Akışı
Codex ile en çok fark yaratan tasarım döngüsü, bir referans görselini çalışan, duyarlı bir UI'a dönüştürmek ve eşleşene kadar yinelemektir.
OpenAI'nın kendi rehberi beş adıma indirgeniyor.
Elindeki en net görsel referanslardan başla ve yalnızca tek bir hero görseli değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil et.
Promptta spesifik ol; belirsiz promptlar genel geçer UI üretir.
Bir tasarım sistemi hazırla ve Codex'e token'ların ve kanonik ilkel bileşenlerin nerede olduğunu söyle.
Codex'in gerçek bir tarayıcıda render etmesi ve kesme noktalarına göre yeniden boyutlandırması için Playwright etkileşimli becerisini etkinleştir.
Codex'in yalnızca derlendiğini doğrulamasını değil, uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yinele.
Görselleri terminale bir ekran görüntüsü sürükleyerek veya image bayrağıyla besle, ardından somut kısıtlamalarla prompt ver:
İkinci bir terminalde bir dev sunucusu çalıştır, promptları küçük ve odaklı tut ve iyi yinelemeleri commit'le / kötü olanları geri al (geri aldığında Codex'e söyle), böylece her geçiş temiz bir temel üzerine inşa edilsin.
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."Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı dokümantasyonunda doğrulayın.
Codex UI tasarımı: bileşenlerden yayına alınmış bir frontend'e
Codex, UI'ı üç tür girdiden oluşturur: yazılı bir açıklama, bir referans ekran görüntüsü veya bir Figma çerçevesi. Bağlamda bir tasarım sistemi ve etkinleştirilmiş Playwright becerisiyle, duyarlı, bileşen tabanlı frontend'ler üretir ve kendi işini gerçek bir tarayıcıda doğrular.
Tek bir ekran görüntüsünü sayfaya dönüştürmek demodedir; asıl iş gerçek bir frontend'i yayına almaktır. Codex UI tasarım çalışması, ona bir sistem kurmak gibi yaklaştığınızda iyi olur: yeniden kullanılabilir bileşenler, duyarlı düzenler ve her etkileşim durumu; tek bir hero görseli değil. GPT-5.4'ün daha güçlü görsel anlayışı ve kendi kendini doğrulaması bunu pratik kılıyor, ancak yapı hâlâ sizden geliyor.
Önce bileşenler: Tüm sayfaları oluşturmadan önce Codex'ten token'larınıza göre atomik, yeniden kullanılabilir bileşenler (düğmeler, input'lar, kartlar, nav) 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 kesme 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, focus, active, boş, yükleniyor ve hata durumlarını açıkça belirtin; bunlar UI'ı tamamlanmış hissettiren ve genel AI çıktısının genellikle atladığı durumlardır.
Erişilebilir işaretleme: Semantik HTML, etiketli kontroller, görünür focus halkaları ve yeterli kontrast isteyin; Codex'ten bunları derlemenin parçası olarak kontrol etmesini isteyin.
Bir bileşen ve durumları için açıkça prompt verin, sonra Codex'in referansa göre doğrulamasını sağlayın:
İyi frontend çıktısını “AI slop”tan ayıran desen doğrulamadır: Codex UI'ı render eder, referanslarınızla kesme noktaları boyunca karşılaştırır ve yalnızca derlemenin geçtiğini doğrulamak yerine yineler.
codex "Build a responsive pricing section in React + Tailwind + TypeScript.
Reuse my design-system tokens and Button/Card components.
Include hover, focus, and mobile-stacked states.
Use the Playwright skill to check it against pricing-desktop.png
and pricing-mobile.png at 375px and 1280px, and iterate until it matches."
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı dokümantasyonunda doğrulayın.
Codex ile bir tasarım sistemi oluşturma
Bir tasarım sistemi, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır; Codex'in genel Inter-ve-mor görünümüne varsayılan olarak dönmek yerine renklerinizi, tip ölçeğinizi, boşluklarınızı ve bileşenlerinizi bilmesini sağlar. Codex'e karşı inşa edeceği bir tasarım sistemi verin, ürettiği her ekran aynı zevki miras alır.
Token'ları tanımlayın: Renk, tipografi, boşluk, yarıçap ve gölgeyi adlandırılmış token'lar olarak yakalayın; Codex'in her ekran için değer icat etmek yerine yeniden kullandığı sözcük dağarcığı budur.
Temel bileşenleri yakalayın: Codex'i kurallı bileşenlerinize (Button, Input, Card, Modal) yönlendirin, böylece her birini yeniden çizmek yerine onlardan oluşturur.
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 zorlayın: Codex'ten yeni UI'yi sisteme karşı kontrol etmesini ve sapmayı işaretlemesini isteyin; böylece tasarım sistemi ilk ekrandan sonra çürüyüp gitmek yerine gerçek kalır.
Ters yönde de çalışabilirsiniz: Codex'e birkaç referans ekran verin ve ondan başlangıç için bir tasarım sistemi, token'lar artı temel bileşenler, çıkarmasını isteyin; sonra siz bunu iyileştirin. Her iki durumda da sonuçları tekrarlanabilir kılan eser, sistemin kendisidir.
Codex + Figma: Tasarım ve Kod Arasında Gidiş-Dönüş
Şubat 2026'da OpenAI ve Figma, daha önceki Figma MCP beta sürümünü birinci sınıf, çift yönlü bir entegrasyona dönüştüren
resmi bir ortaklık duyurdu. Her iki yönde de çalışır.
Tasarım → Kod: Figma'da bir frame'in “seçime bağlantı”sını kopyalayın, get_design_context ile Codex'e yapıştırın ve mevcut bileşen kitaplığınızı kullanarak tasarımı uygulamasını isteyin.
Kod → Tasarım: generate_figma_design aracı (“Code to Canvas”), canlı, çalışan bir UI'yi tekrar düzenlenebilir Figma frame'lerine 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; Codex,
Claude Code,
Cursor, VS Code ve daha fazlası için kullanılabilir hale gelir; bu da tam olarak OpenDesign'in düzenlemek üzere inşa edildiği taşınabilir, çok-ajanlı yetenek türüdür.
Tasarım İçin Codex, Cursor ve Claude Code Karşılaştırması
Tasarım işi için tek bir kazanan yoktur, her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları üst üste kullanır. Adil bir özet:
Codex — GPT-5.4 + frontend-skill sonrası güçlü görsel cila; görsel anlama — Devredilen async derlemeler, sandbox'lı çalıştırmalar, taşınabilir AGENTS.md kuralları
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel oluştur-ve-gör döngüsü — IDE içinde sıkı yinele-ve-izle UI işi
Claude Code — Belirli tasarım kararları (hex, aralık, tipografi) ve kod tabanına duyarlı UX — Frontend muhakemesi ve geniş bağlamlı refaktörler
Toplulukta tekrar eden yargı, zevkin insanlardan geldiği yönündedir: üçü de beceriler, referanslar ve kısıtlar olmadan genel geçer bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken asıl sorun budur ve bu modelle değil, tasarım aracıyla ilgilidir.
Ajan — Tasarım gücü — En uygun olduğu alan
Codex tasarım eklentileri karşılaştırması (OpenDesign dahil)
Codex'in tasarım yeteneği neredeyse tamamen ona ne taktığınıza bağlıdır. Bugün Codex ile kullanabileceğiniz başlıca tasarım eklentileri ve araçları ile OpenDesign'in bunlar arasında nereye oturduğu aşağıda:
OpenAI Product Design eklentisi — OpenAI'nin rol eklentisi: yönleri keşfedin, kullanıcı akışlarını denetleyin, canlı bir URL'den prototip oluşturun, ekran görüntülerini etkileşimli hale getirin, Figma veya Canva'ya aktarın — Hayır — Codex içinde hızlı resmi tasarım görevleri
openai/skills frontend-skill — Küratörlü bir estetik, kartsız düzenler, marka önceleyen hiyerarşi, ölçülü hareket, inşa etmeden önce görsel bir tez — Evet (Apache-2.0) — Ham çıktı kalitesini yükseltme
Figma entegrasyonu (MCP) — İki yönlü Figma ↔ kod: frame'leri kodda uygulayın, çalışan bir UI'ı düzenlenebilir Figma'ya geri itin — Hayır (resmi) — Figma'da yaşayan ekipler
OpenDesign — Codex çevresinde açık, yerel öncelikli bir tasarım katmanı: küratörlü beceri + tasarım sistemi kütüphanesi, bir render hattı, bir masaüstü UI'ı ve BYOK — Evet (Apache-2.0) — Sahip olduğunuz gerçek, 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 eklentisi yönleri keşfetmeyi, akışları denetlemeyi ve canlı bir URL'den prototip oluşturmayı kapsar. Ham çıktı kalitesi için,
frontend tasarım becerisi en yüksek kaldıraçlı ekleme olur. Resmi
Figma entegrasyonu, ekibiniz Figma'da yaşıyorsa vazgeçilmezdir ve taşınabilirdir; bu yüzden onu
Claude Code ve
Cursor dahil diğerlerinden herhangi biriyle eşleştirebilirsiniz.
OpenDesign, uçtan uca açık kaynaklı, yerel öncelikli ve BYOK olan tek seçenektir. Codex'i küratörlü bir
beceri ve
tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü UI ile sarar; böylece Codex'i iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her projede elle bir araya getirilmez ve her artefakt kendi deponuzda kalır.
Eklenti / araç — Ne katar — Açık kaynak — En uygun olduğu alan Kod yazmayan tasarımcılar için Codex
Codex ile tasarım yapmak için mühendis olmanıza gerek yok. Ajan, sade dille ifade edilen niyeti ve gerçek referansları alır ve çalışan, duyarlı bir kullanıcı arayüzü döndürür; bu da onu yalnızca ön uç geliştiricileri için değil, tasarımcılar ve ürün insanları için de gerçek bir araç haline getirir. İşin püf noktası, onu bir kodlama oturumu gibi değil, bir tasarım brief'i gibi yönlendirmektir.
Sade dille tanımlayın: Tasarım terimleriyle, düzen, hiyerarşi, ton, his ile ne istediğinizi söyleyin ve Codex'in bunu işaretleme diline çevirmesine izin verin.
Referanslardan çalışın: Ekran görüntüleri, bir moodboard veya bir markanın sitesini ekleyin; somut referanslar, doğru görünümü elde etmek için her türlü düzyazıdan daha etkilidir.
Gerçek bir tarayıcıda önizleyin: Codex'in sonucu oluşturmasına ve açmasına izin verin, böylece gözlerinizle değerlendirin, yeniden boyutlandırın ve nerede sorun olduğunu işaret edin.
Güvenle yineleyin ve geri alın: Ajan korumalı alanda çalışır, böylece bir yönü deneyebilir, iyi olanları koruyabilir ve kötü olanları hiçbir şeyi bozmadan geri alabilirsiniz.
Tuzaklar ve “AI saçmalığı” görünümünden nasıl kaçınılır
Codex tarafından oluşturulan tasarımla ilgili en yaygın şikayet, genel görünmesi, yumuşak gradyanlar, 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ı olmasıdır. Bildirilen diğer sorunlar arasında bozuk mobil düzenler, talimatların kullanıcı arayüzü metnine sızması ve kullanım limitlerine hızlıca ulaşılması yer alıyor.
Bir ön uç becerisi yükleyin: Özenle seçilmiş bir estetik becerisi, 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 oluşturmasını ve kesme noktaları arasında kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmaz.
Token'ları ve referansları sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek etkendir.
Kuralları AGENTS.md'ye kodlayın: “hero kart yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Her önlemin, ajana özenle seçilmiş bir tasarım bağlamı sağlamakla ilgili olduğunu unutmayın. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı zahmetli iştir.
BYOK: OpenAI anahtarınız, ChatGPT planınız, limitleriniz
Codex, kendi anahtarını getir (BYOK) modelini kullanır: kendi OpenAI API anahtarınızla veya ChatGPT aboneliğinizle kimlik doğrulaması yaparsınız ve kimlik bilgileriniz size aittir. Bu, maliyet kontrolü ve gizlilik açısından önemlidir; anahtarınız veya çalışmanızla ilgili hiçbir şeyin bir üçüncü taraf üzerinden geçmesi gerekmez.
OpenAI API anahtarı (BYOK) — Token başına kullandıkça öde — İnce ayarlı maliyet kontrolü, otomasyon ve CI
ChatGPT aboneliği — Plus / Pro / Business / Enterprise içinde yer alır — Günlük etkileşimli tasarım için daha yüksek ve daha öngörülebilir limitler
Doğru akıl yürütme düzeyini seçin: OpenAI, düşük-orta düzeyde akıl yürütmenin genellikle en yüksek ayardan daha güçlü frontend sonuçları verdiğini ve daha az maliyetli olduğunu belirtiyor.
İstemleri küçük ve odaklı tutun: Kısa, spesifik görevler tek dev bir istemden daha az token kullanır ve daha temiz diff'ler üretir.
İyi iterasyonları commit'leyin: İşe yarayan sürümleri kaydedin ve geri kalanını geri alın; böylece her seferinde temiz bir temeli yeniden oluşturmak için ödeme yapmazsınız.
Seçenek — Nasıl faturalandırılır — En uygun olduğu durum
Codex ile OpenDesign içinde tasarım yapmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. Codex'i birinci taraf adaptörü olarak ele alır ve onu seçilmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzüyle sarar; böylece Codex'i iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez.
OpenDesign masaüstü uygulaması: bir eklenti seçin, ne istediğinizi tanımlayın ve Codex onu inşa etsin; komut satırı yok.
OpenAI API anahtarınızla (BYOK) veya ChatGPT aboneliğinizle kimlik doğrulaması yapın; kimlik bilgileri makinenizde kalır ve asla bizim tarafımızdan proxy'lenmez.
Bir
tasarım sistemi ve bir
beceri seçin, ardından tutarlı bir estetikle sunumlar, prototipler ve açılış sayfaları oluşturun.
Her çıktı ve DESIGN.md dosyası kendi deponuzda yaşar, barındırılan bir bulutta değil.
Codex, OpenDesign uygulamasını yerel olarak dağıtır ve uygulama içi tarayıcısında açar, ardından tuvali oradan yönetir.
Aynı Codex ajanı, aynı anahtar, üstüne de etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, böylece çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
Tek bir Codex + OpenDesign oturumundan gerçek çıktı: sunumlar, açılış sayfaları ve render edilmiş bir video; hepsi kendi deponuzda kayıtlıdır.
OpenDesign uygulamasını kurun ve Codex'i ajanınız olarak seçin.
OpenDesign, OpenAI ile bağlantılı mı?
Hayır. Codex, OpenAI'nin bir ürünüdür; OpenDesign ise onu birinci taraf adaptörü olarak destekleyen bağımsız bir açık kaynak projesidir.
Codex 
OpenDesign 
