Was ist Paper.design
Paper basiert auf einer einfachen Idee: Was Sie visuell gestalten, ist tatsächlicher Code. Anstatt eines proprietären Formats (wie das von Figma), verwendet Paper echtes HTML und CSS als Grundlage.
Das Tool befindet sich in der offenen Alpha-Phase und hat kürzlich coole Ergänzungen wie eine Desktop-App und einen leistungsstarken MCP-Server auf den Markt gebracht. Dadurch wird aus Paper ein einfaches Design-Tool ein vollständig verbundenes Canvas, auf das jeder KI-Agent lesen und schreiben kann und das für KI-UI-Generierung verwendet werden kann.
Paper.design Funktionen
HTML/CSS Canvas
Kernfunktion, mit der Paper gestartet wurde. Sie haben ein frei gestaltbares Figma-ähnliches Canvas, auf dem Sie echte Webelemente verwenden können. Jedes Element, das Sie erstellen, wird als HTML und CSS gerendert, was bedeutet, dass das Design als Code exportiert wird, ohne dass ein Konvertierungsschritt erforderlich ist.
Sie erhalten echte Flexbox-Layouts, echte CSS-Eigenschaften und echte Schriftrenderings.
Paper MCP-Server
Sie können Paper design mit jedem KI-Codierungs-Agenten verbinden und es als Ort verwenden, um visuell die von ihnen generierte Front-End zu sehen.
Es gibt mehrere MCP-Tools, die es Agenten ermöglichen, auf granularer Ebene mit Ihren Design-Dateien zu interagieren. Agenten können Rahmen erstellen, Stile aktualisieren, Textinhalte festlegen, Screenshots abrufen und sogar die JSX- oder Tailwind-Ausgabe eines Knotens abrufen.
Es unterstützt sowohl das Lesen als auch das Schreiben, was bedeutet, dass es verwendet werden kann, um Kontext aus anderen Quellen in Ihr Design zu ziehen. Die Dokumentationen enthalten Beispiele mit Anleitungen zum Synchronisieren von Tokens aus Figma und sogar zum Abrufen von Inhalten aus Notion!
Paper Shaders
Eines der markantesten Merkmale von Paper ist seine Shader-Bibliothek. Dies sind animierte, GPU-beschleunigte visuelle Effekte. Mesh-Verläufe, Flüssigmetall, Rastermuster, Flachglas, Korntexturen und mehr. Sie können sie direkt auf die Elemente im Canvas anwenden.
Bildgenerierung
Paper verfügt über integrierte KI-Bildgenerierung, unterstützt von verschiedenen Modellanbietern. Sie können Flux 2 mit Multi-Referenz und Fotorealismus-Unterstützung, Nano Banana Pro (powered by Gemini), OpenAI Image Edit 1.5 und Seedream 4.5 verwenden. Sie können Bilder generieren, sie im Kontext bearbeiten und direkt auf dem Canvas platzieren.
Paper.design Preisgestaltung
Paper.design bietet ein pauschales Pro-Abonnement, sowie eine kostenlose Stufe und einen individuellen Teams-Plan. Es kostet $16/Monat oder $144/Jahr und beinhaltet:
1M MCP-Tool-Aufrufe/Woche
100x mehr Bildgenerierungen/Tag
Videoexport, unbegrenzter Speicher und priorisiertes Feedback
Die kostenlose Stufe ist großzügig genug, um das Tool ernsthaft zu erkunden. Der Pro-Plan ist wettbewerbsfähig im Preis für das, was er bietet, insbesondere angesichts der Begrenzung der MCP-Tool-Aufrufe.
Paper.design Alternativen
Banani
Mit Banani können Sie UI-Designs aus Textaufforderungen generieren und auf einer Leinwand organisieren, mit super einfachem One-Click-Figma-Export. Es ist eine gute Option für die Design-Erforschung, da es mehr integrierte KI-Tools wie Varianten, vollständige Benutzerflussgenerierung und mehr bietet.
Ähnlich wie bei Paper wird es direkt mit HTML und CSS gestaltet und hat auch kürzlich MCP veröffentlicht, sodass Sie Ihre Codierungs-Agenten verbinden können, um Ihre Designs zu lesen und umzusetzen.
Im Gegensatz zu anderen Alternativen in dieser Liste benötigen Sie kein separates Abonnement für Claude oder einen separaten KI-Agenten, um generative Funktionen zu nutzen. Sie sind eingebaut und ein Kernbestandteil des Produkts, sodass keine Einrichtung erforderlich ist.
Pencil.dev
Pencil ist ein canvas-basiertes UI-Generierungstool, das Claude Code integriert. Wie Paper bietet es Ihnen eine Figma-ähnliche Schnittstelle für die Arbeit mit KI-Agenten. Der wesentliche Unterschied besteht darin, dass Pencil eine Schicht über Claude ist und aktuell nicht mit anderen Agenten verwendet werden kann, als ich diesen Artikel schrieb.
Subframe
Ein weiteres Canvas-Code-Design-Tool, das produktionsbereite React-Code ausgibt. Sie entwerfen visuell mit echten Komponenten, und Ingenieure ziehen den Code direkt in ihre Codebasis mit einem CLI-Sync. Es verfügt auch über einen MCP-Server, sodass Sie es mit Cursor oder Claude Code verbinden und neue Designs aus Ihrer IDE mit vollständigem Codebasis-Kontext auffordern können.
Variant.ai
Variant konzentriert sich darauf, eine Auswahl an Designvariationen aus einer einzigen Aufforderung zu generieren. Ein sehr unterschiedlicher Anwendungsfall von Paper. Wenn Ihr Ziel schnelle visuelle Erkundungen sind, ist Variant überzeugend. Wenn Ihr Ziel ist, etwas zu entwerfen, das tatsächlich versendet wird, ist Papers code-native Ansatz besser geeignet.
Figma Make
Der offensichtliche Vergleich. Figma ist reifer, hat ein größeres Ökosystem und ist die Standardwahl für die meisten Designteams. Aber Figmas Leinwand ist proprietär und seine KI-Funktionen holen noch auf. Papers Wette ist, dass eine code-native Leinwand wichtiger wird, während KI-Agenten zu einem größeren Teil des Workflows werden.
Paper.design Anwendungsfälle
Designer, die Figma satt haben
Designer, die KI-Codierungs-Agenten erkunden und eine visuelle Ebene wünschen
Entwickler, die UI prototypisieren möchten
Designer, die mit visuellen Effekten und Shadern spielen möchten
Designer + Entwickler, die eine einzige Quelle der Wahrheit zwischen Design und Code möchten
Sollten Sie Paper ausprobieren
Wenn Sie jemals die Frustration erlebt haben, etwas in Figma zu designen, es an einen Entwickler weiterzugeben und dabei zuzusehen, wie es langsam von der ursprünglichen Vision abweicht, bietet Paper.design eine erstaunliche Lösung für dieses Problem.
Sein HTML/CSS-Canvas ist ein wirklich anderer Ansatz und der neue MCP-Server macht es zu einem der am besten Agenten-fähigen Designtools, die derzeit verfügbar sind.
