Question 1

Pi Gerçekten Tasarım İşi Yapabilir mi?

Accepted Answer

Evet — bir estetik skill, bir tasarım sistemi ve bağlamda gerçek referans görselleriyle Pi, üretim kalitesinde, duyarlı UI üretir ve çıktıyı referanslara karşı doğrulamak için güçlü bir multimodal modele yönlendirebilirsiniz. Bu bağlam olmadan genellikle jenerik bir görünüme varsayılan olarak döner, OpenDesign'ın doldurduğu boşluk da budur.

Question 2

Pi ile Tasarım Yapmak İçin Ödeme Yapmam Gerekir mi?

Accepted Answer

Pi'nin kendisi ücretsiz ve açık kaynaktır (MIT). Yalnızca altta yatan model için ödeme yaparsınız — kendi sağlayıcı API anahtarınızı getirin (BYOK) veya /login üzerinden bir Claude Pro/Max, ChatGPT Plus/Pro ya da GitHub Copilot aboneliği kullanın. OpenDesign her durumda kimlik bilgilerinizi asla proxy'lemez.

Question 3

Pi'yi Tasarım için Uygun Kılan Nedir?

Accepted Answer

Sağlayıcıdan bağımsızdır: kendi anahtarlarınızı getirir ve 20'den fazla sağlayıcıdan herhangi birine yönlendirebilir, güçlü yönleri göreve uyan modeli seçer ve oturum ortasında değiştirebilirsiniz. Ancak zevk hâlâ modelden değil, sağladığınız tasarım sistemi, skill ve referanslardan gelir.

Question 4

Ön Uç Tasarım İçin Pi ile Hangi Modeli Kullanmalıyım?

Accepted Answer

Pi birçok sağlayıcıya yönlendirme yapar, bu yüzden göreve göre seçim yapın — güçlü bir multimodal model referans ekran görüntülerini iyi okur, diğerleri ise refaktöring için daha uygun olabilir. Pi'nin avantajı, iş akışınızı değiştirmeden model değiştirebilmenizdir. OpenDesign, seçtiğiniz model ne olursa olsun aynı tasarım bağlamını korumanızı sağlar.

Question 5

Pi'yi Figma'ya Nasıl Bağlarım?

Accepted Answer

Pi, MCP sunucularını destekler, böylece bir Figma MCP sunucusu ekleyip gerçek tasarım bağlamını çekebilirsiniz — bileşenler, değişkenler, düzen verileri — böylece üretilen kod kaynağı yaklaşık olarak taklit etmek yerine ona uyar.

Question 6

Pi aslında nedir

Accepted Answer

Pi, terminal için açık kaynaklı (MIT) bir AI kodlama ajanıdır; earendil-works pi araç setinin bir parçasıdır. Deponuzu okur, dosyaları düzenler ve shell komutları çalıştırır — yalnızca satırları tamamlamak yerine doğal dil görevlerinden yola çıkarak işi planlar ve doğrular. Çekirdeği kasıtlı olarak küçüktür: dört varsayılan araç — read, write, edit ve bash — ayrıca yerleşik grep, find ve ls.

Tasarım işi için öne çıkan özellik, Pi'nin sağlayıcıdan bağımsız olmasıdır. Anthropic, OpenAI, Google ve daha birçok sağlayıcıyı tek bir birleşik API arkasında normalleştirir; böylece kendi anahtarlarınızı getirirsiniz ve görev başına modeli seçersiniz — örneğin referans ekran görüntülerini okumak için güçlü bir çok kipli model — ve iş akışınızı değiştirmeden oturum ortasında /model veya Ctrl+L ile geçiş yaparsınız.

Herhangi bir model, sizin anahtarlarınız: Pi, Anthropic ve OpenAI dahil 20+ sağlayıcıya yönlendirir. Kendi API anahtarlarınızla (BYOK) kimlik doğrularsınız veya /login ile bir Claude Pro/Max, ChatGPT Plus/Pro ya da GitHub Copilot aboneliğine giriş yaparsınız.

Skills + Extensions: Pi, Skills (Agent Skills standardını izleyen Markdown yetenek paketleri) ve TypeScript Extensions yükler — tasarım kurallarınızı kodlamak ve özel araçlar eklemek için doğal yer.

Dallanan oturumlar: Oturumlar JSONL ağaçları olarak saklanır; böylece bir keşif dalı oluşturabilir ve önceki geçişleri kaybetmeden tek bir dosyada geçmişte gezinebilirsiniz.

Kimlik bilgisi: kendi sağlayıcı API anahtarınız (BYOK — Anthropic, OpenAI, Google vb.) veya /login üzerinden abonelik girişi; yerel olarak ~/.pi/agent/auth.json içinde saklanır (0600)

Satıcı: earendil-works (açık kaynak topluluk projesi)

Lisans: MIT, açık kaynak

Question 7

Çok sağlayıcılı, BYOK bir ajan tasarıma neden uygundur

Accepted Answer

Pi'nin tasarım avantajı esnekliktir, tek bir yerleşik model değil — ancak her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.

Görev başına doğru modeli seçin: Pi herhangi bir sağlayıcıya yönlendirdiği için, referans ekran görüntülerini okumak üzere güçlü bir çok kipli modele başvurabilir, sonra yeniden düzenleme için başka bir modele geçebilirsiniz — ajanı bırakmadan.

Anahtarlar sizin, kilitlenme yok: BYOK, bir satıcının fiyatlandırmasına veya bağlam sınırlarına bağlı olmadığınız anlamına gelir; önünüzdeki tasarım işine güçlü yönleri uyan modeli seçin.

Skills içindeki kurallar: Bir Skill (artı bir Figma sunucusu gibi bir MCP kaynağı) ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.

Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir skill ve gerçek referans görselleri.

Ders her ajanın öğrettiği aynı derstir: Pi varsayılan olarak zevke sahip değildir ve hiçbir model seçimi bunu sağlamaz. Ona kısıtlamalar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir skill ve somut referanslar. OpenDesign tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).

Question 8

Sıfırdan Tasarım Çalışmaları için Pi'yi Kurun

Accepted Answer

Kurulum sırası: yükle → kimlik doğrula (BYOK) → tasarım kurallarını bir Skill'de kodla → bir model seç → tarayıcı doğrulamayı etkinleştir.Tasarım kurallarınızı kodlayın: Token'larınızı, temel bileşenlerinizi ve konvansiyonlarınızı bir Skill'e koyun ve Pi'yi bunlara yönlendirin; böylece çıktı, genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.Tarayıcı doğrulamayı ekleyin: Pi'nin gerçek bir tarayıcıda render edilip çıktısını kesme noktaları arasında kontrol etmesi için bir Playwright veya tarayıcı MCP bağlayın; yalnızca derlemenin geçtiğini onaylamakla yetinmesin.Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+LÖnceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.

Question 9

Ekran görüntüsünden kullanıcı arayüzüne iş akışı

Accepted Answer

Pi ile en yüksek etkiye sahip tasarım döngüsü, bir referans görüntüyü çalışan, duyarlı bir kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yinelemektir — çıktıyı referansla karşılaştırmak için çok modlu bir modele dayanarak. Pi sağlayıcıdan bağımsız olduğundan, bu geçiş için görüntüleri en iyi okuyan modele Pi'yi yönlendirin.Elonuzdaki 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.Bu geçiş için /model ile güçlü bir çok modlu model seçin; çünkü ekran görüntüsünden kullanıcı arayüzüne kaliteyi belirleyen şey görüntü anlayışıdır.İstemde belirli olun; belirsiz istemler güçlü bir modelle bile genel kullanıcı arayüzü üretir.Tasarım sisteminizi ve konvansiyonlarınızı bir Skill'de tutun ve Pi'ye token'ların ve kanonik temel bileşenlerin bulunduğu yeri söyleyin.Bir geliştirme sunucusu çalıştırın ve Pi'nin gerçek bir tarayıcıda render etmesini, kesme noktalarına göre yeniden boyutlandırmasını sağlayın; ardından uygulamasını ekran görüntüleriyle karşılaştırarak yineleyin — yalnızca derlendiğini onaylamakla yetinmeyin.Ajana referansları ve somut kısıtlamaları baştan verin:İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit edin ve kötü olanları geri alın (geri aldığınızda Pi'ye söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilir. Pi'nin dallanan JSONL oturumları, orijinal akışı kaybetmeden bir alternatifi keşfetmenize de olanak tanır.pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.

Question 10

Beceriler, Uzantılar ve temalar

Accepted Answer

Pi, çalışma zamanında birkaç katman aracılığıyla kendini genişletir ve bunlar açık bir tasarım iş akışına temiz biçimde oturur.

Beceriler: Agent Skills standardını izleyen Markdown yetenek paketleri — tasarım kurallarınız, token'larınız ve inceleme kontrol listeleriniz için kalıcı, taşınabilir yuva. Aynı Beceri yalnızca Pi'de değil, uyumlu ajanlarda da çalışır.

Uzantılar ve prompt şablonları: TypeScript Uzantıları özel araçlar, komutlar ve UI ekler; yeniden kullanılabilir prompt şablonları /name ile çalışır. İkisi de terminalden ayrılmadan doğrulama döngünüzü betikleştirmenize olanak tanır.

MCP ve temalar: Pi, harici tasarım bağlamını (en alakalı olarak bir Figma MCP sunucusu) getirmek için MCP sunucularına bağlanır ve temalar sıcak yeniden yüklenir; böylece siz çalışırken terminal UI okunabilir kalır.

Bunlar taşınabilir yeteneklerdir — özellikle Beceriler ve MCP — tam olarak OpenDesign'ın her proje için yeniden oluşturmak yerine orkestre etmek üzere kurulduğu türden şeylerdir.

Question 11

Tasarım için Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI

Accepted Answer

Tasarım işi için tek bir kazanan yok — her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları bir arada kullanır. Adil bir özet:

Pi — Sağlayıcıdan bağımsız ve BYOK — herhangi bir modele (Anthropic, OpenAI, Google…) yönlendirme ve oturum ortasında geçiş yapma; MIT, kendini genişletebilir — Satıcıya bağlı kalmadan görev başına en iyi modeli seçme

Codex — Bir frontend becerisiyle güçlü görsel cila; sandbox'lanmış asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları

Claude Code — Belirli tasarım kararları (hex, aralık, tip) ve kod tabanına duyarlı UX — Frontend muhakemesi ve büyük bağlamlı refaktörler

Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel kur-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması

Gemini CLI — Güçlü çok modlu görüntü anlama ve 1M token bağlam; ücretsiz katman — Ekran görüntüsü yoğun işler ve bütün bir tasarım sistemini bağlamda tutma

Pi'nin açısı diğerlerine diktir: altta yatan bu modellerden herhangi birini kendi anahtarlarınızla kullanmanıza izin veren ajan odur. Toplulukta tekrar eden yargı hâlâ geçerli — zevk insanlardan gelir: hepsi, 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, model biçimli değil tasarım aracı biçimlidir.

Ajan — Tasarım gücü — En uygun olduğu alan

Question 12

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

Accepted Answer

AI tarafından üretilen tasarım hakkındaki en yaygın şikayet, genel görünmesidir — 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 Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI metinlerine sızan talimatlar yer alıyor. Bunların hiçbiri Pi'ye ya da tek bir modele özgü değil; bunlar, herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalışması durumunda olan şeylerdir.

Estetik bir beceri ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yönelime bağlanmaya zorlar — ve taşınabilir bir beceri olduğu için modeller arasında sizinle birlikte taşınır.

Gerçek bir tarayıcıda doğrulayın: Çok modlu bir model seçin ve Pi'nin breakpoint'ler boyunca render etmesini ve kendi kendini kontrol etmesini sağlayın; böylece düzenler mobilde sessizce bozulmaz.

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ı Pi'nin onları okuduğu yere kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları, ajanın her çalıştırmada yüklediği bir beceriye koyun.

Şunu fark edin: her önlem, hangi sağlayıcıya yönlendirdiğinizden bağımsız olarak ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her projede elle sürdürmek, OpenDesign'ın ortadan kaldırdığı zahmettir.

Question 13

OpenDesign içinde Pi ile tasarım yapmak

Accepted Answer

OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Pi'yi birinci taraf bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render işlem hattı ve yerel bir masaüstü UI ile sarar — böylece Pi'yi iyi yapan tasarım bağlamı her seferinde elle bir araya getirilmek yerine ilk çalıştırmadan itibaren oradadır. Her ikisi de açık kaynaklı ve yerel öncelikli; bu da eşleşmeyi doğal bir uyum haline getirir.

Kendi sağlayıcı API anahtarınızla (BYOK) veya bir abonelik girişiyle kimlik doğrulayın — kimlik bilgileri makinenizde ~/.pi/agent/auth.json içinde kalır ve asla bizim üzerimizden proxy'lenmez.

Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.

Her artefakt ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi repo'nuzda yaşar.

Aynı Pi ajanı, aynı anahtarlar, modelleri değiştirme konusunda aynı özgürlük — üstelik çevresinde gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve MIT lisanslıdır; bu yüzden işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.

OpenDesign'ı kurun ve ajanınız olarak Pi'yi seçin.

Question 14

OpenDesign, Pi ile bağlantılı mı?

Accepted Answer

Hayır. OpenDesign bağımsızdır ve Pi'yi topluluk tarafından desteklenen bir adaptör olarak entegre eder.

Pi ile
OpenDesign’da
tasarlayın.

Pi için Başlangıç Noktanızı Seçin

Pi Kullanarak Bir Ürün Arayüzü Oluşturun

Pi'yi Sıfırdan Kurun

Pi'yi Diğer Ajanlarla Karşılaştırın

Bir Pi Tasarım İşi: Brif'ten Arayüze

1Tasarım Brief'i ve Kısıtlar

2Kim Ne Yapar: Siz, Pi ve OpenDesign

3Pi Çıktısı: 1440px ve 390px'te Plan Karşılaştırma Sayfası

4Teslimden Önce İnceleme

Izgara ve Boşluklar

Görsel Hiyerarşi

Mobil Düzen

Etkileşim Kontrolleri

Pi Ne Zaman Uygun—ve Ne Zaman Değil

Pi'nin Uygun Olduğu Durumlar

Şu Durumlarda Başka Bir Workflow Seçin

Başlamadan Önce Pi Gereksinimleri

Araç KapsamıPi, topluluk tarafından

Hesaplar ve Kimlik DoğrulamaKendi sağlayıcı API anahtarınız (BYOK) veya

Sistem ve SürümlerMasaüstü uygulama veya kaynak kod

Bağlantı KontrolüBaşarı sinyali

Üç Adımda Pi Kurulumu

OpenDesign Masaüstü Uygulamasını İndirin

Pi Bağlantınızı Hazırlayın

Tek Bir Küçük Pi Görevi Çalıştırın

Pi'nin Beş Adımlı Tasarım İş Akışı

Tasarım Brief'i

Tasarım Kısıtları

Arayüzü Oluştur

Önizleme

Revize Et ve Doğrula

Pi Tasarım Kaynakları

Pi İçin Daha Fazla Okuma

Tasarım Skill'leri

Tasarım Sistemleri

Şablonlar

Pi Sınırlamaları, Manuel Kontroller ve Yedek Çözümler

Pi ve OpenDesign Hakkında Sık Sorulan Sorular

Pi ile OpenDesign’da tasarlayın.