Aider ile
OpenDesign’da
tasarlayın.

changelog.html · 1440px

4Teslimden Önce İnceleme

1. 1

   OpenDesign Masaüstü Uygulamasını İndirin

   Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.

   OpenDesign'ı indirin

   KONTROL NOKTASI

   Masaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok.
2. 2

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

   Kurulu sürümünüzdeki Aider talimatlarını izleyin. Kendi sağlayıcı API anahtarınızla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde 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; güncel komut için satıcı belgelerini kontrol edin.

   KONTROL NOKTASI

   Hedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin.
3. 3

   Küçük Bir Aider 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’i Kopyala

   Bir 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 NOKTASI

   Sonucu 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.

1. 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.
   • AiderBrief'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.

   New project · PromptAider

   You

   Design the changelog page: version list, highlighted release with grouped changes, upgrade command. One commit per revision.

   Aider

   Understood. I will commit each revision separately so you can revert one. Should breaking changes get their own group above features?
2. 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.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 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.

   Project files3 files

   • changelog.htmlnew
   • CONVENTIONS.mdbound
   • DESIGN.mdread
4. 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-id hedeflerini açığa çıkarır.
   • KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.

   Preview · 390pxComment mode

   Comment on · callout

   Breaking changes first, in the callout, not buried in the list.

   Comment on · list

   Current version in accent; older ones plain.
5. 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.
   • 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.

   Verification · v23 of 4

   • ✓Breaking callout above changes
   • ✓Current version only in accent
   • ✓No horizontal scroll at 390px
   • Per-revision commits — checked by you