Paper.design Nedir
Paper basit bir fikre dayanır: görsel olarak tasarladığınız şey gerçek koddur. Figma'nın kullandığı türden bir özel format yerine, Paper gerçek HTML ve CSS'yi temel alır.
Araç açık alfa aşamasında ve yakın zamanda bir masaüstü uygulaması ve güçlü bir MCP sunucu gibi harika eklemeler başlattı. Bu, Paper'ı basit bir tasarım aracından, herhangi bir AI ajanının okuyup yazabileceği tam bağlantılı bir kanvasa dönüştürüyor ve AI UI üretimi için kullanılabilmesini sağlıyor.
Paper.design Özellikleri
HTML/CSS Kanvas
Paper'ın piyasaya sunduğu temel özellik. Gerçek web öğelerini kullanabileceğiniz serbest bir Figma benzeri kanvasınız var. Oluşturduğunuz her öğe HTML ve CSS olarak işlenir, bu da tasarımın herhangi bir dönüştürme adımı olmadan kod olarak ihraç edildiği anlamına gelir.
Gerçek flexbox düzenleri, gerçek CSS özellikleri ve gerçek yazıtipi uygulamaları elde edersiniz.
Paper MCP Sunucu
Paper tasarımını herhangi bir AI kodlama ajanına bağlayabilir ve onların ön yüzlerini görsel olarak görmek için bir yer olarak kullanabilirsiniz.
Birden fazla MCP aracı, ajanların tasarım dosyalarınızla ayrıntılı düzeyde etkileşim kurmasına olanak tanır. Ajanlar çerçeveler oluşturabilir, stiller güncelleyebilir, metin içerik belirleyebilir, ekran görüntüsü alabilir ve hatta herhangi bir düğümün JSX veya Tailwind çıktısını alabilir.
Hem okuma hem de yazmayı destekler, yani tasarımınıza başka kaynaklardan bağlam çekmek için kullanılabilir. Belgelerde, Figma'dan token senkronizasyonu ve hatta Notion'dan içerik çekme ile ilgili örnekler ve kılavuzlar bulunmaktadır!
Paper Shaders
Paper'ın en belirgin özelliklerinden biri, shader kütüphanesidir. Bunlar, animasyonlu, GPU hızlandırmalı görsel efektlerdir. Mesh geçişleri, sıvı metal, noktalı desenler, oluklu cam, tanecik dokular ve daha fazlası. Bunları doğrudan kanvastaki öğelere uygulayabilirsiniz.
Görsel Üretim
Paper, farklı model sağlayıcılar tarafından desteklenen yerleşik AI görsel üretimine sahiptir. Çoklu referans ve fotorealizm desteği ile Flux 2, Gemini destekli Nano Banana Pro, OpenAI Image Edit 1.5, ve Seedream 4.5'i kullanabilirsiniz. Görseller üretebilir, bunları bağlam içinde düzenleyebilir ve doğrudan kanvas üzerine yerleştirebilirsiniz.
Paper.design Fiyatlandırma
Paper.design, sabit bir Pro abonelik, artı ücretsiz bir katman ve özel bir Takım planı sunar. Aylık 16$ veya yıllık 144$'dır ve şunları içerir:
Haftada 1M MCP aracı çağrısı
Günde 100 kat daha fazla görsel üretme
Video dışa aktarma, sınırsız depolama ve öncelikli geri bildirim
Ücretsiz katman, aracı ciddi bir şekilde keşfetmek için yeterince cömerttir. Pro planı sunduklarına kıyasla rekabetçi fiyatlandırılmıştır, özellikle MCP aracı çağrı sınırı göz önüne alındığında.
Paper.design Alternatifleri
Banani
Banani, UI oluşturmayı metin komutlarından sağlar ve kanvas üzerinde organize etmenize olanak tanır, son derece basit bir tıklamayla Figma aktarımı ile. Daha fazla yerleşik AI araçları sunması nedeniyle tasarım keşfi için iyi bir seçenektir, örneğin Varyantlar, tam kullanıcı-akışı üretimi ve daha fazlası.
Paper benzeri olarak, HTML ve CSS kullanılarak doğrudan tasarlanmıştır ve yakın zamanda MCP'yi piyasaya sürmüştür, bu nedenle kodlama ajanlarınızı tasarımlarınızı okumak ve uygulamak için bağlayabilirsiniz.
Bu listedeki diğer alternatiflerin aksine, Claude için ayrı bir abonelik veya generatif özelliklerini kullanmak için ayrı bir AI ajan ihtiyacınız yoktur. Bunlar yerleşiktir ve ürünün temel bir parçasıdır, kurulum gerektirmez.
Pencil.dev
Pencil, Claude Code'u entegre eden kanvas tabanlı bir UI oluşturma aracıdır. Paper gibi, AI ajanlarıyla çalışmak için Figma benzeri bir arayüz sunar. Ana fark, Pencil'ın Claude'un üzerine bir katman olması ve bu makaleyi yazdığım sırada diğer ajanlarla kullanılamamasıdır.
Subframe
Üretime hazır React kodu çıktısı veren başka bir kanvas-kod tasarım aracı. Gerçek bileşenlerle görsel tasarım yaparsınız ve mühendisler, kodu CLI senkronizasyonu ile doğrudan kod tabanlarına çekerler. Ayrıca bir MCP sunucuya sahip, böylece Cursor veya Claude Code'a bağlanabilir ve IDE'nizden tam kod tabanı bağlamıyla yeni tasarımlar isteyebilirsiniz.
Variant.ai
Variant, tek bir komuttan tasarım varyasyonları beslemesi oluşturmaya odaklanır. Paper'dan çok farklı bir kullanım durumu. Amacınız hızlı görsel keşifse, Variant ikna edici. Eğer amacınız gerçekten sevk edilecek bir şey tasarlamaksa, Paper'ın kod-yerli yaklaşımı daha iyi bir uyum sağlar.
Figma Make
Açık karşılaştırma. Figma daha olgun, daha büyük bir ekosisteme sahip ve çoğu tasarım ekibi için varsayılan bir seçimdir. Ancak, Figma'nın kanvası özel ve AI özellikleri hala yaklaşıyor. Paper'ın iddiası, AI ajanlarının iş akışının daha büyük bir parçası haline gelmesiyle, bir kod-yerli kanvasın daha önemli hale geleceğidir.
Paper.design Kullanım Alanları
Figma'dan yorulan tasarımcılar
Görsel bir katman isteyen AI kodlama ajanlarını keşfeden tasarımcılar
UI prototiplemek isteyen geliştiriciler
Görsel efektler ve shader'larla oynamak isteyen tasarımcılar
Tasarım ve kod arasında tek bir doğruluk kaynağı isteyen tasarımcılar + geliştiriciler
Paper'ı denemeli misiniz
Figma'da bir şey tasarlayıp, bunu bir geliştiriciye teslim ettikten sonra orijinal vizyondan yavaşça uzaklaştığı için hayal kırıklığı yaşayan biriyseniz, Paper.design bu soruna harika bir çözüm sunuyor.
HTML/CSS kanvası gerçekten farklı bir yaklaşım ve yeni MCP sunucu onu şu anda mevcut en ajan-hazır tasarım araçlarından biri yapıyor.
