Agentic Canvas: Yapay Zeka Ajanlarıyla Tasarım Yapın10 min read

Yapay zeka ajanları dakikalar içinde bir web sitesi oluşturabilir. Sonra bir düğmeyi taşımak, iki düzeni karşılaştırmak, birkaç ekran görüntüsü toplamak veya boşlukları kendiniz düzeltmek istersiniz. Bir bakmışsınız, görsel değişikliği başka bir promptta yeniden anlatıyorsunuz. Bazen sürüklemek, prompt yazmaktan daha kolaydır.

Bu yüzden AgentGrid.io tarafından geliştirilen Agentic Canvas geliştirdik. Bu, siz ve MCP destekli bir ajanın aynı gerçek HTML ve CSS sayfası üzerinde çalıştığı ücretsiz bir yapay zeka tasarım tuvalidir. HTML içe aktarın, bir tasarım veya görselle başlayın ya da ajanınızdan bir sayfa oluşturmasını isteyin. Ardından oluşturduklarını seçin, taşıyın, yeniden boyutlandırın ve düzenleyin. Hesap açmadan Agentic Canvas’ı açabilirsiniz.

Kullanmanın basit bir yolu var: Bir HTML sayfasını veya görseli içe aktarın, öğeleri görsel olarak yerleştirip düzenleyin, Claude veya ChatGPT’den bir animasyonu ya da etkileşimi geliştirmesini isteyin, ardından HTML’yi dışa aktarın. Baştan yeni bir prompt yazmak yerine istediğiniz an elle müdahale edebilirsiniz.

Agentic Canvas nedir?

Burası, bir yapay zeka ajanıyla gerçek web sayfaları tasarlamak için görsel bir çalışma alanıdır. Tuvalde tanıdık çerçeveler, katmanlar, bir denetçi ve düzen kontrolleri vardır. Ancak çerçeveler statik görseller değil, kod tabanlı sayfalardır. MCP ile bağlanan ajan mevcut sayfayı okuyup değiştirebilir. Sonucu görür, elle düzenler ve ajanın güncel tasarımdan devam etmesini sağlarsınız.

Burası, düzeltilmesi gerekenleri gören kişi ile kodu yazabilen ajanın aynı şey üzerinde çalıştığı bir yer olarak düşünün.

Yapay zeka ajanları için neden bir tasarım tuvali geliştirdik?

1. Başka bir prompt döngüsü olmadan görsel iş birliği

Claude veya ChatGPT ile bir açılış sayfası, ürün ekranı ya da pazarlama görseli hazırladığınızda ilk taslak yalnızca başlangıçtır. Giriş bölümünün üç farklı versiyonunu, daha sıkı bir ızgarayı veya farklı bir harekete geçirici mesajı görmek isteyebilirsiniz. Ne istediğinizi zaten biliyorsanız her görsel kararı sohbette anlatmak zaman alır.

Canvas’ta bu değişikliği doğrudan yapabilirsiniz. Ajan, sayfayı mevcut haliyle okuyabilir, zaten değişmiş bir versiyonun sözlü açıklamasını değil. Ağır işi o yapar, son kararları elle yaparsınız ve kaldığınız yerden devam eder.

2. Görsel bağlamı toplamak için bir alan

Bazı fikirler teknik bir şartnameyle değil, bir ilham panosuyla başlar. Ekran görüntüleri, referans sayfaları, görseller ve metinler toplayıp bunları alanda düzenleyin. Yapmak istediğinizi anlatan materyalleri ekleyin. Yapay zeka ajanı uzun sohbet geçmişinden tahmin yürütmek yerine önündeki tasarımla çalışabilir.

Marka çalışmaları için bu önemlidir. Bir düzen örneği, kısa bir metin ve ekran görüntüsü, istediğiniz atmosferi anlatan başka bir paragraftan daha hızlı fikir verebilir.

3. Tasarım tuvali neden gerçek HTML ve CSS kullanıyor?

Bir tasarım aracını neden HTML ve CSS üzerine kurduk? Çünkü kodlama ajanları kodu zaten akıcı biçimde okuyup yazabiliyor. Bence bir ajandan ayrı bir tasarım biçimiyle çalışmasını istemek, ana dili İngilizce olan birinden İngilizce düşünüp Çince okumasını ve yazmasını istemeye benziyor. Bu ek çeviri ayrıntıları kaybettirebilir, zaman ve token harcar. Daha önce de Tasarım koddur. Burada bu düşünce somutlaşıyor.

Agentic Canvas’ta bir çerçeve gerçek bir sayfadır. Otomatik yerleşim CSS flexbox’a, ızgaralar ise CSS grid’e karşılık gelir. Bir düğmeyi görsel olarak düzenleyebilir, ajandan animasyon veya etkileşim eklemesini isteyebilir, hazır olduğunuzda kodu dışa aktarabilirsiniz. Tuvaldeki canlı sayfalarda scriptler, hover durumları ve duyarlı davranışlar çalışabilir. Bu, sonradan yeniden kodlamanız gereken bir resim değildir.

Bu, geleneksel bir tasarım tuvalinden nasıl farklıdır?

Geleneksel bir tasarım tuvali görsel fikirleri düzenlemek için kullanışlıdır, ancak sonuç çalışan bir web sayfasına dönüşmeden önce çoğu zaman ayrıca geliştirilmelidir. Agentic Canvas, HTML üzerinde çalışan bir tasarım aracıdır: Çerçeve gerçek bir sayfa olduğu için ajan, sizin görsel olarak düzenlediğiniz HTML ve CSS’yi okuyup değiştirebilir. Bu, olgun bir tasarım paketinin tüm özelliklerine sahip olduğu anlamına gelmez. Amaç, ister yapay zekanın oluşturduğu bir siteyi iyileştirin ister sıfırdan başlayın, görsel kararlarla çalışan kodu bir arada tutmaktır.

Agentic Canvas’ta Claude veya ChatGPT ile bir web sitesi nasıl tasarlanır?

1. Elinizdekilerle başlayın. Tuvali açıp HTML yapıştırın, Figma’dan kopyalayıp yapıştırın, görsel veya tasarım içe aktarın ya da ajanın oluşturduğu bir sayfayla başlayın. içe aktarma rehberi desteklenen başlangıç seçeneklerini listeler.
2. Ajanınızı bağlayın. Tuvalde AI agents, ardından Add an agent seçeneğini kullanın. Claude, ChatGPT veya MCP destekli başka bir istemci için bağlantı rehberi izleyin. Ajan çalışırken tuval sekmesini açık tutun.
3. İlk denemeyi birlikte yapın. Bir düzen veya etkileşim iste, sonra canlı sonucu tuvalde inceleyin.
4. Görsel olarak kontrolü ele al. Öğeleri taşıyın, renkleri değiştirin, çerçevenin boyutunu ayarlayın ve düzeni elle iyileştirin. Ajandan son sürümden devam etmesini isteyin.
5. Hazır olduğunuzda dışa aktarın veya paylaşın. HTML veya desteklenen başka bir formatı yayınlamadan dışa aktarın. Barındırılan bir bağlantı istiyorsanız, AgentGrid.io üzerinden paylaşın veya yayınlayın. Bulut üzerinden yapılan bu adım isteğe bağlıdır ve hesap gerektirir.

Neler yerel kalır, neler için hesap gerekir?

Kaydolmadan tarayıcınızda ücretsiz tasarım yapmaya başlayabilirsiniz. Dosyalarınız o cihazdaki o tarayıcıda saklanır; cihazlar arası otomatik bir yedekleme yoktur. Tarayıcı dışında saklamak istediğiniz çalışmanın bir kopyasını dışa aktarın. Harici bir ajan bağlandığında tuvali ağ üzerinden okuyabilir; yerel saklama çevrimdışı çalışmak anlamına gelmez. AgentGrid.io üzerinden paylaşmak veya yayınlamak isteğe bağlıdır ve hesap gerektirir.

Bence yeni nesil tasarım araçları bizi görsel kontrol ile üretken bir ajan arasında seçim yapmaya zorlamamalı. Ajan, üzerinde çalıştığı işin kendi dilini konuşmalı; biz de ekrandaki öğeyi tutup değiştirebilmeliyiz.

Agentic Canvas’ı açın ve ajanınızla birlikte tasarım yapmayı deneyin. İş akışına hızlıca bir bakış atmak için, lansman demosunu izleyin ve özellikleri keşfedin.

Agentic Canvas hakkında sorular

Agentic Canvas ücretsiz mi ve bir hesaba ihtiyacım var mı?

Evet, tasarım tuvali ücretsizdir. Tarayıcınızda açıp hesap olmadan tasarım yapabilirsiniz. AgentGrid.io hesabı yalnızca çalışmanızı AgentGrid.io üzerinden paylaşmayı veya yayınlamayı seçerseniz gerekir.

Hangi yapay zeka ajanları Agentic Canvas ile çalışır?

Claude, ChatGPT, Claude Code, Codex, Cursor ve diğer MCP destekli ajanlar açık tuvali okuyup değiştirebilir. AI agents ve ardından Add an agent seçeneklerini izleyerek bağlantı adımlarını tamamlayın. Ajanınız çalışırken tuval sekmesini açık tutun.

Yapay zeka tarafından oluşturulan bir web sitesini görsel olarak düzenleyebilir miyim?

Evet. HTML sayfasını veya site klasörünü içe aktarın; öğeleri tuval üzerinde taşıyın, boyutlandırın ve düzenleyin. Çerçeveler gerçek HTML ve CSS’den oluşur. Böylece ajan, statik bir taslağı yeniden kurmak yerine görsel değişikliklerinizden devam edebilir.

Mevcut bir HTML sayfasını veya web sitesini içe aktarabilir miyim?

Evet. HTML’yi tuvale yapıştırın ya da site klasörünü veya ZIP dosyasını Home ekranına sürükleyip bırakın. Figma seçimi veya görselle de başlayabilirsiniz.

Canvas dosyalarım nerede saklanıyor? Yedeklenmiş mi?

Dosyalar, kullandığınız tarayıcıda ve cihazda yerel olarak saklanır; otomatik bulut yedeklemesi yoktur. Başka bir tarayıcı veya cihaz bunları göremez. Önemli çalışmaların bir kopyasını dışa aktarın. Bulut yedeklemesi ve sürüm geçmişi istiyorsanız AgentGrid.io üzerinden paylaşmayı seçebilirsiniz.

Tabı kapattıktan sonra AI ajanım tuvalde çalışabilir mi?

Hayır. Tuval sekmesi, bağlı bir ajanın tasarımı okuyor veya değiştirdiği sürece açık kalmalıdır. Daha sonra aynı tarayıcıda yerel olarak depolanmış dosyalarınıza geri dönebilirsiniz.

Bir ajanı bağlamak aynı zamanda AgentGrid.io çalışma alanıma erişim sağlıyor mu?

Hayır. Bir ajanı tuvale bağlamak, ona açık tuval dosyaları üzerinde çalışma olanağı verir. Aynı ajanı AgentGrid.io artefaktlarına bağlamak ayrı bir adımdır.

Yayınlamadan dışa aktarabilir miyim?

Evet. Paylaşmadan veya yayınlamadan HTML, PNG, SVG veya PDF dışa aktarın. HTML’yi başka bir kodlama ajanına verip başka bir yerde inşa etmeye devam edebilirsiniz.

Paylaşmak ile yayınlamak aynı şey mi?

Hayır. AgentGrid.io üzerinden paylaşım, seçtiğiniz kişilere ve ajanlara erişim sağlar; yayınlama ise tasarımı kamuya açık bir web adresine yerleştirir. Her ikisi de isteğe bağlıdır ve AgentGrid.io hesabı gerektirir.