Altın Kural

Lovable'a Soru Sordur

Daha iyi sonuçlar almanın en etkili yollarından biri, Lovable'ın kod yazmadan önce eksikleri tamamlamasına izin vermektir. Ne istediğinizi belirttikten sonra şu satırı ekleyebilirsiniz:

"Ask me any questions you need in order to fully understand what I want from this feature and how I envision it."

• Bunun için Plan mode kullanın böylece Lovable odaklı ve isabetli sorular sorar
• Gereksinimleri en baştan netleştirir; yanlış anlamaları ve boşa harcanan eforu önler
• Yeni özellikler gerçek niyetinize çok daha yakın çıkar, daha az gidip gelmeyle aklınızdaki sonuca ulaşabilirsiniz.
• Bazen aklınıza gelmeyecek soruları bile orataya çıkarır

Faz 1

Planla · Haritalandır · Tasarla

"Belirsiz fikirler belirsiz çıktılar üretir. Net düşünce net sonuçlara götürür."

Lovable'ı açmadan önce ne inşa ettiğinizi tanımlayın. Bu adımı atlamak, ne çizeceğinize karar vermeden resim yapmaya başlamak gibidir.

Faz 1 · İpucu #1

Prompt'tan Önce Planla

Hızlı bir planlama oturumu yapın kağıt kalem, sesli not, ChatGPT, ne işe yararsa ve şu dört soruyu cevaplayın:

Prompt örneği

Build a one-page site for a budgeting app targeted at Gen Z freelancers. The main CTA should be "Start Saving Smarter." Focus on a bold, expressive aesthetic with large text and punchy colors.

Bir spesifikasyon dokümanı yazmıyorsunuz. Yön belirliyorsunuz. Düşünceniz ne kadar net olursa, prompt'larınız o kadar keskin olur.

Faz 1 · İpuçları #2 & #3

Kullanıcı Yolculuğu + Design'ı Baştan Kur

#2 Kullanıcı yolculuğunu görsel olarak haritalandır

Design tek tek ekranlarla ilgili değil ekranlar arasında neler olduğuyla ilgili. Kullanıcınızın sayfaya gelişinden kilit aksiyonu tamamlamasına kadar olan yolculuğunu çizin.

• Kullanıcı ilk ne görür?
• Aksiyon nereye götürür?
• Harekete geçme güvenini ne verir?
• Güveni ne inşa eder?

"Blokları üst üste koymuyorsunuz. Davranışı yönlendiriyorsunuz. Her bölümün var olma nedeni olmalı ve bir sonrakine yönlendirme nedeni."

#3 Design'ı baştan doğru kur

Görsel diliniz bir temeldir, cilalama katmanı değil. Erken bir yön seçin: premium ve şık, cesur ve yıkıcı ya da sakin ve zarif. Bu stili doğrudan prompt'unuza aktarın. Tutarlılık için tüm bölümlerde tekrar kullanabileceğiniz bir “starter style prompt” oluşturabilirsiniz.

Use a calm, wellness-inspired design. Soft gradients, muted earth tones, round corners, and generous padding. Font is "Inter". Overall tone should feel gentle and reassuring.

"İyi design'a prompt yazarak ulaşmazsınız. İyi design'dan prompt yazarsınız."

Faz 2

Component · İçerik · Atomlar · Buzzword

"Tam sayfa prompt size gürültü verir. Bölüm bazlı prompt size sinyal verir."

Lovable, UI'ınıza monolitik sayfalar olarak değil modüler parçalar olarak yaklaştığınızda en iyi çalışır. Bu faz, dağınık prompt'ları kesin talimatlara dönüştüren dört prensibi kapsar.

Faz 2 · İpucu #4

Sayfa Değil, Component Bazlı Prompt Yaz

Lovable'dan komple bir landing page üretmesini istemek, bir tarifi blender'a dökmek gibidir. Bir şey çıkar, ama kullanışlı olmaz.

Bunun yerine prompt'larınıza Lego taşları gibi yaklaşın. Her blokun tek bir net amacı ve yapısı olmalı: bir hero bölümü, bir feature grid, bir testimonial slider, bir pricing table.

• Netlik: Her prompt'ta tek odaklı bir talimat
• Kontrol: Tüm sayfayı yeniden prompt'lamak yerine sadece bir bloğu düzeltin
• Esneklik: Component'ler yeniden yazılmadan tekrar kullanılabilir ve uyarlanabilir
• Ölçeklenebilirlik: Aynı component'ler birden fazla sayfada çalışır

Prompt örneği

Create a floating menu bar with glassmorphism effect. Include Home, Search, Music, Favorites, Add, Profile, and Settings icons. Add gentle floating animation and smooth hover interactions.

Faz 2 · İpuçları #5 & #6

Gerçek İçerikle Tasarla + Atomik Konuş

#5 Gerçek içerikle tasarla

Lovable, placeholder içerikle iyi çalışmaz. Model, yapıya ve niyete göre yanıt verecek şekilde eğitilmiştir ve niyeti göstermenin en hızlı yolu gerçek kelimeler kullanmaktır.

• Gerçek bir başlık bir değil iki satır gerektirebilir
• CTA, isim yerine fiil olarak daha iyi çalışır
• Placeholder metin layout sorunlarını gizler. Gerçek içerik onları erkenden ortaya çıkarır

Hero section with headline: "Design Calmly." Subtext: "Turn stress into structure with Lovable." CTA: "Start Building Free." Use copy-centered layout with generous vertical spacing.

"Design kısıtlamaları sever. Gerçek içerik doğru kısıtlamaları yaratır."

#6 Atomik konuş: button, card, modal

UI diliniz ne kadar küçük ve spesifik olursa, Lovable o kadar iyi performans gösterir. “Kayıt olan bir bölüm” yerine “email için bir input alanı ve yuvarlak bir CTA button'u olan bir form” deyin. Karmaşıklığı kademeli olarak artırın: bir card ile başlayın, badge ekleyin, sonra hover state'leri ekleyin.

Create a card with a user profile picture, name, and a follow button. Add a badge for verified users, and show a tooltip when hovering over the badge.

"Parça ne kadar küçükse, cevap o kadar akıllı."

Faz 2 · İpucu #7

Estetiği Buzzword'lerle Ayarla

Görsel stil, prompting'in en önemli ve en yanlış anlaşılan parçalarından biridir. Layout tanımlamak yetmez. Lovable'a vibe konusunda yön vermeniz gerekir.

Buzzword'ler bunu yapmanın en hızlı yoludur. Bunlar dolgu değil tipografi, spacing, shadow, border radius ve renk paletini etkileyen prompt'lanabilir parametrelerdir:

Prompt örneği

Design a landing page hero that feels premium and cinematic. Use layered depth, translucent surfaces, soft motion blur, and dramatic contrast between headline and background.

"Design sadece yapı değildir. Tondur. Buzzword'ler onu tanımlar." Bölümler arasında karıştırın: cesur hero, sakin pricing.

Faz 3 · İpucu #8

Layout'lar için Prompt Pattern'leri Kullan

Prompt'lar, yapılandırılmış ve tekrarlanabilir pattern'ler kullandığınızda hem yazmak daha kolay hem de çok daha etkili olur. Bunları layout tarifleri olarak düşünün.

Çoğu pattern bir “header → content → action” yapısını takip eder. Kişisel bir prompt kütüphanesi oluşturun feature grid, testimonial slider veya pricing table için hazır yapılar. Küçük değişikliklerle tekrar kullanın ve remix'leyin.

• Her bölümü görsel parçalara ayırın, sırayı netleştirin, stilleri tanımlayın
• Yapılandırılmış, kapsamlı ve öngörülebilir prompt dili en iyi sonuçları verir
• Mesele katı olmak değil verimli olmak

Prompt örneği

Create a feature section with a centered headline, followed by three horizontally aligned cards. Each card includes an icon on top, a headline, and a short description. Cards should have soft shadows and lift on hover.

Faz 3 · İpuçları #9 & #10

URL ile Görsel Ekle + Edit ile Bağlamı Genişlet

#9 URL ile görsel ekle

Layout'unuzun gerçekçi hissettirmesini ister misiniz? Ürün demo'ları, Midjourney klipleri veya tutorial videoları URL'lerle ekleyin. Lovable, net prompt verildiğinde video embed'leri destekler.

• Yerleşim için prompt yazın (örn. hero altında veya feature card'ın içinde)
• Stil için prompt yazın (örn. yuvarlak köşeler, autoplay, sessiz)
• Bağlam için prompt yazın (neden orada ve neyi gösteriyor)

Embed a product demo video from Midjourney. Use this URL: https://cdn.midjourney.com/video/example.mp4. Place it below the feature section in a full-width card with a soft shadow.

#10 Edit butonu ile bağlam genişletin

Edit butonu, zaten çalışan kısımları bozmadan iterasyon yapmanızı sağlar. Düzenlemeleri design override'ları olarak düşünün, değiştirmeler değil. Kesin olun: tam olarak neyin değişeceğini ve neyin aynı kalacağını söyleyin.

• “replace,” “update,” “adjust” gibi kelimeler kullanın asla “make this better” değil
• Spesifik bir element seçin, sadece o elementi değiştirin
• Prompt şişmesini ve çalışan bölümleri bozma riskini azaltır

Change the CTA button text to "Get Started" and increase the padding to 24px horizontal. Keep the existing background color and font.

Faz 4 · İpuçları #11 & #12

Cloud'u Düşünerek İnşa Et + Versiyon Kontrolü

#11 Lovable Cloud'u düşünerek inşa et

Projenizin sadece iyi görünmekten fazlasını yapmasını istiyorsanız, nasıl çalışacağını düşünün. Lovable Cloud auth, veritabanı, depolama ve edge function'ları yönetir. Tasarlarken şunları öngörün:

• State'ler: Veri boşsa, hâlâ yükleniyorsa veya hata varsa ne olur?
• Dinamik içerik: Kullanıcı verisi, postlar, öğeler veya metrikler bir tablodan mı çekiliyor?
• Auth mantığı: Kullanıcı giriş yapmışsa vs yapmamışsa UI ne göstermeli?

If the user is logged in via Cloud, show their profile image and name in the top right. If not, display a "Log In" button and route them to the auth screen.

Design aşamasında çalışan bir backend'e ihtiyacınız yok ama UI'ınızı zaten oradaymış gibi şekillendirmek, layout'unuzu geleceğe hazırlamanın yoludur.

#12 Versiyon kontrolü dostunuzdur

• Her seferinde tek anlamlı bir değişiklik yapın hero metni güncelle, feature grid ekle, layout'u ayarla, sonucu kontrol et, sonra ilerle
• Büyük değişikliklerden önce preview yapın; riskli bir adım atacaksanız önce duplicate'leyin
• Milestone'larla düşünün: layout kilitlendi → içerik eklendi → mantık bağlandı
• Prompt'larınıza notlar ekleyin (örn. “CTA metnini değiştirdim ve card spacing'ini ayarladım”)

"Otomatik kayıt, otomatik düzen demek değildir. Bilinçli inşa edin. Farkındalıkla iterasyon yapın."

Canlı Demo

“Briefly” ile Tanışın

AI destekli toplantı özetleyici toplantılarınıza katılır, kararları yakalar, özlü özetler sunar

Lovable'da 7 ardışık prompt kullanarak eksiksiz bir waitlist landing page inşa edeceğiz. Her prompt az önce ele aldığımız teknikleri uygular.

Canlı Demo · Prompt'lar

7 Prompt: Briefly'yi İnşa Etmek

Build a one-page waitlist landing page for "Briefly" — an AI-powered meeting summarizer SaaS.

Use a premium, cinematic dark theme. Background: deep navy (#0B0F1A). Accent: electric violet (#7C5CFC). Secondary accent: soft cyan (#4AEADC). Font: "Inter" for body, a bold geometric sans-serif for headlines. Overall feel: premium, cinematic, developer-focused but accessible. Generous whitespace, smooth micro-animations, glassmorphism touches.

Start with the hero section only:
- Headline: "Meetings talk. Briefly listens."
- Subtext: "AI that joins your calls, captures every decision, and delivers crisp summaries before your coffee gets cold."
- CTA: A glowing email input field with a "Join the Waitlist" button
- Add a subtle animated gradient orb behind the hero text
- Below the input, show: "1,847 builders already on the list" with a row of small overlapping avatar circles

Add a floating navigation bar at the top with glassmorphism effect (translucent background with backdrop blur, thin 1px border, subtle shadow). Include:
- Logo "Briefly" on the left in bold accent color
- Nav links: Features, How it works, Pricing, and a small "Join Waitlist" button on the right
- Sticky on scroll, gentle fade-in on page load
Do not modify the hero section.

Create a features section below the hero with a centered headline: "Everything you missed, nothing you didn't need."

Add three horizontally aligned cards:
1. Icon: microphone — Title: "Auto-Join Calls" — "Briefly joins Google Meet, Zoom, and Teams. No bots, no awkward intros."
2. Icon: sparkles — Title: "AI Summaries" — "Key decisions, action items, and follow-ups — structured and searchable in seconds."
3. Icon: share — Title: "Instant Share" — "Send summaries to Slack, Notion, or email. Everyone stays aligned."

Cards: soft shadow, subtle border, lift on hover with transition. Icons in accent color. Keep existing sections untouched.

Add a "How it works" section with 3 steps in a horizontal timeline:

Step 1: "Connect your calendar" — "Link Google Calendar or Outlook. Briefly knows when you're in a meeting."
Step 2: "Briefly joins & listens" — "Our AI captures the conversation in real-time. No recording anxiety."
Step 3: "Get your brief" — "60 seconds after the call ends, a structured summary lands in your inbox."

Use numbered circles (1, 2, 3) in accent color, connected by a subtle dotted line. Each step has an icon above and description below. Do not modify any existing sections.

Add a testimonial section after "How it works":

Large centered quote: "I used to spend 20 minutes after every meeting writing notes. Now Briefly does it in 60 seconds — and the notes are better than what I wrote."
— Sarah K., Product Manager at a Series B startup

Style: large italic text, oversized quotation marks in accent color, subtle gradient background behind the quote card. Add a small circular avatar placeholder and a verified badge next to the name.

Add a final CTA section before the footer:
- Headline: "Stop losing decisions to bad notes."
- Subtext: "Join the waitlist. Be first when we launch."
- Repeat the email input + "Join the Waitlist" button
- Below: "Free during beta. No credit card required."

Then add a minimal footer:
- "Briefly" logo on the left
- Links: Privacy, Terms, Twitter, LinkedIn
- "2026 Briefly. All rights reserved." on the right
Keep everything above untouched.

(Select specific elements and use the Edit button for each:)

- Add a subtle glow/pulse effect to both "Join the Waitlist" buttons
- Add smooth scroll behavior when clicking navigation links
- Add staggered fade-in-up animations for each section on scroll
- Ensure full mobile responsiveness: stack cards vertically, reduce headline sizes, full-width CTA on small screens
- Keep all existing copy and colors unchanged

Özet

Önemli Çıkarımlar

12 teknik, 4 faz, 1 zihinsel model