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.

S

Subframe

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

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.

AI UI/UX Tasarım

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

1

Tasarım Sistemi Kurma

Gerçek bileşenler ve tema token'larıyla koda birebir eşlenen bir tasarım sistemi kurun.

2

Tasarımdan Üretime

Tasarımı Subframe CLI ile üretim React + Tailwind koduna doğrudan taşıyın.

3

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

Çıktı gerçek üretim kodu (React + Tailwind), maket değil
Cursor ve Claude Code için MCP entegrasyonu
Ücretsiz planda dahi tuval + gerçek bileşenler; izleyiciler her planda ücretsiz
Tema düzenleyici ile tutarlı, tek kaynaklı tasarım sistemi

Eksiler

React/Tailwind yığınına odaklı — başka teknoloji yığınları için uygun değil
Ücretsiz plan tek proje/beş sayfa ve sınırlı AI ile kısıtlı
Küçük ekip (yaklaşık 8 kişi); büyük kurumsal yol haritası daha genç

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

Pro plan$29 / editor / month

Kaynak: Subframe Docs — Pricing (Resmi)

Free plan limits1 project, 5 pages, 1 prototype

Kaynak: Subframe Docs — Pricing (Resmi)

Version history (Free / Pro)24 hours / 7 days

Kaynak: Subframe Docs — Pricing (Resmi)

ViewersFree on all plans

Kaynak: Subframe Docs — Pricing (Resmi)

Fiyatlandirma

Ücretsiz

Free

  • 1 project, 5 pages, 1 prototype
  • Limited AI usage
  • 24-hour version history
  • ücretsiz viewers
Pro

$29/editor/month

  • sınırsız projects, pages, prototypes
  • sınırsız AI usage
  • 7-day version history
  • özel yazı tipi
Özel

Contact us

  • Everything in Pro
  • içe aktarma components
  • Extended version history
  • Dedicated destek

Sikca Sorulan Sorular

Hizli Bilgi

Fiyat
Ucretli
Puan
4.4
SirketSubframe
Cikis Yili2023
Ucretsiz DenemeYok
Son Guncelleme2026-07-06T00:00:00.000Z

Entegrasyonlar

React
Tailwind CSS
Cursor
Claude Code
Subframe CLI

Hedef Kitle

Ürün Tasarımcılar
Design engineers
Frontend Geliştiriciler
Startup'lar
Design system teams

Etiketler

Kod Uretimi
Tasarim Sistemi
Tasarim Kod
Arayuz Olusturucu
React Tailwind
Mcp Tasarim

Alternatifler

m
magic-patterns
v
v0-dev
F
Framer
4.6
U
Uizard
4.3
R
Relume
4.4
Siteyi Ziyaret Et

Begenebileceginiz Benzer Araclar

F

Framer

4.6

Framer, tasarımcıların, girişimcilerin ve küçük işletmelerin tek satır kod yazmadan metin komutlarından profesyonel, responsive web siteleri oluşturmasını sağlayan AI destekli bir web sitesi oluşturma platformudur. Platformun AI web sitesi üretim özelliği kullanıcıların istenen web sitesini doğal dilde tanımlamasına olanak tanır ve ardından Framer uygun bölümler, düzenler, görseller ve metinlerle eksiksiz, görsel olarak cilalı bir web sitesi otomatik oluşturur. AI üretiminin ötesinde Framer piksel hassasiyetinde tasarım kontrolü sunan güçlü bir görsel editör sağlar; kullanıcılar tipografi, renkler, aralıklar, animasyonlar ve etkileşimler dahil sitelerinin her yönünü kod yerine doğrudan manipülasyon yoluyla özelleştirebilir. Platform tüm cihaz boyutlarında responsive tasarım, özel alan adı bağlantısı, yerleşik SEO optimizasyon araçları, form yönetimi, blog yazıları ve dinamik içerik için CMS yetenekleri ve analitik ile pazarlama araçlarıyla entegrasyon destekler. Framer'ın animasyon motoru özellikle dikkat çekicidir; genellikle özel geliştirilmiş sitelerle ilişkilendirilen kaydırma tabanlı animasyonlar, hover efektleri ve sayfa geçişleri sağlayarak web sitelerine premium, etkileşimli bir his verir. Platform ayrıca çok dilli web siteleri oluşturmak için yerelleştirme desteği ve sayfalar arasında tasarım tutarlılığını korumak için bileşen sistemi içerir. Framer müşteri web siteleri oluşturan serbest tasarımcıları, landing sayfaları yaratan startup kurucularını, portföylerini sergileyen yaratıcı profesyonelleri ve çevrimiçi varlıklarını oluşturan küçük işletmeleri hedefler. Ücretsiz plan Framer alt alan adıyla bir yayınlanmış siteye izin verirken, aylık 5 dolarlık Basic plan özel alan adı ve 15 dolarlık Pro plan CMS, şifre koruması ve gelişmiş özellikler ekler. Tasarım odaklı AI üretim yetenekleri ve profesyonel düzeyde animasyon araçlarına sahip bir web sitesi oluşturucu arayanlar için Framer benzersiz şekilde cilalı bir web sitesi oluşturma deneyimi sunar.

Freemium
U

Uizard

4.3

Uizard, birden fazla yenilikçi giriş yöntemiyle herkesin profesyonel görünümlü uygulama ve web sitesi tasarımları oluşturmasını sağlayarak tasarım sürecini demokratikleştiren AI destekli bir UI/UX tasarım platformudur. Platformun en dikkat çekici yeteneği AI görsel tanıma kullanarak el çizimi eskizleri cilalı dijital wireframe ve mockuplara dönüştürebilmesidir. Kullanıcılar kağıt üzerinde kaba bir arayüz düzeni çizebilir, fotoğrafını çekebilir ve Uizard bunu uygun UI bileşenleri ve aralıkla temiz, düzenlenebilir bir dijital tasarıma otomatik olarak dönüştürür. Eskizden tasarıma yeteneğinin ötesinde Uizard kullanıcıların istenen arayüzü doğal dilde tanımlayıp AI'nin eksiksiz ekran düzeni ürettiği metinden tasarım üretimi ve mevcut uygulama veya web sitesi ekran görüntülerini düzenlenebilir tasarım dosyalarına dönüştüren ekran görüntüsünden tasarım dönüşümü sunar. Autodesigner özelliği tek bir metin açıklamasından navigasyon ve etkileşimli ögeler içeren eksiksiz kullanıcı akışları oluşturarak çoklu ekran uygulama prototipleri üretir. Uizard mobil uygulamalar, web uygulamaları, tabletler ve masaüstü arayüzlerini kapsayan önceden oluşturulmuş şablonlar ve UI bileşenleri kütüphanesi içerir. İşbirlikçi düzenleme özellikleri ekiplerin gerçek zamanlı birlikte çalışmasına olanak tanır ve platform ekranlar arası tıklanabilir bağlantılarla etkileşimli prototiplemeyi destekler. Uizard özel bir tasarımcıyı beklemeden hızlıca UI tasarımları oluşturup iterasyon yapması gereken ürün yöneticilerini, startup kurucularını, geliştiricileri ve iş paydaşlarını hedefler. Ücretsiz plan sınırlı AI özellikleriyle üç projeye kadar izin verirken, kullanıcı başına aylık 19 dolarlık Pro ve 39 dolarlık Business planları sınırsız proje, gelişmiş AI özellikleri ve ekip işbirliği araçları sunar. Arayüz fikirlerini hızla prototipleyip iletmesi gereken tasarımcı olmayanlar için Uizard kaba konseptlerle sunulabilir tasarımlar arasındaki boşluğu etkileyici şekilde doldurur.

Freemium
R

Relume

4.4

Relume, web tasarım projelerinin erken aşamalarını dramatik şekilde hızlandırmak için tasarlanmış yapay zeka destekli bir web sitesi wireframe ve site haritası oluşturucudur. Platform, bilgi mimarisi planlamasını, sayfa yapısı oluşturmayı ve wireframe tasarımını otomatikleştirerek tasarımcıların ve ajansların tekrarlayan düzen işleri yerine yaratıcı çalışmaya odaklanmasını sağlar. Relume, hero bölümleri, özellik ızgaraları, fiyatlandırma tabloları, testimonialler ve iletişim formları dahil olmak üzere responsive tasarım prensipleriyle oluşturulmuş ve gerçek dünya kullanımı için test edilmiş 1.400den fazla profesyonel bileşen içeren kapsamlı bir kütüphane sunar. AI site haritası oluşturucu, kısa proje açıklamalarından eksiksiz sayfa hiyerarşileri ve navigasyon yapıları oluştururken, Wireframing 2.0 özelliği her bölüm için en uygun bileşeni otomatik olarak seçerek dakikalar içinde tam sayfa wireframeleri oluşturur. Figma ve Webflow ile derin entegrasyonlar platformun merkezinde yer alır ve wireframelerin responsive davranışları, yerel stilleri ve gerçek bileşen yapısı korunarak tek tıklamayla aktarılmasına olanak tanır. Stil Kılavuzu Oluşturucu renkler, tipografi ve görsel yönlendirme gibi tasarım kararlarını hızla belirlemeye yardımcı olurken müşteri onayı ve ekip tartışması için birden fazla alternatif sunar. Aylık bileşen güncellemeleri ve büyük özellik sürümleri platformun sürekli evrimini gösterir. Öncelikle Figma ve Webflow ekosisteminde çalışan web tasarım ajanslarına ve serbest çalışanlara hitap eden Relume, projelerin başlangıç aşamasını saatlerden dakikalara indirir. Platform yalnızca Figma ve Webflow ile entegre çalıştığından WordPress, Framer veya özel kod çözümleriyle çalışan tasarımcıların alternatif aramalması gerekir. Aylık yaklaşık 32-48 dolar arasındaki abonelik fiyatlandırmasıyla, müşteri teslimatlarında sağladığı zaman tasarrufu ve hızlı proje teslimi sayesinde genellikle ilk projede kendini amorti eden önemli bir yatırımdır.

Ucretli

Daha Fazla Kesfet