FHO adlı üyeden alıntı: mesajı görüntüle
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;
  1. ui-ux-pro-max: Stil, renk, font ve UX kuralı seçer. Her tasarım işi bununla başlar.
  2. frontend-design: Tasarıma yön verir, "AI yapmış" görüntüsünü engeller.
  3. impeccable: Arayüzü denetler, eleştirir ve cilalar.
  4. design-dna: Referans görselden veya siteden tasarım profili çıkarır.
  5. 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ışı.
Hocam çok güzel söylüyorsnuz. Ancak mesela ben stilleri kütüphaneye nasıl eklicem ?
Ya da en azından bazı detaylar için bunları nasıl direkt olarak tasarıma verip işleme alıcam ve sonuçlar oluşturcam.
İşte tam olarak sorun burada yani.