Promake AI-Driven Template System

Template Skeleton + Seçilebilir Layout Sistemi (React & TS & Vite)

Bu proje, yapay zeka (AI) sistemlerinin tasarım kararları vererek dinamik ve modüler web arayüzleri oluşturabilmesi için geliştirilmiş bir Landing Page Builder altyapısıdır. Proje; tip güvenliği, çalışma anı doğrulaması (runtime validation) ve merkezi tasarım tokenları üzerine inşa edilmiştir.

---

🚀 Öne Çıkan Özellikler

• Zod Entegrasyonu: AI'dan gelen verilerin çalışma anında doğruluğunu garanti altına alan şema yapısı.
• Design Tokens: Renk, boşluk ve tipografi gibi tüm stil kararlarının merkezi tokens.ts üzerinden yönetimi.
• Dinamik Render Motoru: ID tabanlı bileşen eşleştirme sistemi ile sınırsız varyasyon desteği.
• Modüler Mimari: Header, Hero ve Features bölümlerinin birbirinden bağımsız geliştirilebilir yapısı.

---

🤖 AI Buradan Nasıl Seçecek? (Logic)

AI sistemleri, projedeki templateRegistry.ts dosyasını bir "seçim kataloğu" olarak kullanır. Sistem şu mantıkla çalışır:

1. Metadata Analizi: Katalogdaki her varyasyonun (HeaderA, HeroC vb.) içinde AI'nın okuyabileceği teknik bir description alanı bulunur.

2. Karar Mekanizması: AI, kullanıcıdan gelen "Modern, koyu temalı ve güven veren bir SaaS sayfası" talebini bu açıklamalarla eşleştirir.

3. Hafif Veri Transferi: AI tüm kodu üretmek yerine, sadece seçtiği bileşenlerin ID'lerini içeren küçük bir JSON objesi üretir (Örn: { "heroId": "hr-gradient" }).

4. Güvenli İnşa: Bu ID'ler SectionRenderer bileşenine ulaştığında Zod tarafından doğrulanır ve katalogdan ilgili React bileşeni dinamik olarak ekrana basılır.

---

📂 Proje Dizin Yapısı

src/
├── catalog/            # templateRegistry.ts (AI Katalog Verisi)
├── components/
│   ├── builder/        # TemplateBuilder.tsx (UI Seçim Paneli)
│   ├── layout/         # SectionRenderer.tsx (Dinamik Render Motoru)
│   └── sections/       # A, B ve C Varyasyonları (features, header, hero)
├── styles/             # themeEngine.ts ve tokens.ts (Tasarım Sistemi)
├── types/              # template.types.ts (Zod Şemaları ve Tipler)
├── App.tsx             # Giriş Noktası
├── main.tsx            # Uygulama Başlatıcı
└── index.css           # Global Stiller

🛠️ Kurulum ve Başlatma

Projeyi yerel ortamınızda çalıştırmak için aşağıdaki adımları izleyin:

1. Bağımlılıkları Yükleyin:

npm install

2. Geliştirme Sunucusunu Başlatın:

npm run dev

🏗️ Teknik Mimari Detayları

1. Şema Doğrulama (Zod) Dışarıdan (AI veya API) gelen veriler template.types.ts içindeki Zod şeması ile kontrol edilerek sistemin güvenliği sağlanır:

export const LayoutConfigSchema = z.object({
  headerId: z.string(),
  heroId: z.string(),
  featuresId: z.string(),
});

2. Merkezi Stil Yönetimi (Tokens) Tüm bileşenler, doğrudan renk kodları yerine tokens.ts içindeki CSS değişkenlerini (var(--color-primary)) kullanır. Bu sayede tema değişikliği tek bir noktadan tüm uygulamaya yansır.

✍️ Hazırlayan

Bu proje Oğuzhan Tohumcu tarafından geliştirilmiştir.

🔗 Canlı Önizleme

Projenin canlı haline buradan ulaşabilirsiniz: