Tasarım için Pi.

Pi gerçekte nedir

Pi, earendil-works pi araç setinin bir parçası olan, terminal için açık kaynaklı (MIT) bir yapay zeka kodlama agent'ıdır. Deponuzu okur, dosyaları düzenler ve kabuk komutlarını çalıştırır — yalnızca satırları tamamlamak yerine doğal dil görevlerinden çalışma planlayıp doğrular. Çekirdeği kasıtlı olarak küçük: dört varsayılan araç — read, write, edit ve bash — artı yerleşik grep, find ve ls.

Tasarım çalışmaları için öne çıkan özellik, Pi'nin sağlayıcıdan bağımsız olmasıdır. Anthropic, OpenAI, Google ve diğer birçok sağlayıcıyı tek bir birleşik API arkasında normalleştirir, böylece kendi anahtarlarınızı getirip görev başına model seçersiniz — örneğin referans ekran görüntülerini okumak için güçlü bir çoklu ortam modeli — 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 kimlik doğrularsınız (BYOK) veya /login ile Claude Pro/Max, ChatGPT Plus/Pro ya da GitHub Copilot aboneliğinize giriş yaparsınız.
• Skill'ler + Uzantılar: Pi, Skills'ları (Agent Skills standardını izleyen Markdown yetenek paketleri) ve TypeScript Uzantılarını yükler — tasarım konvansiyonlarınızı kodlamak ve özel araçlar eklemek için doğal yer.
• Dallanma oturumları: Oturumlar JSONL ağaçları olarak saklanır, böylece bir keşfi dallandırabilir ve daha önceki geçişleri kaybetmeden tek bir dosyada geçmişte gezinebilirsiniz.

• Satıcı: earendil-works (açık kaynak topluluk projesi)
• Kimlik bilgisi: kendi sağlayıcı API anahtarınız (BYOK — Anthropic, OpenAI, Google vb.) veya /login üzerinden abonelik girişi; ~/.pi/agent/auth.json dosyasında yerel olarak saklanır (0600)
• Lisans: MIT, açık kaynak

Neden çok sağlayıcılı, BYOK bir agent tasarıma uyar

Pi'nin tasarım avantajı esnekliktir, tek bir yerleşik model değil — ancak her agent'ta olduğu gibi, zevk yine de sağlanmak zorundadır.

• Görev başına doğru modeli seçin: Pi herhangi bir sağlayıcıya yönlendirme yaptığı için, referans ekran görüntülerini okumak üzere güçlü bir multimodal modele ulaşabilir, ardından yeniden yapılandırma için başka bir modele geçebilirsiniz — agent'tan çıkmadan.
• Kendi anahtarlarınız, kilitlenme yok: BYOK, tek bir satıcının fiyatlandırmasına veya bağlam sınırlarına bağlı kalmadığınız anlamına gelir; güçlü yönleri önünüzdeki tasarım işine uyan modeli seçersiniz.
• Skills'ta konvansiyonlar: Bir Skill (artı Figma sunucusu gibi bir MCP kaynağı), agent'ı 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 marka için çalışır.

Ders, her agent'ın öğrettiği şeyin aynısıdır: Pi varsayılan olarak zevk sahibi değildir ve hiçbir model seçimi onu sağlamaz. Size kısıtlamalar verdiğinizde — bir tasarım sistemi, estetik bir skill ve somut referanslar — iyi tasarım üretir. Open Design tam olarak bu girdileri paketler, bu yüzden ikisi bir araya uyar (aşağıda daha fazlası).

Pi'yi sıfırdan tasarım çalışması için ayarlayın

Temiz bir makineden, UI oluşturup doğrulayabilen bir Pi'ye giden tam yol burada.

# 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

• Tasarım kurallarınızı kodlayın: tokens'larınızı, ilkellerinizi ve kurallarınızı bir Skill'e koyun ve Pi'yi bunlara yönlendirin, böylece çıktı genel bir görünüme varsayılan olmak yerine bir markaya uygun olsun.
• Tarayıcı doğrulaması ekleyin: Playwright veya tarayıcı MCP bağlayın, böylece Pi gerçek bir tarayıcıda render eder ve yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları boyunca kontrol eder.

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

Pi ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüyü çalışan, duyarlı bir UI'ye dönüştürmek ve eşleşene kadar yinelemektir — çıktıyı referansa geri karşılaştırmak için multimodal bir modele dayanarak. Pi sağlayıcıdan bağımsız olduğu için, bu geçiş için görselleri en iyi okuyan modele yönlendirin.

1. Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir kahramanlık çekimi değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
2. /model ile bu geçiş için güçlü bir multimodal model seçin, çünkü görüntü anlayışı ekran görüntüsünden UI'ye kaliteyi yönlendirir.
3. İstemde spesifik olun; belirsiz istemler güçlü bir modelle bile genel UI üretir.
4. Tasarım sisteminizi ve kurallarınızı bir Skill'de tutun ve Pi'ye tokens'ların ve kanonik ilkelerin nerede yaşadığını söyleyin.
5. Bir geliştirme sunucusu çalıştırın ve Pi'nin gerçek bir tarayıcıda render etmesini sağlayın, kesme noktalarına göre yeniden boyutlandırarak, ardından yalnızca derlendiğini onaylamak yerine uygulamasını ekran görüntüleriyle karşılaştırarak yineleyin.

Ajan'a referansları ve somut kısıtlamaları baştan verin:

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.

İstemleri küçük ve odaklı tutun, iyi yinelemeleri kaydedin ve kötü olanları geri alın (geri aldığınızda Pi'ye söyleyin), böylece her geçiş temiz bir taban üzerine inşa edilir. Pi'nin dallanma JSONL oturumları, orijinal ipliği kaybetmeden bir alternatifi keşfetmenize de olanak tanır.

Skills, Uzantılar ve temalar

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

• Skill'ler: Agent Skills standardını takip eden Markdown yetenek paketleri — tasarım konvansiyonlarınız, token'larınız ve gözden geçirme kontrol listeleriniz için dayanıklı, taşınabilir ev. Aynı Skill, yalnızca Pi'de değil, uyumlu tüm ajanlarda ç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ıştırılır. Her ikisi de doğrulama döngüsünü terminal'den çıkmadan komut dosyası haline getirmenizi sağlar.
• MCP ve temalar: Pi, harici tasarım bağlamını getirmek için MCP sunucularına bağlanır (en önemlisi bir Figma MCP sunucusu) ve temalar anında yeniden yüklenir, böylece terminal UI'ı çalışırken okunabilir kalır.

Bunlar taşınabilir yeteneklerdir — özellikle Skill'ler ve MCP — tam olarak Open Design'ın proje başına yeniden oluşturmak yerine orkestra etmek için tasarlandığı şeylerdir.

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

Tasarım işi için tek bir kazanan yoktur — her ajan farklı bir güce sahiptir ve deneyimli ekipler bunları üst üste koyar. Adil bir özet:

Pi'nin yaklaşımı diğerlerinden farklıdır: kendi anahtarlarınızla bu temel modellerin herhangi birini kullanmanıza izin veren ajandır. Tekrarlayan topluluk kanaati hâlâ geçerlidir — zevk insanlardan gelir: hepsi skill, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak döner. Çözülmesi gereken asıl sorun budur ve bu model biçimli değil, tasarım aracı biçimlidir.

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

AI tarafından oluşturulan tasarımla ilgili en yaygın şikâyet, 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 haykıran" bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI kopyasına sızan talimatlar yer alır. Bunların hiçbiri Pi'ye veya herhangi bir modele özgü değildir; herhangi bir ajan düzenlenmiş bir tasarım bağlamı olmadan çalıştığında olan budur.

• Estetik bir skill ekleyin: Düzenlenmiş bir tasarım skill'i, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar — ve taşınabilir bir Skill olduğu için modeller arasında sizinle birlikte taşınır.
• Gerçek bir tarayıcıda doğrulayın: Çoklu-modal bir model seçin ve düzenlerin mobilde sessizce bozulmaması için Pi'nin breakpoint'ler arasında render etmesini ve kendi kendini kontrol etmesini sağlayın.
• tokens ve referanslar sağlayın: Gerçek tasarım tokens ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük kaldıraçtır.
• Kuralları Pi'nin okuyacağı şekilde kodlayın: "Hero kartlar yok, maksimum iki tipografi, marka öncelikli hiyerarşi" gibi stil kurallarını ajanın her çalıştırmada yüklediği bir Skill içine koyun.

Her azaltma yönteminin, hangi sağlayıcıya yönlendirme yapsanız da ajana küratörlü bir tasarım bağlamı vermekle ilgili olduğunu fark edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmetli iştir.

Open Design içinde Pi ile tasarlama

Open Design, yukarıdaki iş akışının sürekli istediği açık kaynaklı tasarım katmanıdır. Pi'yi birinci taraf bir adaptör olarak ele alır ve onu küratörlü bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render pipeline'ı ve yerel bir masaüstü arayüzü ile sarar — böylece Pi'yi iyi yapan tasarım bağlamı her seferinde elle kurgulanmak yerine ilk çalıştırmadan itibaren oradadır. Her ikisi de açık kaynaklı ve local-first olduğundan, eşleşme doğal bir uyum sağlar.

1. Open Design'ı kurun ve ajanınız olarak Pi'yi seçin.
2. Kendi sağlayıcı API anahtarınızla (BYOK) veya abonelik girişiyle kimlik doğrulayın — kimlik bilgileri ~/.pi/agent/auth.json içinde makinenizde kalır ve asla bizim üzerimizden proxy edilmez.
3. Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir zevkle desteler, prototip ve açılış sayfaları üretin.
4. Her eser ve DESIGN.md dosyası barındırılan bir bulutta değil, kendi repo'nuzda yaşar.

Aynı Pi ajanı, aynı anahtarlar, aynı model değiştirme özgürlüğü — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Local-first ve MIT olduğundan, çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.

Sık sorulan sorular

1. 01 Pi gerçekten tasarım işi yapabilir mi? +

   Evet — estetik bir skill, bir tasarım sistemi ve bağlamda gerçek referans görseller olduğunda, Pi üretime hazır, duyarlı UI üretir ve çıktıyı referanslara karşı doğrulamak için güçlü bir multimodal modele yönlendirebilirsiniz. Bu bağlam olmadan jenerik bir görünüme varsayılan olarak yönelme eğilimi gösterir; Open Design'ın doldurduğu boşluk budur.

2. 02 Pi ile tasarım yapmak için ödeme yapmam gerekir mi? +

   Pi'nin kendisi ücretsiz ve açık kaynaklıdı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 ile Claude Pro/Max, ChatGPT Plus/Pro veya GitHub Copilot aboneliği kullanın. Open Design her iki durumda da kimlik bilgilerinizi asla proxy etmez.

3. 03 Pi'yi özellikle tasarım için iyi yapan nedir? +

   Sağlayıcı-agnostiktir: kendi anahtarlarınızı getirirsiniz ve 20+ sağlayıcıdan herhangi birine yönlendirme yaparak, güçlü yönleri göreve uyan modeli seçer ve oturum ortasında değiştirirsiniz. Ancak zevk yine de modelden değil, sağladığınız tasarım sisteminden, skill'den ve referanslardan gelir.

4. 04 Frontend tasarımı için Pi ile hangi modeli kullanmalıyım? +

   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 okurken, diğerleri yeniden düzenleme (refactoring) için uygun olabilir. Pi'nin avantajı, iş akışınızı değiştirmeden geçiş yapabilmenizdir. Open Design, hangi modeli seçerseniz seçin aynı tasarım bağlamını korumanızı sağlar.

5. 05 Pi'yi Figma'ya nasıl bağlarım? +

   Pi, MCP sunucularını destekler, bu nedenle bir Figma MCP sunucusu ekleyebilir ve gerçek tasarım bağlamını — bileşenler, değişkenler, yerleşim verileri — çekebilirsiniz, böylece oluşturulan kod kaynağı yaklaşıklamak yerine eşleştirir.

6. 06 Open Design, Pi ile bağlantılı mı? +

   Hayır. Pi, earendil-works tarafından geliştirilen bağımsız bir açık kaynak projedir; Open Design ise Pi'yi birinci taraf adaptör olarak destekleyen ayrı bir bağımsız açık kaynak projedir.

7. 07 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel öncelikli ve açık kaynaktır. Dosyalarınız, artifactlarınız ve DESIGN.md kendi repo'nuzda kalır ve sağlayıcı anahtarlarınız doğrudan Pi tarafından kullanılır (yerel olarak ~/.pi/agent/auth.json içinde saklanır), hiçbir zaman Open Design sunucularından yönlendirilmez.