102.3K+İndir
Geliştiriciler içinOpenDesign

Geliştiriciler için yapay zekâ web sitesi oluşturucu

Yerel kodlama aracınızı bağlayın, kendi model anahtarınızı kullanın veya OpenDesign Cloud’da başlayın. Yeniden kullanılabilir bir tasarım sistemi uygulayın, duyarlı bir frontend oluşturup gözden geçirin ve sonrasında mühendislik çalışmalarında kullanmak üzere proje dosyalarını saklayın.

OpenDesign'i indirWeb sitesi örneğini gör

Yerel ajan · Kendi anahtarınızı kullanın · OpenDesign Cloud

Konaklama web sitesi01 / OpenDesign
client-project.website · Masaüstü önizlemesi
Konaklama web sitesiKonaklama   Deneyimler   GünlükKonaklamayı keşfedin
Konaklama web sitesiDaha Sakin Bir Yerde Konaklayın.

Editoryal bir deneyim, duyarlı sayfalar ve mühendislik incelemesine hazır kaynak dosyaları sunan, özenle hazırlanmış bir marka web sitesi.

Konaklamayı keşfedin
OpenDesign’de geliştiriciler için yapay zekâ web sitesi oluşturucu iş akışına yönelik örnek masaüstü web sitesi tasarımı.
Duyarlı · Tasarım sistemi · Ajan kullanımına hazır
DuyarlıTasarım sistemiAgent-Ready
Tek ve belirli bir brief↗

“Net bir rezervasyon akışına, sürükleyici görsel anlatıma, yeniden kullanılabilir bileşenlere ve kodlama ajanımızın uygulamaya devam edebileceği bir tasarım sistemine sahip, özenle hazırlanmış bir konaklama web sitesi.”

Örnek web sitesi · Masaüstü düzeniDüzenlenebilir gerçek frontend dosyaları
01Çalışma ortamınızı seçinYerel bir kodlama ajanı kullanın, kendi anahtarınızı getirin veya OpenDesign Cloud’daki barındırılan modellerle başlayın.
02Tasarım kurallarını uygulayın152’den fazla tasarım sistemi arasından seçim yapın veya bir web sitesinden, GitHub deposundan ya da Figma dosyasından bir sistem oluşturun.
03Yeniden düzenlemeden önce önizleyinDuyarlı web sitesini görsel olarak inceleyin, iyileştirin ve sonucun arkasındaki dosyaları gözden geçirin.
04Projeyi yerel ortamınızda tutunHTML, CSS, varlıklar ve mevcut kodlama ajanı iş akışınızla devam edin.
Web sitesi örneği

İhtiyaç Duyulan Web Sitesiyle Başlayın.

Geliştiriciler her türden kitle için web siteleri oluşturur. OpenDesign, görünür sonucu markaya ve ziyaretçinin amacına göre şekillendirir, ardından bunu tasarım kuralları, yerel dosyalar ve geliştirici iş akışıyla buluşturur.

Geliştirici iş akışında oluşturulmuş bir web sitesi

Web Sitesi, Oluşturan Kişiyi Değil İhtiyaçları Yansıtır.

Bir geliştirici konaklama, e-ticaret, yayıncılık, portföy veya ürün web sitesi oluşturuyor olabilir. OpenDesign görsel yönü bu amaca göre uyarlar. Geliştiricilere yönelik faydaları sonucun ardında yer alır: denetlenebilir modeller, yeniden kullanılabilir tasarım kuralları, duyarlı inceleme ve mühendislik iş akışının parçası olmaya devam eden yerel dosyalar.

  • Markaya, kitleye ve ziyaretçi yolculuğuna göre şekillendirilmiş eksiksiz bir masaüstü kompozisyonu
  • Ürüne özel iyileştirmelere hazır, yeniden kullanılabilir bölümler ve tutarlı bir tasarım sistemi
  • Kaynak kontrolü ve kodlama ajanlarıyla geliştirilmeye devam edebilen duyarlı bir frontend
Duyarlı frontendTasarım sistemiYerel proje dosyaları
Geliştiriciler için yapay zekâ web sitesi oluşturucu örneği: editoryal görseller, oda ayrıntıları ve rezervasyon çağrısı içeren eksiksiz bir masaüstü konaklama markası ana sayfası.
Örnek tasarım · Müşteri projesi değildir1672 × 941 · 16:9
Çalışma ortamınızı seçin

OpenDesign’i Çalıştırmanın Üç Yolu. Geliştiricilerin Farklı İhtiyaçları.

Oluşturmaya başlamadan önce kurulumunuzu seçin: proje dosyalarına erişim için yerel bir kodlama ajanı kullanın, modelleri doğrudan denetlemek için kendi anahtarınızı getirin veya ikisini de yapılandırmadan OpenDesign Cloud’da başlayın.

01Yerel kodlama ajanı

Ajanınız Proje Dosyalarıyla Çalışsın.

OpenDesign’i Codex, Claude Code veya Cursor gibi yüklü bir kodlama ajanı üzerinden çalıştırın. Ajanın yerel projeyi okuması ve düzenlemesi için izin gerektiğinde bu yolu kullanın.

CodexClaude CodeCursor
En uygun olduğu kullanım
Depo üzerinde çalışma ve dosya düzenleme
Seçmeden önce bilin
Ajan aboneliğiniz veya API ücretleriniz geçerlidir
02Kendi anahtarınızı kullanın

Sağlayıcıyı, uç noktayı ve modeli seçin.

Sağlayıcı anahtarınızı, uç noktayı ve modeli ekleyin; ardından oluşturmadan önce bağlantıyı test edin. Kullanım ücreti OpenDesign kredilerinizden değil, sağlayıcı tarafından alınır.

API anahtarıUç noktaModel
En uygun olduğu kullanım
Model seçimi ve doğrudan maliyet denetimi
Seçmeden önce bilin
Tasarım oluşturur; proje dosyalarını düzenlemek için yerel ajan kullanın
03OpenDesign Cloud

Ajan Yüklemeden veya Anahtar Eklenmeden Başlayın.

Oturum açın ve OpenDesign Cloud’da sunulan barındırılan modelleri kullanın. Yerel geliştirme iş akışınızı yapılandırmadan tasarıma başlamak istiyorsanız, en kısa kurulum yolu budur.

Oturum açınBarındırılan modellerKrediler
En uygun olduğu kullanım
Barındırılan ortamda en hızlı başlangıç
Seçmeden önce bilin
Hesap ve OpenDesign planı kredileri gerekir

Tek Ürün, Farklı Denetim Seçenekleri. Yerel Ajan ve BYOK, OpenDesign hesabı olmadan kullanılabilir. OpenDesign Cloud için hesap ve plan kredileri gerekir. Seçtiğiniz ajan veya model sağlayıcısı ayrıca ücret alabilir.

Geliştirici iş akışı

Çalışma ortamı → Tasarım sistemi → Web sitesi → Depo.

OpenDesign tasarım oluşturma katmanını üstlenir, ardından frontend’i inceleme, yeniden düzenleme, entegrasyon ve dağıtımın yapılacağı mühendislik iş akışına aktarır.

  1. 1

    OpenDesign’in nasıl çalışacağını seçin

    Dosyaların düzenlenmesi gerekiyorsa yerel bir kodlama ajanı bağlayın, modellere doğrudan erişmek için kendi anahtarınızı getirin veya barındırılan ortamda başlamak için OpenDesign Cloud’da oturum açın.

  2. 2

    Bir tasarım sistemi seçin veya oluşturun

    152’den fazla açık kaynaklı sistemden biriyle başlayın veya kendi sisteminizi bir web sitesinden, GitHub deposundan ya da Figma dosyasından oluşturun.

  3. 3

    Açıklayın, oluşturun ve inceleyin

    Kitleyi, sayfaları, marka yönünü ve teknik kısıtları açıklayın. Duyarlı sonucu inceleyin, ardından istemle veya doğrudan seçim yaparak iyileştirin.

  4. 4

    Dosyalarla devam edin

    Yerel projeyi uygulama malzemesi olarak kullanın: inceleyin, sürüm kontrolüne alın, test edin, yeniden düzenleyin ve yığınınızın geri kalanına bağlayın.

Deneyebileceğiniz odaklı bir revizyon

Onaylanan tasarım sistemini koruyun. Yinelenen gezinme alanını, hero bölümünü ve altbilgiyi depo kurallarına uygun, yeniden kullanılabilir bileşenlere ayırın. Değiştirilen dosyaları gösterin; açıklamadan bağımlılık eklemeyin.

Elinizde kalanlar

Geliştiriciler için yapay zekâ web sitesi oluşturucu: dosyalar ve tasarım bağlamı.

İşe yarar çıktı yalnızca görsel değildir. Duyarlı bir web sitesi, incelenebilir proje malzemeleri ve sonraki ajan adımlarında yeniden kullanılabilecek tasarım kurallarının birleşimidir.

01

Çalışan, duyarlı bir frontend

Düzleştirilmiş bir ekran görüntüsü veya baştan oluşturulması gereken görsel bir referans yerine gerçek web sitesi sayfaları ve yeniden kullanılabilir bölümler oluşturun.

02

Yerel proje dosyaları

Sonucun olağan kaynak kontrolü ve inceleme süreçlerine aktarılabilmesi için HTML, CSS, ilgili varlıkları ve proje yapısını bilgisayarınızda saklayın.

03

Yeniden kullanılabilir tasarım bağlamı

Seçilen renkleri, yazı tiplerini, boşlukları ve bileşen kurallarını; sonraki sayfa ve kodlama ajanı adımları için paylaşılan bağlam olarak saklayın.

OpenDesign farkı

Kodlama Ajanınıza Bir Tasarım Sistemi Verin, Belirsiz Bir İstem Daha Değil.

152’den fazla açık kaynaklı tasarım sistemi arasından seçim yapın veya bir web sitesinden, GitHub deposundan ya da Figma dosyasından bir sistem oluşturun. OpenDesign; renk, yazı tipi, boşluk ve bileşen kararlarını, oluşturulan her sayfaya yön verebilecek yeniden kullanılabilir bir bağlama dönüştürür.

Tasarım sistemi girdisiYeniden kullanılabilir ajan bağlamı
152’den fazla sistemWeb sitesiGitHub deposuFigma dosyası
OpenDesignDESIGN.mdRenk · Yazı tipi · Boşluk · Bileşenler
Ana sayfaÜrün sayfalarıBelgelere girişYeni yinelemeler
Tek bir görsel sistem hem ilk oluşturma sürecine hem de ardından gelen kodlama ajanı çalışmalarına yön verebilir.
01

152’den fazla açık kaynaklı başlangıç seçeneği

Bir modelden birkaç sıfatla yeni bir stil uydurmasını istemek yerine tanımlı bir görsel sistem kullanın.

02

Mevcut çalışmalardan bir sistem oluşturun

Projeye özel bir tasarım sistemi için kaynak olarak web sitesi, GitHub deposu veya Figma dosyası kullanın.

03

Ajanların okuyabileceği tasarım bağlamı

Sonraki kodlama ajanı çalışmaları bir ekran görüntüsünden fazlasıyla başlasın diye yeniden kullanılabilir tasarım kurallarını ve proje dosyalarını bir arada tutun.

04

Yinelemeler boyunca tutarlılık

Aynı görsel kararları göz önünde tutarak metni, düzeni, bileşenleri ve yeni sayfaları iyileştirin.

Kapsam · Geliştiriciler için yapay zekâ web sitesi oluşturucu

Çalışma Ortamını Denetleyin. Yayına Almadan Önce Uygulamayı İnceleyin.

Model kurulumu, proje dosyası izinleri ve üretime hazırlık birbirinden ayrı kararlardır. Desteklenen yayınlama entegrasyonları için de bir dağıtım sağlayıcısı ve yapılandırma gerekir.

Web sitesi teslimatlarınız

  • Çalışan, duyarlı bir frontend
  • Yerel proje dosyaları
  • Yeniden kullanılabilir tasarım bağlamı

Ayrı hizmetler ve sorumluluklar

  • Backend hizmetleri ve API’ler
  • Kimlik doğrulama ve veritabanları
  • Yönetilen barındırma ve alan adları
  • Otomatik çerçeve uyumluluğu

OpenDesign, geliştirici iş akışında tasarım oluşturma katmanıdır; tam yığın bir uygulama platformu değildir. Oluşturulan frontend’i; inceleme, test, erişilebilirlik denetimleri, güvenlik çalışmaları ve depo standartlarınıza uyarlama gerektiren bir uygulama malzemesi olarak değerlendirin.

Geliştiriciler için yapay zekâ web sitesi oluşturucu hakkında sık sorulan sorular

Geliştiriciler için yapay zekâ web sitesi oluşturucu: anahtarlar, ajanlar, dosyalar ve sınırlar.

Sağlayıcı ayarları, yerel ajan erişimi, tasarım sistemi girdileri ve geliştirmeye devam edebileceğiniz proje dosyaları.

Geliştiriciler için bu yapay zekâ web sitesi oluşturucuda kendi API anahtarımı kullanabilir miyim?

Evet. Sağlayıcınızın API anahtarını, uç noktasını ve modelini ekleyin, ardından bağlantıyı test edin. Model kullanımının ücretini doğrudan sağlayıcı alır; OpenDesign kredileriniz kullanılmaz. BYOK tasarım oluşturabilir ancak proje dosyalarını kendi başına düzenleyemez. Dosyalara erişim gerekiyorsa yerel kodlama ajanı kullanın.

OpenDesign hesabı açmam gerekir mi?

Yerel Kodlama Ajanı veya Kendi Anahtarınızı Kullanın iş akışları için gerekmez. OpenDesign Cloud, barındırılan modeller ve plan kredileri kullandığından hesap gerektirir.

OpenDesign mevcut depomla çalışabilir mi?

Yerel Kodlama Ajanı, erişim izni olan dosyalarla çalışabilir. Bu nedenle oluşturulan frontend’i mevcut bir depoya uyarlamak için uygun yoldur. Yayına almadan önce değişiklikleri inceleyin ve kendi çerçevenize, testlerinize ve kurallarınıza uyarlayın.

Mevcut tasarım sistemimi kullanabilir miyim?

152’den fazla açık kaynaklı tasarım sistemi arasından seçim yapabilir veya bir web sitesinden, GitHub deposundan ya da Figma dosyasından bir sistem oluşturabilirsiniz. Ortaya çıkan renk, yazı tipi, boşluk ve bileşen yönü web sitesine ve sonraki yinelemelere rehberlik edebilir.

OpenDesign ne oluşturur ve dışa aktarır?

OpenDesign, inceleyebileceğiniz ve geliştirmeye devam edebileceğiniz bir web sitesi frontend’i oluşturur. Tek başına HTML’yi veya kullanılabilir kaynak dosyalarını ve varlıkları dışa aktarabilir, inceleme için PDF ya da görseller kullanabilirsiniz. Yapılandırılmış Cloudflare Pages veya Vercel entegrasyonları desteklenen çıktıları yayınlayabilir; sağlayıcı hesapları, altyapı, backend hizmetleri ve üretim kontrolleri sizin sorumluluğunuzdadır.

Oluşturmaya başla

Web Sitesini Tasarlayın. Kullandığınız Teknoloji Yığınıyla Geliştirmeye Devam Edin.

Çalışma ortamınızı seçin, yeniden kullanılabilir bir tasarım sistemi uygulayın, duyarlı frontend’i inceleyin ve yerel proje dosyalarıyla devam edin.

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ı geliştiriciler için yapay zekâ web sitesi oluşturucu frontend’i.
Düzenlemeye hazırGeliştiriciler için yapay zekâ web sitesi oluşturucu: oluşturulmuş frontendHTML · CSS · JavaScript · Bileşenler