Subframe Nedir?
Subframe, statik maketler yerine üretim kalitesinde ön uç kodu teslim eden, AI-öncelikli ve tasarımcı-odaklı bir arayüz oluşturucudur. Subframe tarafından geliştirilen ve 2023 yılında piyasaya sürülen Subframe, freemium bir AI UI/UX Tasarım çözümü olarak listelenir.
Subframe
Subframe, statik maketler yerine üretim kalitesinde ön uç kodu teslim eden, AI-öncelikli ve tasarımcı-odaklı bir arayüz oluşturucudur.
Öne Çıkan Özellikler
Maket Değil, Kod
Her katman üretime hazır React + Tailwind CSS'e eşlenir; tasarım ve kod aynı yapıttır.
AI Ajanlarıyla Entegre
MCP sunucusu Cursor ve Claude Code'a bağlanır; bileşenleri senkronlar ve kodu dışa aktarır.
Tek Doğruluk Kaynağı
Tema düzenleyici ve otomatik dokümantasyon tasarım sistemini tutarlı tutar.
Hakkında
Subframe 2022'de San Francisco'da Irvin Zhan (CEO) ve Filip Skrzesinski tarafından, yazılım gönderen herkese tanıdık gelen bir sıkıntıdan yola çıkılarak kuruldu: saf bir maket aracında yapılan tasarımlar, mühendislerin sonunda yazdığı kodla tam olarak eşleşmez ve ikisi zamanla birbirinden uzaklaşır. Subframe'in yanıtı, tasarım yüzeyi ile kodu aynı yapıt haline getirmektir. Sürükle-bırak bir görsel düzenleyicide tasarlarsınız, ancak dikdörtgenler çizmek yerine gerçek, profesyonelce tasarlanmış bileşenleri bir araya getirirsiniz ve her öğenin altında üretime hazır React ve Tailwind CSS bulunur. Mühendisler bir resmi yeniden yorumlamaz — tam kodu Subframe CLI ile çekerler; böylece tasarımcının oluşturduğu şey gönderilen şeydir. Tasarım sistemi tek doğruluk kaynağı olarak ele alınır: bir tema düzenleyici token'ları ve stili küresel olarak yönetir, dokümantasyon otomatik oluşturulur; bu da ekiplerin Storybook gibi araçlarda genelde taşıdığı manuel yükü ortadan kaldırır. En güncel ayırt edici özelliği, AI kodlama ajanlarıyla derin entegrasyondur. Subframe, Cursor ve Claude Code'a bağlanan bir MCP sunucusu (ve ajan Skills) sunar; bir ajanın bileşenlerinizi senkronlamasına, bir sayfanın kodunu dışa aktarmasına ve kod tabanınızın tam bağlamıyla IDE içinden yeni tasarım konseptleri üretmesine olanak tanır — görsel tasarım ile AI destekli geliştirme arasındaki döngüyü kapatır. Fiyatlandırma sade, ekip başına ve koltuk tabanlıdır: bir proje, beş sayfa, bir prototip, sınırlı AI ve 24 saatlik sürüm geçmişi içeren 0$'lık Free planı; sınırsız proje, sayfa, prototip, sınırsız AI, yedi günlük geçmiş ve özel yazı tipleri içeren editör başına aylık 29$'lık Pro planı; ve bileşen içe aktarımı ile özel destek ekleyen bir Custom plan. İzleyiciler her planda ücretsizdir; böylece paydaşlar ek maliyet olmadan inceleme yapabilir. Subframe, koda yakın çalışan ve tasarım sisteminin bir kopyası yerine gerçeğinin olmasını isteyen ürün tasarımcıları ile tasarım mühendisleri için uygundur.
Kullanım Senaryoları
Tasarım Sistemi Kurma
Gerçek bileşenler ve tema token'larıyla koda birebir eşlenen bir tasarım sistemi kurun.
Tasarımdan Üretime
Tasarımı Subframe CLI ile üretim React + Tailwind koduna doğrudan taşıyın.
AI Destekli Geliştirme
Cursor/Claude Code'u MCP ile bağlayıp IDE içinden tasarım üretin ve senkronlayın.
Artılar ve Eksiler
Artılar
Eksiler
Özellikler
- Özenle hazırlanmış gerçek bileşenlerle sürükle-bırak tuval
- Üretime hazır React + Tailwind CSS çıktısı
- Subframe CLI üzerinden kod çekme
- Tema düzenleyici + otomatik üretilen tasarım sistemi belgeleri
- Cursor ve Claude Code için MCP sunucusu
- Pro'da sınırsız AI üretimi
- Her planda ücretsiz görüntüleyiciler
Benchmark Sonuçları
Kaynak: Subframe Belgeler — Fiyatlandırma (Resmi)
Kaynak: Subframe Belgeler — Fiyatlandırma (Resmi)
Kaynak: Subframe Belgeler — Fiyatlandırma (Resmi)
Kaynak: Subframe Belgeler — Fiyatlandırma (Resmi)
Fiyatlandırma
Ücretsiz
- 1 proje, 5 sayfa, 1 prototip
- Sınırlı AI kullanımı
- 24 saatlik sürüm geçmişi
- Ücretsiz görüntüleyiciler
$29/editör/ay
- Sınırsız proje, sayfa, prototip
- Sınırsız AI kullanımı
- 7 günlük sürüm geçmişi
- Özel yazı tipleri
Bize ulaşın
- Pro planındaki her şey
- Bileşen içe aktarma
- Genişletilmiş sürüm geçmişi
- Ayrılmış destek