Bir Sitedeki Tasarımı Nasıl Kullanırım ?

Merhaba arkadaşlar bir sitede beğendiğim modalı kendi siteme eklemek istiyorum. F12 açıp HTML ve Stilleri kopyala diyorum Cursora atıyorum ama alakasız bir yapı geliyor karşıma bunu nasıl çözebilirim. Yardımcı olabilecek var mı ya da bir taktiği. Bazı uygulamalar ile dosya çekilebiliyor ama giriş yapamadığı için uygulamalar site üyeliğine istediğim kısmı göremiyor.

Bir sitedeki modal yapısını alıp kendi sitene entegre etmek istiyorsan, sadece F12 ile HTML ve CSS’yi kopyalamak genellikle yeterli olmaz. Bunun birkaç nedeni var:

1. Modal’ın Javascript ile çalışıyor olması: Çoğu modal, açılıp kapanma gibi işlevleri sağlayan JavaScript kodlarıyla birlikte çalışır. Sadece HTML ve CSS’yi kopyalarsan, bu işlevsellik çalışmaz.
2. Tailwind veya başka CSS framework kullanımı: Eğer site TailwindCSS gibi utility-first bir framework kullanıyorsa, HTML’de gördüğün sınıflar (bg-white, rounded-xl, z-50 vs.) sadece o framework yüklüyse çalışır. Senin sitende bu framework yoksa, görünüm bozulur.
3. Komponent tabanlı sistemler (örneğin React, Vue): Eğer site React gibi bir sistemle yazılmışsa, modal aslında Modal.jsx gibi bir bileşendir. Tarayıcıda sen sadece son halini (HTML) görürsün, ama arka planda çok daha farklı bir yapı çalışır.

Ne yapabilirsin?

• Modalı düzgün şekilde almak için:
  • HTML + CSS + JS üçlüsünü birlikte kopyalaman gerekiyor.
  • Eğer site Tailwind gibi bir framework kullanıyorsa, senin sitene de onu dahil etmen gerek.
  • Modalın açılma/kapanma mantığını JS kısmından analiz edip kendi sitende tekrar yazman lazım.

Alternatif çözüm:

Eğer modalı bir siteden birebir almak zor ve uğraştırıcıysa, benzer modal yapıları sunan açık kaynaklı UI kütüphaneleri var. Örneğin:

• TailwindUI
• Flowbite
• Shadcn/UI (React için)
• Bootstrap Modals

Bunlardan birini kullanarak çok daha stabil ve taşınabilir bir yapı kurabilirsin.

Ek olarak, Cursor'a bir işi yaptırmak için hangi platformda çalıştığını anlatıp nasıl entegre edeceğini de sorman ya da yönerge olarak vermen lazım.


Örnek prompt,


Bana Apple tarzında bir notification modal tasarla. (UI framework kullanmak istiyorsan direkt olarak TailwindUI tarzında da diyebilirsin.) Bu modal HTML+CSS+JS olarak çalışabilir. CDN ile framework/icon/font vb. çağırabilirsin. BEM ile izole et ki css başka bölümleri etkilemesin. Mobil/pc responsive uyumluluğa özen göster.

Farz edelim Wordpress sitende Elementor'a HTML widget olarak ekleyeceksin. Tüm kodları (HTML+CSS+JS) tek bir dosyada yazmasını da istemelisin.


Ne kadar anlaşılır ve detaylı, ne istediğini bildiğin bir prompt girersen o kadar fazla verim alırsın.

Hocam tam sayfa ekran görüntüsü alma eklentisi kurun Chorme tarayıcıya, tam sayfa ekran görüntüsü alın, aldığın ekran görüntüsünü Cursora göster aynı tasarımı yapması için promt gir, birebir olmasa da %80 benzer bir tasarım alırsın.