Subframe Nedir?
Subframe, subframe, statik maketler yerine üretim kalitesinde ön uç kodu teslim eden, ai-öncelikli ve tasarımcı-odaklı bir arayüz oluşturucudur. güzelce tasarlanmış gerçek bileşenlerden oluşan bir kütüphaneyle tanıdık bir sürükle-bırak tuvalinde çalışırsınız ve her katman, mühendislerin subframe cli ile çektiği temiz react ve tailwind css'e eşlenir. bir tema düzenleyici ve otomatik oluşturulan dokümantasyon, tasarım sisteminizi tek doğruluk kaynağı olarak tutarlı tutar; bir mcp sunucusu ise subframe'i cursor ve claude code gibi ai kodlama ajanlarına bağlar; böylece bileşenleri senkronlar, sayfa kodunu dışa aktarır ve doğrudan ide'nizden tam kod tabanı bağlamıyla yeni tasarımlar isteyebilirsiniz. 2022'de san francisco'da kurulmuştur; tasarım ile kodun birbirinden uzaklaşması yerine senkron kalmasını isteyen ürün tasarımcıları, tasarım mühendisleri ve girişimleri hedefler. icin kullanilan bir AI aracidir. Subframe tarafindan gelistirilen ve 2023 yilinda piyasaya surulen Subframe, tasarim.ai uzerinde 4.4/5 puana sahiptir ve ucretli bir ai ui/ux tasarım cozumu olarak sunulmaktadir.
Subframe
Subframe, statik maketler yerine üretim kalitesinde ön uç kodu teslim eden, AI-öncelikli ve tasarımcı-odaklı bir arayüz oluşturucudur. Güzelce tasarlanmış gerçek bileşenlerden oluşan bir kütüphaneyle tanıdık bir sürükle-bırak tuvalinde çalışırsınız ve her katman, mühendislerin Subframe CLI ile çektiği temiz React ve Tailwind CSS'e eşlenir. Bir tema düzenleyici ve otomatik oluşturulan dokümantasyon, tasarım sisteminizi tek doğruluk kaynağı olarak tutarlı tutar; bir MCP sunucusu ise Subframe'i Cursor ve Claude Code gibi AI kodlama ajanlarına bağlar; böylece bileşenleri senkronlar, sayfa kodunu dışa aktarır ve doğrudan IDE'nizden tam kod tabanı bağlamıyla yeni tasarımlar isteyebilirsiniz. 2022'de San Francisco'da kurulmuştur; tasarım ile kodun birbirinden uzaklaşması yerine senkron kalmasını isteyen ürün tasarımcıları, tasarım mühendisleri ve girişimleri hedefler.
One Cikan Ozellikler
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.
Hakkinda
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.
Kullanim Senaryolari
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.
Artilar ve Eksiler
Artilar
Eksiler
Ozellikler
- Sürükle-bırak canvas with real, crafted components
- Production React + Tailwind CSS output
- Pull code via the Subframe CLI
- Theme editor + auto-generated design-system docs
- MCP server for Cursor and Claude Code
- sınırsız AI generations on Pro
- ücretsiz viewers on every plan
Benchmark Sonuclari
Kaynak: Subframe Docs — Pricing (Resmi)
Kaynak: Subframe Docs — Pricing (Resmi)
Kaynak: Subframe Docs — Pricing (Resmi)
Kaynak: Subframe Docs — Pricing (Resmi)
Fiyatlandirma
Free
- 1 project, 5 pages, 1 prototype
- Limited AI usage
- 24-hour version history
- ücretsiz viewers
$29/editor/month
- sınırsız projects, pages, prototypes
- sınırsız AI usage
- 7-day version history
- özel yazı tipi
Contact us
- Everything in Pro
- içe aktarma components
- Extended version history
- Dedicated destek