UI Debug: Ekran Görüntüsü ile CSS/Layout Sorun Çözme
Bozuk butona, kayık layout'a, mobile breakpoint sorununa — ekran görüntüsü ile profesyonel debug.
Şükrü Yusuf KAYA
8 min read
Intermediate
DevTools'un ortağı: vision LLM#
Tek başına DevTools cevap vermez "neden böyle göründü?" sorularına. ChatGPT vision ile:
- Bozuk layout sebebini tahmin
- Beklenen vs gerçek farkı
- Pixel-perfect karşılaştırma
- Responsive sorunları
- Erişilebilirlik issue'ları
text
[2 ekran görüntüsü yükle: 'beklenen.png' ve 'gerçek.png'] Sol: Figma tasarımı (beklenen)Sağ: Production ekran görüntüsü (gerçek) Yapmanı istediklerim: 1. **Pixel-level fark listesi**: ne nerede uyuşmuyor (köşe radius, padding, color, vs.)2. **Olası CSS/HTML sebepleri** her fark için3. **Düzeltme kod örneği** her biri için (mevcut kodumu bilmediğin için tahminle)4. **Öncelik sırası**: blocker (görsel bozukluk) vs minor (1-2 px)5. **Bonus**: erişilebilirlik (a11y) iyileştirmeleri (contrast, focus state) Her bulgunun altında 1 satır açıklama.Beklenen vs gerçek — pixel-level fark analizi.
💡 Görsel + kod hibrit
Sadece ekran görüntüsü değil, ilgili HTML/CSS'yi de yapıştır — model tahminden çıkıp direkt çözüm verir. ÖZellikle Tailwind kullanıyorsan: 'bu component'in className'i şu, görüntüsü bozuk, neden?'
Senaryo: Desktop'ta düzgün, mobile'da taşıyor
Prompt: "Mobile (375px) ekran görüntüsü ekte. Hangi component'lerin breakpoint'i eksik?"
Özet#
✓ ChatGPT vision = devtools tamamlayıcısı
✓ Beklenen vs gerçek — pixel-level karşılaştırma
✓ Kod + görsel hibrit prompt = direkt çözüm
✓ Responsive, spacing, color, z-index — yaygın UI sorunları
Sıradaki ders: DALL-E ile görsel üretimi.
Yorumlar & Soru-Cevap
(0)Yorum yazmak için giriş yap.
Yorumlar yükleniyor...
Related Content
Modül 1: Başlangıç ve Temeller
ChatGPT Nedir? Tarihçe, Evrim ve Bugünün Manzarası
Start LearningModül 1: Başlangıç ve Temeller
Hesap Açma ve Plan Karşılaştırması: Free, Plus, Pro, Team, Enterprise
Start LearningModül 1: Başlangıç ve Temeller