stitch::extract-design-mdyazan Google Labs

Stitch Extract Design MD Skill.

Claude Code ve Codex için bir marka ve tasarım sistemi skill'i: herhangi bir framework'teki frontend kaynak kodundan eksiksiz bir DESIGN.md çıkarır.

Brand & Design Systems
DESIGN.md

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

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

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

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

01 Ne yapar

Claude Code ve Codex'te stitch::extract-design-md Skill 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, bir frontend kod tabanını okur ve uygulamayı derlemeden veya render etmeden görsel dilini yakalayan bir DESIGN.md yazar. package.json ve yapılandırma dosyalarından çerçeveyi tespit eder (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, sade CSS), ardından atmosfer, renk paleti ve rolleri, tipografi, bileşen stillerini, düzen ilkelerini ve Stitch üretimi için notları sırayla işler.

Çıktı .stitch/DESIGN.md konumuna yerleşir ve diğer skill'ler onu ayrıştırdığı için name ve bir colors eşlemesi taşıyan bir YAML frontmatter bloğuyla başlamalıdır. Mevcut bir projenin tasarım sistemini tersine mühendislik yapan, denetleyen veya taşıyan tasarımcılara ve geliştiricilere yöneliktir.

Neler üretir

Standart tasarım sistemi formatında derlenmiş bir DESIGN.md belgesi.
O dosyanın başında name ve bir colors eşlemesi içeren bir YAML frontmatter bloğu, ardından markdown bölümleri.
Dil, renk referansları ve bileşen prompt'larını kapsayan, Stitch üretimi için tasarım sistemi notlarının yer aldığı son bölüm.

Örnek istemi görün ↗

Nasıl Çalışır

01
Çerçeveyi ve Yığını Tespit Edin
Proje kök dizinini package.json, tailwind.config.js, postcss.config.js, theme.js veya tokens.js gibi belirleyici dosyalar için tarayın, ardından çerçeveyi, CSS araçlarını ve varsa tasarım-token kütüphanelerini öğrenmek için package.json'ı okuyun.
02
Eşleşen Çerçeve Referansını Okuyun
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular ve sade CSS'in her biri, renkleri, tipografiyi ve boşluk kullanımını bulmak için çerçeveye özgü kalıplar içeren bir referans dosyasına sahiptir.
03
Renk Paletini Çıkarın ve Rolleri Atayın
Renkler CSS özel özelliklerinden, Tailwind yapılandırmasından, tema dosyalarından, bileşen stillerinden, kapsamlı sınıflardan ve CSS-in-JS nesnelerinden gelir, ardından renk tonuna göre değil işleve göre gruplanır.
04
Bileşenleri ve Düzeni Analiz Edin
Skill, düğmelere, kartlara, navigasyona, girdilere ve alana özgü bileşenlere, ayrıca ızgaraya, boşluk kullanımına, hizalamaya ve duyarlı davranışa bakar.
05
DESIGN.md'yi Yazın
Her şey standart DESIGN.md formatında derlenir ve eksikse oluşturulan bir .stitch dizinine yazılır.
06
İsteğe Bağlı Olarak Stitch'e Devredin
Kullanıcı tasarım sistemini Stitch'e aktarmak isterse, yazılan DESIGN.md dosyası manage-design-system skill için girdi haline gelir.

02 Uyumunuzu bulun

stitch::extract-design-md Skill Ne Zaman Kullanılır

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

İyi Uyum

Bir frontend kod tabanınız var ve tasarım sisteminin kaynak koddan çıkarılmasını veya belgelenmesini istiyorsunuz.
Uygulama derlenemiyor veya render edilemiyor, ancak kaynak dosyalar mevcut.
Bir projenin mevcut görsel kimliğini Stitch'e taşımak istiyorsunuz.
Kod tabanı genelinde stil tutarsız ve birleştirilmesi veya uyumlaştırılması gerekiyor.

Sınırları Bilin

Bu, render edilmiş HTML rotası değildir; onu ayrı design-md skill render edilmiş HTML'den gerçekleştirir.
Frontend projesinin kaynak dizinine erişim olmadan çalışamaz.

Ne Sağlamalısınız

Varsa tema veya token dosyalarıtheme. veya tokens. dosyalarına işaret etmek, tasarım değerlerinin en güvenilir kaynağını sağlar.
Proje adı ve biliniyorsa IDBelge başlığı proje adını kullanır; proje ID'si mevcutsa dahil edilir, yoksa atlanır.
Stitch'e aktarım kararıKullanıcı tasarım sistemini Stitch'e aktarmak isterse, iş akışı Aşama 3'ün ötesine geçip entegrasyon devir teslimine devam eder.

03 Skill'in içinde

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

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

YAML Frontmatter Zorunludur
Dosya, examples/DESIGN.md ile eşleşen name ve colors eşlemesi içeren bir YAML bloğuyla açılmalıdır.
Renkleri Ton Yerine Karaktere Göre Adlandırın
Her rengin, görünümünü çağrıştıran betimleyici bir adı vardır; böylece #294056, "Mavi" değil "Derin Mat Camgöbeği-Lacivert" olur.
Neredeyse Aynı Renkleri Birleştirin
#333 ve #2C2C2C gibi neredeyse aynı renkler, amaçlanan rengi en iyi temsil eden tek ad altında birleştirilir.
Tailwind Yapılandırmasından Başlayın
Özelleştirilmiş bir tailwind.config.js, tasarım sisteminin kendisi olarak ele alınır; önce ondan çıkarım yapılır, ardından bileşenler geçersiz kılmalar için noktasal olarak kontrol edilir.
Tema Dosyaları Bileşen Stillerinden Önceliklidir
Bir palet tanımlayan tema dosyası amaçlanan tasarım sistemini ortaya koyar; dağınık satır içi stiller ise sadece gerçekte kullanılanı gösterir.
CSS Özel Özelliklerini Kasıt Olarak Ele Alın
--brand-primary gibi bir değişken, tesadüfi bir değer değil, bilinçli bir tasarım token'ıdır ve öyle kabul edilmelidir.
Stitch Notlarını Doğal Dilde Yazın
Üretim notları, bileşenleri CSS söz dizimi veya ham özellikler yapıştırmak yerine düz metinle tanımlar.
Atmosfer Editoryal Tonunu Koru
Atmosfer bölümü, ruh hali ve felsefe hakkında editoryal bir metin olarak yazılmıştır, teknik dokümantasyon olarak değil.

04 İşe koyun

Claude Code veya Codex'e stitch::extract-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 stitch::extract-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 stitch::extract-design-md

plugins/stitch-design/skills/extract-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

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

Starter prompt

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

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:

Her rengin açıklayıcı bir adı, bir hex kodu ve bir işlevsel rolü vardır.
Tipografi; font ailesini, bir karakter açıklamasını ve tam hiyerarşiyi kapsar.
Bileşen stilleri; şekil, renk, durumlar ve geçişleri belirtir.
Yerleşim; maksimum genişliği, grid'i, kesme noktalarını ve boşluk stratejisini belirtir.
Belge, yalnızca ham değerleri değil, stilin arkasındaki niyeti de yakalar.

OpenDesign'da stitch::extract-design-md'yi 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/extract-design-md/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 GitHub anlık görüntüsü, bu katalogda 12 skill içeren google-labs-code/stitch-skills deposunun tamamı için 2026-09-14 tarihinde alındı. stitch::extract-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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu Neden VarKaynağı okumak, render edilmiş HTML'den daha hızlıdır ve derleme bozuk olduğunda da çalışır.
Ne Zaman KullanılırTetikleyiciler: bir tasarım sistemini çıkarma, belgeleme, denetleme, taşıma, tutarsız stilleri birleştirme.
Ön KoşullarYalnızca kaynak dizin erişimi; derleme veya çalışma zamanı bağımlılığı gerekmez.
WorkflowDört aşama: proje keşfi, derinlemesine çıkarım, DESIGN.md yazımı, isteğe bağlı Stitch entegrasyonu.
Kalite Kontrol ListesiRenkler, tipografi, bileşenler, yerleşim, dil, tekrarları giderme ve niyet için doğrulama öğeleri.
Daha İyi Çıkarım İçin İpuçlarıKod yorumlarını tarayın, token kütüphanelerini ve tema dosyalarını tercih edin, Tailwind config'i sistem olarak ele alın.

Skill'in Kendi Açıklaması

- Frontend kaynak kodundan doğrudan kapsamlı bir tasarım sistemi (DESIGN.md) çıkarır — React, Vue, Svelte, Angular, sade HTML/CSS veya herhangi bir web framework'ü. Zengin, Stitch-uyumlu bir tasarım sistemi belgesi üretmek için bileşen dosyalarını, stil sayfalarını, Tailwind yapılandırmalarını, tema tanımlarını ve tasarım token'larını analiz eder. Kullanıcı mevcut bir kod tabanından tasarım sistemini tersine mühendislik yoluyla çıkarmak, bir projenin görsel dilini denetlemek, kaynak dosyalardan tasarım token'larını çıkarmak veya bir frontend reposundaki stil kalıplarını anlamak istediğinde bu skill'i kullanın — sadece "bu uygulama nasıl görünüyor?" veya "bu koddan tasarımı çıkar" deseler bile.

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

06 Kurmadan önce

stitch::extract-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.

Bağımlılıkları yüklemem veya uygulamayı önce derlemem gerekiyor mu?

Hayır. Skill yalnızca kaynak dosyaları okur ve derleme veya çalışma zamanı bağımlılığı gerektirmez, bu yüzden bağımlılıklar eksik olduğunda veya derleme bozuk olduğunda da çalışır.

Hangi framework'leri ve stil kurulumlarını işleyebilir?

React, Vue, Svelte, Angular, düz HTML/CSS ve Tailwind config'leri, CSS-in-JS ve tema veya token dosyaları dahil her web framework'ü. React/Tailwind, Vue, Svelte, Angular ve düz CSS için framework'e özgü çıkarım kalıpları, başvurduğu referans dosyalarında bulunur.

DESIGN.md neden YAML frontmatter'a ihtiyaç duyar?

Bu blok, ad ve renkler eşlemesini diğer skill'lerin ayrıştırdığı yapılandırılmış veri olarak taşır. Bunu atlamak veya temel renk token'larını dışarıda bırakmak, skill'i doğru kullanmama anlamına gelir.

Tamamlanmış tasarım sistemini Stitch'e gönderebilir mi?

Bu adım isteğe bağlıdır ve başka bir skill tarafından ele alınır: Faz 4, DESIGN.md'yi girdi olarak kullanarak MCP oluşturma/güncelleme çağrılarını yapan manage-design-system'e devreder. Yalnızca belgeyi istiyorsanız, çalışma Faz 3'ten sonra sona erer.

Stitch Extract Design MD

Gerçek Bir Marka ve Tasarım Sistemi İşi Görevinde stitch::extract-design-md Çalıştırın.

OpenDesign'ı indirin, stitch::extract-design-md'yi 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