DAHA FAZLA OKUMA
Pi İçin Daha Fazla Okuma
Pi ile tasarım yapmaya yönelik, yayınlanan kılavuzda listelendiği şekliyle eğitimler, dokümantasyon ve anlatımlar.
Pi 
OpenDesign Pi ile
OpenDesign’da
tasarlayın.
OpenDesign'da Pi ile arayüz tasarlamanın yolu: taşınabilir skiller, seçtiğiniz model ve anahtar, brief'ten incelenmiş dosyaya kadar tek bir plan karşılaştırma görevi ve başlamadan önce bilinmesi gereken sınırlar.
Brief'ten arayüze01 / Pi
FİKRİ SİZ GETİRİN↗
“Taşınabilir tek bir skill ile plan
karşılaştırması, herhangi bir modelle.”
BU PI KILAVUZUNA GİRİŞ İÇİN ÜÇ YOL
Pi ile Nereden Başlayacağınızı Seçin
BU KILAVUZ · UI TASARIMI
Pi ile Bir Ürün Arayüzü Oluşturun
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun KURULUMPi'yi Sıfırdan Kurun
İşte temiz bir makineden, UI oluşturup doğrulayabilen bir Pi'ye kadar tam yol.
Kuruluma git KARŞILAŞTIRMAPi'yi Diğer Ajanlarla Karşılaştırın
Pi'nin tasarım işleri için Codex, Claude Code, Cursor'dan farkları ve başka bir workflow seçilmesi gereken durumlar.
Karşılaştırmayı görünTam Bir Pi Tasarım Görevi
Brief'ten Arayüze: Bir Pi Tasarım Görevi
Baştan sona gösterilen tek bir görev: teslim ettiğiniz brief ve kısıtlar, geri gelen üretim ve bitmeden önce yine de yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir, kayda alınmış bir Pi çalışması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefBir not alma uygulaması için plan karşılaştırma sayfası tasarlayın: ücretsiz, kişisel ve takım planları, bir özellik karşılaştırması ve kısa bir SSS. Masaüstü ve telefon.
- Tasarım sistemiOpenDesign kağıt tuvali: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerFatura geçişi, plan CTA'ları, karşılaştırma satırı açılımı
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2İş Bölümü: Siz, Pi ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Pi
Düzeni planlar, HTML, CSS ve JavaScript'i yazar ve talep üzerine gözden geçirir.
- OpenDesign
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
- İnceleme
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
3Pi Ürünü: 1440px ve 390px'de Plan Karşılaştırma Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Üç plan ve karşılaştırma 8px grid'ini paylaşır; özellik satırları sütunlar boyunca hizalanır.
Hiyerarşi
Görsel Hiyerarşi
Önce fiyat ve plan adı; vurgu rengi en çok seçilen rozeti ve düğmesini işaretler.
Duyarlı
Mobil Düzen
Önce kişisel plan, sonra ücretsiz, sonra takım; geçiş her zaman en üstte kalır.
Etkileşim
Etkileşim Kontrolleri
Geçişi çevirin, CTA'lar arasında tab ile gezinin, bir karşılaştırma satırını açın.
Uygunluk
Pi'nin Göreve Uyduğu ve Uymadığı Durumlar
Pi'nin Uygun Olduğu Durumlar
- Herhangi bir model, sizin anahtarlarınız. Anthropic, OpenAI, Google ve daha fazlasına kendi anahtarlarınızla yönlendirin; screenshot-to-UI için güçlü bir multimodal model seçin ve /model ile geçiş yapın.
- Taşınabilir Skill'ler. Tasarım kurallarınızı, sadece Pi ile değil uyumlu ajanlar arasında taşınabilen Agent-Skills standardındaki Skill'ler olarak kodlayın.
- MCP + Uzantılar. Bir Figma MCP sunucusu üzerinden gerçek tasarım bağlamı getirin ve doğrulama döngüsünü TypeScript Uzantılarıyla otomatikleştirin.
- Açık ve BYOK. MIT lisanslı ve local-first; sadece altta yatan model için ödeme yaparsınız ve kimlik bilgileriniz kendi makinenizde kalır.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Üretilen ürün HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gereken varlık formatı için ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlarınız yok. Bir design system veya örnek olmadan çıktı genel bir görünüme kayma eğilimindedir; önce brief'i yazın.
- Bu ajanın gerektirdiği kimlik bilgisine sahip değilsiniz. Gerekli: Kendi sağlayıcı API anahtarınız (kendi anahtarınızı getirin) veya /login üzerinden abonelik girişi. OpenDesign kimlik bilgisi sağlamaz veya proxy olarak sunmaz.
- Ekibiniz Aider veya OpenCode içinde çalışıyor. Bu ajanların kendi sayfaları var; çalışma alanı aynı, kurulum farklı. Bkz. ilgili ajanlar.
Uyumluluk
Başlamadan Önce Pi Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Pi'yi ele alır. Yayımlanmış referanslar 6 Eylül 2026 itibarıyla kontrol edilmiştir.
Araç KapsamıPi, topluluk tarafından
Pi, earendil-works tarafından geliştirilen açık kaynaklı (MIT) bir terminal AI kodlama ajanıdır. Kod tabanınızı okur, dosyaları düzenler ve dört araçlık küçük bir çekirdekten komutlar çalıştırır — read, write, edit, bash. Bu sayfa, Pi'nin kendi arayüzü hakkında değil, OpenDesign üzerinden Pi ile arayüz tasarlamak hakkındadır. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaKendi sağlayıcı API anahtarınız (BYOK) veya
Kendi sağlayıcı API anahtarınız (BYOK) veya /login üzerinden abonelik girişi. Kendi sağlayıcı API anahtarınız (BYOK) veya bir abonelik girişiyle kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır. Bu sayfa herhangi bir kota veya fiyat garantisi vermez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü derlemeleri için indirme sayfasını kontrol edin. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırmayla ilgilidir, bir masaüstü paketi kurmakla ilgili değildir. Minimum uyumlu Pi sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Kurulu sürümünüzün gösterdiği bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Pi'nin bunu ele aldığını ve üretilen dosyanın açıldığını doğrulayın. Yalnızca indirme işlemi çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Pi Kurulumu
Önce indirin, kurulu sürümünüz için Pi kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu izlemek için OpenDesign'ı kaynaktan derlemenize gerek yoktur.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok. - 2
Pi Bağlantınızı Hazırlayın
Kurulu sürümünüzdeki Pi talimatlarını izleyin. Kendi sağlayıcı API anahtarınız (BYOK) veya bir abonelik girişiyle kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.
Pi sağlayıcılar & kimlik doğrulama belgeleri# 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)Yayınlanmış kılavuzdaki Pi kurulum notlarından; güncel komut için satıcı belgelerini kontrol edin.
KONTROL NOKTASIHedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin. - 3
Tek Bir Küçük Pi Görevi Çalıştırın
Bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Design kurallarımı kullanın. Masaüstü ve mobil genişliklerde kontrol edin.
KONTROL NOKTASISonucu açın, kayıt durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan bir dosya, incelemenin sonu değil başlangıcıdır.
OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
Pi tasarım iş akışı
Beş Adımda Pi Tasarım İş Akışı
Aynı plan karşılaştırma sayfası görevi, brief'ten doğrulanmış dosyaya kadar takip edilir. Her adımda sizin sağladığınız, Pi'nin yaptığı, OpenDesign'ın kattığı ve sizin kontrol ettiğiniz şeyler listelenir.
- 1
Tasarım Brief'i
Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.
- SizBrief'i yazın; varsa referans bir ekran görüntüsü ekleyin.
- PiBrief'i ve projenin talimat dosyasını okur; bir şey belirsiz olduğunda sorar.
- OpenDesignProjeyi, prompt yüzeyini ve ilgili artifact türü için skill'i sağlar.
- KontrolBrief'in kabul kriterlerini belirttiğini doğrulayın. Bunları şimdi eklemek, üretimden sonra eklemekten daha ucuzdur.
- 2
Tasarım Kısıtları
Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.
- SizBir design system seçin; breakpoint'leri ve kullanılması gereken bileşenleri belirtin.
- PiBir satır yazmadan önce DESIGN.md token'larını ve tutum kurallarını bağlama yükler.
- OpenDesignDesign-system kütüphanesini sunar ve seçilen olanı skill şablonuna bağlar.
- KontrolToken'lar markanızla eşleşir. Bir vurgu rengi, doğru fontlar, doğru radius.
- 3
Arayüzü Oluştur
Pi, kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve sabit kancalar.
- SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
- PiBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanları düzeltir.
- OpenDesignArtifact'ı proje klasörüne kaydeder ve önizleme için indeksler.
- KontrolHenüz yok. Dosyayı kaynak koddan değil, render edildikten sonra değerlendirin.
- 4
Önizleme
Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. Tasarımın değerlendirildiği yer burasıdır.
- SizGenişlikleri değiştirin, etkileşimlere tıklayın, öğeler üzerine yorum bırakın.
- PiÖnizlemeye yazdığınız yorumları okur ve bir sonraki revizyonu hazırlar.
- OpenDesignÖnizlemeyi render eder, yorumlar ve düzenlemeler için
data-od-idhedeflerini açığa çıkarır. - KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.
- 5
Revize Et ve Doğrula
Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.
- SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
- PiDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignSürümleri yan yana tutar; işiniz bittiğinde bir görüntü veya HTML dışa aktarır.
- KontrolÖnce sadece değişen alanı, ardından her bir kırılma noktasında sayfanın tamamını bir kez yeniden kontrol edin.
Kaynaklar
Pi Tasarım Kaynakları
Skill'ler Skill'lere göz atın Tasarım sistemleri Sistemlere göz atın Şablonlar Şablonlara göz atın
Tasarım Skill'leri
Pi'nin OpenDesign içinde üretebileceği artifact türleri, tür başına bir skill.
Tasarım Sistemleri
Pi herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenler.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Pi Sınırlamaları, Manuel Kontroller ve Yedek Çözümler
- KapsamSağlayıcıdan bağımsızdır: Anthropic, OpenAI, Google ve 20'den fazla sağlayıcı arasında standartlaştırır, böylece kendi anahtarlarınızı getirir ve oturum ortasında model değiştirebilirsiniz. Bu sayfa, Pi'yi OpenDesign'a bağlı bir ajan olarak ele alır, Pi'nin her özelliğini kapsamaz.
- Kullanım LimitleriKullanım limitleri ve maliyet, kullandığınız kimlik bilgisine bağlıdır (kendi sağlayıcı API anahtarınız veya /login üzerinden abonelik girişi). Bu sayfa ücretsiz kotalar hakkında bir iddiada bulunmaz.
- AğYerel proje dosyaları, çevrimdışı çıkarım anlamına gelmez. Hassas girdileri paylaşmadan önce ajanınızın sağlayıcı ayarlarını ve veri politikalarını inceleyin.
- Çıktı HTML'dirArtifact'lar HTML dosyalarıdır, vektör tasarım dosyaları değildir.
- Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede sizin tarafınızdan incelenir. Ajan tarafından yapılan herhangi bir kendi kendini kontrolü ilk geçiş olarak değerlendirin.
- Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, kurulu sürümün bağlantı talimatlarını ve kimlik doğrulamasını kontrol edin. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan üretilen dosyayı koruyun.
SSS
Pi ve OpenDesign Hakkında Sık Sorulan Sorular
Pi Gerçekten Tasarım İşi Yapabilir mi?
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.
Pi ile Tasarım Yapmak İçin Ödeme Yapmam Gerekir mi?
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.
Pi'yi Özellikle Tasarım İçin İyi Yapan Nedir?
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.
Ön Uç Tasarım İç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 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.
Pi'yi Figma'ya Nasıl Bağlarım?
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.
Pi ile İlk Tasarım Görevine Başlayın
Küçük bir görevle başlayın, gidiş-dönüşü değerlendirin, ardından gerçek brief'i getirin. Kurulumunuza uyan seçeneği seçin; sayfa bunu algılamaz.