DAHA FAZLA OKUMA
Aider için Ek Okumalar
Yayınlanan kılavuzda listelendiği üzere, Aider tasarımı için eğitimler, belgeler ve adım adım kılavuzlar.
Aider 
OpenDesign Aider ile
OpenDesign’da
tasarlayın.
OpenDesign'da Aider ile arayüz tasarlama: revizyon başına bir commit, kural kitabı olarak CONVENTIONS.md, brief'ten incelenmiş dosyaya bir değişiklik günlüğü sayfası görevi ve başlamadan önce bilinmesi gereken sınırlar.
BU AIDER KILAVUZUNDA ÜÇ BAŞLANGIÇ NOKTASI
Aider Başlangıç Noktanızı Seçin
BU KILAVUZ · UI TASARIMI
Aider Kullanarak Bir Ürün Arayüzü Oluşturun
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML çıktısı.
Bu kılavuzu okuyun KURULUMAider'ı Sıfırdan Kurun
Tam yol: temiz bir makineden terminalde Aider'a, arayüz oluşturmaya ve doğrulamaya hazır.
Kuruluma git KARŞILAŞTIRMAAider'ı Diğer Ajanlarla Karşılaştırın
Aider'ın tasarım için Codex, Claude Code ve Cursor'dan nasıl ayrıldığı ve başka bir iş akışının ne zaman daha iyi olduğu.
Karşılaştırmayı görünEksiksiz Bir Aider Tasarım Görevi
Brief'ten Arayüze Bir Aider Tasarım Görevi
Tüm döngü boyunca izlenen tek bir görev: Aider'a verdiğiniz brief ve kısıtlamalar, dönen HTML ve tamamlanmadan önce hâlâ çalıştırdığınız kontroller. Aşağıdaki arayüz bu sayfa için örnekleyicidir, kaydedilmiş bir Aider çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefBir CLI aracı için değişiklik günlüğü ve sürüm notları sayfası tasarlayın: bir sürüm listesi, gruplanmış değişikliklerle vurgulanmış bir sürüm ve bir yükseltme komutu. Her revizyon kendi commit'i olarak kalsın. 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şimlerSürüm listesi, yükseltme komutunu kopyalama, sürüm başına anchor
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2Kim Ne Yapar: Siz, Aider ve OpenDesign
- Siz
Brief'i siz yazarsınız, tasarım sistemini seçersiniz ve kabul kriterlerini belirlersiniz.
- Aider
Aider düzeni planlar, HTML, CSS ve JavaScript'i yazar ve istek üzerine revize eder.
- OpenDesign
OpenDesign tasarım sistemini ve yeteneği sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
- İnceleme
Teslimden önce görsel hiyerarşiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi kontrol edersiniz.
3Aider Çıktısı: 1440px ve 390px'te Değişiklik Günlüğü Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Sürüm listesi, notlar ve kenar çubuğu 8px ızgarada oturur; sürüm başlıkları liste ile hizalanır.
Hiyerarşi
Görsel Hiyerarşi
Sürüm ve tarih başta, sonra breaking callout; vurgu yalnızca geçerli sürümü işaretler.
Duyarlı
Mobil Düzen
Sürüm listesi bir select'e dönüşür; notlar tam genişliğe yayılır.
Etkileşim
Etkileşim Kontrolleri
Yükseltme komutunu kopyalamayı, daha eski bir sürüme atlamayı, breaking callout bağlantısını açmayı deneyin.
Uygunluk
Aider'ın Göreve Uygun Olduğu ve Olmadığı Durumlar
Aider Şu Durumlarda Uygundur
- Modelden bağımsız, BYOK. Kendi anahtarınızı getirin ve neredeyse her LLM'ye bağlanın; görsel yetenekli bir model, bir referans görüntüyü duyarlı işaretlemeye dönüştürebilir.
- Git-yerel yineleme. Aider'ın otomatik commit'leri her tasarım geçişini geri alabileceğiniz incelenebilir bir diff'e dönüştürür, çıktıyı temiz ve izlenebilir tutar.
- CONVENTIONS.md bağlamı. Salt okunur bir kurallar dosyası, token'larınızı, temel öğelerinizi ve tasarım kurallarınızı her çalıştırmaya yükler.
- Açık kaynak. Apache-2.0 ve yerel-öncelikli, doğrudan kendi deponuzdaki kod üzerinde çalışır.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Aider HTML döndürür, düzenlenebilir bir tasarım belgesi değil. Bu varlık biçimi için ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlamanız yok. Bir tasarım sistemi veya örnekler olmadan çıktı genel bir görünüme kayar; önce brief'i yazın.
- Bu aracının ihtiyaç duyduğu kimlik bilgisine sahip değilsiniz. Gerekli: kendi sağlayıcı API anahtarınız — BYOK (OpenAI, Anthropic, DeepSeek, Gemini veya yerel). OpenDesign kimlik bilgilerini ne sağlar ne de vekillik eder.
- Ekibiniz OpenCode veya Kilo'da çalışıyor. Bu aracıların kendi sayfaları var; çalışma alanı benzer kalır, kurulum değişir. ilgili aracılar bölümüne bakın.
Uyumluluk
Başlamadan Önce Aider Gereksinimleri
Bu sayfa, OpenDesign masaüstü uygulaması üzerinden bağlanan Aider'ı kapsar. Yayınlanan referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıAider, Aider tarafından
Aider, terminalinizde çalışan Apache-2.0 açık kaynaklı bir yapay zeka eş-programlama aracıdır. Kod tabanınızı haritalar, dosyaları yerinde düzenler ve her değişikliği anlamlı bir mesajla otomatik olarak commit'ler. Bu sayfa, Aider'ın kendi arayüzü değil, OpenDesign aracılığıyla Aider ile arayüz tasarlamayı ele alır. OpenDesign'ın kurulum notları mevcut aracıları listeler.
Hesaplar ve Kimlik DoğrulamaKendi sağlayıcı API anahtarınız — BYOK (OpenAI,
Kendi sağlayıcı API anahtarınız — BYOK (OpenAI, Anthropic, DeepSeek, Gemini veya yerel). Bu anahtarla kimlik doğrulayın; kimlik bilgileri makinenizde kalır. Burada hiçbir kota veya fiyat vaat edilmez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü yapıları indirme sayfasındadır. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırıldığında geçerlidir, masaüstü paket kurulumu için değil. Minimum uyumlu Aider sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Yüklü sürümünüzün gösterdiği bağlantı talimatlarını kullanın, ardından küçük bir görev çalıştırın. Aider'ın bunu halledip etmediğini ve çıktının açıldığını doğrulayın. Tek başına bir indirme, çalışan bir bağlantıyı kanıtlamaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Aider Kurulumu
Önce indirin, yüklediğiniz sürüm için Aider kurulumunu tamamlayın, ardından küçük bir sonucu doğrulayın. Bu yolu izlemek, OpenDesign'ı kaynaktan derlemeyi gerektirmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınız için paketi seçin, yükleyin ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten yüklü mü? Sonraki adıma geçin; tekrar indirmeye gerek yok. - 2
Aider Bağlantınızı Hazırlayın
Yüklü sürümünüz için Aider talimatlarını izleyin. Kendi sağlayıcı API anahtarınızla (BYOK) kimlik doğrulayın; kimlik bilgileri yerel kalır.
Aider — Terminalinizde AI pair programming# 1. Install Aider (recommended installer; Python 3.8–3.13) python -m pip install aider-install aider-install # or with pipx: pipx install aider-chat # 2. Start it in your git project and bring your own key cd your-project aider --model sonnet --api-key anthropic=<your-key> # or: aider --api-key openai=<your-key> (also deepseek=, gemini=)Yayınlanan kılavuzdaki Aider kurulum notlarından; geçerli komut için satıcı belgelerine bakın.
KONTROL NOKTASIAmaçlanan aracıyı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir göreve kalkışmadan önce uyumluluğu kontrol edin. - 3
Küçük Bir Aider Görevi Çalıştırın
Tüm döngüyü, bir revizyon dahil, değerlendirebilecek kadar küçük bir brief ile başlayın.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Tasarım kurallarıma uyun. Masaüstü ve mobil genişliklerde kontrol edin.
KONTROL NOKTASISonucu açın, kaydetme durumunu test edin ve belirli bir değişiklik isteyin. Üretim incelemeyi başlatır; onu kapatmaz.
OpenDesign'ı kaynaktan çalıştırmak için, bunun yerine teknik hızlı başlangıcı izleyin.
Aider tasarım iş akışı
Aider'ın Beş Adımda Tasarım İş Akışı
Aşağıdaki değişiklik günlüğü sayfası görevi, yazılı bir brief'ten kontrol ettiğiniz bir dosyaya kadar ilerler. Her adım, sizin girdinizi, Aider'ın terminal-ve-git eylemlerini, OpenDesign'ın katkılarını ve borçlu olduğunuz incelemeyi adlandırır.
- 1
Tasarım Brief'i
Sade dil, üç ila altı satır. Hedef kitleyi, ekranın işini ve platformları adlandırın.
- SizBrief'i taslağını hazırlayın; varsa bir referans ekran görüntüsü ekleyin.
- AiderBrief'i ve projenin CONVENTIONS.md 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.
- AiderBir satır yazmadan önce DESIGN.md token'larını ve duruş 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
Aider, 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.
- AiderBö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.
- AiderÖnizleme üzerindeki yorumlarınızı okur ve 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
Önizlemedeki öğeleri işaret ederek değişiklik isteyin. Aider her revizyonu commit'ler, böylece hiçbir şey sessizce üzerine yazılmaz.
- SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
- AiderDeğ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
Aider 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
Aider'ın OpenDesign içinde üretebileceği çıktı türleri, her tür için bir skill.
Tasarım Sistemleri
Aider 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
Aider Sınırlamaları, Manuel Kontroller ve Yedek Çözümler
- KapsamBu sayfa, Aider'ı OpenDesign'a bağlı bir ajan olarak ele alır, Aider'ın tüm özelliklerini değil.
- Kullanım LimitleriKullanım limitleri ve maliyet, getirdiğiniz kimlik bilgisine bağlıdır (Kendi sağlayıcı API anahtarınız — BYOK (OpenAI, Anthropic, DeepSeek, Gemini veya yerel)). Burada ücretsiz kota iddiası yapılmamaktadır.
- 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
Aider ve OpenDesign Hakkında Sık Sorulan Sorular
Aider Gerçekten Tasarım İşi Yapabilir mi?
Evet — bağlamda estetik bir skill, bir design system ve gerçek referans görselleri bulunduğunda Aider, üretim kalitesinde, duyarlı (responsive) bir UI üretir ve görsel yeteneğe sahip modellerde çıktıyı referanslarla karşılaştırmak için ekran görüntülerini okur. Bu bağlam olmadığında genellikle sıradan bir görünüme yönelir; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Tasarım İçin Aider ile Hangi Modelleri Kullanabilirim?
Aider modelden bağımsızdır. Kendi API anahtarınızı getirir ve neredeyse her LLM'e bağlanabilirsiniz — Claude, GPT-4o, DeepSeek, Gemini veya yerel bir model. Görsel tabanlı tasarım işleri için GPT-4o veya Claude gibi görsel yeteneğe sahip bir model kullanın. OpenDesign kimlik bilgilerinizi asla proxy'lemez.
Aider'ı Özellikle Tasarım İçin İyi Yapan Nedir?
İki şey: modelden bağımsızdır, böylece göreviniz için en iyi tasarımı yapan modeli siz seçersiniz; ve git-native'dir, her değişikliği commit eder, böylece her tasarım yinelemesi incelenebilir ve geri alınabilir olur. Her ikisi de yardımcı olur — ancak beğeni hâlâ sağladığınız design system, skill ve referanslardan gelir.
Aider Dosyalarımı Düzenler ve Git'e Commit Eder mi?
Evet. Aider, dosyaları doğrudan deponuzda düzenler ve her değişikliği anlamlı bir mesajla otomatik olarak commit eder; böylece AI'nın işini zaten kullandığınız git araçlarıyla diff'leyebilir, yönetebilir ve geri alabilirsiniz.
Aider'a Tasarım Kurallarımı Nasıl Veririm?
Token'larınızı, primitiflerinizi ve kurallarınızı içeren bir CONVENTIONS.md oluşturun, ardından /read CONVENTIONS.md veya aider --read CONVENTIONS.md ile salt okunur olarak yükleyin (her çalıştırmada yüklenmesi için .aider.conf.yml içinde read: CONVENTIONS.md ayarını da yapabilirsiniz). Aider bundan sonra varsayılan bir görünüm yerine markanıza karşı çalışır.
Aider aslında nedir
Aider, terminalinizde çalışan açık kaynaklı (Apache-2.0) bir yapay zeka eşli programlama aracıdır. Mevcut kod tabanınızı okur, bağlam için tüm repoyu haritalar, dosyaları yerinde düzenler ve her değişikliği mantıklı bir mesajla otomatik olarak commit'ler — böylece AI'ın çalışmasını zaten kullandığınız git araçlarıyla diff'leyebilir, yönetebilir ve geri alabilirsiniz. 100'den fazla programlama diliyle çalışır ve yeni projeler başlatır veya mevcut olanların üzerine inşa eder.
Tasarım çalışması için iki özellik öne çıkar. Aider model-agnostiktir: kendi anahtarınızı getirir ve onu hemen hemen her LLM'e bağlarsınız — Claude, GPT-4o, DeepSeek, Gemini veya yerel bir model — böylece asla tek bir sağlayıcıya kilitlenmezsiniz. Ve GPT-4o ile Claude gibi görü yetenekli modellerde, görüntü dosyalarını okuyabilir ve bir referans ekran görüntüsünü prompt'un bir parçası haline getirebilir.
Konvansiyonlar dosyası: Aider, /read CONVENTIONS.md (veya aider --read CONVENTIONS.md) ile yüklediğiniz bir CONVENTIONS.md dosyasını okur — tasarım konvansiyonlarınızı, token'larınızı ve inceleme kontrol listelerinizi salt okunur bağlam olarak kodlamak için doğal yer.
Git-yerel düzenlemeler: Her değişiklik reponuzdaki dosyalara uygulanır ve otomatik olarak commit'lenir, böylece her tasarım iterasyonu tanıdık git araçlarıyla incelenebilir ve geri alınabilir.
Kendi modelinizi getirin: OpenAI, Anthropic, DeepSeek, Gemini veya yerel bir modeli kendi API anahtarınızla bağlayın; Aider tek bir satıcıya veya barındırılan bir arka uca bağlı değildir.
Kimlik bilgisi: kendi sağlayıcı API anahtarınız — BYOK (OpenAI, Anthropic, DeepSeek, Gemini veya yerel bir model)
Satıcı: Aider (Aider-AI, açık kaynak) — model-agnostik
Lisans: Apache-2.0, açık kaynak
Tasarım çalışması için iki özellik öne çıkar. Aider model-agnostiktir: kendi anahtarınızı getirir ve onu hemen hemen her LLM'e bağlarsınız — Claude, GPT-4o, DeepSeek, Gemini veya yerel bir model — böylece asla tek bir sağlayıcıya kilitlenmezsiniz. Ve GPT-4o ile Claude gibi görü yetenekli modellerde, görüntü dosyalarını okuyabilir ve bir referans ekran görüntüsünü prompt'un bir parçası haline getirebilir.
Konvansiyonlar dosyası: Aider, /read CONVENTIONS.md (veya aider --read CONVENTIONS.md) ile yüklediğiniz bir CONVENTIONS.md dosyasını okur — tasarım konvansiyonlarınızı, token'larınızı ve inceleme kontrol listelerinizi salt okunur bağlam olarak kodlamak için doğal yer.
Git-yerel düzenlemeler: Her değişiklik reponuzdaki dosyalara uygulanır ve otomatik olarak commit'lenir, böylece her tasarım iterasyonu tanıdık git araçlarıyla incelenebilir ve geri alınabilir.
Kendi modelinizi getirin: OpenAI, Anthropic, DeepSeek, Gemini veya yerel bir modeli kendi API anahtarınızla bağlayın; Aider tek bir satıcıya veya barındırılan bir arka uca bağlı değildir.
Kimlik bilgisi: kendi sağlayıcı API anahtarınız — BYOK (OpenAI, Anthropic, DeepSeek, Gemini veya yerel bir model)
Satıcı: Aider (Aider-AI, açık kaynak) — model-agnostik
Lisans: Apache-2.0, açık kaynak
Neden model-agnostik, git-yerel bir araç tasarıma uyar
Aider'ın tasarım avantajı, reponuzla ve model seçiminizle nasıl çalıştığından gelir — ancak, her ajanda olduğu gibi, zevk yine de sağlanmalıdır.
Model-agnostik, BYOK: Göreviniz ve bütçeniz için en iyi tasarım yapan modeli seçin — Claude, GPT-4o, DeepSeek, Gemini — ve iş akışınızı değiştirmeden, hepsi kendi anahtarınızla serbestçe geçiş yapın.
Git-yerel iterasyon: Otomatik commit'ler her tasarım geçişini geri alabileceğiniz incelenebilir bir diff haline getirir, böylece izlenmeyen bir düzenleme yığını yerine temiz bir taban üzerinde iterasyon yaparsınız.
CONVENTIONS.md içinde konvansiyonlar: (salt okunur yüklenen) bir CONVENTIONS.md, ajanı token'larınıza, bileşenlerinize ve kurallarınıza yönlendirir, böylece varsayılan bir görünüm yerine bir markaya karşı çalışır.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görüntüleri.
Ders, her ajanın öğrettiğiyle aynıdır: Aider varsayılan olarak zevke sahip değildir. Ona kısıtlar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir beceri ve somut referanslar. OpenDesign tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Model-agnostik, BYOK: Göreviniz ve bütçeniz için en iyi tasarım yapan modeli seçin — Claude, GPT-4o, DeepSeek, Gemini — ve iş akışınızı değiştirmeden, hepsi kendi anahtarınızla serbestçe geçiş yapın.
Git-yerel iterasyon: Otomatik commit'ler her tasarım geçişini geri alabileceğiniz incelenebilir bir diff haline getirir, böylece izlenmeyen bir düzenleme yığını yerine temiz bir taban üzerinde iterasyon yaparsınız.
CONVENTIONS.md içinde konvansiyonlar: (salt okunur yüklenen) bir CONVENTIONS.md, ajanı token'larınıza, bileşenlerinize ve kurallarınıza yönlendirir, böylece varsayılan bir görünüm yerine bir markaya karşı çalışır.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görüntüleri.
Ders, her ajanın öğrettiğiyle aynıdır: Aider varsayılan olarak zevke sahip değildir. Ona kısıtlar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir beceri ve somut referanslar. OpenDesign tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Sıfırdan tasarım işi için Aider kurulumu
Kurulum sırası: yükle → kendi anahtarını getir → CONVENTIONS.md'yi yükle → bir referans ekle → tarayıcı doğrulamasını etkinleştir.
Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı CONVENTIONS.md'ye koyun ve salt okunur olarak yükleyin, böylece çıktı genel bir görünüme varsayılan yerine bir markaya uyar.
Tarayıcı doğrulaması ekleyin: Bir dev sunucusu çalıştırın ve Aider'ın gerçek bir tarayıcıda render etmesini sağlayın, yalnızca build'in geçtiğini doğrulamak yerine çıktısını kırılma noktalarında kontrol edin.
Komutlar ve sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın; bunlar değişebilir.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı CONVENTIONS.md'ye koyun ve salt okunur olarak yükleyin, böylece çıktı genel bir görünüme varsayılan yerine bir markaya uyar.
Tarayıcı doğrulaması ekleyin: Bir dev sunucusu çalıştırın ve Aider'ın gerçek bir tarayıcıda render etmesini sağlayın, yalnızca build'in geçtiğini doğrulamak yerine çıktısını kırılma noktalarında kontrol edin.
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. Aider'ı yükle (önerilen yükleyici; Python 3.8–3.13)
python -m pip install aider-install
aider-install
# veya pipx ile: pipx install aider-chat
# 2. Git projenizde başlatın ve kendi anahtarınızı getirin
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# veya: aider --api-key openai=<your-key> (ayrıca deepseek=, gemini=)
# 3. Tasarım konvansiyonlarınızı salt okunur bağlam olarak yükleyin
aider --read CONVENTIONS.md
# 4. Bir referans görüntüsü ekleyin (görü yetenekli bir modelde)
# sohbet içinde: /add reference-desktop.pngÖnceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Ekran görüntüsünden kullanıcı arayüzüne iş akışı
Aider ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüsünü çalışan, duyarlı kullanıcı arayüzüne dönüştürmek ve eşleşene kadar iterasyon yapmaktır — çıktıyı referansa geri karşılaştırmak için görü yetenekli bir model kullanarak, her geçiş git'e commit'lenir.
Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir kahraman çekimi değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
Prompt'ta spesifik olun; belirsiz prompt'lar güçlü bir modelle bile genel kullanıcı arayüzü üretir.
Tasarım sisteminizi ve konvansiyonlarınızı CONVENTIONS.md'de tutun ve Aider'a token'ların ve kanonik primitiflerin nerede yaşadığını söyleyin.
Bir dev sunucusu çalıştırın ve render edilen sonucu gerçek bir tarayıcıda kontrol edin, kırılma noktalarına yeniden boyutlandırın.
Aider'ın uygulamasını ekran görüntülerine geri karşılaştırmasını sağlayarak iterasyon yapın — yalnızca build olduğunu doğrulamayın.
Görü yetenekli bir modelde /add (veya panodan /paste) ile bir görüntü ekleyin, ardından somut kısıtlar verin:
Prompt'ları küçük ve odaklı tutun. Aider her değişikliği commit'lediği için iyi iterasyonları korur ve kötü olanları geri almak için git (veya /undo) kullanırsınız — böylece her geçiş temiz bir taban üzerine inşa edilir.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir kahraman çekimi değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
Prompt'ta spesifik olun; belirsiz prompt'lar güçlü bir modelle bile genel kullanıcı arayüzü üretir.
Tasarım sisteminizi ve konvansiyonlarınızı CONVENTIONS.md'de tutun ve Aider'a token'ların ve kanonik primitiflerin nerede yaşadığını söyleyin.
Bir dev sunucusu çalıştırın ve render edilen sonucu gerçek bir tarayıcıda kontrol edin, kırılma noktalarına yeniden boyutlandırın.
Aider'ın uygulamasını ekran görüntülerine geri karşılaştırmasını sağlayarak iterasyon yapın — yalnızca build olduğunu doğrulamayın.
Görü yetenekli bir modelde /add (veya panodan /paste) ile bir görüntü ekleyin, ardından somut kısıtlar verin:
Prompt'ları küçük ve odaklı tutun. Aider her değişikliği commit'lediği için iyi iterasyonları korur ve kötü olanları geri almak için git (veya /undo) kullanırsınız — böylece her geçiş temiz bir taban üzerine inşa edilir.
aider --model gpt-4o --read CONVENTIONS.md
# sohbette:
> /add reference-desktop.png
> /add reference-mobile.png
> Bu tasarımı React + Vite + Tailwind + TypeScript'te uygulayın.
CONVENTIONS.md'den mevcut tasarım sistemi bileşenlerimi ve token'larımı yeniden kullanın.
Boşluk, düzen ve hiyerarşiyi eşleştirin; duyarlı yapın.
Tarayıcıda render edeceğim ve referanslarla kırılma noktalarında eşleşene kadar neyi düzelteceğinizi söyleyeceğim.Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
CONVENTIONS.md, görüntüler ve komutlar
Üç yetenek, Aider'ı sürdürülebilir tasarım çalışmaları için pratik kılar ve bu üçü açık tasarım iş akışına temiz bir şekilde uyum sağlar.
CONVENTIONS.md bağlamı: Kodlama ve tasarım kurallarını /read CONVENTIONS.md veya aider --read CONVENTIONS.md ile yükleyin ya da .aider.conf.yml dosyasına read: CONVENTIONS.md ayarını yaparak her çalıştırmada yüklenmesini sağlayın. Bu, token'larınız, temel öğeleriniz ve kurallarınız için kalıcı bir yuva görevi görür.
Görüntüler ve web sayfaları: Görme yeteneğine sahip modellerde, Aider'a gerçek bir referans sağlamak için /add ile bir görüntü dosyası ekleyin veya /paste ile panodan yapıştırın; /web komutu sayfanın metnini ek bağlam için sohbete kazır.
Sohbet içi komutlar: Dosyaları bağlama getirmek için /add, salt okunur referanslar için /read ve son commit'i geri almak için /undo gibi komutlar, referansları toplamasına ve doğrulama döngüsünü terminalden ayrılmadan çalıştırmasına olanak tanır.
Bunlar taşınabilir, depo-yerel yeteneklerdir — tam olarak OpenDesign'ın proje bazında yeniden oluşturmak yerine orkestrasyon yapmak üzere tasarlandığı türden şeyler.
CONVENTIONS.md bağlamı: Kodlama ve tasarım kurallarını /read CONVENTIONS.md veya aider --read CONVENTIONS.md ile yükleyin ya da .aider.conf.yml dosyasına read: CONVENTIONS.md ayarını yaparak her çalıştırmada yüklenmesini sağlayın. Bu, token'larınız, temel öğeleriniz ve kurallarınız için kalıcı bir yuva görevi görür.
Görüntüler ve web sayfaları: Görme yeteneğine sahip modellerde, Aider'a gerçek bir referans sağlamak için /add ile bir görüntü dosyası ekleyin veya /paste ile panodan yapıştırın; /web
Sohbet içi komutlar: Dosyaları bağlama getirmek için /add, salt okunur referanslar için /read ve son commit'i geri almak için /undo gibi komutlar, referansları toplamasına ve doğrulama döngüsünü terminalden ayrılmadan çalıştırmasına olanak tanır.
Bunlar taşınabilir, depo-yerel yeteneklerdir — tam olarak OpenDesign'ın proje bazında yeniden oluşturmak yerine orkestrasyon yapmak üzere tasarlandığı türden şeyler.
Aider'ın Tasarım için Codex, Claude Code, Cursor ve Gemini CLI ile Karşılaştırılması
Tasarım çalışmaları 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:
Aider — Açık kaynak, model bağımsız (BYOK) ve git-yerel; otomatik commit'ler her yinelemeyi gözden geçirilebilir ve geri alınabilir kılar — Mevcut kod tabanınızda, hangi model en iyi tasarlıyorsa onunla depo-yerel yineleme
Codex — Ön uç becerisiyle güçlü görsel cilalama; korumalı alanda eşzamansız derlemeler — Devredilen eşzamansız derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanı farkındalıklı UX — Ön uç akıl yürütme ve geniş bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel yap-ve-gör döngüsü — IDE içinde sıkı yinele-ve-izle arayüz çalışması
Gemini CLI — Güçlü çok modlu görüntü anlama ve 1 milyon token'lık bağlam; ücretsiz katmanlı açık kaynak — Ekran görüntüsü ağırlıklı işler ve tüm tasarım sistemini bağlamda tutma
Tekrarlayan topluluk kanısı, zevkin insanlardan geldiğidir: beceriler, referanslar ve kısıtlamalar olmadan hepsi varsayılan olarak genel bir estetiğe düşer. Çözülmesi gereken asıl sorun budur — ve bu tasarım aracı şeklindedir, model şeklinde değil.
Ajan — Tasarım gücü — En iyi olduğu alan
Aider — Açık kaynak, model bağımsız (BYOK) ve git-yerel; otomatik commit'ler her yinelemeyi gözden geçirilebilir ve geri alınabilir kılar — Mevcut kod tabanınızda, hangi model en iyi tasarlıyorsa onunla depo-yerel yineleme
Codex — Ön uç becerisiyle güçlü görsel cilalama; korumalı alanda eşzamansız derlemeler — Devredilen eşzamansız derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanı farkındalıklı UX — Ön uç akıl yürütme ve geniş bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel yap-ve-gör döngüsü — IDE içinde sıkı yinele-ve-izle arayüz çalışması
Gemini CLI — Güçlü çok modlu görüntü anlama ve 1 milyon token'lık bağlam; ücretsiz katmanlı açık kaynak — Ekran görüntüsü ağırlıklı işler ve tüm tasarım sistemini bağlamda tutma
Tekrarlayan topluluk kanısı, zevkin insanlardan geldiğidir: beceriler, referanslar ve kısıtlamalar olmadan hepsi varsayılan olarak genel bir estetiğe düşer. Çözülmesi gereken asıl sorun budur — ve bu tasarım aracı şeklindedir, model şeklinde değil.
Ajan — Tasarım gücü — En iyi olduğu alan
Tuzaklar ve "AI slop" görünümünden nasıl kaçınılır
AI tarafından üretilen tasarımla ilgili en yaygın şikayet, genel 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 Inter-ve-mor bir hava. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve talimatların arayüz metnine sızması yer alır. Bunların hiçbiri Aider'a özgü değildir; herhangi bir ajan kürasyonlu bir tasarım bağlamı olmadan çalıştığında olan şeydir.
Estetik bir beceri ekleyin: Kürasyonlu bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Kesme noktalarında render alın ve kendi kendinize kontrol edin, böylece düzenler mobilde sessizce bozulmaz — görme yeteneğine sahip bir modelde, ekran görüntülerini geri besleyin.
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 kaldıraçtır.
Kuralları CONVENTIONS.md içine kodlayın: "kahraman kartları yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi" tarzı kuralları, ajanın her çalıştırmada okuduğu yere koyun.
Her hafifletmenin, ajana kürasyonlu bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, OpenDesign'ın ortadan kaldırdığı angaryadır.
Estetik bir beceri ekleyin: Kürasyonlu bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Kesme noktalarında render alın ve kendi kendinize kontrol edin, böylece düzenler mobilde sessizce bozulmaz — görme yeteneğine sahip bir modelde, ekran görüntülerini geri besleyin.
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 kaldıraçtır.
Kuralları CONVENTIONS.md içine kodlayın: "kahraman kartları yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi" tarzı kuralları, ajanın her çalıştırmada okuduğu yere koyun.
Her hafifletmenin, ajana kürasyonlu bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, OpenDesign'ın ortadan kaldırdığı angaryadır.
OpenDesign içinde Aider ile tasarım yapmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. Aider'ı birinci taraf bir adaptör olarak ele alır ve onu kürasyonlu bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzü ile sarar — böylece Aider'ı iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. Her ikisi de açık kaynak ve yerel önceliklidir, bu da eşleşmeyi doğal bir uyum haline getirir.
Kendi sağlayıcı API anahtarınızla (BYOK) kimlik doğrulayın — OpenAI, Anthropic, DeepSeek veya Gemini; kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden vekil olarak geçirilmez.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle desteler, prototipler ve açılış sayfaları üretin.
Her yapıt ve DESIGN.md dosyası kendi git deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Aider ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Yerel öncelikli ve açık kaynaktır, bu yüzden işiniz veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.
OpenDesign'ı kurun ve ajan olarak Aider'ı seçin.
Kendi sağlayıcı API anahtarınızla (BYOK) kimlik doğrulayın — OpenAI, Anthropic, DeepSeek veya Gemini; kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden vekil olarak geçirilmez.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle desteler, prototipler ve açılış sayfaları üretin.
Her yapıt ve DESIGN.md dosyası kendi git deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Aider ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. Yerel öncelikli ve açık kaynaktır, bu yüzden işiniz veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.
OpenDesign'ı kurun ve ajan olarak Aider'ı seçin.
OpenDesign, Aider ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır ve Aider ile bağlantılı değildir.