high-end-visual-designyazan Leonxlnx

High End Visual Design Skill.

Claude Code ve Codex için UI tasarım skill'i: üst düzey ajans detayı öğretir: tipografi, boşluk, gölgeler, kartlar ve hareket.

Web & UI

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

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

--- name: high-end-visual-design description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 10.545 karakter

01 Ne yapar

high-end-visual-design 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, kodlama ajanlarına tam olarak tipografik seçimler, mekânsal ritim, gölge teknikleri, kart yapıları ve akıcı hareket desenleri tanımlayarak 150.000$+ ajans seviyesinde görsel tasarım üretmeyi öğretir. Jenerik varsayılanları (Inter, Roboto, kalın çizgili ikonlar, sert gölgeler, standart geçişler) yasaklar ve Geist veya Clash Display gibi premium alternatifleri, ultra ince ikonları ve özel cubic-bezier geçişlerini zorunlu kılar.

Her çıktı, tekrarı önlemek için benzersiz bir Vibe Archetype'ı (Ethereal Glass, Editorial Luxury veya Soft Structuralism) bir Layout Archetype ile (Asymmetrical Bento, Z-Axis Cascade veya Editorial Split) birleştirmelidir. Bileşenler iç içe geçmiş Double-Bezel çevreleri, Button-in-Button sondaki ikonları, devasa boşlukları (py-24 ile py-40 arası) ve kaydırmayla enterpole edilen giriş animasyonlarını kullanır. Tüm hareket, gerçek dünya fiziğini sadece transform ve opacity üzerinden simüle eder ve mobil için katı performans korumaları içerir.

Neler üretir

Seçilen Vibe ve Layout Arketiplerini, Double-Bezel bileşen yapıları, özel cubic-bezier hareketleri ve mobil-duyarlı daralma ile uygulayan kusursuz, piksel mükemmeliyetinde React/Tailwind/HTML kodu

Örnek istemi görün ↗

Nasıl Çalışır

01
Variance Engine'i Çalıştır
Kod yazmadan önce, ajan promptun bağlamına göre önceden tanımlanmış premium kombinasyonlar arasından sessizce bir Vibe Arketipi ve bir Layout Arketipi seçer; böylece benzersiz şekilde uyarlanmış bir çıktı sağlanır.
02
Arka Plan ve Tipografiyi İskelele
Seçilen dokuyu (radyal gradyanlı OLED siyahı, gürültü katmanlı sıcak krem tonları veya yumuşak gölgeli gümüş-gri) oluşturun ve abartılı makro-boşluklarla birlikte devasa tipografi boyutları belirleyin.
03
İç İçe Bileşen Yapıları Kurgula
Tüm ana kartları, girişleri ve gridleri Double-Bezel tekniğiyle oluşturun: ince çizgili kenarlık ve dolgu içeren dış kabuk, kendi arka planına ve matematiksel olarak hesaplanmış daha küçük bir yarıçapa sahip iç çekirdeği sarar.
04
Akışkan Hareketi Koreografla
Tüm durum değişiklikleri için özel cubic-bezier geçişleri, translate-y ve opaklık değişimleriyle kademeli navigasyon açılımları ve çapraz öteleme ile ölçeklendirme içeren manyetik buton hover fiziği ekleyin.
05
Kaydırma Interpolasyonu Uygula
Öğeler görünüm alanına, pencere kaydırma dinleyicileri değil, IntersectionObserver veya Framer Motion'ın whileInView özelliğini kullanarak 800ms+ süre boyunca çözülen yumuşak bir fade-up animasyonuyla (translate-y-16 blur-md opacity-0) girer.
06
Çıktı Öncesi Kontrol Listesine Göre Doğrula
Teslimattan önce kodu; yasaklı desenlerin bulunmaması, doğru arketip seçimi, Double-Bezel mimarisi, özel easing, mobil daralma ve GPU-güvenli animasyonları güvence altına alan 11 maddelik bir matrise göre değerlendirin.

02 Uyumunuzu bulun

high-end-visual-design Skill ne zaman kullanılır

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

İyi Uyum

SaaS, AI, teknoloji, yaşam tarzı, emlak, tüketici, sağlık veya portfolyo projeleri için, takıntılı mikro-etkileşimler ve sinematik uzamsal ritim gerektiren, $150k+ ajans seviyesinde dijital deneyimler tasarlama
Özel cubic-bezier geçişleri ve kaydırmayla interpolasyonlu giriş animasyonlarıyla haptik derinlik ve kusursuz akışkan hareket yayması gereken arayüzler oluşturma

Sınırları Bilin

Tipografi olarak Inter, Roboto, Arial, Open Sans veya Helvetica gerektiren projeler bu skill'i kullanamaz
Standart kalın çizgili Lucide, FontAwesome veya Material Icons gerektiren tasarımlar, bu skill'in ultra-ince ikon gereksinimiyle uyumsuzdur
Üste yapışık, kenardan kenara sticky navbarlara veya devasa boşluk aralıkları olmadan simetrik 3 sütunlu Bootstrap tarzı gridlere sahip arayüzler, layout kısıtlarını ihlal eder
Standart linear veya ease-in-out geçişler kullanan veya interpolasyon olmadan anlık durum değişiklikleri içeren hareket desenleri açıkça yasaktır

Ne Sağlamalısınız

Arketip seçimi için prompt bağlamıKullanıcı isteği proje türünü (SaaS, yaşam tarzı, portfolyo vb.) belirtmelidir; böylece ajan Variance Engine'den uygun Vibe ve Layout Arketip kombinasyonunu seçebilir.

03 Skill'in içinde

high-end-visual-design 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ı.

Tüm Genel Varsayılanları Yasakla
Inter, Roboto, Arial, Open Sans, Helvetica, kalın çizgili Lucide veya Material Icons, 1px solid gray kenarlıklar, sert drop shadow'lar (shadow-md, rgba(0,0,0,0.3)), kenardan kenara sticky navbarlar, simetrik Bootstrap gridleri veya linear/ease-in-out geçişleri asla kullanmayın.
Aynı Layoutu İki Kez Asla Tekrarlama
Ajan, seçkin tasarım diline sıkı sıkıya bağlı kalırken farklı premium yerleşim arketiplerini ve doku profillerini dinamik olarak birleştirmeli, hiçbir iki çıktının birbirinin aynısı görünmemesini sağlamalıdır.
Yalnızca Premium Tipografi ve İkon Kullanın
Fontlar için Geist, Clash Display, PP Editorial New veya Plus Jakarta Sans'ın kullanılabilir olduğunu varsayın. Yalnızca Phosphor Light veya Remix Line gibi ultra ince, kesin ikon çizgileri kullanın.
Tüm Ana Bileşenlere Double-Bezel Uygulayın
Premium kartları veya konteynerleri asla düz yerleştirmeyin.
Makro boşluk için Standart Dolguyu İkiye Katlayın
Tasarımın rahatça nefes almasına izin vermek için bölüm dolgusu olarak py-24 ile py-40 arasını kullanın. Standart dolgu premium hissi vermek için yetersizdir.
Yalnızca Transform ve Opacity'yi Animasyonlandırın
top, left, width veya height'ı asla animasyonlandırmayın, çünkü bunlar layout yeniden hesaplamalarını tetikler. GPU hızlandırmalı, performans açısından güvenli hareket için yalnızca transform ve opacity kullanın.
backdrop-blur'ı Yalnızca Sabit Elemanlarla Sınırlayın
backdrop-blur'ı yalnızca navbar'lar ve overlay'ler gibi fixed veya sticky elemanlara uygulayın.
768px Altında Tüm Asimetrik Yerleşimleri Daraltın
md: breakpoint'inin üzerindeki herhangi bir asimetrik yerleşim, 768px altındaki görünüm alanlarında agresif bir şekilde w-full, px-4, py-8'e geri dönmelidir.

04 İşe koyun

Claude Code veya Codex'e high-end-visual-design 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 high-end-visual-design 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 high-end-visual-design

skills/soft-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

Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

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:

Yasaklı fontların (Inter, Roboto, Arial, Open Sans, Helvetica), ikonların (kalın çizgili Lucide, FontAwesome, Material), kenarlıkların (1px solid gray), gölgelerin (shadow-md, sert drop shadow'lar), yerleşimlerin (kenardan kenara sabit navbar'lar, simetrik gridler) veya hareket kalıplarının (linear, ease-in-out) bulunmadığını doğrulayın
Bir Vibe Arketipinin (Ethereal Glass, Editorial Luxury veya Soft Structuralism) ve Layout Arketipinin (Asymmetrical Bento, Z-Axis Cascade veya Editorial Split) bilinçli olarak seçilip uygulandığını teyit edin
Tüm ana kartların ve konteynerlerin, dış kabuğu (kılcal kenarlık, dolgu, büyük radius) iç çekirdeği (farklı arka plan, daha küçük hesaplanmış radius) saran Double-Bezel iç içe mimarisini kullandığını kontrol edin
Bölüm dolgusunun en az py-24 olduğundan ve yerleşimin abartılı makro boşlukla nefes aldığından emin olun
Tüm geçişlerin özel cubic-bezier eğrileri kullandığını ve linear veya ease-in-out easing'in bulunmadığını doğrulayın
Hiçbir elemanın statik görünmemesi için scroll giriş animasyonlarının mevcut olduğunu ve tüm animasyonların top, left, width veya height gibi layout tetikleyici özellikleri animasyonlandırmadan yalnızca transform ve opacity kullandığını teyit edin

OpenDesign'da high-end-visual-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, sonra ü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/soft-skill/SKILL.md İçerik checksum'ı 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 katalogda yer alan 11 skill bulunmaktadır. high-end-visual-design 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

Meta Bilgiler & Temel DirektifVanguard_UI_Architect kişiliğini, 150.000$+ ajans hedefini ve benzersiz çıktılar gerektiren Variance Mandate'i tanımlar
"ABSOLUTE ZERO" DİREKTİFİ (KESİN KARŞI KALIPLAR)Anında tasarım başarısızlığına neden olan tüm yasaklı fontları, ikonları, kenarlıkları, gölgeleri, yerleşimleri ve hareket kalıplarını listeler
YARATICI VARYASYON MOTORUMobil daralma kurallarıyla benzersiz premium çıktılar için birleştirilecek üç Vibe Arketipi ve üç Layout Arketipi belirtir
HAPTİK MİKRO-ESTETİK (BİLEŞEN USTALIĞI)Double-Bezel iç içe mimariyi, Button-in-Button sondaki ikon desenini ve eyebrow etiketleriyle makro-boşluk mekânsal ritmini ayrıntılandırır
HAREKET KOREOGRAFİSİ (AKIŞKAN DİNAMİKLER)Özel cubic-bezier geçişleri, hamburger dönüşümlü Fluid Island Nav'ı, manyetik buton hover fiziğini ve kaydırma interpolasyon animasyonlarını tanımlar
PERFORMANS KORKULUKLARIAnimasyonu yalnızca transform ve opacity ile sınırlar, backdrop-blur'u sabit öğelerle kısıtlar ve z-index disiplinini zorunlu kılar
YÜRÜTME PROTOKOLÜSessiz arketip seçiminden iskeletleme, mimari, koreografi ve piksel-mükemmel çıktı teslimine kadar tam beş adımlık sırayı sunar
ÇIKIŞ ÖNCESİ KONTROL LİSTESİYasaklı desenlere, arketip uygulamasına, Double-Bezel mimarisine, hareket kalitesine, mobil çöküşe ve performansa karşı on bir zorunlu doğrulama kontrolünü listeler

Skill'in Kendi Açıklaması

"Yapay zekaya üst düzey bir ajans gibi tasarım yapmayı öğretir. Bir web sitesinin pahalı görünmesini sağlayan kesin fontları, aralıkları, gölgeleri, kart yapılarını ve animasyonları tanımlar. Yapay zeka tasarımlarını ucuz veya jenerik göstermeye sebep olan tüm yaygın varsayılanları engeller."

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

06 Kurmadan önce

high-end-visual-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.

Bu skill herhangi bir JavaScript kitaplığı veya framework içeriyor mu?

Skill, görsel tasarım desenlerine odaklanır ve kaydırma reveal'ları için IntersectionObserver veya Framer Motion'ın whileInView özelliğini kullanmayı önerir, ancak bu kitaplıkları içermez veya kurmaz.

Sürekli reflow'lara neden olduğu ve mobil performansı öldürdüğü için window.addEventListener('scroll') kullanılmaması açıkça belirtilir. Animasyon kitaplıklarını kendiniz sağlamanız gerekir.

Üst Düzey Görsel Tasarım

high-end-visual-design'ı gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, high-end-visual-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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

high-end-visual-design Skill'i Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

high-end-visual-design Skill ne zaman kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

high-end-visual-design Skill'in Claude Code ve Codex'e Verdiği Kurallar

Tüm Genel Varsayılanları Yasakla

Aynı Layoutu İki Kez Asla Tekrarlama

Yalnızca Premium Tipografi ve İkon Kullanın

Tüm Ana Bileşenlere Double-Bezel Uygulayın

Makro boşluk için Standart Dolguyu İkiye Katlayın

Yalnızca Transform ve Opacity'yi Animasyonlandırın

backdrop-blur'ı Yalnızca Sabit Elemanlarla Sınırlayın

768px Altında Tüm Asimetrik Yerleşimleri Daraltın