name: frontend_design
router_kit: FullStackKit
description: Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.
metadata:
skillport:
category: frontend
tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, frameworks, frontend, frontend design, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - frontend-design
🎨 Frontend Design (Premium)
Distinctive, production-grade UI. "AI slop" estetikten kaçın.
⚡ Pre-Design Checklist
| Adım |
Soru |
| Purpose |
Bu interface hangi sorunu çözüyor? |
| Audience |
Kim kullanacak? |
| Tone |
Hangi estetik? (aşağıdan seç) |
| Unforgettable |
Neyi hatırlayacaklar? |
🎭 Aesthetic Directions
| Stil |
Özellik |
| Brutally Minimal |
Beyaz boşluk, az element |
| Maximalist |
Yoğun, katmanlı, bold |
| Retro-Futuristic |
Neon, gradient, 80s vibes |
| Luxury/Refined |
Premium, altın/siyah |
| Editorial |
Dergi layoutu, tipografi odaklı |
| Playful |
Pastel, rounded, animations |
| Industrial |
Raw, monospace, utility-first |
🎯 Guidelines
Typography
| ❌ KAÇIN |
✅ TERCİH ET |
| Inter, Roboto, Arial |
Distinctive display fonts |
| System fonts |
Unique pairings |
Color
| ❌ KAÇIN |
✅ TERCİH ET |
| Purple gradient on white |
Dominant + sharp accent |
| Generic palettes |
CSS variables, cohesive theme |
Motion
Focus: High-impact moments
- Staggered page load reveals
- Scroll-triggered animations
- Surprising hover states
Composition
✅ Asymmetry · Overlap · Diagonal flow
✅ Grid-breaking · Generous negative space
❌ Predictable layouts · Cookie-cutter patterns
📋 Output Requirements
Frontend Design v1.1 - Enhanced
🔄 Workflow
Kaynak: Refactoring UI & Awwwards Evaluation
Aşama 1: Visual Hierarchy
Aşama 2: Implementation Details
Aşama 3: Polish
Kontrol Noktaları
| Aşama |
Doğrulama |
| 1 |
Siteye ilk giren 3 saniye içinde "Vay be" diyor mu? |
| 2 |
Renk paleti 3-4 ana renkle sınırlı mı? |
| 3 |
Mobilde parmakla tıklanabilir alanlar yeterince büyük mü? |
1---2name: frontend-design-473description: > Distinctive, production-grade UI. "AI slop" estetikten kaçın.4---5
6---
7name: frontend_design
8router_kit: FullStackKit
9description: Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.
10metadata:
11 skillport:
12 category: frontend
13 tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, frameworks, frontend, frontend design, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - frontend-design
14---
15
16# 🎨 Frontend Design (Premium)
17
18> Distinctive, production-grade UI. "AI slop" estetikten kaçın.
19
20---
21
22## ⚡ Pre-Design Checklist
23
24| Adım | Soru |
25|------|------|
26| **Purpose** | Bu interface hangi sorunu çözüyor? |
27| **Audience** | Kim kullanacak? |
28| **Tone** | Hangi estetik? (aşağıdan seç) |
29| **Unforgettable** | Neyi hatırlayacaklar? |
30
31---
32
33## 🎭 Aesthetic Directions
34
35| Stil | Özellik |
36|------|---------|
37| Brutally Minimal | Beyaz boşluk, az element |
38| Maximalist | Yoğun, katmanlı, bold |
39| Retro-Futuristic | Neon, gradient, 80s vibes |
40| Luxury/Refined | Premium, altın/siyah |
41| Editorial | Dergi layoutu, tipografi odaklı |
42| Playful | Pastel, rounded, animations |
43| Industrial | Raw, monospace, utility-first |
44
45---
46
47## 🎯 Guidelines
48
49### Typography
50| ❌ KAÇIN | ✅ TERCİH ET |
51|----------|-------------|
52| Inter, Roboto, Arial | Distinctive display fonts |
53| System fonts | Unique pairings |
54
55### Color
56| ❌ KAÇIN | ✅ TERCİH ET |
57|----------|-------------|
58| Purple gradient on white | Dominant + sharp accent |
59| Generic palettes | CSS variables, cohesive theme |
60
61### Motion
62```
63Focus: High-impact moments
64- Staggered page load reveals
65- Scroll-triggered animations
66- Surprising hover states
67```
68
69### Composition
70```
71✅ Asymmetry · Overlap · Diagonal flow
72✅ Grid-breaking · Generous negative space
73❌ Predictable layouts · Cookie-cutter patterns
74```
75
76---
77
78## 📋 Output Requirements
79
80- [ ] Production-grade, functional code
81- [ ] Visually striking & memorable
82- [ ] Clear aesthetic point-of-view
83- [ ] Meticulously refined details
84
85---
86
87*Frontend Design v1.1 - Enhanced*
88
89## 🔄 Workflow
90
91> **Kaynak:** [Refactoring UI](https://www.refactoringui.com/) & [Awwwards Evaluation](https://www.awwwards.com/jury-member/evaluation-system)
92
93### Aşama 1: Visual Hierarchy
94- [ ] **Scale**: Önemli elementleri daha büyük değil, *çok* daha büyük yap.
95- [ ] **Contrast**: Renk kontrastını kullanarak dikkati yönlendir.
96- [ ] **WhiteSpace**: Boşluğu bir element gibi aktif kullan (Nefes aldır).
97
98### Aşama 2: Implementation Details
99- [ ] **Animation**: Micro-interaction'lar ekle (Buton hover, Page transition).
100- [ ] **Images**: Görselleri optimize et (WebP, Lazy Load) ve aspect-ratio koru.
101- [ ] **Typography**: Satır yüksekliği (`line-height`) ve harf aralığını (`letter-spacing`) ayarla.
102
103### Aşama 3: Polish
104- [ ] **Consistency**: Padding ve Margin değerleri bir sistemden (Design Tokens) mi geliyor?
105- [ ] **Responsive**: Sadece küçülmekle kalmayıp, layout değişiyor mu?
106
107### Kontrol Noktaları
108| Aşama | Doğrulama |
109|-------|-----------|
110| 1 | Siteye ilk giren 3 saniye içinde "Vay be" diyor mu? |
111| 2 | Renk paleti 3-4 ana renkle sınırlı mı? |
112| 3 | Mobilde parmakla tıklanabilir alanlar yeterince büyük mü? |
majiayu000