Tasarım incelemesi

Ne zaman

• Arayüz görevi incelemeye geldiğinde (arayüz işlerinde inceleyici sensin) ya da Juno/Mühendislik önizleme adresi gönderdiğinde.
• Kullanıcı "şu sayfa tasarıma uymuş mu", "yayından önce bak" dediğinde.
• Kullanılmaz: tasarım yönünü belirlemek (tasarim-belgesi), eski sitenin içeriğini çıkarmak (icerik-envanteri), SEO denetimi (Luna, claude-seo), kod incelemesi (Mühendislik).

Girdi

• Önizleme adresi (görevde ya da Juno'nun mesajında); yeniden yapılan sitede eski sitenin adresi.
• projects/<proje>/Tasarım.md, projects/<proje>/İçerik.md; recall ile Kimlik, Projeler ve kullanıcı tercihleri (scroll animasyonu, TR/EN).
• PR varsa pr_view ile değişiklik özeti.
• Önizleme adresi yoksa görevi açana send_message ile sor ve outcome "blocked".

Adımlar

1. Belgeleri oku: memory_read ile Tasarım.md ve İçerik.md; recall "Kimlik", recall "Projeler <proje>". Tasarım.md yoksa bunu da bulgu olarak yaz.
2. Önizlemeyi tarayıcıyla aç (Playwright MCP): browser_navigate, masaüstü 1440 ve mobil 390 genişlikte browser_take_screenshot; her sayfa için ikisi de. Metin için browser_snapshot.
3. Tasarım uyumu: renk tokenları, yazı tipleri ve ağırlıklar, bölüm sırası, boşluk, hareket (reduced-motion dahil), mobil düzen. Her sapmayı bölüm adıyla yaz.
4. İçerik doğruluğu (2026-10-04 olayı: sahte iletişim bilgileriyle onay verildi):
   • yer tutucu ya da uydurma veri: example.com, lorem, "Proje 1", Kimlik'te olmayan sosyal hesap, var olmayan proje;
   • eksik içerik: Kimlik'teki deneyim ve projeler, kullanıcı tercihleri;
   • bağlantıları tıkla, gerçek adrese gittiğini gör (telefon tel:, e-posta mailto:, sosyal hesaplar).
5. İkon ve yer tutucu denetimi (2026-10-07 olayı: "FB/TW" harf kutusuyla onay verildi): harfli kutu, emoji ya da metinle ikon taklidi; ikonsuz hizmet ve iletişim satırı; yer tutucu görsel. Tasarım.md'nin İkonlar bölümüyle tek tek karşılaştır.
6. Yeniden yapılan sitede yan yana karşılaştırma: eski siteyi ve önizlemeyi aynı genişlikte (1440 ve 390) aç, ekran görüntülerini karşılaştır. İçerik.md'deki kontrol listesini madde madde önizlemede ara; eksik, değişmiş ya da uydurulmuş her öğeyi yaz.
7. /opt/skills/web-design-guidelines/guidelines.md ile erişilebilirlik ve etkileşim denetimi: kontrast, odak görünürlüğü, dokunma alanı, form etiketleri, alt metin, animasyon ve reduced-motion, başlık sırası.
8. Karar ver:
   • Engelleyici bulgu varsa (yer tutucu, uydurma veri, eksik kontrol listesi maddesi, ikon taklidi, okunmayan kontrast, kırık bağlantı) ONAYLAMA.
   • Yalnız küçük önerilerin varsa onayla ve önerileri ayrı yaz.
9. Raporu memory_write ile projects/<proje>/İnceleme-YYYY-MM-DD.md yoluna yaz.
10. Engel varsa: outcome "blocked"; madde madde ne yanlış, ne olmalı (ekran görüntüsündeki bölüm adıyla). Düzeltme yapımcının işiyse update_task ile görevi geri gönder ya da create_task ile düzeltme görevi aç; rapor yolunu yaz.
11. Uyuyorsa: outcome "done", update_task ile evidence = rapor yolu; kullanıcıya send_message ile önizleme adresini ve bir cümlelik değerlendirmeni yaz. Yayına almak kullanıcının kararıdır.

Kontrol listesi

• Her sayfa 1440 ve 390 genişlikte açıldı, ekran görüntüleri alındı.
• Renk, yazı tipi, bölüm sırası ve hareket Tasarım.md ile karşılaştırıldı.
• example.com, lorem, "Proje 1" ve uydurma sosyal hesap arandı; yok.
• Bağlantılar tıklandı, gerçek adrese gidiyor.
• Harfli kutu, emoji ya da metinle ikon taklidi yok; hizmet ve iletişim satırlarının ikonu var.
• İçerik.md kontrol listesinin her maddesi önizlemede bulundu (yeniden yapımda).
• web-design-guidelines denetimi yapıldı.
• Karar açık: onay ya da bölüm adlı engel listesi.

Çıktı

# Tasarım incelemesi: <proje> (YYYY-MM-DD)
Önizleme: <URL> · eski site: <URL> · karar: ONAY | ENGEL

## Engelleyici bulgular
1. <bölüm adı> (1440 | 390): <ne yanlış> → <ne olmalı>

## Tasarım uyumu
| Konu | Tasarım.md | Önizleme | Durum |
|---|---|---|---|
| Ana renk | #… | #… | uygun / sapma |

## İçerik doğruluğu
- Yer tutucu / uydurma: <yok | liste>
- Eksik (İçerik.md kontrol listesi): <yok | madde listesi>
- Bağlantılar: <hepsi çalışıyor | kırık liste>

## İkonlar
- <yer>: beklenen <ikon> → görülen <…>

## Erişilebilirlik ve etkileşim (web-design-guidelines)
- …

## Küçük öneriler (engel değil)
- …

## Ekran görüntüleri
- <dosya yolu> — <sayfa, genişlik>

Bitti sayılır

• Rapor projects/<proje>/ altında; karar ONAY ya da ENGEL olarak yazılı.
• Engelde görev bölüm adlı listeyle geri gitti; onayda görev evidence ile kapandı ve kullanıcıya önizleme adresi gitti.