Tasarım için Aider.

Aider gerçekte nedir

Aider, terminalinizde çalışan açık kaynak kodlu (Apache-2.0) bir yapay zeka çift-programlama aracıdır. Mevcut kod tabanınızı okur, bağlam için tüm depoyu haritalandırır, dosyaları yerinde düzenler ve her değişikliği mantıklı bir mesajla otomatik olarak commit'ler — böylece yapay zekanın işini zaten kullandığınız git araçlarıyla karşılaştırabilir, yönetebilir ve geri alabilirsiniz. 100'den fazla programlama diliyle çalışır ve yeni projeler başlatır veya mevcut projelere inşa eder.

Tasarım işi için iki özellik öne çıkıyor. Aider model-bağımsızdır: kendi anahtarınızı getirirsiniz ve neredeyse her LLM'ye — Claude, GPT-4o, DeepSeek, Gemini veya yerel bir model — bağlarsınız, böylece asla tek bir sağlayıcıya kilitlenmezsiniz. Ve GPT-4o ve Claude gibi görsel yetenekli modellerde, görüntü dosyalarını okuyabilir ve bir referans ekran görüntüsünü prompt'un bir parçasına dönüştürebilir.

• Konvansiyon 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 gözden geçirme kontrol listelerinizi salt okunur bağlam olarak kodlamanın doğal yeri.
• Git-tabanlı düzenlemeler: Her değişiklik, reponuzdaki dosyalara uygulanır ve otomatik olarak commit edilir; böylece her tasarım iterasyonu tanıdık git araçlarıyla gözden geçirilebilir ve geri alınabilir hale gelir.
• Kendi modelinizi getirin: OpenAI, Anthropic, DeepSeek, Gemini veya yerel bir modeli kendi API anahtarınızla bağlayın; Aider tek bir sağlayıcıya ya da barındırılan bir arka uca bağlı değildir.

• Sağlayıcı: Aider (Aider-AI, açık kaynak) — model-agnostik
• Kimlik Bilgisi: kendi sağlayıcı API anahtarınız — BYOK (OpenAI, Anthropic, DeepSeek, Gemini veya yerel bir model)
• Lisans: Apache-2.0, açık kaynak

Model-agnostik, git-tabanlı bir araç neden tasarıma uyuyor

Aider'ın tasarım avantajı, reponuzla ve seçtiğiniz modelle nasıl çalıştığından gelir — ancak her ajantta olduğu gibi, zevk yine de sizin tarafınızdan sağlanmalıdır.

• Model-agnostik, BYOK: Göreviniz ve bütçeniz için en iyi tasarlayan modeli seçin — Claude, GPT-4o, DeepSeek, Gemini — ve iş akışınızı değiştirmeden, kendi anahtarınızla özgürce geçiş yapın.
• Git-tabanlı iterasyon: Otomatik commit'ler, her tasarım geçişini geri alabileceğiniz, gözden geçirilebilir 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: Bir CONVENTIONS.md (salt okunur olarak yüklenir), ajanı tokenlarınıza, bileşenlerinize ve kurallarınıza yönlendirir; böylece varsayılan bir görünüm yerine bir marka kimliğine göre çalışır.

Ders, her ajanın öğrettiği dersle aynıdır: Aider varsayılan olarak zevk sahibi değildir. Ona 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, işte bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).

Aider'ı tasarım çalışması için sıfırdan kurun

Temiz bir makineden kullanıcı arayüzü oluşturabilen ve doğrulayabilen bir Aider'a giden eksiksiz yol burada.

# 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=)

# 3. Load your design conventions as read-only context
aider --read CONVENTIONS.md

# 4. Add a reference image (on a vision-capable model)
#    inside the chat: /add reference-desktop.png

• Tasarım kurallarınızı kodlayın: tokens, ilkeler ve kurallarınızı CONVENTIONS.md dosyasına koyun ve salt okunur olarak yükleyin, böylece çıktı genel bir görünüme varsayılan olarak dönmek yerine bir markaya uygun olsun.
• Tarayıcı doğrulaması ekleyin: Bir geliştirme sunucusu çalıştırın ve Aider'ın gerçek bir tarayıcıda render etmesini sağlayın, yalnızca derlemenin geçtiğini onaylamak yerine çıktısını farklı kırılma noktalarında kontrol edin.

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üyü çalışan, duyarlı kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yineleme yapmaktır — çıktıyı referansla karşılaştırmak için görsel yetenekli bir model kullanarak, her geçişte git'e commit ederek.

1. Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir ana çekim değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
2. Promptta spesifik olun; belirsiz promptlar güçlü bir modelle bile genel kullanıcı arayüzü üretir.
3. Tasarım sisteminizi ve kurallarınızı CONVENTIONS.md dosyasında tutun ve Aider'a tokens ve standart ilkelerin nerede bulunduğunu söyleyin.
4. Bir geliştirme sunucusu çalıştırın ve render edilen sonucu gerçek bir tarayıcıda kontrol edin, kırılma noktalarına göre yeniden boyutlandırın.
5. Aider'ın uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleme yapın — yalnızca derlemenin geçtiğini onaylamakla kalmayın.

Görsel yetenekli bir modelde /add (veya panodan /paste) ile bir görüntü ekleyin, ardından somut kısıtlamalar verin:

aider --model gpt-4o --read CONVENTIONS.md
# in the chat:
> /add reference-desktop.png
> /add reference-mobile.png
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from CONVENTIONS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  I'll render it in the browser and tell you what to fix until it matches
  the references across breakpoints.

Promptları küçük ve odaklı tutun. Aider her değişikliği commit ettiği için, iyi yinelemeleri korursunuz ve kötü olanları geri almak için git (veya /undo) kullanırsınız — böylece her geçiş temiz bir temel üzerine inşa edilir.

CONVENTIONS.md, görseller ve komutlar

Üç yetenek Aider'ı sürdürülebilir tasarım çalışması için pratik hale getirir ve her üçü de bir açık tasarım iş akışına temiz bir şekilde eşlenir.

• CONVENTIONS.md bağlamı: Kodlama ve tasarım kurallarını /read CONVENTIONS.md veya aider --read CONVENTIONS.md ile yükleyin ya da her çalıştırmada yüklemek için .aider.conf.yml dosyasında read: CONVENTIONS.md ayarlayın. Tokenlarınız, ilkeleriniz ve kurallarınız için kalıcı bir yerdir.
• Görseller ve web sayfaları: Görsel yeteneğine sahip modellerde, Aider'a gerçek bir referans vermek için bir görsel dosyası /add ile ekleyin veya panodan /paste yapın; ek bağlam için bir sayfanın metnini sohbete çekmek üzere /web <url> kullanın.
• Sohbet içi komutlar: Dosyaları bağlama eklemek için /add, salt okunur referanslar için /read ve son commit'i geri almak için /undo gibi komutlar, terminali terk etmeden referans toplama ve doğrulama döngüsünü çalıştırma imkanı sağlar.

Bunlar taşınabilir, depo-yerel yeteneklerdir — tam da Open Design'ın proje bazında yeniden yaratmak yerine orkestre etmek için inşa edildiği türden şeyler.

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

Tasarım çalışması için tek bir kazanan yok — her aracın farklı bir gücü var ve deneyimli ekipler bunları yığar. Adil bir özet:

Topluluktan gelen sürekli kanı şu ki zevk insanlardan gelir: hepsi skill'ler, referanslar ve kısıtlamalar olmadan jenerik bir estetiğe default olur. Çözülmesi gereken asıl sorun budur — ve bu tasarım-aracı şeklindedir, model şeklinde değil.

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, jenerik 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" 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 Aider'a özgü değildir; herhangi bir agent küratörlüğü yapılmış bir tasarım bağlamı olmadan çalıştığında olanlar bunlardır.

• Estetik bir skill ekleyin: Küratörlüğü yapılmış bir tasarım skill'i, agent'ı default görünüm yerine gerçek bir yöne commit olmaya zorlar.
• Gerçek bir tarayıcıda doğrulayın: Düzenlerin mobilde sessizce bozulmaması için breakpoint'ler arasında render edin ve self-check yapın — görme yeteneğine sahip bir modelde, ekran görüntülerini geri besleyin.
• Token'lar ve referanslar sağlayın: Gerçek design token'ları ve referans ekran görüntüleri, çıktı kalitesindeki en büyük kaldıraçtır.
• Kuralları CONVENTIONS.md içinde kodlayın: "Hero kartları yok, maksimum iki yazı tipi, marka öncelikli hiyerarşi" gibi stil kurallarını ajanın her çalıştırmada okuduğu yere koyun.

Her azaltma önleminin ajana küratörlü bir tasarım bağlamı vermeyle ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmetli iştir.

Open Design içinde Aider ile tasarım yapmak

Open Design, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Aider'ı birinci taraf adaptör olarak ele alır ve onu küratörlü bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış render hattı ve yerel masaüstü arayüzü ile sarar — böylece Aider'ı 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 kaynak ve önce-yerel olup, bu eşleşmeyi doğal bir uyum haline getirir.

1. Open Design'ı yükleyin ve ajanınız olarak Aider'ı seçin.
2. Kendi sağlayıcı API anahtarınızla (BYOK) kimlik doğrulaması yapın — OpenAI, Anthropic, DeepSeek veya Gemini; kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy edilmez.
3. Bir tasarım sistemi ve bir skill seçin, ardından tutarlı zevkle sunular, prototipler ve açılış sayfaları oluşturun.
4. Her eser ve DESIGN.md dosyası barındırılan bir bulutta değil, kendi git reponuzda yaşar.

Aynı Aider ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Önce-yerel ve açık kaynak olduğundan, çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.

Sıkça sorulan sorular

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

   Evet — estetik bir skill, bir tasarım sistemi ve bağlamda gerçek referans görselleriyle Aider, üretime hazır, duyarlı kullanıcı arayüzü üretir ve görsel özellikli modellerde çıktıyı referanslara karşı doğrulamak için ekran görüntülerini okur. Bu bağlam olmadan genel bir görünüme varsayılan eğilim gösterir ki, Open Design'ın doldurduğu boşluk budur.

2. 02 Tasarım için Aider ile hangi modelleri kullanabilirim? +

   Aider model-agnostiktir. Kendi API anahtarınızı getirirsiniz ve neredeyse her LLM'i bağlarsınız — 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 özellikli bir model kullanın. Open Design kimlik bilgilerinizi asla proxy etmez.

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

   İki şey: model-agnostik olması, böylece göreviniz için en iyi tasarım yapan modeli seçersiniz, ve git-yerel olması, her değişikliği commit ederek her tasarım yinelemesini gözden geçirilebilir ve geri alınabilir hale getirir. Her ikisi de yardımcı olur — ama zevk yine de sağladığınız tasarım sistemi, skill ve referanslardan gelir.

4. 04 Aider dosyalarımı düzenler ve git'e commit yapar mı? +

   Evet. Aider dosyaları doğrudan repo'nuzda düzenler ve her değişikliği anlamlı bir mesajla otomatik olarak commit eder; böylece AI'ın çalışmasını zaten kullandığınız git araçlarıyla diff'leyebilir, yönetebilir ve geri alabilirsiniz.

5. 05 Tasarım kurallarımı Aider'a 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 yükleyin (ya da her çalıştırmada yüklemek için .aider.conf.yml içinde read: CONVENTIONS.md ayarlayın). Aider böylece varsayılan görünüm yerine markanıza uygun çalışır.

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

   Hayır. Aider bağımsız bir açık kaynak projesidir (Aider-AI); Open Design ise Aider'ı birinci taraf adaptör olarak destekleyen ayrı bir bağımsız açık kaynak projesidir. İkisi birbirleriyle bağlantılı değildir.

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

   Evet — Open Design yerel-öncelikli ve açık kaynaklıdır. Dosyalarınız, artifact'larınız ve DESIGN.md kendi git repo'nuzda kalır ve sağlayıcı API anahtarlarınız doğrudan agent'ınız tarafından kullanılır, asla Open Design sunucuları üzerinden yönlendirilmez.