oguzakkuss Frontend Design Stack
Bu skill yönetmendir: beş harici tasarım skill’ini + human-saas-ui kalite kapısını katman katman çalıştırır. Beşini tek prompt’ta çağırma — çıktı yine ortalama kalır.
Kaynak akış: “AI Yapmış” Dedirtmeyen 5 Tasarım Skill’i (burak.build). Harici skill içerikleri vendor edilmez; npx skills add ile kurulur.
Önkoşul
Harici skill’ler yoksa önce references/install.md kurulumunu uygula / kullanıcıya yaptır. Sonra Cursor oturumunu yenile.
Yerel kalite kapısı: projede veya ~/.cursor/skills/ altında human-saas-ui olmalı.
Doğru sıra (değiştirme)
| # | Skill | Rol |
|---|---|---|
| 1 | frontend-design |
Yön: tipografi, palet, yerleşimde bilinçli seçim (iskelet) |
| 2 | high-end-visual-design |
“Pahalı” ölçü kuralları: font, boşluk, gölge, kart, geçiş |
| 3 | design-taste-frontend |
AI klişesini kır: mor gradient, her şey ortalı, aynı kart dizilimi |
| 4 | awwwards-animations |
Ölçülü hareket (React): scroll reveal, Lenis — abartma |
| 5 | ui-ux-pro-max |
Denetim: tutarlılık, kontrast, tipografi, UX kuralları |
| + | human-saas-ui |
Senin kırmızı çizgin: anti-slop, muted SaaS, landing anti-template |
Ters sırada gitme: animasyon bozuk iskelete biner; denetim katmanını başta yakarsın.
İş akışı (tek sayfa)
Detaylı prompt şablonları: references/prompt-flow.md.
Adım 0 — Brief (tasarım isteme)
Kim, ne hissettirmeli, hangi bölümler, ana CTA."Bana landing yap" yerine ürün + kitle + amaç.
Adım 1 — İskelet
frontend-design + high-end-visual-design (+ bu stack).
Bölüm sırası, hiyerarşi, tipografi ölçeği, boşluk ritmi. Animasyon yok.
Adım 2 — Özgünleştir
design-taste-frontend.
Bariz AI tercihlerini değiştir; bilinçli yön seç ve nedenini tek cümleyle yaz.
Adım 3 — Hareket (opsiyonel)
awwwards-animations — sadece iskelet + özgünlük oturduysa.
Kurallar: references/conflicts.md.
Hero’da kademeli giriş, bölüm reveal, yumuşak scroll. Her bölüme ayrı efekt / ağır parallax / scroll-jack yok.
Adım 4 — Denetim
ui-ux-pro-max üretim için değil, denetim için.
Uymayanları listele → düzelt. Ardından veya aynı turda human-saas-ui anti-slop checklist’ini uygula.
Agent kuralları
- Skill adlarını prompt’ta / adımda açıkça an.
- Beş harici skill’i paralel tek shot’ta çağırma.
- Her adımdan sonra dur; kullanıcı beğenmediyse sonraki adıma taşıma.
- Var olan site: önce Adım 4 denetim listesi, sonra sırayla düzelt.
human-saas-uiile çelişen motion/dekorasyonu kes (conflicts.md).
Progressive disclosure
- Kurulum komutları → references/install.md
- Prompt şablonları → references/prompt-flow.md
- human-saas-ui çatışmaları → references/conflicts.md