DAHA FAZLA OKUMA
Devin için Daha Fazla Okuma
Devin ile çalışmaya yönelik tasarım odaklı eğiticiler, belgeler ve adım adım kılavuzlar, yayımlanan kılavuzda listelendiği gibi.
Devin 
OpenDesign Devin ile
OpenDesign’da
tasarlayın.
OpenDesign'da Devin ile arayüz tasarlama: devredilip geri teslim edilen çok adımlı bir build, brief'ten incelenmiş dosyaya bir dokümantasyon bölümü görevi ve başlamadan önce bilinmesi gereken sınırlar.
Devin için üç başlangıç noktası
Devin ile Nereden Başlamalı
BU KILAVUZ · UI TASARIMI
Devin Kullanarak Ürün Arayüzü Oluşturma
Bu kılavuz brief'i, referansları, tasarım kurallarını ve incelenen HTML çıktısını ele alır.
Bu kılavuzu okuyun KURULUMDevin'i Sıfırdan Kurun
Temiz bir makineden, arayüz oluşturup doğrulayabilen bir Devin for Terminal'e uzanan tüm yol.
Kuruluma git KARŞILAŞTIRMADevin'i Diğer Ajanlarla Karşılaştırın
Tasarım görevlerinde Devin'in Codex, Claude Code ve Cursor karşısındaki konumu ve başka bir iş akışının ne zaman daha iyi olduğu.
Karşılaştırmayı görünUçtan Uca Bir Devin Tasarım Görevi
Brief'ten Arayüze: Bir Devin Tasarım Görevi
Baştan sona izlenen tek bir görev: verdiğiniz brief ve kısıtlamalar, Devin'in döndürdüğü çıktı ve tamamlanmış saymadan önce yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş örnek bir çalışmadır; kaydedilmiş bir Devin çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefBir geliştirici dokümantasyon sitesinin başlangıç bölümünü tasarla: gezinme, içinde bir çağrı kutusu ve kod bulunan bir makale ve sayfa içi gezinme rayı. Tüm bölümü tek bir incelenebilir dosya olarak döndür. Masaüstü ve telefon.
- Tasarım sistemiOpenDesign kağıt tuval: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma olmadan
- EtkileşimlerKenar çubuğu gezinmesi, kodu kopyala eylemi, sayfa içi vurgu
- ÇıktıSabit
data-od-idkancalarına sahip tek, kendi kendine yeten bir HTML dosyası
2İş Nasıl Bölünür: Siz, Devin ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Devin
Devin yerleşimi planlar, HTML, CSS ve JavaScript'i yazar ve istendiğinde revize eder.
- OpenDesign
OpenDesign tasarım sistemini ve skill'i sağlar, önizlemeyi render eder ve her sürümü projenizde bir dosya olarak kaydeder.
- İnceleme
Teslimden önce görsel hiyerarşiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi siz kontrol edersiniz.
3Devin'in Çıktısı: 1440px ve 390px'te Dokümantasyon Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
8px ızgarada üç sütun; makale ölçüsü 72 karakterin altında kalır.
Hiyerarşi
Görsel Hiyerarşi
Başlık, çağrı kutusu, ardından adımlar; vurgu rengi yalnızca etkin gezinme öğesini işaretler.
Duyarlı
Mobil Düzen
Gezinme bir panele dönüşür; sayfa içi gezinme rayı bir atlama menüsüne daralır.
Etkileşim
Etkileşim Kontrolleri
Kodu kopyalayın, bir başlığa atlayın ve gezinme panelini açın.
Uygunluk
Devin Ne Zaman Uygun, Ne Zaman Değil
Devin Şu Durumlarda Uygundur
- Otonom çok adımlı geliştirme. Devin, bir kod parçacığında durmak yerine tüm ön uç görevlerini—iskelet kurma, bileşenleri bağlama, testleri çalıştırma—planlar ve yürütür.
- Kum havuzlu bulut devri. Daha uzun geliştirmeler, kendi bilgisayarı olan bir bulut ajanına devredilebilir ve siz uzaklaştıktan sonra da devam eder.
- Proje kuralları + tarayıcı doğrulaması. Proje bağlamı kurallarınızı taşır; gerçek tarayıcıda render, çıktıyı her kırılma noktasında referanslarınıza göre kontrol eder.
- Hesap tabanlı, model seçimi. Oturum açmak için bir Devin hesabı kullanın; Devin, Cognition’ın kendi SWE-1.6'sı dahil olmak üzere öncü modeller üzerinde çalışır.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Çıktı HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gereken varlık biçiminiz için ayrı bir vektör iş akışı arayın.
- Referansınız ve kısıtlamanız yok. Bir tasarım sistemi veya örnek olmadan çıktı genel bir görünüme yönelir; önce brief'i yazın.
- Bu ajanın gerektirdiği kimlik bilgisine sahip değilsiniz. Gerekli: Devin (Cognition) hesabı — hesap tabanlı oturum açma, BYOK değil. OpenDesign kimlik bilgileri sağlamaz veya proxy'lemez.
- Ekibiniz Codex veya Claude Code ile çalışıyor. Bu ajanların kendi sayfaları var; kurulum farklıdır. Bkz. ilgili ajanlar.
Uyumluluk
Başlamadan Önce Devin Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Devin'e odaklanır. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıDevin, Cognition tarafından
Devin for Terminal, Cognition’ın otonom yapay zeka yazılım mühendisi Devin'in komut satırı versiyonudur. Kod tabanınıza, araçlarınıza ve ortamınıza erişimi olan yerel bir kodlama ajanı olarak çalışır; çok adımlı görevleri bağımsız olarak planlar ve yürütür. Bu sayfa, Devin'in kendi arayüzüyle değil, OpenDesign üzerinden Devin ile arayüz tasarlamayla ilgilidir. OpenDesign’ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaDevin (Cognition) hesabı — hesap tabanlı
Devin (Cognition) hesabı—hesap tabanlı oturum açma, BYOK değil. Devin (Cognition) hesabınızla kimlik doğrulayın; kimlik bilgileri makinenizdeki ajanınızda kalır. Bu sayfa bir kota veya fiyat taahhüt etmez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü sürümleri için indirme sayfasına bakın. Kaynak hızlı başlangıç kılavuzundaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırma için geçerlidir; bir masaüstü paketi kurmak için değil. Uyumlu minimum Devin sürümü: burada doğrulanmadı.
Bağlantı KontrolüBaşarı sinyali
Kurulu sürümünüzdeki bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Devin'in bunu ele aldığını ve çıktının açıldığını doğrulayın. Tek başına indirme, çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Devin Kurulumu
Önce indirin, kurulu sürümünüz için Devin kurulumunu tamamlayın, ardından küçük bir sonucu doğrulayın. Bu yolu izlemek için OpenDesign’ı kaynaktan derlemeniz gerekmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınız için 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
Devin Bağlantınızı Hazırlayın
Kurulu sürümünüzdeki Devin talimatlarını izleyin. Devin (Cognition) hesabınızla kimlik doğrulaması yapın — kimlik bilgileri makinenizdeki ajanınızda kalır.
Devin belgeleri# 1. Install Devin for Terminal curl -fsSL https://cli.devin.ai/install.sh | bash # 2. Start it in your project and sign in on first run cd your-project devin # sign in with your Devin (Cognition) accountYayımlanan kılavuzdaki Devin kurulum notlarından alınmıştır; güncel komut için satıcı dokümantasyonuna bakın.
KONTROL NOKTASIHedeflenen ajanı 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 Devin Görevi Çalıştırın
Tek bir revizyon dahil tüm döngüyü değerlendirebilmek için küçük bir brief ile başlayın.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluştur. Tasarım kurallarımı uygula. Masaüstü ve mobil genişliklerde kontrol et.
KONTROL NOKTASISonucu açın, kaydetme durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan dosya, incelemenin başlangıcını işaret eder, sonunu değil.
OpenDesign’ı kaynaktan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
Devin tasarım iş akışı
Devin ile Brief'ten İncelenmiş Dosyaya Beş Adım
Bu adım adım anlatım, bir dokümantasyon bölümü görevini ilk brief'ten doğrulanmış çıktıya kadar izler. Her adımda kendi girdinizi, Devin'in otonom yürütmesini, OpenDesign’ın katkısını ve yaptığınız kontrolü görürsünüz.
- 1
Tasarım Brief'i
Brief'i sade ve kısa tutun — üç ila altı satır. Ekranın kime hizmet ettiğini, neyi başarması gerektiğini ve hangi platformların önemli olduğunu belirtin.
- SizBrief'i siz yazarsınız ve elinizdeki referans ekran görüntüsünü eklersiniz.
- DevinDevin, brief'i projenin talimat dosyasıyla birlikte okur ve brief belirsiz olduğunda açıklama ister.
- OpenDesignOpenDesign projeyi, istem yüzeyini ve çıktı türüne uygun skill'i sağlar.
- KontrolBrief'in kabul kriterlerini açıkça belirttiğini siz doğrularsınız. Bunu Devin geliştirmeye başlamadan yapmak, çıktıyı sonradan onarmaktan daha az maliyetlidir.
- 2
Tasarım Kısıtları
Bir tasarım sistemi artı birkaç kesin kural. Bu bileşim, Devin'in çıktısını genel bir görünüme kaymak yerine markaya uygun tutar.
- SizBir tasarım sistemi seçer, kırılma noktalarını ve yeniden kullanılması gereken bileşenleri belirtirsiniz.
- DevinHerhangi bir kod yazmadan önce Devin, DESIGN.md tokenlarını ve duruş kurallarını bağlama yükler.
- OpenDesignOpenDesign tasarım sistemi kitaplığını sağlar ve seçiminizi skill şablonuna bağlar.
- KontrolTokenların markanızla eşleştiğini doğrularsınız: tek bir vurgu rengi, doğru yazı tipleri, doğru köşe yarıçapı.
- 3
Arayüzü Oluştur
Devin; yerleşimi, stilleri, etkileşimleri ve sabit kancaları kapsayan, kendi kendine yeten bir HTML dosyası üretir.
- SizSizin rolünüz beklemek veya bir açıklama sorusunu yanıtlamaktır; yapılandırılacak bir şey yoktur.
- DevinDevin bölümleri planlar, HTML, CSS ve JavaScript yazar, dosyayı çalıştırır ve hataları düzeltir.
- OpenDesignOpenDesign çıktıyı proje klasörüne kaydeder ve önizleme için dizine ekler.
- KontrolHenüz inceleme yok — dosyayı kaynağından değil, render edildikten sonra değerlendirin.
- 4
Önizleme
OpenDesign dosyayı belirttiğiniz genişliklerde render eder. Tasarım kalitesinin değerlendirildiği an burasıdır.
- SizGenişlikleri değiştirir, etkileşimleri dener ve belirli öğelere yorum bırakırsınız.
- DevinDevin, önizlemede bıraktığınız yorumları okur ve bir sonraki revizyonu hazırlar.
- OpenDesignOpenDesign önizlemeyi oluşturur ve yorumlar ile düzenlemeler için
data-od-idhedeflerini sunar. - KontrolHiyerarşiyi, kontrastı, 390px'te taşmayı, odak durumlarını ve vurgu renginin idareli kullanılıp kullanılmadığını kontrol edin.
- 5
Revize Et ve Doğrula
Önizlemedeki öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosya olur — sessiz üzerine yazma olmaz.
- SizYorumları isteklere dönüştürürsünüz ve görevin ne zaman tamamlandığına karar verirsiniz.
- DevinDevin değişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignOpenDesign sürümleri yan yana tutar ve bitirdiğinizde bir görsel veya HTML'yi dışa aktarır.
- KontrolYalnızca değişen alanı yeniden kontrol edin, ardından her kırılma noktasında tam sayfayı bir kez kontrol edin.
Kaynaklar
Devin 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
Devin'in OpenDesign içinde üretebileceği yapıt türleri; her tür için bir beceri.
Tasarım Sistemleri
Devin üretmeye başlamadan önce bağlanacak marka belirteçleri ve bileşenleri.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Devin Sınırları, İnsan Kontrolleri ve Yedek Seçenekler
- KapsamDevin bir oturumu, eşzamansız çalışmaya devam eden korumalı alan bulut aracısına devredebilir; böylece dizüstü bilgisayarınızı kapattıktan sonra daha uzun derlemeler tamamlanabilir. Bu sayfa, OpenDesign'e bağlı Devin'i kapsar, her Devin özelliğini değil.
- Kullanım LimitleriKullanım sınırları ve maliyet, kullandığınız kimlik bilgisine göre belirlenir — BYOK değil, hesap tabanlı oturum açma kullanan bir Devin (Cognition) hesabı. Bu sayfa ücretsiz kota iddiasında bulunmaz.
- AğYerel proje dosyaları çevrimdışı çıkarım anlamına gelmez. Hassas girdileri paylaşmadan önce aracınızın sağlayıcı ayarlarını ve veri politikalarını gözden geçirin.
- Çıktı HTML'dirYapıtlar HTML dosyaları olarak döner — vektör tasarım dosyaları olarak değil.
- Manuel İncelemeÖnizlemede erişilebilirliği, gerçek içeriği, marka uyumunu ve etkileşim doğruluğunu siz gözden geçirirsiniz. Devin'in yaptığı her öz kontrol yalnızca ilk geçiştir.
- Yedek ÇözümDevin kullanılamıyorsa veya bir görev başarısız olursa, yüklü sürümünüz için bağlantı talimatlarına ve kimlik doğrulamaya başvurun. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan yapıtı kaydedin.
SSS
Devin ve OpenDesign Hakkında Sık Sorulan Sorular
Devin for Terminal Gerçekten Tasarım İşi Yapabilir mi?
Evet — bağlamda estetik bir skill, bir design system ve gerçek referans görselleri bulunduğunda Devin, üretim kalitesinde, responsive bir UI üretir; otonom bir ajan olarak sonucu inşa edebilir, çalıştırabilir ve referanslarınıza göre doğrulayabilir. Bu bağlam olmadan genellikle sıradan bir görünüme yönelir; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Devin'de Nasıl Oturum Açarım?
Devin hesap tabanlıdır: kendi model anahtarınızı getirmek yerine bir Devin (Cognition) hesabıyla oturum açarsınız. Devin for Terminal'i kurun, projenizde çalıştırın ve ilk çalıştırmada kimlik doğrulaması yapın. OpenDesign kimlik bilgilerinizi asla proxy'lemez — ajanınız bunları doğrudan kullanır.
Devin'i Tasarıma Uygun Kılan Nedir?
Tamamen otonom bir yazılım mühendisidir: çok adımlı front-end build işlemlerini baştan sona planlar ve uygular; ayrıca bir oturumu, siz uzaklaştıktan sonra da çalışmaya devam eden sanal alan tabanlı bir bulut ajanına aktarabilir. Beğeni (taste) yine de sağladığınız design system, skill ve referanslardan gelir.
Ön Uç Tasarımı İçin: Devin mi, Claude Code mu?
Her ikisi de güçlüdür. Claude Code, kod tabanına duyarlı, özgül tasarım kararlarıyla bilinir; Devin'in avantajı ise sanal alan tabanlı bulut aktarımıyla tamamen otonom, baştan sona yürütmedir. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım workflow'unuzu değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.
Devin Bir Sandbox İçinde mi Çalışır?
Devin for Terminal, kod tabanınıza ve ortamınıza erişimle yerel olarak çalışır ve bir oturumu, kendi sanal alan (sandbox) ortamında çalışan bir bulut ajanına aktarabilir — bu, asenkron olarak devam eden daha uzun build işlemleri, testler ve PR oluşturma için kullanışlıdır.
Devin for Terminal aslında nedir
Devin for Terminal, Cognition’ın otonom yapay zeka yazılım mühendisi Devin’in komut satırı sürümüdür. Kod tabanınıza, araçlarınıza ve ortamınıza erişebilen yerel bir kodlama ajanı olarak çalışır — deponuzu okur, dosyaları düzenler, kabuk komutlarını çalıştırır ve yalnızca satırları tamamlamak yerine doğal dildeki bir görevden işi planlar ve doğrular. Cognition, arayüzü hızlı ve duyarlı tutmak için Rust ile özel bir terminal görüntüleme kütüphanesi geliştirdi.
Tasarım çalışmaları için iki özellik öne çıkar. Gerçekten otonomdur, bu yüzden bir sonucu tarif edebilirsiniz ve oraya ulaşmak için çok adımlı yolu yürütür. Ve bir build dizüstü bilgisayarınızı aştığında, oturumu kendi korumalı alan ortamında çalışan ve eşzamansız olarak çalışmaya devam eden bir bulut ajanına devredebilirsiniz — böylece tamamlanmış bir pull request'e dönebilirsiniz.
Otonom, ajanik yürütme: Devin çok adımlı bir görevi kendi başına planlar ve yürütür — bir özellik uygular, arayüz oluşturur, çalıştırır ve test eder — açık tamamlanma kriterleri olan net promptlarla yönlendirilir.
Yerel ajan, buluta devretme: Terminalinizde yerel olarak çalışır ve bir oturumu kendi bilgisayarı olan korumalı alanlı bir bulut ajanına devredebilir; siz uzaklaştıktan sonra da işe devam eder.
Hesap tabanlı, model seçimi: Bir Devin (Cognition) hesabıyla oturum açarsınız; Devin öncü modeller üzerinde çalışır — Cognition’ın kendi SWE-1.6 modeli ve diğer öncü modeller gibi seçenekler arasından seçim yapabilirsiniz.
Kimlik bilgisi: Devin (Cognition) hesabı — abonelik/hesap tabanlı oturum açma, kendi anahtarını getirme değil
Form faktörü: isteğe bağlı korumalı alanlı bulut devri olan yerel terminal ajanı
Üretici: Cognition
Tasarım çalışmaları için iki özellik öne çıkar. Gerçekten otonomdur, bu yüzden bir sonucu tarif edebilirsiniz ve oraya ulaşmak için çok adımlı yolu yürütür. Ve bir build dizüstü bilgisayarınızı aştığında, oturumu kendi korumalı alan ortamında çalışan ve eşzamansız olarak çalışmaya devam eden bir bulut ajanına devredebilirsiniz — böylece tamamlanmış bir pull request'e dönebilirsiniz.
Otonom, ajanik yürütme: Devin çok adımlı bir görevi kendi başına planlar ve yürütür — bir özellik uygular, arayüz oluşturur, çalıştırır ve test eder — açık tamamlanma kriterleri olan net promptlarla yönlendirilir.
Yerel ajan, buluta devretme: Terminalinizde yerel olarak çalışır ve bir oturumu kendi bilgisayarı olan korumalı alanlı bir bulut ajanına devredebilir; siz uzaklaştıktan sonra da işe devam eder.
Hesap tabanlı, model seçimi: Bir Devin (Cognition) hesabıyla oturum açarsınız; Devin öncü modeller üzerinde çalışır — Cognition’ın kendi SWE-1.6 modeli ve diğer öncü modeller gibi seçenekler arasından seçim yapabilirsiniz.
Kimlik bilgisi: Devin (Cognition) hesabı — abonelik/hesap tabanlı oturum açma, kendi anahtarını getirme değil
Form faktörü: isteğe bağlı korumalı alanlı bulut devri olan yerel terminal ajanı
Üretici: Cognition
Otonom bir yazılım mühendisi tasarıma neden uygundur
Devin’in tasarım avantajı, çalışma biçiminden gelir — otonom, uçtan uca yürütme — ancak her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.
Uçtan uca, çok adımlı build'ler: Devin tüm görevleri planlayıp yürüttüğü için, bir snippet'te durmak yerine tek seferde bir sayfa iskeleti oluşturabilir, bileşenleri bağlayabilir, bir geliştirme sunucusu çalıştırabilir ve sonucu test edebilir.
Korumalı alanlı bulut çalıştırmaları: Daha uzun süren ön uç çalışmaları — tam bir açılış sayfası, çok ekranlı bir akış — korumalı alanlı bir bulut ajanına devredilebilir ve geliştirmeye devam edebilir, böylece yineleme dizüstü bilgisayarınız tarafından engellenmez.
Proje kurallarındaki konvansiyonlar: Ajanı projenizin kuralları ve belgeleri aracılığıyla token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirin; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Buradaki ders, her ajanın öğrettiği dersle aynıdır: Devin varsayılan olarak zevke sahip değildir. Ona kısıtlamalar 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ı).
Uçtan uca, çok adımlı build'ler: Devin tüm görevleri planlayıp yürüttüğü için, bir snippet'te durmak yerine tek seferde bir sayfa iskeleti oluşturabilir, bileşenleri bağlayabilir, bir geliştirme sunucusu çalıştırabilir ve sonucu test edebilir.
Korumalı alanlı bulut çalıştırmaları: Daha uzun süren ön uç çalışmaları — tam bir açılış sayfası, çok ekranlı bir akış — korumalı alanlı bir bulut ajanına devredilebilir ve geliştirmeye devam edebilir, böylece yineleme dizüstü bilgisayarınız tarafından engellenmez.
Proje kurallarındaki konvansiyonlar: Ajanı projenizin kuralları ve belgeleri aracılığıyla token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirin; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Buradaki ders, her ajanın öğrettiği dersle aynıdır: Devin varsayılan olarak zevke sahip değildir. Ona kısıtlamalar 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ı).
Devin'i Tasarım İçin Sıfırdan Kurma
Kurulum sırası: yükle → oturum aç → tasarım kurallarını kodla → referansları sağla → gerçek bir tarayıcıda doğrula.
Tasarım kurallarını kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı ajanın okuduğu yere — projenizin kurallarına ve belgelerine — koyun; böylece çıktı, varsayılan olarak genel bir görünüme dönmek yerine bir markayla eşleşir.
Tarayıcı doğrulaması ekleyin: Devin'in gerçek bir tarayıcıda render etmesini ve çıktısını kesme noktaları genelinde kontrol etmesini sağlayın; böylece yalnızca derlemenin geçtiğini onaylamak yerine tasarıma göre doğrular.
Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.
Önceki kılavuzdan tarihsel komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Tasarım kurallarını kodlayın: Token'larınızı, primitiflerinizi ve konvansiyonlarınızı ajanın okuduğu yere — projenizin kurallarına ve belgelerine — koyun; böylece çıktı, varsayılan olarak genel bir görünüme dönmek yerine bir markayla eşleşir.
Tarayıcı doğrulaması ekleyin: Devin'in gerçek bir tarayıcıda render etmesini ve çıktısını kesme noktaları genelinde kontrol etmesini sağlayın; böylece yalnızca derlemenin geçtiğini onaylamak yerine tasarıma göre doğrular.
Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.
# 1. Devin for Terminal'i yükle
curl -fsSL https://cli.devin.ai/install.sh | bash
# 2. Projenizde başlatın ve ilk çalıştırmada oturum açın
cd your-project
devin # Devin (Cognition) hesabınızla oturum açın
# 3. Görevi doğal dilde, net tamamlama kriterleriyle tanımlayın ve Devin'in planlayıp yürütmesine izin verin.
# 4. Bir derleme dizüstü bilgisayarınızı aştığında oturumu çalışmaya devam eden korumalı bir bulut ajanına devredin.Önceki kılavuzdan tarihsel komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Ekran Görüntülerini Kullanıcı Arayüzüne Dönüştürme
Devin ile en yüksek kaldıraç etkisine sahip tasarım döngüsü, bir referans görselini çalışan, duyarlı bir kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yinelemektir — otonom ajanın oluşturmasına, çalıştırmasına ve çıktısını referansa karşı karşılaştırmasına izin vererek.
Elindeki en net görsel referanslardan başlayın — ve yalnızca tek bir hero görseli değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
İstemde spesifik olun ve açık tamamlama kriterleri verin; belirsiz istemler, güçlü bir ajanla bile genel arayüz üretir.
Tasarım sisteminizi ve konvansiyonlarınızı proje kurallarınızda tutun ve Devin'e token'ların ve kanonik primitiflerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Devin'in gerçek bir tarayıcıda render etmesini, sonucu kontrol etmek için kesme noktalarına göre yeniden boyutlandırmasını sağlayın.
Devin'in uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamasını değil — ve daha uzun geçişler için buluta devredin.
Devin'e referansları ve somut kısıtları, net bir bitti tanımıyla verin:
İstemleri odaklı tutun, iyi yinelemeleri commit'leyin ve kötü olanları geri alın (geri aldığınızda Devin'e söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilir.
Önceki kılavuzdan tarihsel komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Elindeki en net görsel referanslardan başlayın — ve yalnızca tek bir hero görseli değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
İstemde spesifik olun ve açık tamamlama kriterleri verin; belirsiz istemler, güçlü bir ajanla bile genel arayüz üretir.
Tasarım sisteminizi ve konvansiyonlarınızı proje kurallarınızda tutun ve Devin'e token'ların ve kanonik primitiflerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Devin'in gerçek bir tarayıcıda render etmesini, sonucu kontrol etmek için kesme noktalarına göre yeniden boyutlandırmasını sağlayın.
Devin'in uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamasını değil — ve daha uzun geçişler için buluta devredin.
Devin'e referansları ve somut kısıtları, net bir bitti tanımıyla verin:
İstemleri odaklı tutun, iyi yinelemeleri commit'leyin ve kötü olanları geri alın (geri aldığınızda Devin'e söyleyin), böylece her geçiş temiz bir temel üzerine inşa edilir.
devin
# istemde:
> Ekteki referansı (masaüstü + mobil) React + Vite + Tailwind + TypeScript ile uygula.
Mevcut tasarım sistemi bileşenlerimi ve token'larımı yeniden kullan.
Boşluk, düzen ve hiyerarşiyi eşleştir; duyarlı hale getir.
Tarayıcıda render et ve kesme noktaları genelinde referanslarla eşleşene kadar yinele. Bitti = hem masaüstünde hem mobilde konsol hatası olmadan piksele yakın.Önceki kılavuzdan tarihsel komut örneği; güncel söz dizimini bağlantılı satıcı belgelerinden doğrulayın.
Proje kuralları, araçlar ve buluta devretme
Üç genişletme noktası, Devin for Terminal'i sürekli tasarım çalışması için pratik hale getirir ve üçü de açık bir tasarım iş akışına sorunsuzca oturur.
Proje kuralları ve bağlam: Tasarım konvansiyonlarınızı, token'larınızı ve inceleme kontrol listelerinizi projenizin kurallarında ve belgelerinde tutun; böylece ajan bunları her çalıştırmada okur ve markanıza uygun çalışır.
Kod tabanı, araçlar ve ortam: Devin, kod tabanınıza, araçlarınıza ve ortamınıza erişimi olan yerel bir ajan olarak çalışır — terminalden ayrılmadan bir geliştirme sunucusu çalıştırabilir, derlemeyi yürütebilir ve çıktıyı doğrulayabilir.
Sandbox'lı bulut devri: Bir oturumu, daha uzun derlemeleri, testleri ve PR oluşturmayı eşzamansız çalıştırmak için kendi sandbox'ındaki bir bulut ajanına devredin, sonra tamamlanmış bir pull request'e dönün.
Bunlar tam olarak OpenDesign'in her projede yeniden oluşturmak yerine orkestre etmek için tasarlandığı türden taşınabilir, ajan biçimli yeteneklerdir.
Proje kuralları ve bağlam: Tasarım konvansiyonlarınızı, token'larınızı ve inceleme kontrol listelerinizi projenizin kurallarında ve belgelerinde tutun; böylece ajan bunları her çalıştırmada okur ve markanıza uygun çalışır.
Kod tabanı, araçlar ve ortam: Devin, kod tabanınıza, araçlarınıza ve ortamınıza erişimi olan yerel bir ajan olarak çalışır — terminalden ayrılmadan bir geliştirme sunucusu çalıştırabilir, derlemeyi yürütebilir ve çıktıyı doğrulayabilir.
Sandbox'lı bulut devri: Bir oturumu, daha uzun derlemeleri, testleri ve PR oluşturmayı eşzamansız çalıştırmak için kendi sandbox'ındaki bir bulut ajanına devredin, sonra tamamlanmış bir pull request'e dönün.
Bunlar tam olarak OpenDesign'in her projede yeniden oluşturmak yerine orkestre etmek için tasarlandığı türden taşınabilir, ajan biçimli yeteneklerdir.
Tasarım İçin Devin, Codex, Claude Code, Cursor ve Gemini CLI Karşılaştırması
Tasarım çalışması için tek bir kazanan yok — her ajanın farklı bir gücü vardır ve deneyimli ekipler onları üst üste koyar. Adil bir özet:
Devin — Tamamen otonom yazılım mühendisi; çok adımlı derlemeleri planlar ve yürütür ve sandbox'lı bir bulut ajanına devreder — Siz uzaklaştıktan sonra da çalışmaya devam eden uçtan uca ön yüz derlemelerini devretme
Codex — Bir frontend skill'i ile güçlü görsel özen; sandbox'lı asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanını bilen UX — Ön yüz muhakemesi ve büyük bağlamlı refaktörler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel derle-ve-gör döngüsü — Bir IDE içinde yoğun yinele-ve-izle UI çalışması
Gemini CLI — Güçlü çok kipli görüntü anlama ve 1M token bağlamı; ücretsiz katmanı olan açık kaynak — Ekran görüntüsü yoğun işler ve tüm bir tasarım sistemini bağlamda tutma
Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: hepsi skill'ler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken asıl sorun budur — ve bu, model biçimli değil tasarım aracı biçimlidir.
Ajan — Tasarım gücü — En uygun olduğu alan
Devin — Tamamen otonom yazılım mühendisi; çok adımlı derlemeleri planlar ve yürütür ve sandbox'lı bir bulut ajanına devreder — Siz uzaklaştıktan sonra da çalışmaya devam eden uçtan uca ön yüz derlemelerini devretme
Codex — Bir frontend skill'i ile güçlü görsel özen; sandbox'lı asenkron derlemeler — Devredilen asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanını bilen UX — Ön yüz muhakemesi ve büyük bağlamlı refaktörler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel derle-ve-gör döngüsü — Bir IDE içinde yoğun yinele-ve-izle UI çalışması
Gemini CLI — Güçlü çok kipli görüntü anlama ve 1M token bağlamı; ücretsiz katmanı olan açık kaynak — Ekran görüntüsü yoğun işler ve tüm bir tasarım sistemini bağlamda tutma
Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: hepsi skill'ler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken asıl sorun budur — ve bu, model biçimli değil tasarım aracı biçimlidir.
Ajan — Tasarım gücü — En uygun olduğu alan
Tuzaklar ve “AI slop” görünümünden nasıl kaçınılır
Yapay zeka tarafından üretilen 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, abartılı gölgeler ve “bunu bir AI yaptı” diye bağıran Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve arayüz metnine sızan talimatlar yer alıyor. Bunların hiçbiri Devin'e özgü değil; bunlar, herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.
Estetik bir beceri ekleyin: Özenle seçilmiş 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: Devin'in kırılma noktaları boyunca render etmesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmaz.
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ı proje bağlamına kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları, ajanın her çalıştırmada okuduğu yere açık tamamlanma kriterleriyle koyun.
Her hafifletmenin, ajana özenle seçilmiş bir tasarım bağlamı sağlamakla ilgili olduğunu unutmayın. Bu bağlamı proje başına elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
Estetik bir beceri ekleyin: Özenle seçilmiş 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: Devin'in kırılma noktaları boyunca render etmesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmaz.
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ı proje bağlamına kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları, ajanın her çalıştırmada okuduğu yere açık tamamlanma kriterleriyle koyun.
Her hafifletmenin, ajana özenle seçilmiş bir tasarım bağlamı sağlamakla ilgili olduğunu unutmayın. Bu bağlamı proje başına elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
OpenDesign İçinde Tasarım İçin Devin Kullanma
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. Devin for Terminal'i birinci taraf bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kitaplığı, yapılandırılmış bir render hattı ve yerel bir masaüstü arayüzüyle sarar — böylece Devin'i iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. OpenDesign açık kaynak ve yerel önceliklidir; bu da eşleşmeyi zaten terminalinizde çalıştırdığınız bir ajan için doğal bir uyum haline getirir.
OpenDesign'i kurun ve ajanınız olarak Devin for Terminal'i seçin.
Devin (Cognition) hesabınızla kimlik doğrulayın — kimlik bilgileri doğrudan ajanınız tarafından kullanılır ve asla bizim üzerinden proxylanmaz.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
Her artefakt ve DESIGN.md dosyası kendi deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Devin ajanı, aynı hesap — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. OpenDesign yerel öncelikli ve Apache-2.0'dır, bu nedenle işiniz veya kimlik bilgilerinizle ilgili hiçbir şey bizim üzerimizden makinenizden ayrılmaz.
OpenDesign'i kurun ve ajanınız olarak Devin for Terminal'i seçin.
Devin (Cognition) hesabınızla kimlik doğrulayın — kimlik bilgileri doğrudan ajanınız tarafından kullanılır ve asla bizim üzerinden proxylanmaz.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
Her artefakt ve DESIGN.md dosyası kendi deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Devin ajanı, aynı hesap — artı etrafında gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. OpenDesign yerel öncelikli ve Apache-2.0'dır, bu nedenle işiniz veya kimlik bilgilerinizle ilgili hiçbir şey bizim üzerimizden makinenizden ayrılmaz.
OpenDesign, Cognition ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; Devin, Cognition'un ticari markasıdır.