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.
Long
Shorts
