GPT Astra ile Awwwards tarzı, ödüllü sitelere rakip bir tasarım hedefleyerek scroll tabanlı ve 3D bir web sitesi geliştirdim. Peki web tasarımında Claude’u geçti mi? Bu videoda Astra ve Claude Fable 5.1’i gerçek bir proje üzerinden test ediyor, ortaya çıkan sonuçları karşılaştırıyorum.
Göz videosu, Three.js ile sahnelenen 3D gözlük modelleri, GSAP animasyonları, ürün görselleri ve marka kimliğini tek bir deneyimde birleştiriyoruz. Astra’nın ürettiği web sitesini ayrıntılı olarak inceliyor; kullandığım promptu, tasarım yaklaşımını ve revizyon sürecini gösteriyorum.
Astra’nın görsel referansları değerlendirme, uzun ve karmaşık görevleri takip etme, ayrıntılı talimatları uygulama ve sonuçları kontrol etme becerilerini proje üzerinden ele alıyorum. Skill’lerin bu süreçteki rolünü, frontend geliştirmede dikkat edilmesi gereken noktaları ve Astra ile Claude’un paketlerini de konuşuyoruz.
Backend projelerinde bu becerilerin neden önemli olabileceğini açıklayıcı örneklerle değerlendiriyorum; bu bölüm ayrı bir backend performans testi değil. AGI (yapay genel zekâ) gibi büyük iddialardan bağımsız olarak odağımız, modellerin gerçek bir web geliştirme görevinde neler yapabildiği ve nerelerde insan kontrolüne ihtiyaç duyduğu.
Projede kullandığım 3D gözlük modeli:
Sizce hangi sonuç daha başarılı: GPT Astra mı, Claude Fable 5.1 mi? Tasarım, animasyon ve kullanıcı deneyimi açısından tercihinizi yorumlarda paylaşın.
BÖLÜMLER
00:00 Giriş ve Web Sitesi Gösterimi
00:50 Astra’nın Güçlü Noktaları: Görsel Değerlendirme
01:36 Uzun ve Karmaşık İşleri Takip Etme
02:29 Talimat Takibi ve Test Yeteneği
03:26 Backend Projelerinde Astra
04:26 Prompt İncelemesi
05:34 Astra ile Yapılan Web Sitesinin İncelenmesi
08:08 Astra ve Claude Paketleri
09:06 Fable 5.1 Web Sitesi Sonucu
12:17 Genel Değerlendirme: Astra mı, Claude mu?
14:16 Kapanış
#gptastra #claude #awwwards #astra #fable #fable5 #fable51 #openai #chatgpt #yapayzeka #webtasarim #webdesign #webdevelopment #threejs #gsap #creativecoding #agi
source
I’ve raised the bar with this project 🚀Which design do you prefer: Astra or Claude? I’d love to hear your thoughts.
Arkadaşlar, bu projede çıtayı biraz daha yükselttim ✨ Sizce hangi tasarım daha başarılı: Astra mı, Claude mu? Fikirlerinizi duymak isterim.
Prompt:
Design and build a complete, visually exceptional website for VEIL, a global, ultra-premium eyewear brand, using the supplied eye video, actual 3D eyewear models, and all 10 product images already included in this project.
The ambition is an Awwwards-level experience: distinctive art direction, sophisticated typography, bold composition, purposeful interaction, and polished execution. Create a memorable luxury brand experience with ambitious scroll-driven storytelling.
You own the creative direction. Choose the typography, palette, copy, layouts, section structure, lighting, and motion language. Preserve the VEIL name and any strong existing brand elements, while reworking anything that limits the experience.
Make confident creative decisions and implement them without asking me to choose a visual direction.
1. INSPECT THE PROJECT AND APPLY THE AVAILABLE SKILLS
Before designing, inspect the existing stack, source code, video, 3D models, and all 10 images.
Read and apply the available `design-dna`, `scrollcraft`, `frontend-design`, `design-taste-frontend`, and relevant GSAP, Three.js, and 3D scroll skills. Briefly report unavailable skills and proceed with the capabilities you have.
Establish a coherent design DNA across composition, typography, spacing, materials, imagery, and motion. Work within the existing stack.
Use English copy for an international audience that values design, craftsmanship, and exclusivity. Express the luxury positioning through the actual execution. Avoid unsupported claims about manufacturing, certifications, brand history, or product specifications.
2. THE OPENING IS MANDATORY: A COMPLETE WEBSITE HERO OVER THE EYE
Use `eyes-project-website.mp4` as the full-screen opening hero.
On initial load, show the exact opening eye frame and keep the video paused. The eye must remain completely still until the user scrolls. No autoplay, looping, idle eye movement, or artificial animation.
The first screen must already feel like the entrance to a finished luxury website. Include:
* The VEIL wordmark or logo.
* Usable navigation.
* A strong editorial headline and concise supporting copy.
* A purposeful call to action.
* A subtle indication to scroll.
Design these elements over the eye with excellent readability and deliberate placement. The hero must have a complete composition from the beginning. Do not make visitors scroll to discover the initial branding or headline.
Display a matching poster extracted from the opening frame while the video becomes ready, without a visible jump. Keep the hero usable during loading.
3. SCROLL TAKES THE VISITOR INTO THE EYE
Pin the opening scene while the user scrolls through the video.
Map scroll progress to the video timeline:
* Forward scrolling advances the footage.
* Backward scrolling reverses it.
* When scrolling stops, the playhead settles at the corresponding frame and remains paused.
Do not trigger normal playback on entering the section. Scroll must control the playhead throughout this experience, with responsive seeking and minimal lag.
Use the supplied footage for the journey into the eye. Preserve its content and composition. Do not recreate the eye or invent a replacement tunnel.
Choreograph the hero text and navigation as the journey begins, keeping important content readable before it leaves the scene.
The intended feeling is that the website's opening leads us through the eye into the brand's world.
4. THE VIDEO MUST HAND OFF IMMEDIATELY, WITH NO EMPTY BLACK GAP
This requirement is critical.
As soon as the video completes its journey and reaches black, the next designed visual event must begin. The darkness is the boundary connecting the two scenes.
There must be no additional scrolling through an empty black viewport, no artificial pause, and no blank spacer between the video and the next scene.
Inspect the footage and coordinate the video endpoint, scroll range, pinning, and next-scene visibility. If the file contains a repeated black tail, do not turn those identical frames into an inactive stretch of scrolling. Preserve the visible eye journey and use the completed transition to black as the handoff.
Prepare the next scene and its required assets before this boundary so loading does not create a gap.
A possible direction is the illuminated edge of the actual 3D glasses emerging from darkness, followed by a dramatic close-up that reveals the full product. You may invent a stronger approach. The required outcome is an immediate, continuous visual connection.
Avoid white flashes, layout jumps, premature content reveals, or overlapping scenes that break the illusion. The transition must also work naturally when scrolling backward.
5. MAKE THE REAL-TIME 3D EYEWEAR A MAJOR CREATIVE MOMENT
Use the supplied models in actual Three.js scenes, with GSAP and ScrollTrigger coordinating the experience.
Inspect the models' geometry, materials, textures, and separate parts before planning their choreography.
Give the product a commanding visual presence. Explore dramatic scale changes, expressive camera angles, close-up details, and lighting that reveals the frame and lenses.
Build a purposeful progression between detail, silhouette, angle, and complete form. Let typography, camera composition, and the product work together.
Create at least one memorable signature sequence beyond the eye video. Develop your own concept for it rather than following a fixed storyboard.
Render metal, transparency, reflections, and lenses carefully wherever supported by the assets. Only articulate separate parts or create exploded views when the model structure supports it.
Protect text readability throughout the motion. Plan intentional spaces for copy so the eyewear does not accidentally obscure essential text or controls.
6. USE ALL 10 IMAGES WITH CREATIVE ART DIRECTION
Inspect every supplied product image and give all 10 a meaningful place in the finished experience.
Vary their scale, composition, pacing, and relationship to typography. Explore editorial layouts, controlled reveals, image sequences, or transitions between photography and 3D where they support your concept.
Avoid presenting the entire collection as a repetitive grid of identical cards. Build a visual rhythm that reflects the different backgrounds, lighting, and materials.
Preserve eyewear proportions and important details when cropping. Treat different frame designs as distinct products; do not imply that a photograph and an unrelated 3D model show the same eyewear.
All 10 images must remain accessible on mobile.
7. COMPLETE THE WHOLE EXPERIENCE
Carry the opening's ambition through the entire website, including the collection, supporting brand content, navigation, and ending.
Choose the sections yourself. Connect them through a clear visual story, balancing major motion sequences with quieter moments.
Make calls to action and navigation perform meaningful actions within the implemented experience. Avoid dead controls and unfinished destinations.
Deliver responsive desktop and mobile layouts. Adapt camera framing, typography, crops, and scroll distances to the device.
Respect reduced-motion preferences with an intentional accessible alternative. Manage loading and WebGL resources carefully, and avoid unnecessary rendering when scenes are offscreen.
If the video needs optimization for responsive seeking, preserve the original and create an optimized derivative using available tools.
8. VERIFY THE ACTUAL RESULT
Implement the complete website, then inspect it in the browser.
Verify:
* The initial hero contains branding, navigation, headline, and a call to action.
* The opening eye stays still before scrolling.
* Forward, backward, and stopped scrolling control the footage correctly.
* The next visual event begins immediately when the eye journey reaches black.
* There is no inactive black scroll interval.
* The 3D models load and their choreography works in both directions.
* All 10 images are integrated.
* Text and controls remain readable and usable.
* Desktop and mobile layouts work without significant errors or broken assets.
Refine issues you discover before finishing. Clearly distinguish completed browser checks from anything you could not verify.
Briefly explain the creative concept, how the supplied assets and skills were used, and what you tested.
Deliver the implemented experience. Make the first complete version creatively ambitious. Start it up on port http://localhost:5179/
what award it won?
Hi Yildiz, excelent video, I have a question: What files did you provide for her to build the website, in the folder (astra-website-example), and in what format?
Çok güzel anlatmışsın. Ben şu an aktif geliştirdiğim full-stack projelerde yoğunlukla Google tarafının modellerini kullanıyorum(antigravit2.0) gemini 3.1pro ve 3.8flash kullaniyorum ; fiyat ve limit baskısı olmaması vibe coding yaparken ciddi bir rahatlık sağlıyor. Ancak proje ölçeklendikçe ve mimari karmaşıklaştıkça kodda regresyon hataları (bir özellik eklerken diğer yeri bozma) can sıkmaya başlıyor.
Astra'nın kod bütünlüğü ve hata ayıklama başarımı kağıt üzerinde çok iyi görünse de, yoğun günlük kullanımda kotalar/maliyet ve hız dengesi pratikte nasıl bir deneyim sunuyor? Sen günlük ana iş akışında limitlere takılmadan sürdürülebilir bir geliştirme yapabiliyor musun, yoksa hibrit (ufak işler için hızlı model, mimari için Astra) bir akış mı önerirsin?
Acikcasi bence GPT modelleri backend'de zaten Claude'e göre daha iyi.
Azerbaycandan Selamlar olsun çok güzel video hazırlamışsınız mümkünse sıfırdan bir eğitim çekin saygılar
Kredi mi kullanıyorsunuz yoksa üyelik planlarını mı?
Claude daima daha iyi.
Chatgpt ile bir makinenin 3 boyutlusunu çizmesini istedim, teknik çizimleri verdim. Sonuç, rezalet. Calude ile özel tasarım bir evi parçalarına ayırmak benim için harika bir iş olacak çünkü detaylar özel ve zaten patent başvurusunda bulundum.
Très belle video avec beaucoup de valeurs et de techniques
Promtu hangi ai dan yazdınız
Çok akıcı bir anlatım olmuş. Kanaldaki İlk videonu izlediğimde "umarım yeterince ilgi görmediğini düşünmeden devam eder" demiştim kendi kendime. Bırakmadın devam ettin ve ingilizce altyazı ekleyerek bir üst seviyeye ulaştın. Başarılarının devamı dilerim.
Sorum:
token kullanım maliyetleri hakkında da bilgi verebilir misiniz?
Hello Yıldız, I see you from Mexico and it enchants me, thanks for so much support!, Greetings
please share how to create these prompts, thanks! you are doing awesome work
Bende aynı şekilde kullanıyorum. ChatGPT ile Claude'u yönlendiriyorum. Gpt ile birlikte karar alıyoruz ve sonrasında Claude'a istemleri GPT yazıp süreci yönetiyor ve çok kaliteli işler çıkıyor bu şekilde.
👏👏
Emeğinize Sağlık.
Yidiz benim icin bir model iyi mi degil mi REFERANS net ! Yine muthis bir video …
Fable 3 d model tasarımında bu kadar iyi değil ki , sonda ki gözlük parçalanmasını nasıl yaptı acaba….
CHAT GPT GİBİ BİR YAZILIM VAR SENİN GÜZEL GÖZLERİNİ KOPYALAMIŞ ABLA BİLGİNE.
Abla backendi yaptı pro alacam duruma göre ya
GELDİ GELDİ SONUNDA O VİDEO GELDİ
Merhaba Hocam,
Yine döktürmüşsünüz. Emeğinize, fikrinize ve hayal gücünüze sağlık.
Her gün böyle bir video çekseniz, eminim her seferinde aynı keyifle izlerim. Şu an yurt dışındayım, Toronto’dayım. Burada sizin gibi yaratıcı düşünen ve bunu bu kadar özgün işlere dönüştüren insanlara gerçekten çok nadir rastlıyorum.
Beni ayrıca gururlandıran bir şey var. Böylesine yaratıcı ve nitelikli işlerin Anavatanımdan çıkıyor olması. Sizin yaptığınız işlere uzaktan baktığımda, hem ülkem adına hem de sizin adınıza ayrı bir gurur duyuyorum.
Emeğinize sağlık Hocam. Daha nice güzel işlerinizi görmek dileğiyle.
tşk goat
Evet anlattıkların gerçekten harika. İyi işler üretmek isteyen biri daha olarak scrollda kullanılacak videoların da nasıl üretildiğini merak ediyorum çünkü benim ürettiğim videolar bu kadar detaylı ve net olmuyor. Takipteyim.
abla senin gözün sitedeki gözden daha iyi maşallah gerçekten
Merhaba Yıldız. Emek verip içine girdiğin bu uğraşta başarılı olmanı canı gönülden diliyorum. İçeriklerin hep site yapmak üzerine ve günümüzdeki en dandik yapay zekalar bile site yapma konusunda oldukça iyi işler çıkarabilmekte. Seni üzmeyi kesinlikle istemem ama senin videolarını izleyerek destek olmak isteyen biri olarak şunu sana söylemek isterim ki; lütfen ürettiğin içeriklerin konu hazinesini biraz bollaştır. Yapmazsan da canın sağolsun. Başarılar dilerim.
Bu videoda kullanılan efektler geçişler animasyonlar çizgiler ne güzel olmuş öyle
Gittikçe gelişiyor her video, onları da astra bey mi yaptı acaba
Bence çok faydalı bir anlatım oldu.İşi sizin gibi mutfağında olan kişilerden dinlemek bir şeyler öğrenmemize yardımcı oluyor.Teşekkür ederiz Yıldız Hanım
İnanılmaz bir sıçrama değil mi. Yapay zekanın neler yapabildiğini gördüğümüzde agi teknolojisinin kapıya dayandığını ve bir 10 yıla hayatımıza gireceğini konuşurken sanki bir bilimkurgu efsanesinden bahsediyor gibiydik. Ama çok hızlı bir şekilde oyuna dahil oldu. Bu kadar çabuk olmasını beklemiyordum. Üstelik emeklemiyor bile. veri kalitesi mantık denetimi ve bir çok şey iyi piştiği için yapay zekanın ilk dönemlerindeki gibi sancılarla ve halüsinasyonlarla da gelmedi. Formül unlock oldu ve rekabetin bizi kısa süre sonra nereye götüreceğini çok merak ediyorum. haftada bir modellerinin ismini değiştiren firma ne yapacak acaba. Bard mı derler adına artık nano çikita muz mu merak ediyorum. Öte yandan göğüs kafesi cybertruck'a benzeyen ve özel jetinde diablo oynamayı havalı bulan adamdan pek bir beklentim yok artık.
Çok faydalı içerikler, emeğinize sağlık.
hocam backend tarafını nasıl çözüyorsunuz frontend güzel ama backend de buglar vs bunlarda önemli değil mi cevaplarsanız sevinirim.( Backend tarafında çok bug çıkıyor kodları kendimde insan gözüyle kontrol ediyorum fronted güzel ama backend sıkıntı olduğunu düşünüyorum)
harika bir anlatim, agzina saglik
peki websiteleri icin tasarim konusunda bize destek olabilecek bir websitesi var mi? bize promt hazirlayan yerler var mi? tasarim konusunda gercekten cok cahilim.
Mükekemmel kaliteli videolar teşekkür ederim.
Hocam prompt'u nasıl oluşturuyorsunuz ya da oluştururken hangi talimatları veriyorsunuz? Çok güzel bir içerik olmuş elinize sağlık
Yıldız hocam şu ses olayını artık çöz lütfen. sesin çok az geliyor.
Fable çok güzel ama işlemlere göre ücretlendirmesi pahalı, astra bi tık daha ucuz olmasına rağmen Prompt da benzer bi iş çıkarmış
Emeğinize sağlık 🙏🏻
Excellent video. Thank you very much for sharing your knowledge. Greetings from Brazil! 🇧🇷
8:23 Kıyaslamalarda Fable 5.1 'den daha ucuz olduklarını göstermişlerdi grafiklerde? Ben Fable ile Astra arasında bu örnekte çok fark göremedim ama ellerinize sağlık. Bir de, Allah aşkına şu video üretme kısmına gelebilir miyiz:))