stitch::code-to-designyazan Google Labs

Stitch Code to Design Skill.

Claude Code ve Codex için bir UI tasarım skill'i: frontend kodunu statik HTML ve tasarım sistemi çıkarımı yoluyla Stitch tasarımına dönüştürü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/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

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

01 Ne yapar

Claude Code ve Codex'te stitch::code-to-design Skill'inin Yaptıkları

Ö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

extract-static-html, extract-design-md ve upload-to-stitch skill'lerini zincirleyerek mevcut bir frontend kod tabanını (React + Vite, Next.js, Angular, Vue) bir Stitch Design'a dönüştürür. Çalışan bir uygulamayı veya derlenmiş bir web dizinini Stitch'e taşıyıp orada üzerinde çalışmak isteyen tasarımcı ve geliştiricileri hedefler.

İş akışı kendi içinde bütünlüklü tek bir HTML dosyası çıkarır, .stitch/DESIGN.md dosyasına bir tasarım sistemi yazar, tasarım sistemini Stitch'te oluşturur, ardından HTML'yi sayfanın rota yoluyla başlıklandırılmış bir ekran olarak yükler. Kaydetme, taşıma veya yükleme istekleri için gereken yoldur; HTML doğrulaması isteğe bağlıdır ve çalışmayı hiçbir zaman durdurmaz.

Neler üretir

Kendi içinde bütünlüklü tek bir HTML dosyası, örneğin /path/to/extracted/standalone.html.
DESIGN.md olarak yazılmış bir tasarım sistemi açıklaması.
Adı ve başlığı uygulamadaki geldiği rotayı tanımlayan, Stitch'e yüklenmiş bir ekran.

Örnek istemi görün ↗

Nasıl Çalışır

01
Kendi İçinde Bütünlüklü Bir HTML Dosyası Çıkarma
Derleme çıktısından veya Vite ya da Angular CLI ng serve gibi çalışan bir geliştirme sunucusundan işleyen ve kendi içinde bütünlüklü tek bir HTML dosyası üreten extract-static-html skill'ine devreder.
02
Duraklamadan Doğrulama Sunma
Çıkarımdan sonra dosyanın nerede olduğunu kullanıcıya bildirirsiniz, böylece kendisi tarayıcıda kontrol edebilir; çalışma her durumda sonraki adıma devam eder.
03
Kaynağı Bir Tasarım Sistemine Dönüştürün
extract-design-md skill'i projenin bileşenlerini, stil sayfalarını ve tema yapılandırmalarını okur ve sonucu bir tasarım sistemi dosyası olarak yazar.
04
Tasarım Sistemini Stitch'te Oluşturun
manage-design-system skill'i DESIGN.md'yi yükler ve gerekli şemalarla create_design_system_from_design_md'yi çağırır.
05
HTML'yi Bir Ekran Olarak Yükleyin
Aynı yükleme betiği, bağımsız HTML'yi Stitch API anahtarı ve projectId ile gönderir; title argümanı, ekranın Stitch'te tanımlanabilmesi için sayfa rotasına ayarlanır.

02 Uyumunuzu bulun

stitch::code-to-design Skill Ne Zaman Kullanılır

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

İyi Uyum

Kullanıcının Stitch'e taşımak ve orada geliştirmeye devam etmek istediği, React + Vite, Next.js, Angular veya Vue ile yazılmış mevcut bir uygulama.
Açık bir dönüştürme görevi olarak değil, kaydet, taşı veya yükle gibi gevşek şekilde ifade edilmiş bir istek.
Zaten bir Vite geliştirme sunucusunda çalışan veya Angular CLI ng serve üzerinden sunulan bir proje.
angular.json, harici .html şablonları, tema dosyaları ve bileşenlerle düzenlenmiş, bunların tümü tasarım sistemi çıkarımını besleyen bir Angular çalışma alanı.

Sınırları Bilin

İşaret edilebilecek çalıştırılabilir bir şey yok: iş akışı, çalışan bir yerel geliştirme sunucusuna veya index.html ve varlıklar içeren derlenmiş bir web uygulaması dizinine ihtiyaç duyar.

Ne Sağlamalısınız

Hedef Stitch projectIdYüklemelerin bir hedef projeye ihtiyacı vardır; bilinmiyorsa önce list_projects ile aranmalıdır.
Çıkarılan HTML'nin yolu1. adımda üretilen bağımsız dosya, API anahtarı ve projectId ile birlikte yükleme adımına verilmelidir.
Proje kaynak dosyalarıTasarım sistemi analizi, DESIGN.md'yi türetmek için bileşenleri, stil sayfalarını ve tema yapılandırmalarını okur.

03 Skill'in içinde

stitch::code-to-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ı.

Kaydet, Taşı veya Yükle Niyeti İçin Her Zaman Kullanın
Mevcut web uygulamalarının veya React/Angular/Vue bileşenlerinin Stitch'e taşınması, basit bir kaydetme olsa bile bu skill üzerinden yapılmalıdır; çünkü tasarım sistemini de çıkaran ve varlıkları bağlayan tek yol budur.
Tasarım Sistemini .stitch/DESIGN.md'ye Yazın
Tasarım sistemi dosyası .stitch/DESIGN.md konumuna gider ve extract-design-md skill'i tarafından tanımlanan yapıya uymalıdır.
Doğrulamada Asla Bloke Olmayın
Çıkarılan HTML'nin doğrulanması kullanıcı odaklıdır ve isteğe bağlıdır; ajan beklemek yerine doğrudan tasarım sistemi adımına geçmelidir.
Tasarım Sistemi Yüklemesini Etiketleyin
DESIGN.md'yi yüklerken --generated-by 'stitch::code-to-design' argümanını geçin, böylece üretilen ürünün kökeni kayıt altına alınır.
HTML Yüklemesini Farklı Şekilde Etiketleyin
HTML yükleme, kod-tasarıma dönüştürme işaretçisini değil, --generated-by 'stitch::extract-static-html' işaretçisini kullanır.
Her İki Yükleme İçin Tek Bir API Anahtarı Kullanın
4. adımda verilen Stitch API anahtarı, HTML yüklemesi için gereken anahtarla aynıdır; ikinci bir kimlik bilgisine gerek yoktur.

04 İşe koyun

stitch::code-to-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::code-to-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::code-to-design

plugins/stitch-design/skills/code-to-design/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgelemiş olabilir.

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

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

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

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:

Sayfanın beklendiği gibi render edildiğini doğrulamak için çıkarılan dosyayı bir tarayıcıda açın.
Kullanıcı çıkarımı inceledikten sonra sorunlarla geri gelirse, iş akışına devam etmeden önce bunları düzeltin.

OpenDesign'da stitch::code-to-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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/code-to-design/SKILL.md İçerik sağlama toplamı doğrulama sırasında 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 google-labs-code/stitch-skills deposunun tamamı için alındı; bu katalogda 12 skill içerir. stitch::code-to-design için 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

İş akışıAjana, mevcut kodu dönüştürmek için listelenen adımları izlemesini söyler.
Ön koşullarÇalışan bir geliştirme sunucusu veya derlenmiş bir uygulama dizini ile bir Stitch projectId gerektirir.
AdımlarHer biri başka bir skill'e veya betiğe devreden beş sıralı adım.

Skill'in Kendi Açıklaması

"- Frontend kodunu (Vite, React, Angular, Vue vb.) statik HTML çıkarma, tasarım sistemi çıkarma ve dosya yükleme zincirleyerek bir Stitch Design'a dönüştürün. Kullanıcının amacı mevcut web uygulamalarını veya React/Angular/Vue bileşenlerini Stitch'e taşımak olduğunda (örn. "kaydet", "taşı" veya "yükle" istekleri) **HER ZAMAN** bu skill'i kullanın. Basit "kaydet" işlemleri için bile bu skill'i kullanmalısınız, çünkü tasarım sisteminin çıkarılmasını ve varlıkların düzgün bağlanmasını sağlamanın tek yolu budur."

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

06 Kurmadan önce

stitch::code-to-design 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.

Sadece bir ekranı mı yüklüyor, yoksa tasarım sistemini de mi oluşturuyor?

Her ikisi de. DESIGN.md dosyası yüklenir ve tasarım sistemi, gerekli şemalarla upload betiğini ve create_design_system_from_design_md çağrısını kullanan manage-design-system iş akışı aracılığıyla Stitch'te oluşturulur.

Uygulamamdan HTML'yi gerçekte hangi skill çıkarıyor?

Çıkarma işlemini extract-static-html yapar; derleme çıkışından veya Vite gibi çalışan bir geliştirme sunucusundan tek bir bağımsız HTML dosyası üretir.

Stitch Code to Design

Gerçek bir UI Tasarım Görevinde stitch::code-to-design Çalıştırın.

OpenDesign'ı indirin, stitch::code-to-design'ı 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