# Frontend Design Stack

> Orchestrates a layered frontend design workflow using five external skills (frontend-design, high-end-visual-design, design-taste-frontend, awwwards-animations, ui-ux-pro-max) plus human-saas-ui guardrails. Use when building or polishing landing pages, marketing sites, or SaaS UI and the user wants a non-template, expensive-looking result without calling all design skills at once; or when they mention design stack, layered UI, or Burak-style five-skill setup.

- Skill: `oguzakkuss/frontend-design-stack` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add oguzakkuss/frontend-design-stack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oguzakkuss/frontend-design-stack/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: oguzakkuss (https://skillmd.com/u/oguzakkuss)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/oguzakkuss/frontend-design-stack

---


# 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](https://app.notion.com/p/AI-Yapm-Dedirtmeyen-5-Tasar-m-Skill-i-TASARIM-3b07052abbb48159bac1dfc3c1eb37c9) (burak.build). Harici skill içerikleri vendor edilmez; `npx skills add` ile kurulur.

## Önkoşul

Harici skill’ler yoksa önce [references/install.md](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](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](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ı

1. Skill adlarını prompt’ta / adımda açıkça an.
2. Beş harici skill’i paralel tek shot’ta çağırma.
3. Her adımdan sonra dur; kullanıcı beğenmediyse sonraki adıma taşıma.
4. Var olan site: önce Adım 4 denetim listesi, sonra sırayla düzelt.
5. `human-saas-ui` ile çelişen motion/dekorasyonu kes (conflicts.md).

## Progressive disclosure

- Kurulum komutları → [references/install.md](references/install.md)
- Prompt şablonları → [references/prompt-flow.md](references/prompt-flow.md)
- human-saas-ui çatışmaları → [references/conflicts.md](references/conflicts.md)