İnsan ve yapay zekâ aynı tasarım tuvalinde: Doop nasıl kurulur, nerede dikkat gerekir?
GitHub'daki açık kaynak Doop, gerçek HTML çerçevelerini ortak bir tuvalde insan ve MCP bağlantılı ajanlarla düzenlemeyi sağlıyor. Yerel deneme kolay; üretim kurulumu ise kimlik, veritabanı ve erişim kontrolü istiyor.
0 okunma4 dk okumaGitHub
Yapay zekâ ile arayüz üretirken sık görülen sorun, modelin tasarımı kendi penceresinde oluşturması ve insanın sonuca ancak bittikten sonra müdahale etmesi. GitHub'da yayımlanan Doop, insanlarla yapay zekâ ajanlarının aynı sonsuz tuvalde, canlı olarak tasarım yapmasını hedefleyen açık kaynak bir çalışma alanı.
Tuvaldeki öğeler yalnız resim değil, gerçek HTML çerçeveleri. İnsan kullanıcı çerçeveyi seçip düzenleyebiliyor; MCP üzerinden bağlanan ajan yeni bir çerçeve oluşturabiliyor, HTML'i bölüm bölüm yazabiliyor, ekran görüntüsü alıp kendi çalışmasını gözden geçirebiliyor. Canlı durum ve etkinlik akışı, kimin hangi tasarım üzerinde çalıştığını görünür kılıyor.
Nasıl başlanır?
Yerel geliştirme kurulumu için projenin deposu klonlanıyor, ardından Bun ile bağımlılıklar kurulup geliştirme sunucusu başlatılıyor:
git clone https://github.com/kgoedecke/doop cd doop bun install bun run dev
Web uygulaması varsayılan olarak localhost:4300, API, WebSocket ve MCP sunucusu localhost:4400 üzerinde çalışıyor. Geliştirme ortamındaki veriler data/pg klasöründeki gömülü PGlite veritabanında tutuluyor. SMTP, nesne depolama, stok fotoğraf ve analitik gibi isteğe bağlı entegrasyonlar ayarlanmadığında temel uygulamanın çalışması hedefleniyor.
Yerleşik Doop Agent için Anthropic API anahtarı kullanılabiliyor; kullanıcının dışarıdan MCP ile bağladığı ajan için bu anahtar zorunlu değil. Hangi modelin ücret doğuracağı bağlanan sağlayıcıya göre değişiyor.
Bir ajan nasıl bağlanır?
MCP uç noktası yerel kurulumda localhost:4300/mcp adresinden sunuluyor. Desteklenen istemcide bu adres MCP sunucusu olarak ekleniyor ve OAuth akışıyla yetki veriliyor. Ajanın aynı kullanıcı gibi tasarım yapabildiği unutulmamalı; erişim verilen tuval ve hesap kapsamı dar tutulmalı.
Doop'un ajan rehberi, tasarıma başlamadan bağlam almayı, HTML'i akış hâlinde yazmayı ve her önemli aşamada ekran görüntüsüyle kontrol etmeyi öngörüyor. Bu yararlı bir disiplin, ancak görsel kaliteyi veya erişilebilirliği otomatik garanti etmiyor.
Üç gerçekçi kullanım örneği
- Ürün yöneticisi boş bir fiyatlandırma sayfası açar; ajan üç farklı bölüm tasarlar, insan başlık ve teklif dilini canlı olarak düzeltir.
- Tasarımcı mevcut bir bileşenin mobil ve masaüstü varyantlarını ayrı çerçevelerde hazırlatır; ekran görüntülerini yan yana inceleyip tek bir yön seçer.
- Geliştirici, tasarım sistemindeki renk ve aralık kurallarını ajana verir; ajan yeni bir kayıt ekranı üretirken insan erişilebilirlik ve hata durumlarını kontrol eder.
Örnek komut:
“Bu tuvalde 1440 piksel masaüstü ve 390 piksel mobil kayıt ekranı oluştur. Var olan renk değişkenlerini kullan, şifre hatası ve klavye odağı durumunu göster. Her çerçeveyi bitirdikten sonra ekran görüntüsü al; kontrast ve taşma sorunlarını düzeltmeden tamamlandı deme.”
Üretimde PGlite neden yetmez?
Proje belgesi PGlite'ın gömülü ve tek süreçli yapısını yerel deneme için kullanıyor. Birden fazla uygulama örneği, kalıcı depolama ve gerçek kullanıcı trafiği için yönetilen PostgreSQL ile DATABASE_URL ayarlanması öneriliyor. Üretim kurulumunda güçlü bir BETTER_AUTH_SECRET, doğru genel adres ve izin verilen kökenler de tanımlanmalı.
Docker kurulumu uygulama ve PostgreSQL'i birlikte başlatabiliyor; fakat tek komutla ayağa kalkması güvenli yapılandırmanın tamamlandığı anlamına gelmiyor. Yedekleme, kullanıcı silme, günlük saklama, ters vekil, TLS ve oran sınırlama ayrıca planlanmalı.
Ücretsiz mi, lisansı ne söylüyor?
Doop'un kaynak kodu AGPL-3.0 lisansıyla yayımlanıyor. Bu lisans, özellikle değiştirilmiş sürümü ağ üzerinden kullanıcıya sunan ekipler için kaynak kodu paylaşma yükümlülüğü doğurabilir. Ticari veya kapalı bir hizmette kullanmadan önce lisans koşulları hukuk danışmanıyla değerlendirilmelidir. Barındırılan doop.design seçeneğinin güncel fiyat ve veri koşulları ayrıca kontrol edilmeli.
Sınırlar ve güvenlik
Tuvalde çalışan HTML güvenilmeyen içerik sayılmalı. Çerçeveler yalıtılmış olsa bile dış kaynak bağlantıları, izleme kodu, form gönderimi ve kullanıcı verisi insan tarafından incelenmeli. MCP ajanına bağlanan hesap, tuvallere düzenleme yetkisi verir; yanlış komut mevcut tasarımı değiştirebilir.
İlk denemede gerçek müşteri verisi, üretim anahtarı veya gizli tasarım kullanılmamalı. Ajanın ürettiği HTML bağımlılık, erişilebilirlik, XSS ve veri sızıntısı açısından kod incelemesinden geçmeli. Ekran görüntüsü kontrolü yalnız görünümü değerlendirir; ağ isteğini veya güvenlik açığını kanıtlamaz.
Benzerlerinden farkı ve bugün ne yapılabilir?
Doop, yalnız bir metinden ekran üreten araçtan farklı olarak insan ve birden fazla ajanın aynı tuvalde eş zamanlı çalışmasına, gerçek HTML çerçevelerine ve yerleşik MCP araçlarına odaklanıyor. Buna karşılık olgun bir tasarım paketi, hazır kurumsal erişim politikası veya otomatik güvenlik denetçisi değil.
Okuyucu bugün boş bir yerel kurulumda iki basit çerçeve oluşturup MCP bağlamadan temel tuvali deneyebilir; ardından düşük yetkili bir ajanla yalnız test tuvalinde çalışma yapabilir. Yapay zekâ ile tasarımın gerçekten birlikte çalışmaya dönüştüğü açık kaynak araçları keşfetmek için Mülk Rehberi Gazetesi'nin yeni rehberlerini izleyin.
Denemenin başarı ölçütü yalnız güzel görünen ekran olmamalı. Mobil taşma, klavye sırası, renk kontrastı, form hata mesajı, dış ağ istekleri ve tuvali yeniden açınca verinin korunup korunmadığı ayrı bir kontrol listesiyle sınanmalı.
İkinci aşamada aynı görev bir insan ve ajan tarafından ayrı ayrı tamamlanıp süre, hata sayısı ve sonradan yapılan düzeltmeler karşılaştırılabilir. Böylece araçla kazanılan hızın gerçekten kaliteye dönüştüğü, yalnızca ilk görüntüyü üretmekle sınırlı kalmadığı ölçülebilir.