Create UI: elle tasarlanmış Figma tasarım sistemi ve AI-native React kütüphanesi, senkron

Genel bakış

Create UI iki parçalı bir tasarım sistemi: bir Figma dosyası ve Tailwind CSS ile Radix UI üzerine kurulu, kurulabilir bir React kütüphanesi. İkisi aynı token'ları, isimleri ve yapıyı paylaşıyor; yapay zekâ kod ajanları da kütüphaneyi bir MCP sunucusu ve ajan becerisi üzerinden okuyabiliyor. [1]

Bu bir müşteri projesi değil, kendi ürünüm. Logoyu, markayı ve her bileşeni, varyantı ve token'ı Figma'da elle tasarladım. Kod tarafı AI-native olarak kuruldu: React kütüphanesini uzman yazılımcılar yapay zekâyla birlikte yazdı; böylece kod ajanları onu okuyup doğru kullanabiliyor.

Sorun

Çoğu ekipte tasarım sistemi aslında iki kez var: bir kez Figma'da, bir kez kodda; farklı kişiler tarafından bakımı yapılıyor ve yavaş yavaş birbirinden uzaklaşıyor. Artık üçüncü bir okuyucu da var: arayüzü yazan yapay zekâ ajanı. O da ikisini de göremiyor.

• Kopukluk: Figma'daki buton ile koddaki buton nadiren aynı ölçülere, durumlara ve isimlere sahip.
• Tahmin eden ajanlar: bağlam olmadan yapay zekâ araçları, elindeki bileşenleri kullanmak yerine yenilerini uyduruyor.
• Ölçek: işe yarar bir sistem her durumu, boyutu, temayı ve ekran boyutunu kapsamalı; bu da hızla binlerce varyant demek.
• Hız: bir ürün olarak erken çıkması ve herkesin gözü önünde gelişmeye devam etmesi gerekiyordu.

Hedefler

• Figma, kod ve ajanlar için tek bir token temeli.
• İki tarafta da aynı bileşen isimleri, prop'lar ve varyantlar.
• Responsive köşe yarıçapı, boşluk ve tipografi ile açık ve koyu temalar; sonradan eklenmiş değil, baştan sistemin içinde.
• Tek komutla kurulum ve yapay zekâ ajanlarının gerçek bileşenlerle çalışması.
• Küçük çıkmak, sık sürüm vermek; bileşenlerden bloklara ve yapay zekâ kalıplarına büyümek.

Yaklaşım

1. Önce token'lar

Renk, tipografi, boşluk, köşe yarıçapı ve gölge, daha tek bir bileşen yokken değişken olarak tanımlandı. Bileşenler yalnızca token'lara bağlı; bu yüzden bir tema değişikliği Figma'daki her ekrana ve koddaki her bileşene ulaşıyor. [1]

2. Bir şeye tek isim

Bir bileşenin Figma'da ve React'te adı, varyantları ve durumları aynı. Tasarımcı ile geliştirici aynı Button'dan söz ediyor; dokümanı okuyan bir ajan da tasarımcının çizdiğini buluyor.

3. Elle tasarım, AI-native kod

Arayüz bileşen bileşen elle çizildi; Create UI'da yapay zekâyla üretilmiş tek bir ekran yok. Kod tarafını uzman yazılımcılar yapay zekâyla birlikte geliştirdi ve her bileşen makineler için de tarif edildi: bir MCP sunucusu ve bir skill dosyası kod ajanlarına neyin var olduğunu ve nasıl kullanılacağını söylüyor; böylece tahmin etmek yerine sistemle kuruyorlar. [1]

4. Herkesin önünde geliştir

Kusursuz bir 1.0'ı beklemek yerine Create UI, 40'tan fazla bileşenle ön satışa açıldı ve herkese açık bir değişiklik günlüğü ve yol haritasıyla sürüm sürüm büyüdü. [2]

Çözüm

Logo ve marka

Create UI logosunu tasarladım: bir tasarımcının tuvalde bir şeyi seçtiği gibi, imleçli bir seçim çerçevesi. Etrafındaki markayı da kurdum: koyu indigo geçişler, ince bir ızgara ve illüstrasyon olarak ürünün kendi bileşenleri. Aynı parçalar web sitesini, sosyal medya profillerini ve lansman paylaşımlarını taşıyor.

Figma tasarım sistemi

Değişkenlerle çalışan auto layout bileşenler; her durum ve boyut bir varyant; açık ve koyu modlar, tipografi ölçeği ve kullanım notları. Dosyada artık 18.500'ü aşkın bileşen ve varyant, 950'den fazla değişken ve stil var; her bileşen kendi kılavuzu ve etkileşimli bir örnekle geliyor. [1]

Bileşenler

Butonlar, form kontrolleri, rozetler, chip'ler, toast'lar ve dosya yükleme tek bir görsel dili paylaşıyor: aynı köşe yarıçapı, aynı odak halkası, aynı renk mantığı. Her biri yüklenme ve hatadan disabled'a kadar gerçek durumlarıyla elle tasarlandı.

Navigasyon ve veri

Ürün ekranları kontrollerden fazlasını ister. Seçim, filtre ve toplu işlemli tablolar, kenar menüler ve başlıklar aynı parçalardan kuruldu; böylece Create UI ile kurulan bir panel yamalı değil, tasarlanmış görünüyor.

Responsive token'lar ve temalar

Köşe yarıçapı, boşluk ve tipografi responsive: her birinin 4 px ızgara üzerinde masaüstü, tablet ve mobil için ayrı değerleri var. Böylece aynı bileşen ayrı bir mobil sürüme gerek kalmadan her ekrana göre ayarlanıyor. Yirmiden fazla hazır tema ve karanlık mod da aynı token'ların üzerinde duruyor. [1]

Bloklar

1.5 sürümü hazır bölümler ekledi: yedi kategoride 73 kod bloğu ve 58 Figma bloğu; hepsi yalnızca sistemin kendi bileşenleriyle kurulu. [2]

React kütüphanesi, CLI ve MCP

Kod kütüphanesi React, Tailwind CSS v4 ve Radix UI üzerine kurulu; en baştan uzman yazılımcılar tarafından yapay zekâyla birlikte, AI-native olarak yazıldı. Bir CLI ile sıfırdan uygulama oluşturuluyor ya da mevcut projeye bileşen ekleniyor; tasarım token'ları da projenin stil dosyasına yazılıyor. [3]

Aynı CLI bir MCP sunucusu ve ajan becerisi de kuruyor; böylece Claude gibi kod ajanları gerçek bileşenlerle çalışıyor. Sohbet, prompt girişi, markdown ve düşünce zinciri gibi yapay zekâ bileşenleri de yapay zekâ ürünlerinin en çok ihtiyaç duyduğu ekranları karşılıyor. [1] [2]

Sonuçlar

• Haziran–Eylül 2026 arasında dört sürüm: v0.5, v1.0, v1.1 ve v1.5. [2]
• Ön satıştaki 40+ bileşen ve 700+ token'dan 49 ücretsiz ve 35 Pro kod bileşenine, 73 Pro bloğa ve 18.500+ varyant kombinasyonuna. [2]
• Herkesin kurabildiği ücretsiz bir React kütüphanesi ve tasarım, kod ya da ikisi için ücretli bir Pro seviye. [1]
• Product Hunt'ta 5.0 puan. [4]

Çıkarımlar

• Senkron kalmak, araç sorunundan önce bir isimlendirme sorunu.
• Elle tasarım ve AI-native kod birbirini tamamlıyor: sistemi insanlar tasarlıyor, ajanlar kullanıyor.
• Erken ve herkesin önünde çıkmak, kapalı kapılar ardında cilalamaktan iyidir.