stitch::generate-designyazan Google Labs

Stitch Generate Design Skill.

Claude Code ve Codex için bir UI tasarım skill'i: metin veya referans görsellerden Stitch'te ekranlar oluşturur, düzenler ve varyasyonlar yaratır.

Web & UI
Tasarım dosyası

OpenDesign İndir Kullanım kılavuzunu görüntüle

google-labs-code/stitch-skills · plugins/stitch-design/skills/generate-design/SKILL.mdSKILL.md

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

Üst veri ve bölüm başlıkları 2026-09-14 tarihinde yukarı akış dosyasından okundu · Tam halde 10.959 karakter

01 Ne yapar

Claude Code ve Codex'te stitch::generate-design Skill'in Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, Stitch MCP'yi dört akış üzerinden yönetir: metinden yeni bir ekran oluşturma, bir görseli veya mockup'ı yeniden oluşturma, mevcut bir ekranı düzenleme ve varyantlar üretme. Herhangi bir oluşturma veya düzenleme çağrısından önce, projeyi ve tasarım sistemini çözümleyen, belirsiz ifadeleri tasarım eşlemelerinden gelen UI/UX terminolojisiyle değiştiren ve isteği PLATFORM ve PAGE STRUCTURE bölümleri içeren bir şablon kullanarak düzen, içerik ve yapı etrafında biçimlendiren bir prompt geliştirme hattı çalıştırır.

Görsel stil proje düzeyinde kalır, dolayısıyla oluşturma promptları herhangi bir hex kodu, font veya yuvarlaklık değeri içermemelidir. Her çağrıdan sonra AI geri bildirimi gösterilir ve varlıklar .stitch/designs klasörüne indirilir.

Neler üretir

Oluşturulan ekranın HTML'i ve ekran görüntüsü, .stitch/designs dizinine indirilir.
outputComponents içinde döndürülen ve kullanıcıya gösterilen AI metin açıklaması ve önerileri.
Seçilen yön için varyant ekranlar, birden beşe kadar gruplar halinde.

Örnek istemi görün ↗

Nasıl Çalışır

01
Her Şeyden Önce Promptu Geliştirin
Bu hat zorunludur, opsiyonel değildir: ajan, bir Stitch oluşturma veya düzenleme aracını çağırmasına izin verilmeden önce kullanıcının isteğini yeniden yazar.
02
Projenin Zaten Neyi Stillendirdiğini Kontrol Edin
Projede zaten bir tasarım sistemi varsa, renkler, fontlar ve yuvarlaklık proje düzeyinde uygulanır, dolayısıyla geliştirilmiş prompt görsel stili tamamen dışarıda tutmalıdır.
03
Promptu Platform Artı Sayfa Bölümleri Olarak Biçimlendirin
Yeni ekranlar, önce genel amacı belirten, ardından PLATFORM'u, ardından Header'dan Footer'a kadar numaralandırılmış bir PAGE STRUCTURE'ı içeren bir şablonu takip eder.
04
Dört Akıştan Birini Seçin
İstek, herhangi bir araç çağrılmadan önce Generate from Text, Generate from Image, Edit veya Generate Variants'a yönlendirilir.

02 Uyumunuzu bulun

stitch::generate-design Skill Ne Zaman Kullanılır

Bu tür UI tasarım işleri için Claude Code veya Codex'te stitch::generate-design skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Sayfanın yazılı bir açıklamasından yepyeni bir ekrana başlama.
Zaten elinizde görsel, ekran görüntüsü veya mockup olarak bulunan bir şeyi yeniden oluşturma.
Projede zaten var olan bir ekranda hedefli bir değişiklik yapma.
Elinizdeki bir ekran için alternatif düzenler, renk şemaları veya metinler keşfetme.

Sınırları Bilin

Bir tasarım sistemi mevcut olmadan ekran üretmez: projede hiç yoksa iş önce manage-design-system skill'ine devredilir.
Görsel yükleme burada yapılmaz; görsel önce upload skill aracılığıyla ekran içeriğine dönüşür, ardından düzenlemelerle iyileştirilir.

Ne Sağlamalısınız

GirdiGeliştirme hattının yapılandırılmış bir Stitch prompt'una yeniden yazdığı şey budur.
Hedef projeAjan projeyi id ile arar ve uygun bir proje bulunmadığında yalnızca bunu oluşturur.
Düzenlemeler veya varyantlar için ekranDüzenlemeler ve varyantlar için hem projectId hem de screenId gerekir; bunlar ekranları listeleyerek veya getirerek bulunur.

03 Skill'in içinde

stitch::generate-design Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 6 somut talimat, varsayılan değer ve sınır — dosyanın sonucu değiştiren kısmı.

Üretim Prompt'larında Tema Sızıntısı Olmaması
Bir üretim prompt'una asla hex kodları, font isimleri veya renk rolleri koymayın; tüm görsel stil ve çoğaltma çakışmalarını tasarım sistemi yönetir.
Hex Kodları Yalnızca Düzenleme Sırasında
Düzenleme prompt'larında hassas renk eşleştirmesi için tam hex değerlere izin verilir; üretim prompt'u yasağının uygulanmadığı tek yer burasıdır.
outputComponents'i Her Zaman Gösterin
Herhangi bir Stitch araç çağrısından sonra ajan, sadece elde edilen ekranı değil, döndürülen Metin Açıklaması ve Önerileri de kullanıcıya göstermelidir.
Yeniden Üretmek Yerine Düzenleyin
Tam yeniden üretim, temel düzenin tamamen hatalı olduğu durumlar için ayrılmıştır; diğer her şey hedefli düzenlemelerle yapılmalıdır.
Bir Düzenlemeden Sonra Yerel Kopyaları Üzerine Yazın
Güncellenmiş HTML ve ekran görüntüsü URL'leri, yerel dosyaların en son düzenlemeleri yansıtması için önceki dosyaların üzerine tekrar indirilir.
.stitch/metadata.json'ı Senkron Tutun
Varlıklar indirildikten sonra metadata, değişen ekran başlıkları veya yeni ekran ID'leriyle güncellenir; bu dosya tüm ekranları, cihaz türlerini ve tasarım sistemi bilgilerini takip eder.

04 İşe koyun

stitch::generate-design'ı Claude Code veya Codex'e yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

stitch::generate-design'ı Claude Code, Codex veya Ajanınıza ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::generate-design

plugins/stitch-design/skills/generate-design/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Çıktı ekranına bakın ve istenen değişikliklerin gerçekten uygulandığını doğrulayın.
Sonuç beklendiği gibi değilse, yeniden üretmek yerine Düzenleme akışında devam edin; daha fazla cila gerektiğinde yeni, özel bir prompt ile tekrarlayın.
Üretmeden önce proje için bir tasarım sisteminin mevcut olup olmadığını doğrulayın.

OpenDesign'da stitch::generate-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill dosyası: plugins/stitch-design/skills/generate-design/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 0337446
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 8.304 Katalogda 12 skill içeren google-labs-code/stitch-skills deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. stitch::generate-design için bir derecelendirme veya kullanım sayısı değil.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

🎨 Prompt İyileştirme HattıBağlamı analiz edin, belirsiz terimleri değiştirin, promptu yapılandırın, AI içgörülerini ortaya çıkarın
AdımlarMod seçimi ile metin, görsel, düzenleme ve varyant akışları ve bunların tool çağrıları
💡 İpuçlarıYapısal olun, önce içerik, yinelemeli cilalama, tema sızıntısı yok, odaklı düzenlemeler
📚 ReferanslarTasarım eşlemeleri, prompt anahtar kelimeleri ve önce/sonra iyileştirilmiş prompt örneği

Skill'in Kendi Açıklaması

- Metin prompt'larından veya görsellerden yeni ekranlar oluşturur, mevcut ekranları prompt'lar ve tasarım sistemi token'ları ile düzenler ve Stitch MCP kullanarak tasarım varyantları üretir. Prompt geliştirme hattı, tasarım eşlemeleri, profesyonel UI/UX terminolojisi, tasarım token'ları ve tema sistemi yeteneklerini içerir.

SKILL.md'den ön madde açıklaması. Tam dosya yaklaşık 10.959 karakter. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

stitch::generate-design Skill'i Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Çalışması için önceden tool adlarını yapılandırmam gerekiyor mu?

Skill, list_projects, generate_screen_from_text ve edit_screens gibi Stitch MCP tool'larını çağırır ve kendi notu, MCP tool önek yönetiminin sistem promptunuza göre yapılmasını söyler. Yani önek kuralı skill'den değil sizin kurulumunuzdan gelir.

Varyantlar düzenlemelerden nasıl farklıdır?

Düzenlemeler elinizdeki ekranı değiştirir; varyantlar ise generate_variants tool'u aracılığıyla onun etrafındaki alternatifleri keşfeder. Yönü creativeRange ile belirleyebilirsiniz — hafif değişiklikler için REFINE, dengeli için EXPLORE, radikal için REIMAGINE — ve aspects'i daraltabilir veya tümü için boş bırakabilirsiniz.

Bir açıklama yerine bir ekran görüntüsü veya mockup'tan başlayabilir miyim?

Evet. Görsel, projeye eklenmesi için upload-to-stitch skill'ine verilir, ardından ajan yeni screenId'yi bulur ve neyin ayarlanacağını veya yeniden oluşturulacağını açıklayan bir düzenleme promptuyla tasarımı iyileştirir.

Stitch Generate Design

stitch::generate-design'ı gerçek bir UI tasarım görevi üzerinde çalıştırın.

OpenDesign'ı indirin, stitch::generate-design'ı SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın