Image to UIyazan UIZZE

Image to UI Skill.

Zaten görebildiğiniz arayüzü uygulayın. Image to UI, bir ekran görüntüsünü veya mockup’ı görsel şartname olarak ele alır, projenin mevcut teknoloji yığınını korur ve ajanınızdan eşleştiğini söylemeden önce render alıp karşılaştırmasını ister.

Ekran Görüntüsünden Koda
Referans Eşleştirme
Arayüz Uygulaması

OpenDesign’i İndir Kullanım Kılavuzunu Gör

Kaynak İncelemesi · image-to-uiSKILL.md

Görev Ekran Görüntüsünden Arayüz Uygulaması Çıktılar • Mevcut projede arayüz kodu • Düzleştirilmiş bir ekran görüntüsü değil, gerçek metin ve kontroller • Kalan farklarla birlikte bir karşılaştırma özeti Başlamadan Önce Okunabilir bir referans görsel, hedef görünüm alanı, proje erişimi ve mevcut varlıkları sağlayın. Görsel eşleşmeyi doğrulamak için tarayıcıda render gerekir. UIZZE hesabı veya MCP bağlantısı gerekmez.

Editoryal özet · kaynak incelendi 2026-10-12 · üretilmiş örnek değildir

01 Ne Yapar

Görseli Şartname Olarak Kullanın

Bu kısa skill, yeni bir sanat yönü bulmaya değil, mevcut bir görsel kararı yeniden üretmeye odaklanır. Aşağıdaki iş akışı kaynağı anlatır; tamamlanmış bir yeniden oluşturma değildir.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Ajan, gerçek görselle başlar: boyutları, görünen metin, hiyerarşi, oranlar ve varlıklar. Ayrıca uygulamanın mevcut çatıya ve ekrana uyması için hedef projeyi okur. Kırpılmış bir ekran görüntüsü yalnızca görünen alanı tanımlar; sayfanın geri kalanını uydurmak için izin vermez.

Uygulamada gerçek yerleşim, metin ve kontroller kullanılır. Referans görünüm alanı eşleştirildikten sonra ajan istenen diğer boyutları kontrol eder. Son adım, referans boyutlarında render almak, yazı tiplerinin ve görsellerin yüklenmesini beklemek, sonucu karşılaştırmak ve görünen farkları düzeltmektir. Eksik varlıklar ve doğrulanmamış render açıkça belirtilmelidir.

Beklenen Çıktılar

Hedef projenin teknoloji yığınını ve uygun yeniden kullanılabilir bileşenleri kullanan düzenlenebilir arayüz kodu
İstenen kontrollerin, uydurma arka uç işlevleri eklenmeden mevcut davranışa bağlanması
Gerçekte yapılan görsel karşılaştırmaların, kalan farkların ve eksik varlıkların kısa bir özeti

Örnek Brief’e Bak

Referanstan Karşılaştırmaya

01
Gerçek Görseli İnceleyin
Yalnızca dosya adına veya çıkarılmış metne değil, görselin kendisine bakın. Kod düzenlemeden önce boyutlarını, görünen bölgeyi, hizalamayı, tipografiyi ve varlıkları belirleyin.
02
Referans Boyutunda Oluşturun
Hiyerarşiyi, satır kaymasını, boşlukları ve kırpmaları mevcut yığında eşleştirin. Bileşenler referansı yeniden üretebiliyorsa onları yeniden kullanın; ilgisiz varsayılanlara zorlamayın.
03
Render Alın ve Düzeltin
Çalışan ekranı aynı görünüm alanında yakalayın. Önce büyük yerleşim ve oran farklarını, ardından tipografi, renk ve küçük ayrıntıları karşılaştırın; değişikliklerden sonra tekrar render alın.
04
İstenen Varyantları Kontrol Edin
Referans boyutu oturduktan sonra istenen duyarlı boyutları ve çalışan kontrolleri test edin. Piksel mükemmelliği vaat etmek yerine kalan uyumsuzlukları bildirin.

02 Ne Zaman Kullanılır

Ne Zaman Kullanılır

Görsel yön zaten belirlenmişse ve onu sadık biçimde uygulamanız gerekiyorsa Image to UI’i seçin.

Uygun Durumlar

Onaylanmış Ekran Mockup’ıSağlanan bir tasarım görselini, görünen hiyerarşiyi ve içeriği koruyarak mevcut bir uygulamadaki ekrana dönüştürün.
Ekran Görüntüsüne Dayalı Yeniden OluşturmaOrijinal tasarım dosyası olmayan bir referansı yeniden oluşturun; eksik yazı tiplerini veya görselleri açıkça belirtin.
Odaklı Görsel DüzeltmeAynı görünüm alanındaki yakalamaları ve kalan farkların listesini kullanarak bir uygulamayı bilinen bir referansa yaklaştırın.

Kontrol Edilecek Sınırlar

Ekran Görüntüsü Gizli Davranışı TanımlamazGörünmeyen bölümler, arka uç yanıtları ve ek ekranlar referansın dışındadır. Bunlar için gereksinimleri siz sağlayın; skill’in bir ürünü tahmin etmesini beklemeyin.
Tam Varlıklar Eksik OlabilirSkill, eksik yazı tiplerinin, simgelerin veya görsellerin belirtilmesini ister. Gerekli varlıklar yoksa tam görsel eşleşmeyi sağlayamaz.
Doğruluk Render Kanıtı GerektirirMakul görünen bir uygulama veya başarılı bir derleme benzerliği doğrulamaz. Ortam ekranı render edemiyorsa görsel eşleşme doğrulanmamış kalır.

Bu Girdileri Getirin

Okunabilir Referans ve Görünüm AlanıGerçek görseli ekleyin ve hedeflenen tarayıcı boyutlarını belirtin. Görselin kırpılmış olup olmadığını ve hangi bölgenin uygulanacağını işaretleyin.
Mevcut Proje ve VarlıklarHedef rotayı veya bileşeni, çatıyı, yazı tiplerini, simgeleri ve görsel dosyalarını belirtin. Korunması gereken mevcut bileşenleri veya davranışları gösterin.
Etkileşim ve Duyarlılık GereksinimleriBağlanacak kontrolleri ve desteklenecek ek genişlikleri yazın. Ekran görüntüsünün göstermediği şeyleri ve kapsam dışı kalacakları belirtin.

03 Önemli Kararlar

Önemli Kararlar

Yeniden Tasarlamadan Önce Eşleştirin
Görsel; renk paletini, kompozisyonu ve görünen içeriği belirler. Dekoratif eklemeler veya farklı bir tasarım yönü ayrı bir istek gerektirir.
Bitmap’i Değil, Arayüzü Yeniden Oluşturun
Normal grid ve flex yerleşimleri, gerçek metin ve kullanılabilir kontroller düzenlenebilir bir arayüzü korur. Mutlak konumlandırma tüm ekran için değil, yalnızca gerçek bindirmeler için ayrılır.
Benzerle Benzeri Karşılaştırın
Eşleşen görünüm alanı boyutları ve yüklenmiş varlıklar karşılaştırmayı anlamlı kılar. Belgelenen düzeltme sırası, küçük ayrıntıları cilalamadan önce oranlar ve yerleşimle başlar.

04 Odaklı Bir Brief Deneyin

Odaklı Bir Brief Deneyin

Aşağıdaki örnek çalıştırılmamıştır. Kullanmadan önce referans görselinizi ekleyin ve proje ayrıntılarını uyarlayın.

Kurulumu İnceleyin

Upstream README aşağıdaki kurulum komutunu belgeler. Bu komut GitHub-native Image to UI paketini kurar; isteğe bağlı UIZZE MCP hizmetini kurmaz.

Belgelenmiş Kurulum Komutu

npx skills add uizze/uizze --skill image-to-ui

Görselleri inceleyebilen ve projenizi düzenleyebilen bir ajan kullanın. Görsel doğrulama için projeyi tarayıcıda çalıştırın. Skill’in kendisi UIZZE hesabı veya MCP bağlantısı gerektirmez; projenizin ve ajanınızın kendi kurulum gereksinimleri geçerlidir.

Tek Bir Ekran Ekleyin

İlk görevi görünen bir ekranla veya kırpmayla sınırlı tutun. Görseli, tam varlıkları ve uygulamanın zaten desteklediği etkileşimleri ekleyin.

Örnek Brief

Ekli fatura ekranı referansını mevcut uygulamada uygulamak için image-to-ui’i kullan. Önce görseli ve projeyi incele, hedef rota ile referans görünüm alanı belirsizse bunları benimle doğrula. Görünen metni, hiyerarşiyi, boşlukları, satır kaymasını ve görsel kırpmalarını yeniden tasarlamak yerine eşleştir. Sağlanan yazı tiplerini ve varlıkları kullan; eksik olanları sessizce değiştirmek yerine listele. Mevcut ödeme ve fatura davranışını koru; API yanıtları veya görünmeyen bölümler uydurma. Referans görünüm alanında render al, yazı tipleri ve görseller yüklenene kadar bekle, sağlanan görselle karşılaştır ve önce en büyük farkları düzelt. Ardından görsel kimliği değiştirmeden 390 px ve 320 px genişliklerini kontrol et. Gerçekten karşılaştırılan ekran görüntülerini, kontrol edilen kontrolleri ve kalan uyumsuzlukları raporla.

Render Sonucunu İnceleyin

Duyarlı varyantları değerlendirmeden önce aynı görünüm alanını karşılaştırın. Hem görünen tasarımı hem de istenen kontrolleri kontrol edin.

Referans ve render yakalaması aynı görünüm alanını kullanır; yazı tipleri ve görseller yüklenmiştir.
Görünen içerik ve oranlar görseli izler; eksik varlıklar veya bilinçli farklar belirtilir.
İstenen kontroller gerçek davranışlarını korur ve belirtilen dar yerleşimler kullanılabilir kalır.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu liste, skill’in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign’i İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu anlatır. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: UIZZE
Depo: uizze/uizze
Skill Dosyası: skills/image-to-ui/SKILL.md
Lisans: MIT · skill düzeyinde lisans
İncelenen Sürüm: 2026-10-12 · 146928eb50bc

Editoryal Kaynak Özeti

Image to UI kısa bir ekran görüntüsü yeniden oluşturma iş akışıdır: görseli ve projeyi incele, görünen arayüzü mevcut yığında uygula, ardından referans görünüm alanında render alıp farkları düzelt. Bu editoryal bir özettir, bildirilmiş bir test çalıştırması değildir.

Bağlantılı kaynağa dayanan OpenDesign tarafından yazılmış özgün özet. MIT lisansı bu skill dizinine özgüdür; depodaki diğer paketlerin bildirimleri farklı olabilir. Depo yıldızları kurulum sayısı değildir.

06 Başlamadan Önce Sık Sorulanlar

Başlamadan Önce Sık Sorulanlar

Image to UI ücretli UIZZE MCP hizmetine ihtiyaç duyar mı?

Hayır. Skill ve upstream README, hesap veya MCP bağlantısı gerekmediğini açıkça belirtir. Depo ayrıca isteğe bağlı ücretli bir referans arama hizmeti sunar, ancak bu, sağladığınız görseli uygulamaktan ayrıdır.

Kırpılmış bir ekran görüntüsünden sayfanın geri kalanını oluşturabilir mi?

Kaynak, görünen bölgenin yeniden üretilmesini ve görünmeyen bölümlerin uydurulmamasını söyler. Kırpmanın ötesindeki her şey için ek referans görselleri veya açık gereksinimler sağlayın.

Piksel mükemmelliği garanti eder mi?

Talimatlardan hiçbir garanti çıkmaz. Skill yakın bir yeniden oluşturmayı hedefler ve render alınarak karşılaştırma yapılmasını gerektirir. Eksik varlıklar ve kalan uyumsuzluklar bildirilmelidir; render yoksa görsel doğruluk doğrulanmamıştır.

Image to UI

Zaten Seçtiğiniz Ekranı Oluşturun

Okunabilir referansı, hedef projeyi ve varlıklarını getirin. Özgün görünüm alanını eşleştirin, çalışan arayüzü inceleyin ve kalan farkları açıkça belirtin.

OpenDesign’i İndir Tasarım Skill’lerine Göz At