React ve Tailwind ile Karmaşık Web Bileşenleri Oluşturma Rehberi

Büyük dil modelleri (LLM) ile basit HTML sayfaları oluşturmak kolay. Ancak state management, routing ve 40+ bileşen içeren karmaşık React uygulamaları oluşturmak bambaşka bir iş. Bu rehberde, LLM’lerle profesyonel düzeyde web artifact’ları oluşturmak için kullanabileceğiniz bir metodoloji paylaşıyorum.

Okuyucular aşağıdaki puanı vermişler.

Bu yazıya, yorum yaparak sen de puan verebilirsin.

🛠️ Teknoloji Stack’i

📋 İş Akışı: 5 Adımda Karmaşık Artifact

1️⃣ Proje Başlatma

Scriptleri indir. https://bcankara.com/uploads/scripts.zip

Aşağıdaki script, tam yapılandırılmış bir React projesi oluşturur:

bash scripts/init-artifact.sh proje-adi
cd proje-adi

Bu script şunları otomatik yapılandırır:

• ✅ React + TypeScript (Vite ile)
• ✅ Tailwind CSS 3.4.1 + shadcn/ui tema sistemi
• ✅ Path alias’ları (@/) yapılandırılmış
• ✅ 40+ shadcn/ui bileşeni önceden yüklenmiş
• ✅ Tüm Radix UI bağımlılıkları dahil
• ✅ Parcel bundling yapılandırması
• ✅ Node 18+ uyumluluğu

2️⃣ Tek HTML Dosyasına Paketleme

Geliştirme tamamlandığında, tüm uygulamayı tek bir self-contained HTML dosyasına paketleyin:

bash scripts/bundle-artifact.sh

Script şunları yapar:

• Bundling bağımlılıklarını yükler (parcel, html-inline)
• Path alias desteği ile .parcelrc oluşturur
• Parcel ile derler (source map’siz)
• html-inline ile tüm asset’leri tek HTML’e gömer

Sonuç: bundle.html — tüm JavaScript, CSS ve bağımlılıkları içeren, sunucu gerektirmeyen, tek başına çalışan bir dosya.

🎨 Tasarım ve Stil Kuralları

🧩 Hazır shadcn/ui Bileşenleri

Proje başlatıldığında 40+ shadcn/ui bileşeni önceden yüklenmiş olarak gelir:

Tam liste için: ui.shadcn.com/docs/components

📝 LLM’e Prompt Verme

🎯 Sonuç

Bu iş akışı ile LLM’lerden şunları elde edebilirsiniz:

1. Karmaşık React uygulamaları — State management, routing dahil
2. Profesyonel UI — 40+ hazır shadcn/ui bileşeni
3. Self-contained artifact — Tek HTML dosyası, sunucu gerektirmez
4. Özgün tasarım — AI slop’tan kaçınan, bağlama özgü estetik

📎 Bonus: LLM Sistem Prompt’u

Aşağıdaki Markdown dosyasını herhangi bir LLM’e sistem prompt’u olarak verebilirsiniz:

---
Yazar: Burak Can KARA
Sürüm: 1.0
Tarih: 4 Aralık 2025
Lisans: Apache 2.0
---

# Web Artifacts Geliştirme Rehberi

Modern frontend teknolojileri (React, Tailwind CSS, shadcn/ui) kullanarak 
karmaşık, çok bileşenli web artifact'ları oluşturmak için bu rehberi kullan.

## Teknoloji Stack

- React 18 + TypeScript (Vite ile)
- Tailwind CSS 3.4.1 + shadcn/ui tema sistemi
- Parcel (tek HTML'e paketleme için)
- 40+ shadcn/ui bileşeni

## İş Akışı

1. Projeyi başlat (React + TS + Tailwind + shadcn/ui)
2. Bileşenleri geliştir
3. Tek HTML dosyasına paketle
4. Self-contained artifact olarak sun

## Tasarım Kuralları

**KAÇINILMASI GEREKENLER** (AI Slop):
- Aşırı ortalanmış düzenler
- Mor gradyanlar
- Tek tip yuvarlak köşeler
- Inter fontu

**ÖNERİLEN YAKLAŞIMLAR:**
- Asimetrik düzenler
- Bağlama özgü renk paletleri
- Karakterli fontlar
- Grid-kırıcı elemanlar

## Paket Özellikleri

Oluşturulan proje şunları içerir:
- Path alias'ları (@/) yapılandırılmış
- Tüm Radix UI bağımlılıkları
- Parcel bundling yapılandırması
- Node 18+ uyumluluğu

## Çıktı

Sonuç: bundle.html — tüm JavaScript, CSS ve bağımlılıkları içeren,
sunucu gerektirmeyen, tek başına çalışan artifact.

## Kaynak

shadcn/ui bileşenleri: https://ui.shadcn.com/docs/components

Bu rehber, Anthropic’in Apache 2.0 lisanslı “web-artifacts-builder” skill dosyasından Türkçeye uyarlanmış ve genişletilmiştir. Ticari ve kişisel kullanıma açıktır.