Canvas & Ratio
Choose your destination platform format
Layout Template
Choose a content structure for your slides
Preset Themes
Typography & Sizing
Brand Kit Customization
AGENCYConfigure brand assets for headers & footers
Outro Slide CTA
Customize your closing call-to-action slide
Background Pattern
Build Your Carousel
Drag and drop any post card below onto a slide, or use the quick buttons to insert content/images instantly!
"BANA SİTE YAP" YAZARSAN herkesle aynı jeneriği alırsın: mor gradyan, inter font, yuvarlak kartlar. profesyonel fark, prompt'un ve güvenlik denetiminin derinliğinde. THREAD’İ OKU! aşağıda haziran 2026'da gerçekten kullanılan stack ile baştan sona iş akışı: kopyalanabilir prompt'lar, en iyi frontend, ve kimsenin atlamadığı denetim..
önce doğru aracı seç. haziran 2026'da profesyonel kurulum şu: > model: claude opus 4.8, planlama ve mimari için en derin akıl yürütme onda > stack: next.js 15, tailwind v4, typescript > arayüz: shadcn/ui, kopyala-yapıştır model, kodun sahibi sensin > başlangıç: claude code'un resmi frontend-design skill'ini aç, çıktı kalitesini anında yükseltiyor
adım 1, plan mode'u öğren. bu tek alışkanlık amatörle profesyoneli ayırıyor. shift+tab'a iki kez bas, plan mode'a geç. bu modda opus önce kodu okuyup plan çıkarıyor, sen onaylamadan tek dosyaya dokunmuyor. karmaşık iş için /ultraplan daha derin analiz yapıyor. iyi geliştiricinin oranı: yüzde 80 plan, yüzde 20 izleme.
adım 2, koda geçmeden önce "nasıl görünecek"e karar ver. jenerik çıkmasın diye önce gerçek örneklere bak: > <a target="_blank" href="http://godly.website" color="blue">godly.website</a> ve <a target="_blank" href="http://siteinspire.com" color="blue">siteinspire.com</a>, üst düzey tasarım ve animasyon için > <a target="_blank" href="http://land-book.com" color="blue">land-book.com</a> ve <a target="_blank" href="http://onepagelove.com" color="blue">onepagelove.com</a>, dönüşüm odaklı landing page için > <a target="_blank" href="http://mobbin.com" color="blue">mobbin.com</a>, gerçek uygulama arayüz desenleri için > <a target="_blank" href="http://cssdesignawards.com" color="blue">cssdesignawards.com</a> ve <a target="_blank" href="http://thefwa.com" color="blue">thefwa.com</a>, ödüllü zanaat için beğendiğin 2-3 siteyi seç, tarzını opus'a tarif edeceksin.
adım 3, arayüzü kurarken jenerik bırakma, hazır "wow" componentlerden çek. hepsi kopyala-yapıştır, kodun sahibi sensin: > <a target="_blank" href="http://magicui.design" color="blue">magicui.design</a> ve <a target="_blank" href="http://ui.aceternity.com" color="blue">ui.aceternity.com</a>, animasyonlu hero, beam, 3d kart > <a target="_blank" href="http://cult-ui.com" color="blue">cult-ui.com</a>, yapay zeka ve sohbet arayüzü desenleri > <a target="_blank" href="http://heroui.com" color="blue">heroui.com</a> ve <a target="_blank" href="http://originui.com" color="blue">originui.com</a>, temiz erişilebilir uygulama arayüzü > <a target="_blank" href="http://motion-primitives.com" color="blue">motion-primitives.com</a> ve <a target="_blank" href="http://kokonutui.com" color="blue">kokonutui.com</a>, mikro-etkileşim ve geçiş prompt: "şu componenti aceternity'den aldım, projeme uyarla ve tailwind v4'e göre temizle: [kod]"
adım 4, önce ürün dökümanı yazdır, "site yap" deme. bu prompt'u aynen kullan: "kıdemli bir ürün müdürü gibi davran. şu fikir için bir PRD yaz: [fikrini yaz]. bölümler: hedef kullanıcı, kullanıcı hikayeleri, sayfa yapısı, her sayfanın amacı, kabul kriterleri, teknik stack. next.js 15, typescript, tailwind v4, shadcn/ui üstüne kuracağız. henüz kod yazma, önce dökümanı onaylayalım."
adım 5, frontend'i jenerik bırakma, tasarım dilini sen dayat. anti-jenerik prompt: "kıdemli bir ürün tasarımcısı gibi davran. jenerik ai tasarımından kaç: mor gradyan, inter font, standart kart dizilimi yok. seçtiğim referanslara yakın bir tasarım dili kur: tipografi hiyerarşisi net, cömert beyaz alan, amaçlı renk paleti, mobil öncelikli, wcag erişilebilirlik standardına uy. her bölüm tek iş yapsın."
adım 6, siteyi kendi makinende gör, düz konuşmayla düzelt. opus sana local adres veriyor, genelde localhost:3000. tarayıcıya yapıştır. tek tek tarif et: "üst menüyü cam efektiyle sabitle, hero bölümüne ince bir giriş animasyonu ekle, buton kontrastını artır, kartların gölgesini yumuşat." beğenene kadar döndürüyorsun, her seferinde anında.
adım 7, üyelik ve veri için supabase bağla. supabase şubat 2026'da resmi claude connector'ı oldu, config dosyası yok. connectors menüsünden seç, izin ver. prompt: "kullanıcı kaydı ve girişi için auth kur. KRİTİK: her tabloda row level security açık olsun, her kullanıcı yalnızca kendi satırına erişebilsin. servis anahtarını koda gömme."
adım 8, domaini al ve siteyi yayına çıkar. domain için namecheap, cloudflare ya da porkbun. uygun bir ".com" yıllık 10-20 dolar. kısa, akılda kalan, tire ve rakam içermeyen bir isim seç. yayın için vercel en kolayı, ücretsiz katmanı yeter: "projeyi github'a yükle, .env dosyasını .gitignore'a ekle, sonra vercel'e deploy et."
adım 9, ve burası seni profesyonel yapan yer. yapay zeka ile kurulan uygulamaların yaklaşık yüzde 80'i lansmanda en az bir istismar edilebilir açık taşıyor. önce opus'a owasp 2025 denetimi yaptır: "bu kod tabanını owasp top 10 2025'e göre denetle: bozuk erişim kontrolü, injection, kriptografik hata, kimlik doğrulama hatası, güvenlik yanlış yapılandırması. her bulguyu önem derecesi ve düzeltmesiyle listele."
sonra ai kodunda en sık çıkan açıkları tek tek tarat: > koda gömülü api anahtarı, şifre, token var mı, hepsi .env'e taşınmalı > supabase rls her tabloda açık mı, kullanıcı başkasının verisini çekebiliyor mu, en sık breach sebebi bu > form girdileri temizleniyor mu, sql sorguları parametreli mi > auth ve şifreleme köklü kütüphaneyle mi, elde uydurulmuş mu > bağımlılıklarda bilinen cve var mı
son adım, tek araca güvenme. opus'un üstüne gerçek tarayıcı koy: semgrep statik analizde, owasp zap çalışma anında onun kaçırdığını yakalıyor. iş mantığı hatası insan gözü ister. bir yıl önce bu iş aylarca öğrenmekti. fark artık kod yazmak değil, doğru prompt ve düzgün denetim. ilk siteni hangi fikir üstüne kuracaksın?