83.3K+İndir
Kullanım kılavuzuna geç
design-mdyazan Google Labs

Design MD Skill.

Claude Code ve Codex için marka ve tasarım sistemi çalışmalarına yönelik bir skill: Stitch projelerini analiz eder ve anlamsal bir DESIGN.md yazar.

  • Brand & Design Systems
  • DESIGN.md
OpenDesign İndirKullanım kılavuzunu görüntüle
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Üst bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 7.644 karakter

01 Ne yapar

design-md Skill'i Claude Code ve Codex'te 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

Bu skill, mevcut bir Stitch projesini, aynı tasarım dilinde yeni ekranlar üretmesi için Stitch'e yönlendirme yaparken tek doğru kaynak olarak hizmet eden bir DESIGN.md'ye dönüştürür. Stitch MCP erişimine ve en az bir tasarlanmış ekrana sahip tasarımcılar ve geliştiriciler içindir: skill, MCP ad alanını keşfeder, proje ve ekran kimliklerini çözer, ekran nesnesini HTML'i ve ekran görüntüsüyle birlikte alır ve proje designTheme'ini okur.

Ardından görsel temayı ve atmosferi; işlevsel rollere sahip hex kodlu tanımlayıcı isimler halinde renkleri; tipografiyi; bileşen stillerini ve düzen ilkelerini, ham teknik değerler yerine çağrıştırıcı bir tasarım diliyle belgeler.

Neler üretir

  • Görsel tema ve atmosferi, rollere sahip renk paletini, tipografi kurallarını, düğmeler, kartlar ve girişler için bileşen stillerini ve düzen ilkelerini kapsayan beş bölümlü bir tasarım sistemi.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    MCP Ad Alanını Keşfet

    Stitch MCP önekini bulmak için list_tools'u çalıştırın, ardından sunucuya yapılan her sonraki çağrı için o öneki yeniden kullanın.

  2. 02
    Proje ve Ekranı Çöz

    Proje Kimliği verilmediğinde sahip olunan projeleri listele, ardından sayısal proje kimliği için ekranları listele ve Home veya Landing Page gibi bir ekran başlığıyla eşleştir.

  3. 03
    Ekran Nesnesini ve Varlıkları Al

    get_screen ekran görüntüsü ve HTML indirme URL'lerini, ekran boyutlarını, cihaz türünü ve designTheme'i döndürür; ardından HTML indirilir ve Tailwind sınıfları ile bileşen desenleri için ayrıştırılır.

  4. 04
    Proje düzeyindeki Design Theme'i oku

    projects/{id} tam yoluyla yapılan bir get_project çağrısı, renk modu, yazı tipleri, köşe yuvarlaklığı ve özel renkleri içeren designTheme nesnesini döndürür.

  5. 05
    Semantik Sistemi Sentezle

    Ekrandan tasarım token'larını çıkarın, genel havayı çağrıştırıcı sıfatlarla yakalayın ve teknik değerleri betimleyici bir dile çevirin.

  6. 06
    DESIGN.md Yazın

    Proje dizininde, öngörülen beş bölümlük formatı tam olarak izleyerek DESIGN.md dosyasını oluşturun.

02 Uyumunuzu bulun

design-md Skill Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde Claude Code veya Codex'te design-md skill'ini kullanın. Uygunluk ve sınırlamalar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • En az bir tasarlanmış ekran içeren bir Stitch projeniz var ve bundan yazılı bir tasarım sistemi çıkarılmasını istiyorsunuz.
  • Stitch'e mevcut bir tasarım diline uyan yeni ekranlar oluşturmasını istetmek için başvurulacak bir doğru kaynağa sahip olmak istiyorsunuz.
  • Projeyi sadece başlık veya URL üzerinden biliyorsunuz ve skill'in Proje ID'sini sahip olduğunuz projeler arasından bulmasını istiyorsunuz.
  • Ruh halinin, CSS'in yeniden ifadesi yerine çağrıştırıcı sıfatlarla adlandırılmasını istiyorsunuz.

Sınırları Bilin

  • Stitch MCP Server ve zaten tasarlanmış bir ekrana sahip bir Stitch projesi olmadan çalışamaz.
  • Yeni ekranlar değil, bir Markdown tasarım sistemi üretir; DESIGN.md sonraki Stitch prompting için girdi niteliğindedir.
  • rounded-xl gibi çevrilmemiş teknik jargon, kaçınılması gereken bir hata olarak açıkça belirtilmiştir.
  • Hex kodlarını atıp sadece betimleyici renk adlarını korumak bir hata olarak belirtilir.

Ne Sağlamalısınız

  • Proje ID (isteğe bağlı)Sağlanmazsa, skill sahip olduğunuz projeleri listeler ve hedefi başlık veya URL desenine göre eşleştirir.
  • Ekran ID (isteğe bağlı)Sağlanmazsa, skill hedef ekranı belirlemek için ekran başlıklarını inceler.
  • Stitch Effective Prompting GuideTasarım yazısının kullanması gereken dil ve desenler için referans.

03 Skill'in içinde

design-md Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

  1. Sadece Sayısal ID'ler

    projectId ve screenId'yi sayısal ID olarak geçirin, get_project hariç asla tam projects/{id} yolunu kullanmayın; get_project tam adı alır.

  2. Asla Çıplak Bir Renk

    Her renk, betimleyici bir doğal dil adı, parantez içinde tam hex kodu ve işlevsel rolü alır; örneğin birincil eylemler için kullanılan Deep Muted Teal-Navy (#294056).

  3. Geometriyi Çevirin, Alıntılamayın

    border-radius ve düzen değerlerini fiziksel tanımlara dönüştürün: rounded-full, Pill-shaped olur; rounded-lg, Subtly rounded corners olur; rounded-none, Sharp, squared-off edges olur.

  4. Genel Kelime Dağarcığından Kaçının

    Mavi veya köşeleri yuvarlak gibi terimler yerine Ocean-deep Cerulean (#0077B6) veya Yumuşak kavisli kenarlar gibi ifadeleri tercih edin.

  5. Belirlenen Yapıya Uyun

    Dosya, proje başlığı ve Project ID ile açılır, ardından beş numaralı bölüm gelir: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Sadece Neyi Değil, Neden'i de Açıklayın

    Açıklayıcı ifadenin ardından parantez içinde tam değerleri belirtin ve her tasarım öğesinin ne için kullanıldığını her zaman ifade edin.

  7. Terminolojiyi Tutarlı Tutun

    Belge boyunca aynı terminolojiyi kullanın; böylece tasarım sistemi tek bir sistem olarak okunur.

04 İşe koyun

Claude Code veya Codex içine design-md yükleyin

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 design-md 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 design-md

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

Skill'e İlk Marka ve Tasarım Sistemi İş 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
Use the Stitch MCP Server to get the Furniture Collection project

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:

  • Biçimin, uydurma bir düzen yerine belirlenen DESIGN.md yapısıyla tam olarak eşleştiğini doğrulayın.
  • Her renk kodunun doğru olduğunu ve her rengin hem açıklayıcı bir ad hem de hex değeri taşıdığını kontrol edin.
  • Her öğenin sadece görünümünün değil, işlevsel rolünün de belirtildiğini doğrulayın.
  • Atmosfer bölümünün belirsiz değil somut olduğunu ve gölgelerin ile boşlukların atlanmadığını kontrol edin.

OpenDesign'da design-md dahil gelir: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHı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-utilities/skills/design-md/SKILL.md Doğrulama sırasında içerik checksum kaydedildi; commit 0337446
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
8.304 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm google-labs-code/stitch-skills deposu için alındı; bu depoda katalogda bulunan 12 skill vardır. design-md 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 paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Genel BakışDESIGN.md'yi, yeni Stitch ekranları için prompt oluşturmada başvuru kaynağı olarak tanımlar.
  2. Ön KoşullarStitch MCP erişimi, tasarlanmış bir ekran ve prompt kılavuzu gerektirir.
  3. HedefStitch'in belirli renk değerleriyle desteklenen görsel açıklamaları okuduğunu yeniden ifade eder.
  4. Alma ve Ağ İşlemleriAltı adım: namespace, proje, ekran, metadata, varlık indirme, proje designTheme.
  5. Analiz & Sentez TalimatlarıKimlik, atmosfer, renk paleti, geometri ve yükseklik çıkarımı yapın.
  6. Çıktı YönergeleriSadece betimleyici dil, temiz Markdown, tam hex kodları, nedenini açıklayın.
  7. Çıktı Biçimi (DESIGN.md Yapısı)Doldurulacak, birebir uygulanacak şablonlu beş bölümlük Markdown iskeleti.
  8. Kullanım ÖrneğiFurniture Collection projesi ve Home sayfası üzerinden bir yürüyüş.
  9. En İyi UygulamalarBetimleyici, işlevsel, tutarlı, görsel ve kesin olun.
  10. Başarı İçin İpuçlarıÖnce büyük resmi görün, örüntüleri arayın, anlamlı adlar verin, hiyerarşiyi belgeleyin.
  11. Kaçınılması Gereken Yaygın HatalarÇevrilmemiş jargon kullanmayın, kod eksik bırakmayın, belirsiz veya eksik açıklamalar yazmayın.
Skill'in Kendi Açıklaması
"Stitch projelerini analiz edin ve anlamsal bir tasarım sistemini DESIGN.md dosyalarına sentezleyin"

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 7.644 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

design-md 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.

Skill, Stitch'e ulaşmak için hangi araçları kullanıyor?

stitch araçlarını ve Read, Write, web_fetch araçlarını tanımlar. Pratikte önce MCP önekini bulmak için list_tools'u çalıştırır, ardından bu önekle list_projects, list_screens, get_screen ve get_project'i çağırır.

Sonunda tam olarak ne elde ediyorum?

Proje dizininde oluşturulan bir DESIGN.md dosyası; proje başlığı ve ID'sinin ardından görsel tema ve atmosfer, renk paleti ve rolleri, tipografi kuralları, bileşen stilleri ve düzen ilkeleri bölümlerinden oluşur. Stitch'ten yeni ekranlar isterken kaynak referans olarak yeniden kullanılmak üzere tasarlanmıştır.

Bunu elle yapmanın yerini mi alıyor?

Çıkarma ve taslak hazırlama işini sizin için yapar, ancak belirli bir kelime hazinesi gereksinimiyle: renklere çağrışımsal adlar ile tam hex kodları ve işlevsel roller verilir, radius değerleri ise ham sınıf adları yerine Pill-shaped veya Sharp, squared-off edges gibi ifadelere dönüştürülür. Ayrıca her kararın ardındaki nedeni açıklamanızı ister.

Design MD

Gerçek Bir Marka ve Tasarım Sistemi Çalışması Görevinde design-md'yi Çalıştırın.

design-md skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills içinde skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md