design-taste-frontendyazan Leonxlnx

Design Taste Frontend Skill.

UI tasarımı için bir Claude Code ve Codex skill'i: açılış sayfaları, portfolyolar ve yeniden tasarımlar için anti-slop frontend tasarımı.

Web & UI
UI kodu

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

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

--- name: design-taste-frontend description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check. --- ## 0. BRIEF INFERENCE (Read the Room Before Anything Else) ## 1. THE THREE DIALS (Core Configuration) ## 2. BRIEF → DESIGN SYSTEM MAP ## 3. DEFAULT ARCHITECTURE & CONVENTIONS ## 4. DESIGN ENGINEERING DIRECTIVES (Bias Correction) ## 5. CONTEXT-AWARE PROACTIVITY

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

01 Ne yapar

design-taste-frontend Skill'inin Claude Code ve Codex'te 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

Açılış sayfaları, portföyler ve yeniden tasarımlar için kalıp karşıtı bir frontend skill'i. Ajan brief'i okur, bir tasarım yönü çıkarır, ardından her düzen, hareket ve yoğunluk kararını yönlendiren üç kadranı (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) ayarlar. Mevcut olduğunda brief'leri gerçek tasarım sistemlerine (Fluent, Carbon, GOV.UK, Polaris) eşler ve yalnızca estetik amaçlı yönleri açıkça etiketler.

Sıkı kurallar; hero görünüm alanına sığma, eyebrow kısıtlaması, sayfa başına tek bir aksan ve tek bir tema, yasaklanmış yapay zeka izleri ve belirli simge, yazı tipi ve animasyon kütüphanelerini kapsar. Yeniden tasarımlar bir denetimle başlar. Kapanışta, kod yayınlanmadan önce her kutusunun geçmesi gereken mekanik bir Uçuş Öncesi Kontrol bulunur.

Neler üretir

Herhangi bir koddan önce belirtilen tek satırlık bir Tasarım Okuması: sayfa türü, hedef kitle, hava dili ve yaslanılan tasarım sistemi veya estetik aile.
Varsayılan olarak Tailwind v4 üzerinde frontend kodu; mevcut proje gerektirmedikçe v3'e geri dönülmez.
Hangi kısımların ödünç alınmış ilham, hangilerinin resmi materyal olduğunu açıkça belirten kod yorumları.
Görsel kaynağı olmadığında açıkça etiketlenmiş yer tutucu alanlar, ardından hâlâ gereken gerçek görsellerin bir liste halinde kapanışı.

Örnek istemi görün ↗

Nasıl Çalışır

01
Her Şeyden Önce Brief'i Okuyun
Ajan, varsayılan bir estetiğe atlamak yerine, kullanıcının gerçekte ne istediğini sayfa türünden, hava kelimelerinden, referanslardan, hedef kitleden, mevcut marka varlıklarından ve sessiz kısıtlamalardan çıkarır.
02
Üç Kadranı Ayarlayın
Temel değer 8 / 6 / 4'tür ve tasarım okumasına göre sohbet içinde geçersiz kılınır. Kamu sektörü hizmetinden (3 / 2 / 5) ajans açılış sayfasına (9 / 8 / 3) kadar kullanım durumuna göre ön ayarlar mevcuttur.
03
Bir Temeli Dürüstçe Seçin
Brief, Microsoft, IBM, GitHub, Shopify, Atlassian veya kamu sektörü gibi okunuyorsa, CSS'ini elle yeniden oluşturmak yerine resmi paketi kurup kullanın.
04
Varsayılan Yığını Uygulayın
Server Components ile React veya Next.js, Tailwind v4 ve motion/react'ten içe aktarılan Motion; animasyon, istemci yaprak bileşenlerinde izole edilir.
05
Uçuş Öncesi Kontrolü Çalıştırın
Herhangi bir kod çıkarılmadan önce, Bölüm 14 matrisindeki her kutu geçmelidir; işaretlenmemiş tek bir kutu, işin tamamlanmadığı anlamına gelir.

02 Uyumunuzu bulun

design-taste-frontend Skill'i Ne Zaman Kullanılır

Bu türden UI tasarımı işi olduğunda Claude Code veya Codex'te design-taste-frontend becerisini kullanın. Uygunluk ve sınırlar aşağıda becerinin kendi dosyasından alınmıştır.

İyi Uyum

Açılış sayfaları, portföyler ve yeniden tasarımlar; kesinlikle panolar, veri tabloları veya çok adımlı ürün arayüzleri değil.
Markanın ayakta kalması gereken yeniden tasarım işleri: önce denetim, marka token'larını çıkarma, yeniden hayal etmek yerine kademeli evrim.
Resmi tasarım sisteminin beklendiği kamu sektörü ve güven odaklı hizmetler; burada kadranlar kısıtlı bir 3 / 2 / 5'e düşer.
Palet, önceki projenin sıcak-el işi ailesinden uzaklaştığı sürece premium tüketici brief'leri.

Sınırları Bilin

Panolar, yoğun ürün arayüzleri ve yönetici panelleri; bunlar yerine Fluent, Carbon, Atlassian veya Polaris'e aittir.
Veri tabloları kapsam dışıdır ve TanStack Table veya AG Grid kullanılmalıdır.
Web için resmi bir Apple Liquid Glass paketi yoktur; herhangi bir uygulama yalnızca bir yaklaşım olarak etiketlenebilir.
Proje başına tek bir tasarım sistemi: Fluent React ve Carbon aynı ağacı paylaşamaz ve shadcn/ui bileşenleri bir Material 3 uygulamasına eklenemez.

Ne Sağlamalısınız

Brief'in kendi kelime dağarcığıVibe kelimeleri kadran çıkarımını yönlendirdiğinden, minimalist, brutalist, Apple tarzı veya ciddi B2B gibi kelimeler kullanıcının kendi ifadesiyle aktarılmalıdır.
Yeniden tasarımlar için mevcut marka varlıklarıLogo, renk, tipografi ve fotoğrafçılık isteğe bağlı bir girdi değil, başlangıç malzemesi olarak ele alınır; koruma modunun çalışmasını sağlayan da budur.
Sessiz kısıtlarErişilebilirlik odaklı hedef kitleler, kamu sektörü, düzenlenmiş sektörler, güven odaklı ticaret ve çocuk ürünleri estetik tercihi tamamen geçersiz kılar.

03 Skill'in içinde

design-taste-frontend Skill'inin 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ı.

Sıfır em-dash
Em-dash karakteri sayfanın her yerinde yasaktır: başlıklar, eyebrow'lar, pill'ler, gövde metni, alıntılar, atıf, altyazılar, buton metni ve alt metin.
Önce package.json'u Kontrol Edin
Herhangi bir üçüncü taraf kitaplığı içe aktarmadan önce, package.json'da var olduğunu doğrulayın ve eksikse kurulum komutunu yazdırın. Bir kitaplığın mevcut olduğunu asla varsaymayın.
Eyebrow'u Sınırlayın
Her üç bölüme en fazla bir bölüm başlığının üzerinde küçük büyük harfli bir izleme etiketi bulunur ve hero bir bölüm sayılır, yani dokuz bölümlük bir sayfada en fazla üç adet olabilir.
Hero Yığınını Sınırlayın
Hero başlığı masaüstünde en fazla 2 satırdır ve alt metin en fazla 20 kelimedir; CTA'lar kaydırma yapılmadan görünür olmalıdır.
Asla h-screen Kullanmayın
Tam yükseklikteki hero bölümleri, iOS Safari adres çubuğu hareket ettiğinde düzenin sıçramasını önlemek için h-screen yerine min-h-[100dvh] kullanır.
State Değil, Motion Değerleri
Fare konumu, kaydırma ilerlemesi ve manyetik hover gibi girdilerle yönlendirilen sürekli değerler, asla useState üzerinden değil, useMotionValue ve useTransform üzerinden çalışmalıdır.
Yasaklı İki Display Serif
Serif varsayılan olarak kullanılması büyük ölçüde caydırılır ve Fraunces ile Instrument_Serif, LLM'lerin favori olduğu iki display serif olarak özellikle yasaklanmıştır.
Tek Bir Sayfa Temasını Kilitleyin
Sayfa düzeyinde açık, koyu veya otomatik seçin ve kilitleyin. Aynı tema ailesi içinde bölüm düzeyinde tonlar sorun değildir, ancak hiçbir bölüm kaydırma ortasında ters moda geçmez.

04 İşe koyun

design-taste-frontend'i Claude Code veya Codex'e Kur

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

design-taste-frontend'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 design-taste-frontend

skills/taste-skill/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], aimed at [audience, e.g. technical buyers at mid-size companies]. The vibe should be [minimalist / premium consumer / agency-y] and here are my references: [URLs or screenshots]. It is a redesign, so preserve the existing brand colors and keep the nav labels as they are.

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:

Kod çıkarmadan önce Bölüm 14 matrisinin tamamını çalıştırın; bu son filtredir ve her kutunun dürüstçe işaretlenmesi gerekir.
Tüm bileşenlerde bölüm başlıklarının üstündeki büyük harfli mikro etiketleri sayın ve toplamın her üç bölümde birden fazla olmadığını doğrulayın.
Görevi tamamlandı olarak bildirmeden önce sayfadaki her görünür metni yeniden okuyun; bozuk dilbilgisini, belirsiz göndermeleri ve sahte derin metinleri işaretleyin.
Sayfayı bitmiş kabul etmeden önce Lighthouse'u çalıştırın; LCP 2.5s'nin altında, INP 200ms'nin altında ve CLS 0.1'in altında olmalı.
Geliştirme sırasında sayfayı hem açık hem koyu modda açın ve yalnızca birinde görülmüş bir sayfayı asla yayınlamayın.
Kullanıcıya görünen herhangi bir yerde tek bir em-dash veya en-dash bulunması Pre-Flight Check'i başarısız kılar ve yeniden yazımı gerektirir.

OpenDesign'da design-taste-frontend paketlenmiş halde gelir: Plugins → Skills, ü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/taste-skill/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit ccbc156
License: MIT LICENSE dosyasından.
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 depoda katalogdaki 11 skill bulunmaktadır. design-taste-frontend 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

0. BRIEF ÇIKARIMI (Her Şeyden Önce Ortamı Okuyun)Sayfa türünü, hava sözcüklerini, kitleyi ve sessiz kısıtları çıkarır, ardından tek satırlık bir Tasarım Okuması belirtir.
1. ÜÇ KADRAN (Temel Yapılandırma)DESIGN_VARIANCE, MOTION_INTENSITY ve VISUAL_DENSITY'yi çıkarım tablosu ve kullanım senaryosu ön ayarlarıyla ayarlar.
2. BRIEF → TASARIM SİSTEMİ EŞLEMESİBrief'leri Fluent veya GOV.UK gibi resmi paketlere eşler, ya da estetiği dürüstçe etiketler.
3. VARSAYILAN MİMARİ VE KURALLARResmi bir sistem kullanılmadığında yığın, durum, ikonlar, emoji, duyarlılık ve bağımlılık varsayılanları.
4. TASARIM MÜHENDİSLİĞİ DİREKTİFLERİ (Önyargı Düzeltmesi)Tipografi, renk, düzen, materyalite, UI durumları, hero disiplini, görsel

Skill'in Kendi Açıklaması

"Açılış sayfaları, portföyler ve yeniden tasarımlar için anti-slop frontend becerisi. Ajan brief'i okur, doğru tasarım yönünü çıkarır ve şablonvari görünmeyen arayüzler sunar. Uygulanabilir olduğunda gerçek tasarım sistemleri, yeniden tasarımlarda önce denetim, katı uçuş öncesi kontrol."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 87.126 karakterdir. Dosyanın tamamını GitHub'da okuyun.

Tasarım Duygusu Frontend

Gerçek bir UI Tasarım Görevi üzerinde design-taste-frontend'i çalıştırın.

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

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

Terminal

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

design-taste-frontend Skill'inin Claude Code ve Codex'te Yaptıkları

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

design-taste-frontend Skill'i Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

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

Sıfır em-dash

Önce package.json'u Kontrol Edin

Eyebrow'u Sınırlayın

Hero Yığınını Sınırlayın

Asla h-screen Kullanmayın

State Değil, Motion Değerleri

Yasaklı İki Display Serif

Tek Bir Sayfa Temasını Kilitleyin