00 · Ne işe yarar
Jenerik siteden ödüllü seviyeye
Claude'a "bir landing page yap" diyince neden hep aynı şablonu alıyorsunuz? Çünkü Claude tasarım kararı vermek için yeterli bağlam görmüyor. UI/UX Pro Max, bu bağlamı hazır getiren açık kaynak bir skill — 96 bin+ GitHub yıldızı, MIT lisansı, bedava.
Bu bir prompt hilesi değil; aranabilir veri tabanları olan gerçek bir tasarım sistemi. Claude'a kurunca projenizi analiz edip stili, paleti, fontu ve UX'i size özel kurar.
01 · 60 saniyede nasıl çalışır
Kur, iste, çıksın
skill olmadan
Claude → jenerik şablon. Herkesin sitesiyle aynı renk, aynı düzen, aynı his.
skill kurulduktan sonra
Claude projenizi analiz eder, uygun stili + paleti + fontu seçer, neden seçtiğini açıklar — premium, kişiye özel sonuç çıkar.
İki kurulum yolu var: CLI (önerilen) ve plugin marketplace. Her ikisi de 2 dakika.
02 · İçindeki güç
Rakamlar yalan söylemez
Skill'i güçlü yapan, içinde gezdiği hazır tasarım veri tabanları. Claude bunlardan projenize uyanı seçer; siz sıfırdan stil/renk/font kararı vermek zorunda kalmazsınız.
- 67 UI stili — minimalizm, brutalizm, bento, dark mode...
- 161 renk paleti — her biri bir ürün tipine eşli
- 57 font eşleşmesi — başlık + gövde uyumu hazır
- 99 UX kuralı — erişilebilirlik, hiyerarşi, durumlar
- 25 grafik tipi — dashboard ve veri görselleştirme
- 17 tech stack — React, Next, Vue, Svelte, Tailwind, shadcn...
Kurulum komutları ve kopyala-kullan prompt örnekleri hemen aşağıda.
03 · Kurulum
İki yol — birini seç, kopyala, çalıştır
Her iki yol da ücretsiz. CLI yolu daha hızlı; plugin yolu mevcut Claude oturumuna direkt ekler.
$ npm install -g uipro-cli
$ uipro init --ai claude
# İki komut — kurulum tamamdır/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
# Claude'un araç/eklenti panelinden direktRepo: github.com/nextlevelbuilder/ui-ux-pro-max-skill — MIT lisanslı, açık kaynak, 96 bin+ yıldız.
04 · Hazır promptlar — kopyala kullan
Kurulduktan sonra Claude'a ne yazarsın?
Sıfırdan tasarım brief'i yazmanıza gerek yok. Aşağıdaki üç prompt — yeni site, redesign ve dashboard — için kopyalayın, yapıştırın, üstüne ekleyin.
UI/UX Pro Max'i kullanarak [ürünüm] için ödüllü seviyede bir landing page kur. Bana uygun stili, renk paletini ve font eşleşmesini sen seç ve neden seçtiğini kısaca açıkla. Next.js + Tailwind kullan.Bu sayfa jenerik duruyor. UI/UX Pro Max'in stil ve UX kurallarıyla yeniden tasarla: hiyerarşi, boşluk, tipografi ve renk paletini düzelt; mobil uyumlu olsun.UI/UX Pro Max ile bir analytics dashboard tasarla. Uygun grafik tiplerini ve veri paletini öner, shadcn/ui bileşenleriyle kur, koyu mod desteği ekle.05 · İlham — örnek ödüllü siteler
Hedef bu seviye
Bu skill ile tam olarak hangi seviyeye çıkabileceğinizi görmek için referans alın. Aşağıdaki siteler kayan, dönen, etkileşimli animasyonlarıyla ödül kazandı. Bunlar birer hedef ve ilham; "şu sitenin hissini ver" diyerek Claude'a tarif edebilirsiniz.
Zentry — awwwards.com/sites/zentry
Awwwards Ayın Sitesi (Ağustos 2024). Kaydırmayla tetiklenen sahneler, geometrik clip-path geçişleri, video ile hikâye anlatımı. Bunu bir ajans yaptı — siz aynı tarzı/hissi hedef alıp Claude'a tarif edebilirsiniz.
Ödüllü animasyon tekniklerini öğren
Awwwards Ayın Sitesi seviyesinde animasyonlu sitenin nasıl yapıldığını adım adım gösteren açık kaynak kurs repoları GitHub'da mevcut. "award-winning-website" anahtar kelimesiyle aratın. Bu tekniklerin (GSAP scroll, clip-path) kod tarafını görmek isterseniz başlangıç noktası.
GSAP animasyon galerisi — awwwards.com/websites/gsap-animation
Bu seviyedeki sitelerin çoğu GSAP ile yapılır. Galeriden beğendiğiniz bir hareketi seçin, Claude'a 2-3 cümleyle tarif edin: skill o hissi yeniden kurar — kodu kopyalamadan, özgün biçimde.
06 · frontend-design'dan farkı ne?
İkisi de işe yarar — ama aynı şey değil
frontend-design daha çok bir yön tarifi: "jenerik olma, bir stil seç." Yarım milyona yakın kuruluma ulaştı; artık herkeste var — bu yüzden tek başına sizi kalabalıktan ayırmıyor.
UI/UX Pro Max gerçek tasarım sistemi: 67 stil, 161 palet, 57 font, 99 UX kuralının olduğu aranabilir veri tabanı. Karar verir, gerekçe verir — jenerik değil, size özel sonuç çıkarır.
Dürüst not: iyi prompt ve birkaç tur düzeltme gerekir; sihir değil, ama fark gece-gündüz.