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.

O

Onlook

Ucretli
Brand Safe - NSFW Icerik Yok
4.4
Onlook
Guncellendi: 2026-07-09T00:00:00.000Z

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.

AI UI/UX Tasarım
Siteyi Ziyaret Et

Ucretsiz deneme mevcut

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

1

Tasarımcı-Geliştirici Devri

Tasarımı doğrudan kodda yaparak devir sürtünmesini ortadan kaldırın.

2

Canlı Arayüz İnce Ayarı

Mevcut React uygulamasında öğeleri görsel olarak yeniden stillendirin.

3

Hızlı Prototipten Koda

Editörde sıfırdan başlayıp üretime hazır kod tabanı çıkarın.

Artilar ve Eksiler

Artilar

Gerçek kaynak dosyalarını düzenler, mockup değil
Tamamen açık kaynak ve kendi kendine barındırılabilir
Kod tabanı farkında, uyumlu kod üretir
Tasarımcı-geliştirici devir açığını kapatır

Eksiler

Yalnızca React/Next.js + Tailwind yığınına odaklı
Ücretsiz katman mesaj sayısıyla sınırlı
Üretim için geliştirici incelemesi gerekir
React dışı projelere uygun değil

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

LicenseOpen source (self-hostable)

Kaynak: Onlook GitHub (Resmi)

Supported stackReact / Next.js + Tailwind CSS

Kaynak: Onlook (Resmi)

Editing modelLive edits to real source files

Kaynak: Onlook (Resmi)

PositioningOpen alternative to Bolt.new / Lovable / v0

Kaynak: Onlook GitHub (Resmi)

Free tierLimited AI messages/prompts

Kaynak: Onlook Pricing (2026)

Fiyatlandirma

Ücretsiz

Free

  • Limited AI messages/prompts
  • Visual düzenleme of React + Tailwind projects
  • içe aktarma existing codebase
Pro (Hosted)

Paid (hosted)

  • Higher message limits
  • Managed hosting
  • Team iş birliği
Self-Hosted (Open Source)

Free (self-host)

  • Full open-source codebase
  • Run on your own infrastructure
  • Full control of source code

Sikca Sorulan Sorular

Hizli Bilgi

Fiyat
Ucretli
Puan
4.4
SirketOnlook
Cikis Yili2024
Ucretsiz DenemeVar
Son Guncelleme2026-07-09T00:00:00.000Z

Entegrasyonlar

React / Next.js
Tailwind CSS
Storybook design systems
GitHub / codebase import

Hedef Kitle

Design engineers
Ürün Tasarımcılar
Front-end developers
Startup teams

Etiketler

React Tailwind
Ui Ux Tasarım
Kod Üretimi
Ai Tasarım Aracı
Tasarımcılar Için Cursor
Onlook
Açık Kaynak Tasarım
Görsel Kod Editörü
Vibe Coding
Tasarımcı Geliştirici Devri
Kendi Kendine Barındırma
Canlı Bileşen Düzenleme
Siteyi Ziyaret Et

Begenebileceginiz Benzer Araclar

B

Bolt.new

4.7

Bolt.new, StackBlitz tarafından oluşturulan ve kullanıcıların tam yığın uygulamaları doğrudan tarayıcıda komutla oluşturmasına, çalıştırmasına, düzenlemesine ve dağıtmasına olanak tanıyan yapay zeka destekli bir tam yığın web geliştirme platformudur. Platform, güçlü bir AI kod üretim motorunu StackBlitz'in WebContainer teknolojisiyle birleştirir; bu teknoloji yerel kurulum, bulut VM veya Docker container gerektirmeden tarayıcıda eksiksiz bir Node.js ortamı çalıştırır. Kullanıcılar ne inşa etmek istediklerini doğal dilde tanımlar ve Bolt.new frontend, backend ve yapılandırma dosyalarıyla eksiksiz bir uygulama üretir, ardından bunu hemen tarayıcıda çalıştırır. Platform React, Next.js, Vue, Svelte, Astro, Express ve daha fazlası dahil geniş bir framework ve teknoloji yelpazesini destekler. Bolt.new'u benzersiz kılan gerçek zamanlı önizlemedir — kullanıcılar uygulamanın oluşturulurken çalıştığını görür ve hemen etkileşime geçebilir. AI otomatik olarak npm paketleri kurabilir, derleme araçlarını yapılandırabilir, veritabanı bağlantıları oluşturabilir ve proje iskelesi hazırlayabilir. Konuşma komutlarıyla iteratif geliştirme, kullanıcıların sürekli özellik eklemesine, hata düzeltmesine ve uygulamalarını değiştirmesine olanak tanır. Netlify üzerinden yerleşik dağıtım tek tıklamayla yayınlamayı sağlar. Tarayıcı tabanlı geliştirme, anlık önizleme ve AI kod üretiminin birleşimi son derece sürtünmesiz bir geliştirme deneyimi yaratır. Bolt.

Freemium
L

Lovable

4.6

Lovable, doğal dil açıklamalarından eksiksiz, dağıtılabilir web uygulamaları üreten yapay zeka destekli tam yığın uygulama oluşturucusudur. Platform metin komutlarını hem frontend UI hem de backend altyapısıyla işlevsel uygulamalara dönüştürür; Tailwind CSS stiliyle temiz React kodu, Supabase üzerinden entegre kimlik doğrulama, veritabanı şemaları ve API uç noktaları üretir. Lovable'ı basit AI web sitesi oluşturuculardan ayıran şey, statik sayfalar yerine gerçek yazılım uygulamaları üretme yeteneğidir — kullanıcılar kullanıcı kimlik doğrulama, veri depolama, dosya yükleme, ödeme entegrasyonu ve gerçek zamanlı güncellemeler gibi özellikleri tanımlayabilir ve Lovable çalışan implementasyonlar üretir. Üretilen kod TypeScript, bileşen tabanlı mimari ve duyarlı tasarım dahil modern geliştirme pratiklerini takip eder. Lovable, kullanıcıların üretilen uygulamayı hem kod düzenleme hem de görsel arayüz aracılığıyla değiştirmesine olanak tanıyan bir görsel editör sağlayarak hem geliştiriciler hem de teknik olmayan kullanıcılar için erişilebilir kılar. Her proje otomatik olarak PostgreSQL veritabanı, kimlik doğrulama ve dosya depolama sağlayan bir Supabase backend'iyle donatılır. Platform Lovable'ın hosting altyapısına yerleşik dağıtımı içerir ve projeler başka yerlerde dağıtım için standart kod depoları olarak da dışa aktarılabilir.

Freemium
v

v0.dev

4.4

v0.dev, Vercel tarafından geliştirilen ve doğal dil metin açıklamalarından üretime hazır React ve Next.js bileşenleri oluşturan AI destekli üretken UI aracıdır. Statik mockuplar üreten geleneksel tasarım araçlarından farklı olarak v0, React, Next.js, Tailwind CSS ve shadcn/ui bileşen kütüphanesi dahil modern web teknolojileri kullanarak geliştiricilerin önemli bir yeniden düzenleme olmadan projelerine doğrudan kopyalayabileceği gerçek, işlevsel kod üretir. Kullanıcılar istedikleri arayüzü sade bir dille tanımlar ve v0 erişilebilirlik, responsive tasarım ve bileşen mimarisi için güncel en iyi uygulamaları takip eden eksiksiz, iyi yapılandırılmış kodla birden fazla tasarım varyasyonu üretir. Araç panolar, formlar, veri tabloları, navigasyon menüleri, landing sayfası bölümleri, kart düzenleri ve kimlik doğrulama akışları gibi yaygın UI kalıplarını oluşturmada üstündür. Her üretim birden fazla varyant seçeneği içerir ve kullanıcılar üretilen tasarımın belirli yönlerini değiştiren takip komutlarıyla sonuçları iteratif olarak iyileştirebilir. V0 mevcut Next.js ve React projeleriyle doğal olarak entegre olan, React ekosisteminde yaygın olarak benimsenen Tailwind CSS yardımcı sınıflarını ve açık kaynak shadcn/ui bileşen sistemini kullanan temiz, semantik kod üretir. Araç tasarım niyeti ile çalışan kod arasında köprü görevi görerek UI geliştirmeyi hızlandırmak isteyen frontend geliştiricilerini, fikirlerini işlevsel kod olarak görmek isteyen tasarımcıları, prototip oluşturan ürün yöneticilerini ve hızla MVP geliştiren startup ekiplerini hedefler. V0 sınırlı günlük üretimle ücretsiz katman sunarken, aylık 20 dolarlık Premium plan artırılmış üretim limitleri ve öncelikli erişim sağlar. React ve Next.js ekosisteminde çalışan ve UI geliştirme iş akışlarını dramatik şekilde hızlandırmak isteyen geliştiriciler ve ekipler için v0 arayüz bileşenlerinin oluşturulma ve iterasyon şeklinde bir paradigma değişimini temsil etmektedir.

Freemium
L

Locofy

4.3

Locofy, Figma ve Adobe XD tasarımlarını React, Next.js, React Native, HTML/CSS, Vue, Angular ve diğer framework'ler için üretime hazır frontend koduna dönüştürmek amacıyla yapay zeka kullanan bir tasarımdan koda platformudur. Platform, ürün geliştirmedeki en kalıcı darboğazlardan birini ele alır — tasarım ve mühendislik ekipleri arasındaki teslim boşluğu. Geliştiricilerin piksel düzeyinde tasarımları manuel olarak koda çevirmesini gerektirmek yerine, Locofy tasarım sadakati, duyarlı davranış ve temiz kod yapısını koruyarak bu dönüştürme sürecini otomatikleştirir. Platform, tasarımcıların etkileşimli öğeleri etiketlediği, bileşen sınırlarını tanımladığı ve duyarlı kesme noktalarını doğrudan tasarım dosyalarında belirlediği bir Figma eklentisi olarak çalışır. Locofy'ın AI'ı daha sonra tasarım yapısını analiz eder, yeniden kullanılabilir bileşenleri tanımlar, erişilebilirlik için uygun ARIA nitelikleriyle anlamsal HTML üretir ve hedef framework'ün kurallarına uygun düzenlenmiş kod üretir. Üretilen kod düzenler için CSS Flexbox ve Grid kullanır, tasarım sistemi token entegrasyonunu destekler ve Git entegrasyonu aracılığıyla mevcut kod tabanlarıyla senkronize edilebilir. Locofy ayrıca React Native ve Flutter çıktısı ile mobil uygulamalar için tasarımdan koda dönüşümü destekler. Temel farklılaştırıcılar arasında karmaşık auto layout yapılarını yönetme, varyant tabanlı bileşen üretimi ve deneyimli geliştiricilerin kullanılabilir olarak değerlendireceği kodun üretilmesi yer alır.

Freemium

Daha Fazla Kesfet