AI Website Cloner Template Nedir?

AI Website Cloner Template, herhangi bir web sitesini yapay zeka destekli kodlama ajanları (Claude Code, Codex CLI, Cursor, GitHub Copilot vb.) kullanarak modern bir Next.js projesine dönüştürmek için hazırlanmış açık kaynak (MIT lisanslı) bir şablondur.

Bu proje sayesinde hedef web sitesinin:

• Tasarımını
• Renk paletini
• Fontlarını
• Bileşenlerini
• Responsive yapısını
• Görsellerini
• SVG ikonlarını
• CSS değerlerini

otomatik analiz ederek yeniden oluşturabilirsiniz.

---

Özellikleri

• Tek komut ile web sitesi klonlama
• Design Token (renk, font, spacing) çıkarımı
• Responsive analiz
• Hover, Click ve Scroll animasyonlarının incelenmesi
• Görsel ve medya dosyalarının indirilmesi
• Next.js 16 + React 19 desteği
• TypeScript Strict Mode
• Tailwind CSS v4
• shadcn/ui bileşenleri
• Çok sayıda AI Coding Agent desteği

---

Desteklenen AI Kodlama Araçları

---

Kurulum

1. Repository Oluşturun

Öncelikle GitHub üzerinde Use this template butonuna basarak kendinize ait yeni bir repository oluşturun.

Doğrudan bu repository'i fork veya clone etmeniz önerilmez.

Genişletmek için tıkla ...

---

2. Projeyi Bilgisayarınıza İndirin

git clone https://github.com/KULLANICI-ADI/REPOSITORY.git

cd REPOSITORY

---

3. Bağımlılıkları Kurun

npm install

---

4. Claude Code'u Başlatın

claude --chrome

---

5. Website Klonlama

/clone-website https://ornek-site.com



Birden fazla site de analiz edebilirsiniz.


/clone-website https://site1.comhttps://site2.com

---

Nasıl Çalışıyor?

Sistem birkaç aşamada çalışmaktadır.

1. Reconnaissance (Keşif)

İlk aşamada hedef site analiz edilir.

Toplanan bilgiler:

• Screenshot'lar
• Responsive yapılar
• CSS özellikleri
• Hover efektleri
• Scroll animasyonları
• Tıklama davranışları
• Fontlar
• Renkler

---

2. Foundation

Ardından proje temel yapısı hazırlanır.

Otomatik olarak:

• Fontlar yüklenir
• Tailwind ayarlanır
• Global CSS oluşturulur
• Görseller indirilir
• SVG ikonlar çıkarılır

---

3. Component Specification

Site içerisindeki tüm bölümler için ayrıntılı teknik doküman hazırlanır.

Örneğin:

• Hero
• Navbar
• Footer
• Pricing
• FAQ
• Blog
• Contact

Her biri için;

• CSS değerleri
• Responsive davranışlar
• Durum değişiklikleri
• İçerikler

ayrı ayrı oluşturulur.

---

4. Parallel Build

En güçlü özelliklerinden biri budur.

Yapay zeka;

• Navbar
• Hero
• Pricing
• Footer
• Blog

gibi bölümleri farklı Git Worktree'lerde paralel olarak geliştirir.

Bu sayede büyük projeler çok daha kısa sürede tamamlanabilir.

---

5. QA ve Visual Diff

Son aşamada:

• Kodlar birleştirilir
• Sayfa oluşturulur
• Orijinal site ile karşılaştırılır
• Görsel fark analizi yapılır

Böylece klonlanan sitenin orijinal tasarıma mümkün olduğunca yakın olması sağlanır.

---

Kullanılan Teknolojiler

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS v4
• shadcn/ui
• Radix UI
• Lucide Icons

---

Proje Yapısı

src/
├── app/
├── components/
│ ├── ui/
│ └── icons.tsx
├── hooks/
├── lib/
└── types/

public/
├── images/
├── videos/
└── seo/

docs/
├── research/
└── design-references/

scripts/
├── sync-agent-rules.sh
└── sync-skills.mjs

AGENTS.md
CLAUDE.md
GEMINI.md

---

Kullanılabilir Komutlar

Geliştirme sunucusu:


npm run dev



Production Build:


npm run build



ESLint kontrolü:


npm run lint



TypeScript kontrolü:


npm run typecheck



Tüm kontroller:


npm run check

---

Docker Kullanımı

Projeyi Docker ile çalıştırabilirsiniz.

Uygulamayı derleyip başlatmak için:


docker compose up app --build



Geliştirme modunda çalıştırmak için:


docker compose up dev --build



Varsayılan geliştirme portu:


3001

---

Kullanım Alanları

WordPress'ten Next.js'e Geçiş

Mevcut WordPress sitenizi modern React tabanlı yapıya taşıyabilirsiniz.

Webflow / Squarespace Dönüşümü

No-code platformlarda hazırlanmış siteleri kaynak kod haline getirebilirsiniz.

Kaybolan Kaynak Kodunu Geri Kazanma

Canlıda çalışan ancak kaynak kodları kaybolmuş projeleri yeniden oluşturabilirsiniz.

Eğitim Amaçlı

Profesyonel web sitelerinin:

• Tasarım yapısını
• Responsive çözümlerini
• CSS tekniklerini
• Animasyonlarını

inceleyerek öğrenebilirsiniz.

---

Kullanılmaması Gereken Durumlar

Bu proje aşağıdaki amaçlarla kullanılmamalıdır:

• Phishing (oltalama) siteleri oluşturmak
• Marka veya kişi taklidi yapmak
• Başkasına ait logoları izinsiz kullanmak
• Telif hakkı ihlali oluşturacak içerikleri kopyalamak
• Hizmet şartlarını ihlal eden siteleri izinsiz çoğaltmak

---

Sonuç

AI Website Cloner Template, modern yapay zeka kodlama ajanlarını kullanarak mevcut web sitelerini analiz edip Next.js tabanlı, temiz, okunabilir ve sürdürülebilir bir kod yapısına dönüştürmeyi amaçlayan güçlü bir açık kaynak projedir. Tasarım geçişleri, eski projelerin modernize edilmesi ve eğitim amaçlı incelemeler için oldukça faydalı bir çözüm sunar. Bununla birlikte, telif haklarına ve ilgili web sitelerinin kullanım şartlarına uygun şekilde kullanılması önemlidir.