stitch-design-tasteyazan Leonxlnx

Stitch Design Taste Skill.

Marka ve tasarım sistemi çalışmaları için bir Claude Code ve Codex skill'i: görsel ayırt ediciliğe vurgu yaparak Google Stitch için DESIGN.md yazar.

Brand & Design Systems
DESIGN.md

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

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · Toplamda 11.732 karakter

01 Ne yapar

stitch-design-taste 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, Google Stitch ekran üretimi için optimize edilmiş DESIGN.md dosyaları oluşturur. Anti-slop frontend mühendislik direktiflerini Stitch'in yerel semantik tasarım diline çevirir — Stitch'in AI ajanının yorumlayabileceği açıklayıcı, doğal dilde kurallarla eşleştirilmiş kesin değerler. Dosya, Stitch'e premium, sıradan olmayan arayüzler üretmesi için prompt vermek için tek doğruluk kaynağı olarak hizmet eder.

Sıkı tipografi kuralları, kalibre edilmiş renk paletleri, asimetrik düzenler, sürekli mikro hareket ve donanım hızlandırmalı performans uygular. Skill, Inter yazı tipi, neon parıltılar, ortalanmış hero bölümleri ve genel yer tutucu içerik gibi AI tasarım klişelerini yasaklayan açık anti-pattern listeleri içerir.

Neler üretir

Yedi yapılandırılmış bölümden oluşan bir DESIGN.md dosyası: Görsel Tema & Atmosfer, Renk Paleti & Roller, Tipografi Kuralları, Bileşen Stilleri, Düzen İlkeleri, Hareket & Etkileşim ve Anti-Pattern'ler

Örnek istemi görün ↗

Nasıl Çalışır

01
Atmosferi Tanımlayın
Hedef projenin amacını, üç boyutta zevk spektrumundan çağrıştırıcı sıfatlar kullanarak değerlendirin: Yoğunluk (1-10, Havadar'dan Kokpit Yoğunluğuna), Değişkenlik (1-10, Simetrik'ten Kaotik'e) ve Hareket (1-10, Statik'ten Sinematiğe).
02
Renk Paletini Haritalandırın
Her renk için açıklayıcı ad, hex kodu ve fonksiyonel rol sağlayın. Doygunluğu %80'in altında olan en fazla bir vurgu rengi.
03
Hero Bölümünü Tanımlayın
Satır içi görsel tipografi (kelimeler arasına yazı yüksekliğinde gömülü küçük fotoğraflar), değişkenlik 4'ü aştığında asimetrik yapılar ve en fazla bir birincil CTA kullanarak çarpıcı ilk izlenimler oluşturun.
04
Bileşen Stillerini Açıklayın
Butonlar, kartlar, girişler, yükleme durumları ve hata durumları için şekil, renk, gölge derinliği ve etkileşim davranışını belirtin.
05
Hareket Felsefesini Kodlayın
Yay fiziği varsayılanlarını (sertlik: 100, sönümleme: 20), aktif bileşenler için sürekli mikro etkileşimleri, liste açılışları için kademeli düzenlemeyi ve animasyonu yalnızca transform ve opacity ile sınırlayan performans kısıtlamalarını tanımlayın.

02 Uyumunuzu bulun

stitch-design-taste 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-design-taste skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Premium, sıradan olmayan tasarım standartlarını kodlayan, Google Stitch ekran üretimi için optimize edilmiş DESIGN.md dosyaları oluşturma
Neon parıltılar, Inter yazı tipi ve genel yer tutucu içerik gibi AI tasarım klişelerinden kaçınmak için sıkı anti-pattern uygulaması gerektiren projeler
Monospace rakamlar ve kompakt taranabilirlik gerektiren yüksek yoğunluklu panolar veya kokpit tarzı arayüzler

Sınırları Bilin

Premium bağlamlar için Inter fontu veya genel sistem fontları gerektiren projeler
Varyans 4'ü aştığında ortalanmış hero düzenleri veya üç sütunlu eşit kart düzenleri kullanan arayüzler
Emoji, neon dış parlama (glow) gölgeleri, özel imleçler veya Elevate, Seamless, Unleash gibi klişe yapay zeka metinleri içeren tasarımlar

Ne Sağlamalısınız

Hedef proje niyetiProjenin bir sanat galerisi, günlük kullanım uygulaması, kokpit arayüzü ya da başka bir kategori olup olmadığının anlaşılması; uygun yoğunluk, varyans ve hareket spektrumunun değerlendirilmesi için.

03 Skill'in içinde

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

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Varsayılan Atmosfer Taban Değeri
Yeni projeler için varsayılan taban değer Varyans 8, Hareket 6, Yoğunluk 4'tür. Bu değerler, kullanıcının vibe tanımına göre dinamik olarak uyarlanmalıdır.
Varyans 4'ün Üzerinde Ortalanmış Hero Bölümü Yok
Varyans 4'ü aştığında ortalanmış Hero düzenleri yasaktır. Bunun yerine Split Screen, Sola Hizalı veya Asimetrik Boşluk düzenleri zorunlu kılınır.
Mobil Görünüm Alanı min-h-[100dvh] Kullanır
Tam yükseklikteki bölümler, iOS Safari'nin felaket derecesindeki adres çubuğu sıçrama davranışından kaçınmak için h-screen yerine mutlaka min-h-[100dvh] kullanmalıdır.
44px Minimum Dokunma Hedefi
Mobil cihazlarda erişilebilirliği ve kullanılabilirliği sağlamak için tüm etkileşimli öğeler en az 44px'lik bir dokunma hedefine sahip olmalıdır.
Örtüşen Öğe Yok
Metin, görsellerle veya diğer metinlerle asla örtüşmemelidir. Her öğe, açık bir mekânsal ayrımla kendi temiz mekânsal bölgesini kaplar. Absolute konumlandırılmış içeriklerin üst üste yığılmasına izin verilmez.

04 İşe koyun

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

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

stitch-design-taste'i Claude Code, Codex veya Kendi Ajanınıza ekleyin

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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste

skills/stitch-skill/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

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

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:

Tüm renk girişlerinin açıklayıcı ad, hex kodu ve işlevsel rol içerdiğini, en fazla bir vurgu renginin %80'in altında doygunlukta olduğunu doğrulayın
Anti-pattern listesinin Inter fontunu, genel serif yazı tiplerini, saf siyahı, neon parlamaları, emojileri ve klişe yapay zeka metinlerini açıkça yasakladığını doğrulayın
Mobil duyarlı (responsive) kuralların 768px altında tek sütuna geçişi, 44px minimum dokunma hedeflerini ve tam yükseklikteki bölümler için min-h-[100dvh] kullanımını zorunlu kıldığından emin olun

OpenDesign'da stitch-design-taste'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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill dosyası: skills/stitch-skill/SKILL.md Doğrulama sırasında kaydedilen içerik sağlama toplamı; commit ccbc156
License: MIT LICENSE dosyasından. Google Stitch'in taste-design ürününün neredeyse kopyası; Google versiyonu ayrıca sayılmamıştır.
Repository yıldızları: 86.946 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm Leonxlnx/taste-skill deposu için alınmıştır; bu katalogda 11 skill bulunmaktadır. stitch-design-taste 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

Genel BakışSkill'in amacını tanımlar: anlamsal tasarım dili ve klişe karşıtı standartlar kullanarak Stitch için DESIGN.md dosyaları üretmek.
Ön KoşullarErişim gereksinimlerini listeler: labs.google/stitch üzerinden Google Stitch ve isteğe bağlı olarak programatik entegrasyon için Stitch MCP Server.
HedefYedi kodlama hedefini özetler: görsel atmosfer, renk kalibrasyonu, tipografik mimari, bileşen davranışları, düzen ilkeleri, hareket felsefesi, anti-pattern'ler.
1. Atmosferi TanımlayınYoğunluk, varyans ve hareket spektrumlarında, varsayılan taban değer olan Varyans 8, Hareket 6, Yoğunluk 4 ile çağrışımsal sıfatlar kullanın.
2. Renk Paletini Haritalandırın%80 doygunluğun altında en fazla bir vurgu rengiyle betimleyici ad, hex kodu ve işlevsel rol belirtin; neon estetiği yasaklayın.
3. Tipografi Kurallarını BelirleyinPremium bağlamlar için Inter'i ve jenerik serif yazı tiplerini yasaklayın; hiyerarşiyi boyut yerine ağırlık ve renkle sağlayan ayırt edici fontları zorunlu kılın.
4. Hero Bölümünü TanımlayınSatır içi görsel tipografi, varyans 4'ün üzerinde asimetrik yapılar ve en fazla bir CTA kullanarak çarpıcı ilk izlenimler oluşturun.
5. Bileşen Stillerini TanımlayınŞekil, renk, gölge derinliği ve etkileşim davranışını belirtin; kartlar yalnızca yükseklik hiyerarşiyi ifade ettiğinde kullanılsın.
6. Düzen İlkelerini TanımlayınÖrtüşen öğeler yok, varyans 4'ün üzerinde ortalanmış hero'lar yasak, CSS Grid Flexbox'a tercih edilsin, max-width sınırlaması, tam yükseklik için min-h-[100dvh].
7. Duyarlı Tasarım Kurallarını Tanımlayın768px altında mobil öncelikli tek sütuna daralma, 44px dokunma hedefleri, clamp ile tipografi ölçeklendirme, satır içi görsellerin mobilde alt alta dizilmesi.
8. Hareket Felsefesini KodlayınYay fiziği varsayılanları sertlik 100 sönümleme 20, sürekli mikro etkileşimler, kademeli orkestrasyon, yalnızca donanım hızlandırmalı dönüşümler.
9. Anti-Kalıpları (AI İzleri) ListeleyinAçık ASLA YAPMA kuralları: emoji yok, Inter yok, jenerik serif yok, saf siyah yok, neon parlamalar yok, örtüşen öğeler yok, AI klişeleri yok, doldurma metin yok.

Skill'in Kendi Açıklaması

Google Stitch için Semantik Tasarım Sistemi Skill'i. Premium, jenerik olmayan kullanıcı arayüzü standartlarını uygulayan — katı tipografi, kalibre edilmiş renk, asimetrik düzenler, sürekli mikro-hareket ve donanım hızlandırmalı performans — ajan dostu DESIGN.md dosyaları oluşturur.

SKILL.md dosyasındaki ön madde açıklaması. Dosyanın tamamı yaklaşık 11.732 karakterdir. Dosyanın tamamını GitHub'da okuyun.

Stitch Tasarım Tarzı

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

OpenDesign indirin, stitch-design-taste becerisini SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonucu almadan önce planı okuyun.

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