frontend_design
Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill frontend_designInstructions
Loading…
Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.
npxskills add vuralserhat86/antigravity-agentic-skills--skill frontend_designLoading…
Distinctive, production-grade UI. "AI slop" estetikten kaçın.
| Adım | Soru |
|---|---|
| Purpose | Bu interface hangi sorunu çözüyor? |
| Audience | Kim kullanacak? |
| Tone | Hangi estetik? (aşağıdan seç) |
| Unforgettable | Neyi hatırlayacaklar? |
| 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 |
| ❌ KAÇIN | ✅ TERCİH ET |
|---|---|
| Inter, Roboto, Arial | Distinctive display fonts |
| System fonts | Unique pairings |
| ❌ KAÇIN | ✅ TERCİH ET |
|---|---|
| Purple gradient on white | Dominant + sharp accent |
| Generic palettes | CSS variables, cohesive theme |
Focus: High-impact moments
- Staggered page load reveals
- Scroll-triggered animations
- Surprising hover states
✅ Asymmetry · Overlap · Diagonal flow
✅ Grid-breaking · Generous negative space
❌ Predictable layouts · Cookie-cutter patterns
Frontend Design v1.1 - Enhanced
Kaynak: Refactoring UI & Awwwards Evaluation
line-height) ve harf aralığını (letter-spacing) ayarla.| 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ü? |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).