gpt-tasteyazan Leonxlnx

GPT Taste Skill.

Claude Code ve Codex için UI tasarım skill'i: editoryal düzenler, düzen çeşitliliği ve GSAP hareketi tek bir frontend skill'inde.

Web & UI
UI kodu

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

Leonxlnx/taste-skill · skills/gpt-tasteskill/SKILL.mdSKILL.md

--- name: gpt-taste description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. --- ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) ## 2. AIDA STRUCTURE & SPACING ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE ## 4. THE GAPLESS BENTO GRID ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS ## 6. COMPONENT ARSENAL & CREATIVITY

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 7.857 karakter

01 Ne yapar

gpt-taste Skill'in Claude Code ve Codex'te Yaptığı İşler

Ö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, standart LLM düzen önyargılarını kıran ödüllü frontend tasarım mühendisliğini zorunlu kılar.

Tekrarlayan düzenleri önlemek için Python tabanlı rastgeleleştirme kullanır, devasa bölüm boşluklarıyla AIDA sayfa yapısını zorunlu kılar, hero başlıklarını ultra geniş konteynerler kullanarak 2-3 satırla sınırlar, grid-flow-dense ile matematiksel olarak kusursuz, boşluksuz bento gridler oluşturur, sabitleme (pinning), yığınlama (stacking) ve kaydırma (scrubbing) animasyonları için gelişmiş GSAP ScrollTrigger'lar uygular, satır içi mikro görselleri doğrudan tipografiye gömer ve 'SECTION 01' gibi meta etiketleri ile 6 satırlık metin kaymalarına neden olan dar konteynerleri yasaklar. Her sayfa, UI kodu üretilmeden önce bir design_plan doğrulama bloğu gerektirir.

Neler üretir

GSAP ScrollTrigger animasyonları ve matematiksel olarak kusursuz gridler içeren React/UI kodu

Örnek istemi görün ↗

Nasıl Çalışır

01
Prompt Tohumundan Python Rastgeleleştirmesini Simüle Et
Herhangi bir UI kodu yazmadan önce, bir hero mimarisi, bir tipografi yığını, üç bileşen mimarisi ve iki GSAP paradigmasını deterministik olarak seçmek için kullanıcı promptunun karakter sayısını kullanan bir Python betiğini simüle edin.
02
Sayfayı AIDA Çerçevesiyle Yapılandır
Sayfayı Attention (sinematik hero), Interest (yüksek yoğunluklu bento grid), Desire (GSAP kaydırma efektleri) ve Action (devasa CTA ve footer) sırasına göre oluşturun.
03
Matematiksel Kesinlikle Boşluksuz Bento Gridler Oluştur
Her bento gridinde Tailwind'in grid-flow-dense özelliğini kullanın ve col-span ile row-span değerlerinin sıfır boş alan veya eksik köşe olmadan mükemmel şekilde iç içe geçtiğini matematiksel olarak doğrulayın.
04
Gelişmiş GSAP ScrollTrigger Animasyonları Uygula
Bölünmüş düzenlerle kaydırma sabitleme, görsel ölçeklendirme ve solma efektleri, sıralı opaklık değişimleriyle kaydırma tabanlı metin ortaya çıkarma ve dinamik kart yığınlama için gerçek GSAP ScrollTrigger kodu yazın.
05
Zorunlu Design_plan Doğrulamasını Çıktı Olarak Ver
Herhangi bir React veya UI kodu yazmadan önce, Python RNG çalıştırmasını, AIDA kontrolünü, 2-3 satır garantisi için hero matematik doğrulamasını, bento yoğunluk kanıtını ve etiket taraması onayını içeren bir design_plan bloğu çıktısı verin.

02 Uyumunuzu bulun

gpt-taste Skill'i Ne Zaman Kullanmalı

Bu tür UI tasarım işleri için Claude Code veya Codex'te gpt-taste becerisini kullanın. Uygunluk ve sınırlar, becerinin kendi dosyasından alınmıştır.

İyi Uyum

Sinematik, hareket zengini GSAP kaydırma efektleri gerektiren ödüllü frontend sayfaları
Matematiksel olarak kusursuz bento gridlere sahip yüksek yoğunluklu editoryal düzenler
Tekrarlayan LLM çıktı desenlerini kırmak için düzen çeşitliliği gereken projeler
Gelişmiş GSAP ScrollTrigger sabitleme, yığınlama ve kaydırma gerektiren arayüzler

Sınırları Bilin

Hareketsiz statik arayüzler kesinlikle yasaktır

Ne Sağlamalısınız

GerektirirGSAP — SKILL.md içinde gerekli olarak belirtilmiştir.

03 Skill'in içinde

gpt-taste Skill'in 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ı.

Hero Başlıkları En Fazla 2-3 Satırla Sınırlı
H1 için max-w-5xl veya max-w-6xl gibi ultra geniş konteynerler kullanın ve başlığın asla 2 ile 3 satırı geçmemesini sağlamak için clamp(3rem, 5vw, 5.5rem) kullanarak font boyutunu küçültün.
Meta Etiketler Kalıcı Olarak Yasaklandı
'SECTION 01', 'SECTION 04', 'QUESTION 05' ve 'ABOUT US' gibi etiketler sonsuza dek yasaklandı. Ucuz ve profesyonel olmayan bir görünüme sahip oldukları için bunları tamamen kaldırın.
Tipografi Yığını Inter Fontunu Hariç Tutar
Satoshi, Cabinet Grotesk, Outfit veya Geist arasından seçim yapın. Inter fontu açıkça yasaklanmıştır ve asla kullanılmamalıdır.
Kod veya Çıktıda Emoji Kullanılmaz
Kod, yorumlar veya herhangi bir çıktıda asla emoji kullanmayarak kesinlikle profesyonel bir biçimlendirme sağlayın.
Taşma Sarmalayıcısıyla Yatay Kaydırmayı Önleme
Ekran dışı animasyonların yol açtığı yatay kaydırma çubuklarını kesin olarak önlemek için tüm sayfayı overflow-x-hidden w-full max-w-full sınıflarına sahip bir main öğesiyle sarın.
Kusursuz Buton Metin Kontrastı Gereklidir
Butonlar, koyu arka planlarda beyaz metin ve açık arka planlarda koyu metin kullanılarak kusursuzca okunabilir olmalıdır. Görünmez metin bir hatadır.

04 İşe koyun

gpt-taste'i 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.

gpt-taste'i 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/Leonxlnx/taste-skill --skill gpt-taste

skills/gpt-tasteskill/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

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

Build a landing page for [product name] showcasing [three key features]. Use a cinematic hero with inline typography images, a gapless bento grid for the feature cards, GSAP scroll pinning to reveal testimonials as the user scrolls, and horizontal accordion components for the FAQ section. Include a massive CTA section at the bottom.

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:

Hero başlığının max-w-5xl veya max-w-6xl gibi ultra geniş container'lar kullanılarak 2-3 satırda aktığını doğrulayın
Bento grid'in grid-flow-dense kullandığını ve sıfır boş alanla matematiksel olarak birbirine kenetlendiğini doğrulayın
SECTION 01 veya QUESTION 05 gibi tüm meta etiketlerin kaldırıldığını kontrol edin
Buton metin kontrastının koyu arka planlarda beyaz metin ve açık arka planlarda koyu metinle kusursuz olduğunu doğrulayın
Sayfa yapısının Navigation, Attention hero, Interest bento, Desire GSAP ve Action footer içeren AIDA çerçevesini takip ettiğini doğrulayın
Hero bölümünde damga ikonları veya spam etiketlerinin bulunmadığını doğrulayın

OpenDesign içinde gpt-taste'i 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill dosyası: skills/gpt-tasteskill/SKILL.md Doğrulamada içerik sağlama kaydı alındı; commit ccbc156
License: MIT LICENSE dosyasından.
Repository yıldızları: 86.946 Bu katalogda 11 beceri içeren Leonxlnx/taste-skill deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. gpt-taste için bir derecelendirme 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

ÇEKİRDEK YÖNERGE: AWWWARDS SEVİYESİNDE TASARIM MÜHENDİSLİĞİSkill'i, düzen üretiminde istatistiksel LLM önyargılarını kıran üst düzey tasarım mühendisliği olarak konumlandırır
PYTHON TABANLI GERÇEK RASTGELELEŞTİRME (DÖNGÜYÜ KIRMA)Düzenleri belirleyici biçimde seçmek ve tekrarı önlemek için prompt karakter sayısını kullanan simüle edilmiş bir Python betiğini zorunlu kılar
AIDA YAPISI VE BOŞLUKLANDIRMABölümler arasında büyük py-32 md:py-48 dikey dolgu ile Attention, Interest, Desire, Action çerçevesini gerektirir
HERO MİMARİSİ VE 2 SATIR DEMİR KURALIUltra geniş container'ları zorunlu kılar ve başlıklar için en fazla 2-3 satır sınırı koyar, 6 satırlık sarmalara yol açan dar container'ları yasaklar
BOŞLUKSUZ BENTO GRIDgrid-flow-dense kullanımını ve col-span ile row-span değerlerinin sıfır boş alan bıraktığının matematiksel olarak doğrulanmasını gerektirir
İLERİ DÜZEY GSAP HAREKET VE HOVER FİZİĞİKaydırma sabitlemeyi, görsel ölçek-solma efektini, metin ortaya çıkarma kaydırmalarını, kart yığınlamayı ve hover dönüşüm efektlerini tanımlar
BİLEŞEN ARSENALİ VE YARATICILIKRastgele seçim için satır içi tipografi görselleri, yatay akordeonlar, sonsuz kaydıraçlar ve referans carousel'lerini listeler
İÇERİK, VARLIKLAR VE KESİN YASAKLARMeta etiketlerini kalıcı olarak yasaklar, CSS filtreleriyle picsum görsel tohumlamasını belirtir ve overflow-x-hidden wrapper'ını gerektirir
ZORUNLU ÖN KONTROL <design_plan>Herhangi bir UI kodundan önce Python RNG, AIDA kontrolü, hero matematiği, bento yoğunluk kanıtı içeren bir doğrulama bloğu gerektirir

Skill'in Kendi Açıklaması

"Elit UX/UI ve İleri Düzey GSAP Hareket Mühendisi. Düzen çeşitliliği için Python tabanlı gerçek rastgeleştirmeyi, katı AIDA sayfa yapısını, geniş editoryal tipoğrafiyi (6 satır sarmaları yasaklar), boşluksuz bento gridleri, katı GSAP ScrollTriggers (pinleme, istifleme, scrubbing), satır içi mikro görseller ve büyük bölüm boşluklarını uygular."

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

06 Kurmadan önce

gpt-taste 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.

Bu skill, UI kodu oluşturmadan önce neden Python rastgeleleştirmesi kullanıyor?

LLM'ler doğası gereği tembeldir ve istatistiksel önyargılar nedeniyle her zaman ilk düzen seçeneğini seçer. Skill, prompt'unuzun karakter sayısını deterministik bir tohum olarak kullanan bir Python betiğini simüle ederek çeşitli hero mimarilerinin, tipografi yığınlarının, bileşenlerin ve GSAP animasyonlarının seçilmesini zorunlu kılar ve tekrarlayan çıktıları önler.

GPT Taste

gpt-taste'i Gerçek Bir UI Tasarım Görevinde Çalıştırın.

OpenDesign indirin, gpt-taste becerisini SKILL.md bağlantısından içe aktarın, yukarıdaki promptu yapıştırın ve sonuçtan önce planı okuyun.

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