Bu Beceri

Bu beceri, genel "AI çöpü" estetiğinden kaçınan, ayırt edici, production-grade frontend arayüzleri oluşturmaya rehberlik eder. Estetik detaylara ve yaratıcı seçimlere olağanüstü dikkat ile gerçek çalışan kod uygulayın.

Kullanıcı frontend gereksinimlerini sağlar: yapılacak bir component, sayfa, uygulama veya arayüz. Amaç, hedef kitle veya teknik kısıtlamalar hakkında bağlam içerebilirler.

Tasarım Düşüncesi

Kodlamadan önce bağlamı anlayın ve CESUR bir estetik yöne bağlı kalın:

• Amaç: Bu arayüz hangi problemi çözer? Kim kullanır?
• Ton: Uçlardan birini seçin: acımasız minimalizmden, maksimalist kaosa, retro-futurizmaye, organik/doğal, lüks/rafine, oyuncu/oyuncak benzeri, editoryal/dergi, brutalist/ham, art deco/geometrik, yumuşak/pastel, endüstriyel/kullanışlı, vs. Tercih edebileceğiniz çok sayıda stil var. Bunları ilham için kullanın ama estetik yöne uygun bir tasarım yapın.
• Kısıtlamalar: Teknik gereksinimler (framework, performans, erişilebilirlik).
• Farklılaşma: Bunu UNUTULMAZ kılan nedir? Birinin hatırlayacağı tek şey ne?

KRİTİK: Net bir konseptüel yön seçin ve bunu hassasiyetle uygulayın. Cesur maksimalizm ve rafine minimalizm ikisi de işe yarar - önemli olan niyet, yoğunluk değil.

Daha sonra şu özelliklere sahip çalışan kod (HTML/CSS/JS, React, Vue, vb.) uygulayın:

• Production-grade ve fonksiyonel
• Görsel olarak çarpıcı ve unutulmaz
• Net bir estetik bakış açısı ile uyumlu
• Her detayda titizlikle rafine edilmiş

Frontend Estetikleri Yönergeleri

Şunlara odaklanın:

• Tipografi: Güzel, benzersiz ve ilginç fontlar seçin. Arial ve Inter gibi genel fontlardan kaçının; bunun yerine frontend estetiğini yükselten, beklenmedik ve karakterli font seçimleri tercih edin. Ayırt edici bir display fontunu rafine bir body fontla eşleştirin.
• Renk & Tema: Uyumlu bir estetik anlayışına bağlı kalın. Tutarlılık için CSS değişkenlerini kullanın. Timid, eşit şekilde dağıtılmış paletlerden baskın renkler keskin aksentleri tercih eder.
• Hareket: Efektler ve mikro-etkileşimler için animasyonları kullanın. HTML için CSS-only çözümlerine öncelik verin. React için mevcut olduğunda Motion library'sini kullanın. Yüksek etki anlarına odaklanın: biri iyi orchestrated sayfa yüklemesi, staglenmiş reveals (animation-delay) ile dağınık mikro-etkileşimlerden daha fazla sevinç yaratır. Scroll-triggering ve hover state'lerini kullanın ki şaşırtabilsin.
• Mekânsal Kompozisyon: Beklenmedik düzenler. Asimetri. Üst üste gelme. Diagonal akış. Grid-kırıcı elementler. Cömert negatif alan VEYA kontrollü yoğunluk.
• Arka Planlar & Görsel Detaylar: Sağlam renklere gitmek yerine atmosfer ve derinlik yaratın. Genel estetik ile eşleşen bağlamsal efektler ve dokular ekleyin. Gradient mesh'ler, gürültü dokular, geometrik desenler, katmanlı transparanslar, dramatik gölgeler, dekoratif sınırlar, özel cursor'lar ve grain overlay'ler gibi yaratıcı formlar uygulayın.

ASLA genel AI-generated estetikler kullanmayın: aşırı kullanılan font aileleri (Inter, Roboto, Arial, sistem fontları), klişe renk şemaları (özellikle beyaz arka planlarda mor gradient'ler), öngörülebilir düzenler ve component desenleri, bağlama özgü karakterden yoksun tüm aynı tasarımlar.

Yaratıcı şekilde yorumlayın ve bağlam için gerçekten tasarlanmış gibi hissettiren beklenmedik seçimler yapın. Hiçbir tasarım aynı olmamalıdır. Açık ve koyu temalar, farklı fontlar, farklı estetikler arasında değişiklik yapın. ASLA ortak seçimlere yakınsamayın (örneğin Space Grotesk) kuşaklar arası.

ÖNEMLİ: Uygulama karmaşıklığını estetik vizyona eşleştirin. Maksimalist tasarımlar geniş animasyonlar ve efektler ile kapsamlı kod gerektirir. Minimalist veya rafine tasarımlar kısıtlama, hassasiyet ve boşluk, tipografi ve ince detaylara dikkatli dikkat gerektirir. Zarafet vizyonu iyi bir şekilde yürütmekten gelir.

Unutmayın: Claude olağanüstü yaratıcı çalışmalar yapabilir. Geri tutmayın, kutu dışında düşünüp tam olarak ayırt edici bir vizyona bağlı kaldığında gerçekte ne yaratılabileceğini gösterin.