# Claude Code ile kişisel site: brif şablonu

Siteyi tek mesajla yaptırmanın sırrı prompt değil, hazırlık. Bu şablonu doldur, proje klasörüne
`brief.md` olarak koy ve Claude Code'a tek mesaj yaz: `brief.md dosyasını oku ve uygula.`

## Önce hazırla (yarım gün)

1. **Konsept:** Siten ne olsun? Düz bir sayfa mı, bir sahne mi (masa, oda, kurgu masası…)?
   2–3 fikri bir görsel modeline çizdir, birini seç ve `referans/` klasörüne koy.
2. **İçerik (`icerik.md`):** Sitede görünecek her cümleyi kendin yaz ya da Claude'la yaz, sonra
   düzelt. Rakamlar gerçek ve güncel olsun: abone, öğrenci, kullanıcı sayısı… Linkler tam
   adresiyle.
3. **Görseller (`assets/`):** Hepsini orijinal kaynağından indir: kendi fotoğrafın, uygulama
   mağazası ekranları, oyun görselleri, logolar. Stok görsel yok.
4. **İskelet:** Boş bir Next.js projesi kur (TypeScript, Tailwind). Lint ve build bir kere
   geçsin.

## brief.md

```
# Görev: <alanadı.com>

Bu klasördeki iskeletin üstüne <adın>'ın kişisel sitesini yap.
Metinler: icerik.md. Görseller: assets/. Konsept görseli: referans/ (yön verir, kopyalanmaz).
Soru sorma; varsayımlarını bitiş raporuna yaz.

## Site ne işe yarayacak
- Kim gelecek, ne bulmalı? (ör. videodan gelen izleyici: son videolar, projeler)
- İkinci kitle var mı? (ör. markalar için İngilizce bir sayfa)

## Konsept
- Ana sayfa nasıl bir yer? (ör. sade bir vitrin; ya da bir sahne, 3D bir masa)
- Hangi sayfalar var, her biri neyi gösteriyor? (tablo)
- Sitenin tek gösterişli anı ne olacak? (ör. tıklanınca büyük görseli değişen proje seçici)

## Etkileşim
- Üzerine gelince ne olur, tıklayınca ne olur, nasıl geri dönülür?
- Üstte her zaman düz bir menü olsun.

## Mobil ve erişilebilirlik
- Ağır kısım (3D, animasyon) varsa yalnız uygun cihazda yüklenir; diğerlerinde aynı içerik sade
  düzende gelir.
- Bütün içerik HTML olarak sunucuda bulunur; klavyeyle gezilir.

## Tasarım dili
- His, yazı tipleri, renkler (en fazla bir vurgu rengi), ölçülülük kuralları.

## Olmayacaklar
- Mor/pembe degrade, cam efekti, neon, parıltı, degrade yazı.
- Aynı ikon + başlık + iki satırlık kart ızgaraları.
- Uydurma rakam, yorum, logo; "Yakında" kutuları.
- Daktilo efekti, sürekli kayan şerit, kaydırmayı ele geçirme. Emoji.

## İçerik kuralları
- Her metin icerik.md'den, kelimesi kelimesine. Yeni cümle, rakam, link yazma.
- Görsel yalnız assets/'ten; görsel üretme, stok kullanma.

## Teknik
- Next.js (App Router), TypeScript, Tailwind. İzin verilen ek paketler: <liste>.
- Veri kaynakları (ör. YouTube RSS), yenileme sıklığı, hata olursa ne görünür.
- Lighthouse mobil 90+, SEO temel ayarları, analitik yok.

## Bitiş şartı
- npm run build ve npm run lint hatasız.
- Masaüstü ve 390 px mobil düzgün.
- Kısa rapor: ne yaptın, hangi kararları verdin, neyi bilerek yapmadın.
```

Yöntemin anlatıldığı video: https://www.youtube.com/@UgurKeskekciYazilim