Template System v2

Plan v3 • Son Güncelleme

Onay Bekliyor

Mevcut Sorun

Şu an prompt'a giden:
Tarz: Lüks / Premium, Bold Typography, Art Deco, Amber, Centered Logo Nav
AI bu etiketleri görünce ne yapacağını tam bilmiyor. "Lüks" ne demek? "Bold Typography" nasıl uygulanır?

Çözüm

Yeni prompt'a gidecek:
## TARZ: Lüks / Premium
- Koyu arka plan (siyah, lacivert, slate-950)
- Altın/şampanya/gümüş aksan renkleri
- Bol negatif space, az element
- İnce, zarif fontlar
- Letter-spacing geniş, uppercase başlıklar
- Kaçın: Kalabalık layout, parlak renkler

## + Bold Typography
- Dev başlıklar: text-6xl ve üstü
- Font weight: font-black veya font-bold
- Display fontlar: Bebas Neue, Oswald, Anton
- Başlık/body kontrast çok net olmalı
Her seçilen tarz için JSON'dan kurallar çekilip prompt'a ekleniyor

Kesinleşen Kararlar

1
Sektör = Text Input
Dropdown/seçim yok. Kullanıcı manuel yazar: "Hukuk", "Sağlık", "E-ticaret" vb.
2
Ek Bilgiler = Büyük Textarea
1000+ satır desteklemeli. Firma içeriği, hizmetler, özellikler - hepsi buraya
3
Tarz Seçimi = Mevcut Kartlar
/design/sectors/ yapısı kalıyor, tıkla-seç sistemi iyi çalışıyor
4
Tarz Kuralları Prompt'a Ekleniyor
Seçilen her tarz için styles.json'dan kurallar çekilip prompt'a dahil ediliyor.
Sadece "Minimal" yerine → Minimal'in tüm kuralları yazılıyor

UI Bileşenleri

MEVCUT Tarz Kartları
Mevcut kart seçim sistemi korunuyor. Tıkla → seçili, tekrar tıkla → kaldır. Birden fazla seçilebilir (Modern + Dark Mode + Bold Typography)
YENİ Sektör Input
YENİ Firma Adı (opsiyonel)
YENİ Ek Bilgiler (Büyük Textarea)
1000+ satır destekler. Firma içeriği, hizmetler, ürünler, slogan, hedef kitle - hepsi buraya
YENİ Prompt Oluştur Butonu
Tıklandığında: Seçilen tarzlar + kuralları + sektör + ek bilgiler birleştirilerek hazır prompt oluşturulur

Örnek Prompt Çıktısı

Seçimler: Lüks/Premium + Bold Typography + Dark Mode | Sektör: Hukuk Bürosu

## SEKTÖR
Hukuk Bürosu

## TARZ KURALLARI

### Lüks / Premium
- Koyu arka plan: siyah, lacivert, slate-950
- Aksan renkleri: altın, şampanya, gümüş
- Bol negatif space, az element güçlü etki
- İnce, zarif fontlar
- Letter-spacing geniş, uppercase başlıklar
- Hover efektleri premium hissettirmeli
⛔ Kaçın: Kalabalık layout, ucuz stok fotoğraf, parlak renkler

### + Bold Typography
- Dev başlıklar: text-6xl ve üstü
- Font weight: font-black veya font-bold
- Display fontlar: Bebas Neue, Oswald, Anton, Archivo Black
- Başlık/body kontrast çok net olmalı
⛔ Kaçın: Küçük başlıklar, light font weight

### + Dark Mode
- Arka plan: slate-900, slate-950, zinc-900
- Ana metin: beyaz veya slate-100/200
- Secondary: slate-400
- Canlı aksan renkleri dark'ta daha parlak görünür
- WCAG AA contrast oranına dikkat
⛔ Kaçın: Pure black (#000), düşük contrast

## FİRMA BİLGİLERİ
[Kullanıcının girdiği 1000 satır içerik buraya gelecek]

## GÖREV
Yukarıdaki tarz kurallarına ve firma bilgilerine uygun şekilde
tek sayfalık landing page tasarla. Tailwind CSS kullan.

Dosya Yapısı

public/design/
├── data/
└── styles.json ← Tarz tanımları + kuralları (tek dosya yeterli)
├── sectors/
└── index.html ← Güncellenecek
fonts.json, colors.json, components.json şimdilik gerekli değil. Mevcut kartlar zaten bu seçimleri sunuyor. Sadece styles.json eklenecek.

styles.json Yapısı

Her tarz için prompt'a eklenecek kurallar:

{
  "styles": {
    "minimal": {
      "name": "Minimal",
      "prompt_rules": [
        "Bol whitespace, section arası en az 120px",
        "Max 2-3 renk, nötr tonlar ağırlıklı",
        "Tek font ailesi yeterli, temiz hiyerarşi",
        "Sadece gerekli elementler, dekorasyon yok"
      ],
      "avoid": [
        "Gradient arka planlar",
        "Çoklu gölgeler",
        "5+ renk kullanımı"
      ]
    },
    "luxury": {
      "name": "Lüks / Premium",
      "prompt_rules": [
        "Koyu arka plan: siyah, lacivert, slate-950",
        "Aksan: altın, şampanya, gümüş",
        "Bol negatif space, az element",
        "İnce fontlar, geniş letter-spacing",
        "Hover efektleri premium hissettirmeli"
      ],
      "avoid": [
        "Kalabalık layout",
        "Ucuz stok fotoğraf",
        "Parlak/pop renkler"
      ]
    },
    "bold-typography": {
      "name": "Bold Typography",
      "prompt_rules": [
        "Dev başlıklar: text-6xl ve üstü",
        "Font weight: font-black veya font-bold",
        "Display fontlar: Bebas Neue, Oswald, Anton",
        "Başlık/body kontrast çok net"
      ],
      "avoid": [
        "Küçük başlıklar",
        "Light font weight"
      ]
    }
  }
}

Uygulama Adımları

1
styles.json oluştur — Tüm tarzlar için prompt_rules + avoid
2
/design/sectors/index.html güncelle
• Sektör text input ekle
• Firma adı input ekle
• Ek bilgiler büyük textarea ekle
• "Prompt Oluştur" butonu ekle
• Seçilen tarzlar için JSON'dan kuralları çek
• Prompt önizleme alanı ekle
• Kopyala butonu
3
Niş tarzları kaldır — Cyberpunk, Art Deco, Maximalist vb.
4
Test — Farklı kombinasyonlarla deneme

Doğrulama Kriterleri