Presenta Design, Craftwork tarafından geliştirilen ve görsel varlıkları uzak sunuculara göndermeden doğrudan istemci tarafında Three.js, WebGL ve HTML5 Canvas kullanarak işleyen, kayıt gerektirmeyen (no-signup) bir 3B cihaz mockup ve kısa ürün tanıtım videosu stüdyosudur. Statik PNG, JPG veya WebP çıktılarının yanı sıra dahili kamera zaman çizelgesiyle WebM video animasyonları üretebilen platform, ayrıca Claude Code ve Cursor gibi yapay zeka ajanları için yerel bir Playwright MCP sunucusu sağlayarak mockup üretimini doğrudan komut satırı iş akışlarına bağlar.
Mühendislik Özeti
Presenta Design, geleneksel SaaS mockup araçlarının aksine sunucu taraflı render kuyruklarını tamamen devre dışı bırakır. Ekran görüntüleri doğrudan tarayıcının GPU belleğinde işlenir. 3B sahne dönüşümleri Three.js matrisleriyle hesaplanırken; Orbit Right, Punch In, Slow Zoom Out ve Scan Left to Right gibi kamera interpolasyonları tarayıcı içinde WebM formatına kodlanır. Üstelik harici bir REST API yerine Playwright tabanlı yerel bir MCP sunucusu (presenta-mcp.mjs) dağıtarak yapay zeka ajanlarının doğrudan headless tarayıcı üzerinden 3B mockup derlemesine olanak tanır.
Neden Radara Takıldı? Gerçek Üretim Hikâyesi
Modern ürün ekipleri ve pazarlama mühendisleri, web uygulamalarını vitrine çıkarırken iki temel engelle karşılaşır: Tasarım araçlarında (Figma vb.) 3B perspektifli cihaz çerçeveleri hazırlamak zaman alıcıdır; video tabanlı ürün tanıtımları için ise After Effects veya Premiere gibi ağır kurgu yazılımlarına ihtiyaç duyulur. Çoğu çevrim içi araç görselleri buluta yükleyip sunucuda işlerken veri gizliliği ve bekleme süresi sorunları doğurur. Benzer bir istemci içi yaklaşımı incelediğimiz Shots.so incelemesi içeriğimizde olduğu gibi, Presenta Design bu alandaki çıtayı bir adım öteye taşımaktadır.
Craftwork ekibinin geliştirdiği Presenta, tarayıcıya girildiği anda sıfır kayıt süreciyle çalışır. Tasarımcılar kurumsal UI/UX tasarım sistemleri bileşenlerini tuvale sürükleyip anında 3B cihazlar üzerine yansıtabilir, gölge açılarını değiştirebilir ve saniyeler içinde mikro animasyonlu WebM ürün videoları üretebilir. Radara takılmasını sağlayan en radikal hamle ise Claude Code, Codex CLI ve Cursor gibi yapay zeka araçları için Playwright tabanlı Model Context Protocol (MCP) modülü yayımlamasıdır.
Kaputun Altı: Mimari, Etkileşim ve Teknoloji Yığını
Presenta'nın çalışma mantığı üç ana mühendislik katmanından oluşur: WebGL render motoru, anahtar kare (keyframe) video kodlayıcı ve yerel headless otomasyon katmanı.
- Tarayıcı İçi WebGL / Three.js Sahnesi: Kullanıcının yüklediği ekran görüntüleri yerel blob URL'lerine dönüştürülür ve Three.js mesh dokularına (texture) eşlenir. Cihaz kasaları (iPhone, MacBook, iPad, monitörler) optimize edilmiş düşük poligonlu 3B modellerdir; yansıma ve zemin gölgeleri tarayıcının WebGL bağlamında donanım hızlandırmalı olarak gerçek zamanlı işlenir.
- Kamera Zaman Çizelgesi ve WebM Export: Platform sadece durağan görsellerle sınırlı değildir. Orbit Right, Punch In, Slow Zoom Out ve Scan Left to Right gibi hazır kamera yörüngeleri bulunur. Seçilen animasyon süresince Three.js kamera matrisleri enterpole edilir, HTML5 Canvas kareleri MediaRecorder API üzerinden yakalanarak doğrudan tarayıcı içinde kayıpsız WebM video akışına dönüştürülür.
- AI Site Shots ve Playwright MCP Sunucusu: Presenta, geleneksel bulut REST API anahtarları yerine yerel bir Node.js betiği sunar (https://presenta.design/agents/presenta-mcp.mjs). Geliştiriciler
komutuyla Claude Code veya Cursor'a aracı tanıtır. MCP sunucusu, arka planda Playwright ile bir Chromium oturumu açar; belirtilen web sayfasının ekran görüntüsünü alır, Presenta tuvaline enjekte eder ve istenen 3B mockup çıktısını yerel diske kaydeder.claude mcp add --scope user presenta -- node ~/.presenta/presenta-mcp.mjs - Piksel Doğrulama ve Performans: Görsellerin ve sayfaların render sürelerini optimize etmek isteyen ekipler, test süreçlerinde hız analiz aracı gibi çözümlerle web sitelerinin kaynak yüklerini denetleyerek Presenta MCP'nin daha hızlı ekran yakalamasını sağlayabilir.
| Teknik Parametre | Presenta Design Mimarisi | Geleneksel Bulut Mockup Araçları |
|---|---|---|
| Veri Güvenliği | Sıfır sunucu transferi; yerel Blob ve WebGL bellek işleme | Ekran görüntüleri uzak sunuculara yüklenir |
| Video Üretimi | Keyframe kamera interpolasyonu ile dahili WebM render | Genellikle yalnızca durağan PNG veya GIF desteği |
| Ajan Entegrasyonu | Resmi Playwright tabanlı yerel MCP (presenta-mcp.mjs) | Sınırlı REST API veya harici webhook entegrasyonu |
| Üyelik Modeli | Üyeliksiz (No-signup), filigransız ücretsiz temel katman | Zorunlu hesap açma ve freemium kısıtlamaları |
| Minimum Çözünürlük | 1200 piksel masaüstü genişliği (Tuval dar ekranda kilitlenir) | Duyarlı veya sınırlı mobil web arayüzleri |
Üretimde Ne Zaman Kullanılmalı, Ne Zaman Kaçınılmalı?
Presenta Design belirli senaryolarda benzersiz bir hız sunarken, mimari yapısı gereği bazı kullanım alanları için uygun değildir:
- Kullanılması Gereken Senaryolar: Yazılım lansmanları için hızlı ürün teaser videoları oluşturma, changelog ve sürüm bültenlerine profesyonel 3B cihaz görselleri ekleme, CI/CD veya yapay zeka ajanları (Claude Code vb.) üzerinden otomatik dokümantasyon ekran görüntüleri derleme.
- Kaçınılması Gereken Senaryolar: 1200 pikselin altındaki dar ekranlarda veya mobil cihazlarda çalışma gereksinimi (editör ekran genişliği 1200 px altında olduğunda 'Presenta needs a wider screen' uyarısıyla kilitlenir). MP4 çıktısı zorunlu olan ve WebM desteklemeyen eski kurumsal dağıtım ortamları (çıktıyı haricen ffmpeg ile dönüştürmek gerekir).
Kling Digital Mimari Notu
Kling Digital mühendislik standartlarına göre Presenta'nın en güçlü yönü, headless Playwright MCP sunucusudur. CI/CD pipeline'ınıza veya Cursor/Claude komut satırı akışınıza bu MCP sunucusunu bağlayarak, her frontend dağıtımında (deployment) güncel canlı sitenizin 3B mockup'larını otomatik olarak üretebilir ve README ya da ürün bültenlerinize insan müdahalesi olmadan gönderebilirsiniz.
