← スキル一覧に戻る
frontend-design
by vuralserhat86
OS for Agents: 130+ Agentic Skills, Gemini Protocols, and Autonomous Workflows. (Antigravity System)
⭐ 19🍴 9📅 2026年1月23日
Manusで実行SKILL.md
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
- Production-grade, functional code
- Visually striking & memorable
- Clear aesthetic point-of-view
- Meticulously refined details
Frontend Design v1.1 - Enhanced
🔄 Workflow
Kaynak: Refactoring UI & Awwwards Evaluation
Aşama 1: Visual Hierarchy
- Scale: Önemli elementleri daha büyük değil, çok daha büyük yap.
- Contrast: Renk kontrastını kullanarak dikkati yönlendir.
- WhiteSpace: Boşluğu bir element gibi aktif kullan (Nefes aldır).
Aşama 2: Implementation Details
- Animation: Micro-interaction'lar ekle (Buton hover, Page transition).
- Images: Görselleri optimize et (WebP, Lazy Load) ve aspect-ratio koru.
- Typography: Satır yüksekliği (
line-height) ve harf aralığını (letter-spacing) ayarla.
Aşama 3: Polish
- Consistency: Padding ve Margin değerleri bir sistemden (Design Tokens) mi geliyor?
- Responsive: Sadece küçülmekle kalmayıp, layout değişiyor mu?
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ü? |
スコア
総合スコア
60/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
✓説明文
100文字以上の説明がある
+10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です