stitch::manage-design-systemyazan Google Labs

Stitch Manage Design System Skill.

Claude Code ve Codex için bir marka ve tasarım sistemi skill'i: MCP araçları aracılığıyla Stitch'te tasarım sistemleri oluşturur, günceller ve uygular.

Brand & Design Systems
Tasarım sistemi

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

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

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

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

01 Ne yapar

Claude Code ve Codex'te stitch::manage-design-system Skill'i Ne Yapar

Ö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

Stitch'te bir projenin gerçek kaynağı olarak işlev gören tasarım sistemini, MCP tool'larını kullanarak yönetir. Proje meta verilerini ve ekran varlıklarını alır (list_projects, list_screens, get_screen, read_url_content), token'ları mevcut ekranlardan design-md skill'i aracılığıyla veya düz bir açıklamadan sentezler, .stitch/DESIGN.md dosyasını yazar, ardından markdown'u yükler ve create_design_system_from_design_md'yi çağırır.

Herhangi bir şey yüklenmeden önce görünen ad, renkler, yazı tipleri ve köşe yuvarlaklığının kullanıcı tarafından onaylanmasını gerektiren sabit bir kontrol noktası vardır. Oluşturulduktan sonra, apply_design_system yalnızca ekran örnek kimliklerini kullanarak token'ları mevcut ekranlara aktarır ve .stitch/metadata.json dosyası projeyi, ekranları ve tasarım sistemi özetini kaydeder.

Neler üretir

Proje için oluşturulmuş bir DESIGN.md tasarım dosyası.
Proje kimliğini, tüm bilinen ekranları ve bir tasarım sistemi özetini takip eden bir .stitch/metadata.json dosyası.
Stitch içinde tutulan, sonraki oluşturma prompt'larının yeniden ifade etmesine gerek olmayan proje düzeyindeki tasarım token'ları.

Örnek istemi görün ↗

Nasıl Çalışır

01
Proje ve Ekran Varlıklarını Al
list_projects hedef projectId'yi bulur, list_screens Home veya Main Dashboard gibi temsili ekranları ortaya çıkarır ve get_screen, HTML alınmadan önce ekran görüntüsü ve htmlCode indirme URL'lerini döndürür.
02
Tasarım Sistemini Sentezleyin
Mevcut ekranlar design-md skill'i ile yorumlanır; yepyeni bir proje veya doğrudan bir açıklama ise, kullanıcının gevşek ifadelerini önce kesin değerlere eşleyerek ele alınır.
03
DESIGN.md'yi Yükleyin ve Tasarım Sistemini Oluşturun
Önerilen yükleyici betiği, markdown'ı işlem içinde base64 ile kodlayıp projenin batchCreate uç noktasına gönderir, böylece çıktı token sınırları aşılır; create_design_system_from_design_md ardından projectId ve döndürülen ekran örneğiyle çalıştırılır.
04
Sistemi Mevcut Ekranlara Uygulayın
apply_design_system, projectId, assetId ve bir ekran örnekleri listesini alır, böylece zaten oluşturulmuş ekranlar depolanan token'ları benimser.

02 Uyumunuzu bulun

stitch::manage-design-system Skill'i Ne Zaman Kullanılır

Marka ve tasarım sistemi işi bu türden olduğunda Claude Code veya Codex'te stitch::manage-design-system skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Gelecekteki ekranları bir arada tutan tek bir yetkili tasarım diline gereksinim duyan bir proje.
Henüz ekranı olmayan, kullanıcının yalnızca yazılı bir stil açıklaması sağladığı yeni bir Stitch projesi.
Projede zaten var olan ekranlardan bir tasarım sistemini tersine mühendislikle çıkarma.

Sınırları Bilin

Yaklaşık 5KB'ın üzerindeki herhangi bir DESIGN.md, doğrudan MCP yükleme aracından geçemez ve bunun yerine betik yolunu gerektirir.
Tasarım öğelerinin nasıl tanımlanacağına dair yönergeler bu dosyada değil; bu iş başka bir skill'e devredilmiştir.
Tam designSystem nesne şeması burada yazılmaz; ayrı bir referans dosyasında yer alır.

Ne Sağlamalısınız

Stitch proje id'siTasarım sisteminin hangi projeye ait olduğunu tanımlar ve yükleme betiği ile sonrasındaki her MCP çağrısı için gereklidir.
Temsili ekranlarHome veya Main Dashboard gibi ekranlar, mevcut bir projeden token çıkarılırken görsel kaynak olarak görev yapar.
Sade dille yazılmış bir stil tanımıHiçbir ekran mevcut olmadığında kullanılır; örneğin paleti, köşe yuvarlaklığını ve fontu adlandıran kısa bir ifade.
Yükleme için betik argümanlarıUploader betiği, komut satırından geçirilen proje id'si, dosya yolu, API anahtarı ve generated-by değerine ihtiyaç duyar.

03 Skill'in içinde

stitch::manage-design-system 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ı.

Yüklemeden Önce Kullanıcı Onayı İçin Durun
Skill, Stitch'e herhangi bir şey yüklemeden önce durup sormalı; görünen adı, ana renkleri, fontları ve köşe yuvarlaklığını sunmalı ve açık onay için beklemelidir.
Uygulama Sırasında Sadece Id ve sourceScreen Gönderin
selectedScreenInstances hiçbir konum veya boyut verisi taşımaz, sadece iki tanımlayıcı alan içerir.
design-system Örneklerini Hedef Listesinden Hariç Tutun
DESIGN_SYSTEM_INSTANCE türündeki örnekler filtrelenir; apply_design_system'a yalnızca gerçek ekranlar geçirilir.
Markdown'ı Kimin Oluşturduğunu Etiketleyin
generated-by argümanı, DESIGN.md'yi üreten skill veya aracı adlandırır; belirtilmezse sabit bir varsayılan etikete geri döner.
Sistemi Yüklemeden Hemen Sonra Oluşturun
create_design_system_from_design_md, projectId ve selectedScreenInstance ile yükleme adımından hemen sonra çağrılır.
Varlık Id'sini Tasarım Sistemi Adından Okuyun
list_design_systems, assets/{assetId} biçiminde bir ad döndürür; assets/'ten sonraki kısım, uygulama sırasında kullanılan assetId'dir.

04 İşe koyun

Claude Code veya Codex'e stitch::manage-design-system Yükleme

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

Claude Code, Codex veya Ajanınıza stitch::manage-design-system Ekleme

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::manage-design-system

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

Skill'e İlk Marka ve Tasarım Sistemi İş Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

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

Devam etmeden önce yüklemenin gerçekten her iki tanımlayıcıyı da döndürdüğünü doğrulayın.
Yalnızca hem yükleme betiği hem de oluşturma çağrısı tamamlandığında token'ların proje düzeyinde saklandığından, her ikisinin de bittiğini doğrulayın.
apply_design_system'ın geçerli hedeflere sahip olması için ekran örneği id'lerini tahmin etmek yerine get_project'ten alın.
Yüklemeden önce oluşturulan DESIGN.md'yi başka bir yerde tanımlanan yapıya göre kontrol edin.

OpenDesign'da stitch::manage-design-system'i 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/manage-design-system/SKILL.md Doğrulamada içerik sağlaması kaydedildi; commit 0337446
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 8.304 Bu katalogda 12 skill içeren tüm google-labs-code/stitch-skills deposu için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. stitch::manage-design-system için bir değerlendirme veya kullanım sayısı değildir.
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

📥 RetrievalStitch MCP araçları üzerinden proje, ekran ve HTML varlıklarını çekmek için sıralı dört adım.
🧠 Synthesis from Descriptiondesign-md skill'in ne zaman yeniden kullanılacağı ve belirsiz ifadelerin nasıl somut değerlere dönüştürüleceği.
📝 Output StructureDESIGN.md'nin design-md skill'de tanımlanan yapıyı izlediğini belirtir.
🚀 Create or Update Design System in StitchZorunlu bir kullanıcı onay noktasının ardındaki iki adımlı yükleme ve oluşturma akışı.
🎨 Apply Design System to ScreensGereken kimlikleri toplamak için tam JSON şekli ve üç adım.
📋 Update Project MetadataProje kimliği, başlık, ekranlar ve sistem özetiyle .stitch/metadata.json yazımı.
Schema ReferenceTam designSystem nesne şeması için reference/tool-schema.md'ye yönlendirir.
💡 Best PracticesTasarım öğesi açıklama tavsiyesini design-md skill'e bırakır.

Skill'in Kendi Açıklaması

"- Stitch'te MCP araçlarını kullanarak tasarım sistemlerini yönetin. Varlıkların alınması, Stitch'te tasarım sistemlerinin oluşturulması/güncellenmesi ve bunların ekranlara uygulanmasını içerir."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 5.630 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

stitch::manage-design-system Skill Hakkında Sorular

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

Onayım olmadan Stitch'e herhangi bir şey yükleniyor mu?

Hayır. Açık bir kontrol noktası vardır: skill, oluşturmak üzere olduğu tasarım sisteminin görünen ad, ana renkler, fontlar ve köşe yuvarlaklığını kapsayan bir özetini sunmalı ve yüklemeden önce onay beklemelidir.

DESIGN.md dosyam birkaç KB'den büyükse ne olur?

Doğrudan MCP aracı yerine önerilen yükleyici betiğini kullanın. Bu betik markdown'ı işlem içinde base64 ile kodlar ve batchCreate uç noktasına gönderir, böylece çıkış token sınırları aşılır.

Bir tasarım sistemini uygulamak için gereken kimlikler nereden gelir?

get_project, yalnızca gerçek ekranlara göre filtrelenmiş şekilde screenInstances'ı id ve sourceScreen bilgileriyle döndürür.

Hiç ekranı olmayan yepyeni bir projede çalışabilir mi?

Evet. Hiç ekran olmadığında veya kullanıcı doğrudan bir açıklama verdiğinde, skill belirsiz terimleri somut değerlere eşler; belirli hex kodları, font aileleri ve köşe yuvarlaklığı seçer, sonra DESIGN.md oluşturur.

Stitch Manage Design System

Gerçek bir marka ve design-system çalışma görevi üzerinde stitch::manage-design-system çalıştırın.

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

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