Hocam tasarım skilli olarak eksik, benim kullandıklarımı çıkardım deneyebilirsiniz. En başta ki 5 taneyi %90 kullanıyorum aynı anda sonra ihtiyaca göre aşağıdaki diğer skilleri. Bu arada 5 taneyi ana kütüphaneye kurup otomatik tetiklemeci ve çağırma kelimeleri yazdırabilirsiniz, diğerleri isteğe bağlı olur. Gayet güzel tasarımlar yapıyor bende.
Ana her tasarım işinde kullandığım skiller;
- ui-ux-pro-max: Stil, renk, font ve UX kuralı seçer. Her tasarım işi bununla başlar.
- frontend-design: Tasarıma yön verir, "AI yapmış" görüntüsünü engeller.
- impeccable: Arayüzü denetler, eleştirir ve cilalar.
- design-dna: Referans görselden veya siteden tasarım profili çıkarır.
- motion-design: Animasyonun süresini, hızlanma eğrisini ve sırasını belirler.
Web: stil ve karar da kullanılanlar
6.
ui-styling: Tasarım kararını CSS ve Tailwind ile koda döker.
7.
design-system: Tasarım sistemini ve token yapısını (renk, boşluk gibi ortak değişkenleri) kurar.
8.
frontend-openai-playbook: Landing ve portfolyonun şablon gibi durmasını engeller.
9.
taste-skill: Jenerik görüntüye karşıdır, tasarım yönünü kendisi seçer.
10.
high-end-visual-design: Ajans kalitesinde tipografi, gölge ve boşluk sağlar.
11.
color-expert: Renk paleti, kontrast ve erişilebilirlik.
12.
web-design-guidelines: Vercel'in web tasarım standartları.
13.
theme-factory: Hazır temalardan tema üretir.
14.
shadcn-ui: shadcn/ui bileşen kütüphanesi.
15.
tailwind: Tailwind CSS kalıpları.
İyileştirme ve referans için kullanılanlar
16.
redesign-existing-projects: Var olan siteyi premium seviyeye çıkarır.
17.
design-review: Görsel denetim ve düzeltme yapar, önce/sonra kanıtı üretir.
18.
reference-design-contract: "Şuna benzesin" referansını bağlayıcı plana çevirir.
19.
screenshot-to-code: Resimden veya linkten birebir aynı tasarımı çıkarır.
20.
image-to-code: Görselden kod üretir.
Animasyon için kullanılanlar
21.
gsap: Web animasyon kütüphanesi. Scroll efektleri, zaman çizelgesi ve React kullanımı bunun içinde.
22.
emilkowalski-motion: İnce mikro-etkileşim hissi verir.
Stil yönleri için kullanılanlar
23.
minimalist-ui: Sade, editoryal stil.
24.
industrial-brutalist-ui: Sert, endüstriyel stil.
25.
liquid-glass-design: iOS 26 cam efekti.
3D için kullanılanlar
26.
threejs: Tarayıcıda 3D sahne.
27.
shader-dev: GPU ile görsel efekt kodu.
Mobil için kullanılanlar
28.
apple-hig: Apple tasarım kuralları.
29.
swiftui-design: SwiftUI ekran tasarımı.
30.
platform-design: Tek tasarımı iOS, Android ve web'e uyarlar.
31.
imagegen-frontend-mobile: Kod yazmadan önce ekran konsepti görseli üretir.
32.
paywall-upgrade-cro: Dönüşüm odaklı abonelik ekranı.
33.
login-flow: Giriş ve kayıt akışı.