Sınır koymayan bir tuval
Çalışma yüzeylerini düzenleyin, ekranlara uyumlu düzenleri ayarlayın ve seçim tutamaçlarını içeriğinizin dışında tutun.
Görsel olarak oluşturun.Yayınlayın, güvenle.
React ve Next.js için açık kaynak web sitesi oluşturucu. Görsel olarak tasarlayın, düzenleri yeniden kullanın ve kendi uygulamanızda tüm ekranlara uyumlu sayfalar yayınlayın.
Görsel katman, yeniden tasarlandı
Tasarım için alan.
Yayınlamak için yapı.
Ortada odaklanmış bir tuval. Solda katmanlar ve varlıklar. Sağda Stil ve Luma. İhtiyacınız olan her şey, sayfanın önüne geçmeden elinizin altında.
Birbirine bağlı tek çalışma alanı
Tuvale bağlı belge sekmeleriyle sayfalar, bileşenler ve ayarlar arasında geçiş yapın.
İhtiyacınız olan yerde kontrol
Tipografiyi, düzeni ve efektleri ayarlayın veya hedefli bir yapay zekâ değişikliğini uygulamadan önce inceleyin.
Her zaman düzenlenebilir bir sistem
Bir kez değiştirin.
Her yerde kullanın.
Bileşenleri ve bağlantılı düzenleri Varlıklar bölümünde tutun. Ortak gezinme alanlarını ve altbilgileri bir kez tasarlayın; ardından her sayfaya özgü içerik için children yer tutucusunu kullanın.
İlk çerçeveden yayındaki URL'yeDört adım.
Dört adım.
Kesintisiz bir akış.
Gereksiz devir süreçleri veya aynı kararı üç farklı araçta yeniden uygulamak yok. Her adım, yayınlanacak sayfanın üzerinde gerçekleşir.
01
Oluşturun
Boş bir tuvalle veya tüm ekranlara uyumlu eksiksiz bir sistemle başlayın.
02
Bağlayın
API'leri, rota parametrelerini ve formları doğrudan sayfaya bağlayın.
03
İyileştirin
Kırılma noktalarını, varyantları, tipografiyi ve hareketi yerinde ayarlayın.
04
Yayınlayın
Tasarladığınız deneyimi anlamsal, sunucuda oluşturulan çıktı olarak yayınlayın.
Her aşama düzenlenebilir kalır.Canlı ortama geçerken hiçbir şey düzenlenemez hale gelmez.
Pagiera AIYol göstermesini isteyin.
Yol göstermesini isteyin.
Kararlar sizde kalsın.
Bir katman seçin veya @ ile bir hedef belirtin. Luma, uygulamadan önce eski ve yeni değerleri inceleyebilmeniz için metin, stil ve öğe değişiklikleri önerir. Mevcut sayfanız korunur.
Hedefli düzenlemelerÖncesi ve sonrasıSizin onayınız
Tasarım ajanıBu sayfada çalışıyor
@Giriş başlığı Yazı boyutunu 56 yap. Sayfanın geri kalanını değiştirme.
Örnek öneri — siz onaylamadan hiçbir şey değişmez.
Hedef: Giriş başlığı · masaüstü
Yazı boyutu: 64 → 56
Uygulamadan önce değişiklikleri inceleyin
Bir değişiklik isteyin…
Hızlı bir başlangıç yapınBir başlangıç noktası,
Bir başlangıç noktası,
asla bir sınır değil.
Her şablon; sayfaları, bileşenleri ve hareketleriyle tüm ekranlara uyumlu eksiksiz bir sistemdir. Parçalarına ayırıp kendinize uyarlamanız için hazırdır.
Tüm şablonları inceleyinNocturne StudioPortfolyo · 4 sayfaÖnizlemeyi aç
Pagiera'ya yakından bakın
Bir tuvalden fazlası.
Siteniz için bir sistem.
Yeniden kullanılabilir sayfa yapısından en küçük etkileşime kadar, ilk tasarımdan sonra da düzenlenebilir kalan yerel öğeler oluşturun.
01 / Yapı
Bir kez tasarlayın. Sayfalar arasında yeniden kullanın.
children yer tutucusu, ortak gezinme ve alt bilgiler içeren bağlantılı düzenler oluşturun. Tekrarlanan tasarımların tutarlı kalması için bunları yeniden kullanılabilir bileşenler ve varyantlarla birleştirin.
- Bağlantılı düzenler
- Children yuvaları
- Bileşen varyantları
02 / Etkileşim
Slaytı tasarlamak size kalmış.
Düzenlenebilir öğelerden karusel slaytları oluşturun, gezinmeyi ve sayfalamayı özelleştirin ya da görüntüleri ve diğer alt öğeleri döngüsel bir kayan şeride yerleştirin. İçeriğiniz sabit bir kart şablonuyla sınırlı değildir.
- Özel slaytlar
- Karusel kontrolleri
- İç içe kayan şeritler
03 / İfade
Her ayrıntıya biraz karakter katın.
Shader renklerini ayarlayın, Tabler, Lucide ve Remix'ten simgeler seçin ve metin üzerine gelme efektlerini giriş ve kaydırmaya bağlı hareketlerle birleştirin. Form alanlarını sayfanın geri kalanıyla birlikte biçimlendirin.
- Shader kontrolleri
- Metin efektleri
- Form biçimlendirme
04 / Sahiplik
Görsel düzenleme. Sizin uygulamanız.
Stüdyoyu Next.js'e kurun, Request ve Repeat bloklarını verilere bağlayın ve yayımlanan sayfaları sunucuda işleyin. Önizleme, onay ve yayınlamayı ayrı adımlar olarak tutun.
- SSR çalışma zamanı
- API destekli içerik
- Taslak ve yayınlama
Geliştiriciler ve kodlama ajanları için
Bir sonraki web siteniz.
Kendi teknoloji altyapınızda.
Pagiera, ayrı bir barındırılan web sitesi hesabı değil, MIT lisanslı bir React ve Next.js web sitesi oluşturucusudur. Paketi kurun, hizmetlerinizi bağlayın ve tasarımınızı düzenlenebilir bir belgede tutun.
- 01
Kurun ve bağlayın
Uygulamanıza pagiera ekleyin. PostgreSQL, Redis ve korumalı editör/API rotalarını yapılandırın. Yalnızca yapay zekâ ile üretim kullanmak istiyorsanız OpenRouter anahtarı ekleyin.
- 02
Tasarlayın ve iyileştirin
Yerel öğelerle veya bir şablonla başlayın. Bileşenleri ve düzenleri yeniden kullanın, kırılma noktalarını ayarlayın ve hedefli yapay zekâ önerilerini uygulamadan önce inceleyin.
- 03
Önizleyin ve yayınlayın
Bir taslak kaydedin ve önizlemesini test edin. Onaylanan sayfayı Pagiera üzerinden yayınlayın, ardından çalışma zamanıyla sunun. Uygulamanızı kendi altyapınıza dağıtın.
Başlamadan önce
İyi sorular.
Net yanıtlar.
Kurulum, iş akışı ve sahip olduklarınız.
Pagiera nedir?
Pagiera, React ve Next.js için npm paketi olarak dağıtılan açık kaynaklı bir görsel web sitesi oluşturucusudur. Düzenlenebilir, duyarlı bir tuvali, yeniden kullanılabilir bileşenleri, düzenleri, sayfa yönetimini ve sunucuda işlenen bir yayınlama çalışma zamanını uygulamanızın içinde bir araya getirir.
Pagiera'yı kendi Next.js uygulamamda barındırabilir miyim?
Evet. pagiera paketini yükleyin, PostgreSQL ve Redis'i bağlayın, korumalı editör ve API rotalarını ekleyin ve yayımlanan belgeleri pagiera/runtime ile işleyin. Kimlik doğrulamayı, altyapıyı ve dağıtımı uygulamanız yönetir.
Bir yapay zekâ kodlama ajanı düzenlenebilir bir Pagiera web sitesi tasarlayabilir mi?
Evet. Paket, kodlama ajanları için bir AGENTS.md entegrasyon kılavuzu içerir. Ajanınızdan ayrı, doğrudan kodlanmış bir sayfa yerine yerel Pagiera belge öğeleri oluşturmasını isteyin. Oluşan belge kaydedilebilir, görsel editörde açılabilir, önizlenebilir ve yayımlanabilir.
Hedefli yapay zekâ düzenlemeleri nasıl çalışır?
Bir katman seçin veya Luma'da hedef seçmek için @ kullanın. Desteklenen istekler metin, stil, üzerine gelme ya da öğe ekleme önerileri sunar. Uygulamadan önce eski ve yeni değerleri inceleyin. Belirli bir kırılma noktasını hedefleyen istekler, desteklenen düzen güncellemeleriyle sınırlıdır. Yapay zekâ ile üretim için OpenRouter anahtarı gerekir; desteklenen işlemler yüklü sürüme bağlıdır.
Gezinme ve alt bilgi tasarımlarını yeniden kullanabilir miyim?
Ortak yapı için yeniden kullanılabilir bileşenler ve bağlantılı düzenler kullanın. Düzenler, sayfaya özel içerik için bir children yer tutucusu içerebilir; böylece gezinmeyi ve alt bilgileri her sayfa için yeniden oluşturmanız gerekmez.
Hangi etkileşimli içerikleri oluşturabilirim?
Pagiera; düzenlenebilir karusel slaytları, karusel kontrolleri, alt öğeler içeren kayan şeritler, özelleştirilebilir form alanları, shader renkleri, simge kütüphaneleri ve metin üzerine gelme ve kaydırma efektleri içerir. Her bloğun kullanılabilir kontrolleri için yüklü sürümü kontrol edin.
Bir sayfayı kaydetmek onu herkese açık hâle getirir mi?
Hayır. Kaydetmek taslağı günceller. Taslağı önizleyin, ardından herkese açık sayfayı güncellemek için yayımlayın. home slug'ı / yoluna karşılık gelir. İçeriği yayımlamak, ana uygulamanızı dağıtmaz veya bir alan adı yapılandırmaz.
Pagiera'yı kullanmak ücretsiz mi?
Pagiera paketi MIT lisansı altında açık kaynaklıdır. Barındırma, PostgreSQL, Redis, yapay zekâ sağlayıcısı kullanımı ve diğer hizmetlerin ayrı maliyetleri olabilir. Uygulamayı yapılandırmak ve güvenliğini sağlamak sizin sorumluluğunuzdadır.
