Onlook Nedir?
Onlook, onlook, sıkça "tasarımcılar için cursor" olarak tanımlanan açık kaynaklı, ai-öncelikli bir tasarım aracıdır: sonsuz bir tuval üzerinde gerçek bir react uygulamasını görsel olarak kurar, stillendirir ve düzenlersiniz; onlook ise altta yatan kodu gerçek zamanlı yazar ve günceller. tailwind css ile stillendirilmiş herhangi bir react/next.js projesiyle çalışır — mevcut bir kod tabanını içe aktarın veya sıfırdan başlayın — ve canlı bileşenleri sürükleyip bırakıp yeniden stillendirmenize izin verirken ai, mimarinize uyan kod üretir. tek kullanımlık bir mockup yerine gerçek kaynak dosyaları düzenlediği için onlook, klasik tasarımcı-geliştirici devir açığını kapatır. açık kaynaklı ve kendi kendine barındırılabilir; sınırlı mesajlı ücretsiz katman ile ücretli barındırılan planlar sunar. icin kullanilan bir AI aracidir. Onlook tarafindan gelistirilen ve 2024 yilinda piyasaya surulen Onlook, tasarim.ai uzerinde 4.4/5 puana sahiptir ve ucretli bir ai ui/ux tasarım cozumu olarak sunulmaktadir.
Onlook
Onlook, sıkça "tasarımcılar için Cursor" olarak tanımlanan açık kaynaklı, AI-öncelikli bir tasarım aracıdır: sonsuz bir tuval üzerinde gerçek bir React uygulamasını görsel olarak kurar, stillendirir ve düzenlersiniz; Onlook ise altta yatan kodu gerçek zamanlı yazar ve günceller. Tailwind CSS ile stillendirilmiş herhangi bir React/Next.js projesiyle çalışır — mevcut bir kod tabanını içe aktarın veya sıfırdan başlayın — ve canlı bileşenleri sürükleyip bırakıp yeniden stillendirmenize izin verirken AI, mimarinize uyan kod üretir. Tek kullanımlık bir mockup yerine gerçek kaynak dosyaları düzenlediği için Onlook, klasik tasarımcı-geliştirici devir açığını kapatır. Açık kaynaklı ve kendi kendine barındırılabilir; sınırlı mesajlı ücretsiz katman ile ücretli barındırılan planlar sunar.
One Cikan Ozellikler
Gerçek Kodu Görsel Düzenle
Tuvalde yaptığınız her değişiklik gerçek React kaynak dosyalarına yazılır.
Açık Kaynak ve Barındırılabilir
Kapalı vibe-coding araçlarına açık bir alternatif; kodun kontrolü sizde.
Kod Tabanı Farkındalığı
AI, bileşenlerinizi ve Tailwind desenlerinizi okuyup uyumlu kod üretir.
Hakkinda
Onlook, AI tasarımını statik bir tuval yerine gerçek bir kod tabanı etrafında yeniden çerçeveler. "Tasarımcılar için Cursor" olarak pazarlanan araç, React uygulamanızı sonsuz bir görsel tuvalde açar; burada herhangi bir öğeyi seçebilir, sürükleyebilir, yeniden stillendirebilir veya bir değişikliği doğal dille tanımlayabilirsiniz — Onlook ise gerçek kaynak dosyaları (bileşenler, Tailwind sınıfları, yerleşim) canlı olarak düzenler; yani gördüğünüz şey tam anlamıyla üretim kodunuzdur. Herhangi bir Next.js + Tailwind CSS projesinde çalışır: mevcut bir depoyu içe aktarıp görsel olarak düzenlemeye başlayın ya da editör içinde yeni bir proje kurun. AI, kod tabanının farkındadır; React bileşenlerinizi ve Tailwind desenlerinizi okuyup ürettiği kodun genel markup yapıştırmak yerine projenizin mimarisine oturmasını sağlar ve ekipler gerçek Storybook tasarım sistemleri üzerinde çalışabilir. En büyük stratejik noktası tamamen açık kaynak olmasıdır — Bolt.new, Lovable, v0, Replit Agent ve Figma Make gibi kapalı vibe-coding araçlarına açık bir alternatif olarak konumlanır — bu da onu kendi kendine barındırıp kodunuzun tam kontrolünü elinizde tutabileceğiniz anlamına gelir. Ticari olarak Onlook, mesaj sayısıyla sınırlı ücretsiz bir katman, yönetilen deneyim isteyen ekipler için ücretli barındırılan planlar ve mühendislik odaklı kurumlar için kendi kendine barındırma yolu sunar. Başlıca ödünleşim kapsamıdır: React/Next.js + Tailwind yığınına göre şekillendiği için React dışı uygulamalara uygun değildir ve tüm AI kod araçları gibi ürettiği çıktı da yayına almadan önce geliştirici incelemesinden fayda görür.
Kullanim Senaryolari
Tasarımcı-Geliştirici Devri
Tasarımı doğrudan kodda yaparak devir sürtünmesini ortadan kaldırın.
Canlı Arayüz İnce Ayarı
Mevcut React uygulamasında öğeleri görsel olarak yeniden stillendirin.
Hızlı Prototipten Koda
Editörde sıfırdan başlayıp üretime hazır kod tabanı çıkarın.
Artilar ve Eksiler
Artilar
Eksiler
Ozellikler
- Visual düzenleme of live React components on an infinite canvas
- Edits real source files (components + Tailwind) in real time
- Codebase-aware AI code üretimi
- Works with any Next.js + Tailwind CSS project
- içe aktarma existing codebase or start fresh
- Real Storybook design-system destek
- Açık kaynak and self-hostable
Benchmark Sonuclari
Kaynak: Onlook GitHub (Resmi)
Kaynak: Onlook (Resmi)
Kaynak: Onlook (Resmi)
Kaynak: Onlook GitHub (Resmi)
Kaynak: Onlook Pricing (2026)
Fiyatlandirma
Free
- Limited AI messages/prompts
- Visual düzenleme of React + Tailwind projects
- içe aktarma existing codebase
Paid (hosted)
- Higher message limits
- Managed hosting
- Team iş birliği
Free (self-host)
- Full open-source codebase
- Run on your own infrastructure
- Full control of source code