@media (max-width: 1100px) { .ai-website-builder-document .site-chrome [data-nav-primary], .ai-website-builder-document .site-chrome [data-nav-toggle] { display: none !important; } .ai-website-builder-document .site-chrome .nav-inner { grid-template-columns: minmax(0, 1fr) auto; } .ai-website-builder-document .site-chrome .nav-inner > .brand { order: 1; justify-self: start; } .ai-website-builder-document .site-chrome .nav-inner > .nav-side { order: 2; justify-self: end; } }

Etkileşimli Web Sitesi OluşturucuOpenDesign

Etkileşimli Web Siteleri için Yapay Zekâ Web Sitesi Oluşturucu

Önce istediğiniz davranışı tarif edin, ardından çalışan sayfada deneyin. OpenDesign’i bir kodlama ajanıyla kullanarak açık bir brief’ten sekmeler, filtreler, karşılaştırmalar veya anlatı odaklı etkileşimler oluşturun. Değiştirilmesi gereken durumu işaretleyin, desteklenen HTML ayrıntılarını düzenleyin ve oluşturulan mantığı test için kullanılabilir halde tutun.

OpenDesign'i indir Web sitesi örneğini gör

Markalı frontend · Gerçek dosyalar · Kodlama ajanınızla devam edin

OpenDesign’deki Etkileşimli Yapay Zekâ Web Sitesi Oluşturucu iş akışı için örnek masaüstü web sitesi tasarımı. — Durumlar · Hareket · Erişilebilir Kontroller

01Duruma Duyarlı BileşenlerVarsayılan, üzerine gelme, odak, etkin, genişletilmiş, yükleniyor, boş ve hata durumlarını bilinçli biçimde tasarlayın.

02Amaca Yönelik HareketGeçişleri kavrayışı geciktirmek için değil; hiyerarşiyi, nedeni ve değişimi açıklamak için kullanın.

03Klavye ve Azaltılmış HareketKontrollerin kullanılabilir olmasını ve temel içeriğin animasyon olmadan da erişilebilir kalmasını sağlayın.

04Düzenlenebilir UygulamaÖn yüz dosyalarında zamanlamayı, durum mantığını, duyarlılığı ve performansı geliştirmeye devam edin.

Etkileşimli Web Sitesi Örneği

Yalnızca İlk Kareyi Değil, Etkileşim Durumlarını da Tasarlayın.

Görünür tasarım kullanıcıya düşen işi açıklarken ön yüz; girdilerin, geri bildirimin, alternatiflerin ve erişilebilirlik davranışlarının incelenebilmesini sağlar.

Etkileşimli Veri Hikâyesi

Karşılaştırma, Zaman Çizelgesi, Filtreler ve Anlamlı Geri Bildirim İçeren Görsel Bir Hikâye.

Bu örnek iklim verisi tasarımı, karşılaştırma, zaman çizelgesi ve filtrelerin hikâyeyi nasıl destekleyebileceğini gösteriyor. Görsel, tasarım yönünü örnekliyor; etkileşimin test edildiğini göstermiyor. Kontrolleri uygulamak, çalışan önizlemede denemek ve doğru çalışmayan durumlar hakkında geri bildirim vermek için kodlama ajanı iş akışını kullanın.

Kontroller ve geçerli durum, hikâyenin dışında yüzmek yerine hikâyeye yerleşiyor
Açık geri bildirim sunan karşılaştırma, zaman çizelgesi ve filtre kalıpları
Klavye, azaltılmış hareket ve hata durumları için incelenmeye hazır ön yüz davranışı

Durumlu HikâyeEtkileşim SistemiTest Edilebilir Ön Yüz

Önce-sonra karşılaştırması, zaman çizelgesi, filtreler, ölçümler ve erişilebilir etkileşim ipuçları içeren eksiksiz bir masaüstü iklim verisi hikâyesini gösteren etkileşimli yapay zekâ web sitesi oluşturucu örneği. — Örnek tasarım · Müşteri projesi değildir1672 × 941 · 16:9

Durum Matrisi

Etkileşim Tasarlamak, Varsayılan Ekrandan Fazlasını Tasarlamaktır.

Kontrolün girdilerini ve durumlarını kodlama ajanına açıklayın, çalışan sonucu deneyin ve davranış brief’ten farklıysa sorunun yerini belirten geri bildirim gönderin.

DurumZiyaretçiye Geri BildirimUygulama Kontrolü

Varsayılan ve Üzerine Gelme

Kullanım ipucu ve vurgu

Anlam yalnızca üzerine gelme durumuna bağlı değil

Odak ve Klavye

Görünür konum ve eylem

Sıralama, hedef ve erişilebilir ad

Yükleniyor, Boş, Hata

İlerleme ve kurtarma

Gerçek veri ve hata davranışı

Azaltılmış Hareket

Aynı içerik ve kontrol

Temel işlevler animasyona bağlı değil

Etkileşim Akış Panosu

Kullanıcı İhtiyacı → Girdiler → Durumlar → Geri Bildirim → Alternatif.

Her etkileşim, ziyaretçinin anlaması veya tamamlaması gereken şeyle başlar.

1
Kullanıcı Eylemini Açıklayın
Ziyaretçinin neyi anlamaya veya tamamlamaya çalıştığını ve etkileşimin neden yardımcı olduğunu belirtin.
2
Durumları ve Girdileri Haritalayın
Kontrolleri, başlangıç durumlarını, geçişleri, geri bildirimi, klavye ve dokunmatik ekran davranışlarını ve alternatifleri listeleyin.
3
Bir Etkileşimi Oluşturup Deneyin
Dosyaları düzenleme işleri için Yerel Kodlama Ajanı kullanın. Başlangıç durumunu, girdiyi, görünür yanıtı ve alternatifi isteyin; ardından oluşturulan kontrolü çalışan önizlemede deneyin.
4
Çalışmayan Durumdan Geri Bildirim Gönderin
Etkilenen alanı işaretleyin ve beklenen davranışı ajana açıklayın. Görsel ayrıntıları doğrudan HTML düzenlemeleriyle iyileştirin; ardından klavye kullanımını, dokunmatik ekranı, hareket ayarlarını ve uç durumları yeniden test edin.

Deneyebileceğiniz odaklı bir revizyon

İşaretlenen kontrolün varsayılan, yükleniyor, başarılı, boş ve hata durumlarını gözden geçirin. Klavyeyle kullanılabilir olmasını sağlayın, odağı görünür tutun ve hareketi azaltılmış bir kullanım yolu sunun. Hangi davranışın gerçek bir hizmet gerektirdiğini açıklayın.

Etkileşim Sistemi

Etkileşimlerini İş Başında İnceleyebileceğiniz Bir Yapay Zekâ Web Sitesi Oluşturucu.

Uygulama, statik bir maketle ima edilmek yerine incelenip test edilebilir.

Etkileşimli Bileşen Durumları

Gezinme, filtreler, sekmeler, akordeonlar, karşılaştırmalar, önizlemeler ve diğer kontrollerin görünür durumlarını tanımlayın.

Duyarlı Davranış

Kullanılabilir alan değiştikçe hangi öğelerin yeniden akacağını, sadeleşeceğini, kaydırılabilir olacağını veya kaybolacağını belirleyin.

Test Edilebilir Bir Ön Yüz

Durum mantığını ve stilleri geliştiricilerin inceleyebileceği, ölçebileceği ve üretim için sağlamlaştırabileceği dosyalarda tutun.

Amaca Yönelik Davranış

Web Sitesinin Anlamına Bağlı Etkileşim.

Ekran görüntüsü, filtrenin doğru sıfırlanıp sıfırlanmadığını veya akordeonun klavyeyle kullanılıp kullanılamadığını gösteremez. OpenDesign, oluşturulan web sitesini çalışan bir önizleme olarak kullanılabilir tutar; böylece ajan revizyonlarını statik bir kareye değil, denediğiniz davranışa göre yönlendirebilirsiniz.

Codex — **index.htmlstyles.csscomponents/**

Claude Code — **index.htmlstyles.csscomponents/**

Oluşturulan Kontrolü Deneyin

Çalışan ön yüzü deneyin ve gerçek yanıtını istediğiniz etkileşimle karşılaştırın.

Sorunlu Durumdan Geri Bildirim

Başarısızlığı yerini belirtmeden anlatmak yerine işaretlenmiş bağlamı ve beklenen geçişi ajana gönderin.

Davranışı Görsel İyileştirmeden Ayırın

Durum mantığını kodlama ajanına değiştirtin; boşlukları, yazı tipini ve görsel geri bildirimi ayarlamak için desteklenen HTML stil kontrollerini kullanın.

Mantığı Test Aşamasına Taşıyın

Oluşturulan dosyaları inceleyin, kontroller ekleyin ve görsel incelemeden sonra mühendislik iş akışınızda uygulamayı değiştirin.

Kapsam · Etkileşimli Yapay Zekâ Web Sitesi Oluşturucu

Çalışan Bir Etkileşim de Gerçek Testler Gerektirir.

Tarayıcı tarafındaki davranış, üretime hazır bir veri hizmeti değildir. Yükleniyor ve hata durumlarını isteyin; ardından bunları kullanacağınız gerçek API’lerle, erişilebilirlik gereksinimleriyle ve çalışma ortamıyla doğrulayın.

Web sitesi teslimatlarınız

Etkileşimli Bileşen Durumları
Duyarlı Davranış
Test Edilebilir Bir Ön Yüz

Ayrı hizmetler ve sorumluluklar

Üretim arka uç durumu
Gerçek zamanlı veri hizmetleri
Kimlik doğrulama ve izinler
Otomatik erişilebilirlik sertifikasyonu

Etkileşimli çıktılar hâlâ gerçek cihazlarda, klavye ve ekran okuyucularla, azaltılmış hareket ayarlarında, farklı ağ koşullarında, üretim verileriyle ve nihai uygulama mimarisinde test edilmelidir.

Etkileşimli Yapay Zekâ Web Sitesi Oluşturucu SSS

Durumlar, Hareket, Erişilebilirlik ve Kod Hakkında Etkileşimli Yapay Zekâ Web Sitesi Oluşturucu Soruları.

Oluşturulan kontrolleri denemek, davranışı bir ajanla gözden geçirmek ve görsel düzenlemeleri mantık değişikliklerinden ayırmak.

Etkileşimli Web Sitesi Oluşturucu Neler Üretebilir?

Ön yüz kontrolleri, durumlar, geçişler, duyarlı davranışlar ve tarayıcı tarafında çalışan etkileşimler oluşturabilir. Sonuç, brief’e bağlıdır ve yine de test ile üretim incelemesi gerektirir.

Animasyon Ekleyebilir mi?

Evet; hareket hiyerarşiyi, geri bildirimi veya açıklamayı desteklediğinde. Temel içerik, hareket azaltıldığında ve animasyonun tamamlanması beklenmediğinde de kullanılabilir olmalıdır.

Etkileşimli Olması Arka Uç İçerdiği Anlamına mı Gelir?

Hayır. Sekmeler, filtreler, önizlemeler ve yerel durum ön yüz davranışlarıdır. Hesaplar, kalıcı veri saklama, API’ler, gerçek zamanlı veriler ve veritabanları ayrıca uygulanmalıdır.

Etkileşim Erişilebilir Olacak mı?

Ön yüzde klavye kontrolleri, odak durumları, erişilebilir adlar ve azaltılmış hareket desteği bulunabilir; ancak gerçek erişilebilirlik için test ve düzeltme gerekir.

Oluşturulan Etkileşimi Nasıl Düzenlerim?

Çalışan önizlemede deneyin, etkilenen alanı işaretleyin ve istediğiniz girdi, durum ve yanıtı dosyalara erişebilen bir kodlama ajanına iletin. Doğrudan HTML düzenlemesi görsel ayrıntıları iyileştirebilir; ancak mantık değişiklikleri uygulamanın değiştirilmesini ve yeni davranışın test edilmesini gerektirir.

Oluşturmaya başla

İlk Görünümle Son Eylem Arasındaki Deneyimi Oluşturun.

Durumları açıklayın, ön yüzü oluşturun ve inceleyebileceğiniz kodda davranışı geliştirmeyi sürdürün.

OpenDesign'i indir

Platforma bağımlılık yok

Düzenlenebilir dosyalara, yeniden kullanılabilir bileşenlere ve kodlama ajanıyla geliştirmeye devam etme olanağına bağlı etkileşimli yapay zekâ web sitesi oluşturucu ön yüzü.

Düzenlemeye hazırEtkileşimli Yapay Zekâ Web Sitesi Oluşturucu Ön Yüzü OluşturulduHTML · CSS · JavaScript · Bileşenler