Muzaffer Kadir | mkdir dev

Google Stitch v2 Denedim - Çok Fena!

Google stitch 2 versiyonu yeni özelliklerle bayaa iyi olmuş. Bu videoda deneyimlerimi aktarmaya çalıştım. ➤ https://stitch.withgoogle.com/ Timestamps: 00:00 Giriş 00:40 Figmaya Aktarım 01:10 Prompt ile düzenleme 02:23 HTML Aktarımı 03:36 Design System Özelliği 04:10 Prototip Oluşturma 04:30 Yeni Proje Oluşturmak 08:10 Sonuç Verdiğim prompt: Design a luxury modern furniture brand website called "FORMA" with a bold editorial aesthetic. VISUAL DIRECTION: - Dark theme: deep charcoal (#0D0D0D) background with warm sand (#E8DCC8) and terracotta (#C4713A) accents - Typography: Large, elegant serif display font for headings (like Playfair Display or similar), paired with a clean light sans-serif for body text - Atmosphere: architectural, editorial, high-end showroom feel HERO SECTION: - Full-screen layout with a large asymmetric composition - Left side: oversized display text "FORMA" in serif, stacked vertically, giant and bold - Right side: a full-bleed lifestyle photo of a minimalist living room with warm lighting (use placeholder) - Subtle tagline below: "Crafted for living. Designed to last." - Two CTAs: "Explore Collection" (outlined button) and "Book a Showroom Visit" (filled terracotta button) - A thin horizontal scroll-hint indicator at the bottom NAVIGATION: - Sticky minimal top bar, logo "FORMA" left-aligned in serif - Center nav links: Collections / Materials / Atelier / About - Right: Search icon + Cart icon (with item count badge) - On scroll: nav background transitions from transparent to frosted glass blur FEATURED COLLECTION GRID: - Section title in large serif: "The Autumn Edit" - Asymmetric 3-column product grid — one large card spanning 2 rows - Each product card has: full-bleed product photo, product name, subtle material tag (e.g. "Solid Oak / Boucle"), price, and a hover overlay with a quick-add button - Card corners: sharp, no border-radius — clean and architectural MATERIALS SECTION: - Dark background section with horizontal scroll of material swatches - Swatches are large squares (Oak, Walnut, Marble, Brass, Linen) with texture labels - Heading: "Every piece begins with material." TESTIMONIAL / BRAND STATEMENT: - Full-width section with a large pull quote: "Furniture should be the punctuation of a room — not a sentence." - Name + title of a fictional creative director underneath - Minimal, lots of white space FOOTER: - Three-column layout on dark background - Left: FORMA logo + brand tagline - Center: nav links + social icons (minimal line-style) - Right: Newsletter signup with a single email input and arrow button - Bottom bar: copyright + privacy / terms links in tiny caps OVERALL FEEL: Sophisticated, architectural, and quiet luxury. Inspired by brands like Aesop, Fritz Hansen, and Hem. Every element should feel intentional — generous whitespace, restrained color use, and typography doing the heavy lifting. 💐 Videoyu faydalı bulduysanız üye olarak bana destek olabilirsiniz. Kanala Abone Olmak İçin ➤ https://www.youtube.com/@muzafferkadir Prompt Engineering Eğitimi ➤ https://www.youtube.com/playlist?list=PL92MjDkthYhDSGT-UZwfGdUAYAedERXr9 n8n Eğitimi Serisi ➤ https://www.youtube.com/playlist?list=PL92MjDkthYhBAquGqaaLLHRwdZHgQVEad Kişisel Websitem ➤ https://mkdir.dev Merhaba, Ben Muzaffer Kadir YILMAZ. Bilgisayar Mühendisiyim, 8 seneyi aşkın yazılım tecrübelerimi sizlerle paylaşmaya çalışıyorum. Kanalıma abone olarak bana destek olabilirsiniz.