Paper: Die neue KI-Design-App, über die alle sprechen

하이라이트

• Paper ist ein KI-gestütztes Design-Tool, das wie Figma funktioniert, aber eng mit Claude Code und Cursor integriert ist.

• Die Installation erfolgt über einen MCP-Server, der einen lokalen Datentransport zwischen Editor und Desktop-App ermöglicht.

• Nutzer können komplette Design-Systeme, Landingpages und Dashboards durch einfache Prompts in Claude Code parallel erstellen.

• Designs lassen sich nahtlos als Tailwind CSS oder React-Komponenten exportieren und direkt in bestehende Web-Projekte integrieren.

• Die App bietet fortschrittliche Funktionen wie KI-Bildgenerierung (Nano Banana Pro) und einen einheitlichen Farbwähler für präzise Farbtreue.

• Paper ermöglicht das Einlesen bestehender Codebasen, um daraus visuelle Design-Systeme zu generieren und Änderungen zurück in den Code zu spiegeln.

타임라인

1. 00:00 - 01:05

   Einführung in Paper und MCP-Installation

   Der Sprecher stellt Paper als eine neue Design-App vor, die speziell für die Zusammenarbeit mit KI-Editoren wie Claude Code oder Cursor entwickelt wurde. Im Gegensatz zu herkömmlichen Tools ermöglicht Paper eine direkte Steuerung der Design-Elemente über Terminal-Befehle. Zur Einrichtung wird die Desktop-App heruntergeladen und ein MCP-Server installiert, der als Brücke zwischen der KI und dem Design-Tool fungiert. Besonders hervorgehoben wird der lokale Transportweg des Servers, der eine hohe Geschwindigkeit und Sicherheit gewährleistet. Große Unternehmen wie Vercel nutzen das Tool bereits, um ihre Design-Workflows zu beschleunigen.

2. 01:06 - 02:22

   Parallele Generierung von Design-Projekten

   In diesem Abschnitt demonstriert der Sprecher die enorme Leistungsfähigkeit der KI, indem er vier verschiedene Design-Aufgaben gleichzeitig in einem Ghosty-Terminal startet. Es werden parallel ein Ausgaben-Tracker, eine Landingpage, ein Finanz-Dashboard und ein Twitter-ähnliches Design-System angefordert. Während Claude Code die Aufgaben abarbeitet, kann man in der Paper-App live zusehen, wie Komponenten und Farbpaletten entstehen. Der Sprecher betont, wie beeindruckend die Qualität der Ergebnisse ist, die normalerweise die Arbeit von professionellen Designern für tausende Dollar erfordern würde. Dieser Workflow zeigt, wie effizient die Kombination aus Tmux-Layouts und KI-Steuerung für moderne Entwickler sein kann.

3. 02:23 - 04:35

   Bearbeitung und Export in Code-Frameworks

   Nachdem die Designs erstellt wurden, zeigt das Video die tiefgreifenden Bearbeitungsmöglichkeiten innerhalb der Paper-Oberfläche, die stark an Figma erinnern. Der Nutzer kann Elemente wie Upload-Bereiche per Prompt oder manuell entfernen und Farben in Echtzeit anpassen. Ein zentrales Feature ist die Funktion "Copy as Tailwind" oder "Copy as React CSS", die das Design sofort in nutzbaren Code umwandelt. Der Sprecher demonstriert dies, indem er eine generierte Landingpage direkt im Browser als HTML/CSS-Seite öffnet. Es wird deutlich, dass das Tool nicht nur statische Bilder erzeugt, sondern strukturierten Code, der die Design-Intention präzise widerspiegelt.

4. 04:36 - 06:36

   Integration in reale Apps und Responsivität

   Der Sprecher zeigt hier die praktische Anwendung, indem er Komponenten aus Paper in ein existierendes Projekt namens "Inbox Zero" in Cursor einfügt. Er vergleicht verschiedene Versionen des Codes, von reinem HTML bis hin zu komplexen React-Komponenten mit Tailwind-Styling. Obwohl die erste Version noch nicht vollständig responsiv für Mobilgeräte ist, überzeugt die visuelle Treue der Umsetzung auf dem Localhost. Es wird erklärt, dass die KI-Fähigkeiten von Claude Code genutzt werden können, um die Designs nachträglich für mobile Ansichten zu optimieren. Die nahtlose Synchronisation zwischen dem visuellen Editor und dem Code-Editor spart Entwicklern massiv Zeit bei der Frontend-Erstellung.

5. 06:37 - 08:28

   KI-Bildgenerierung und Design-Effekte

   Paper verfügt über integrierte Bildgenerierungsmodelle wie "Nano Banana Pro", mit denen Werbeanzeigen und Grafiken direkt im Design-Kontext erstellt werden können. Der Sprecher testet verschiedene Prompts für seinen E-Mail-Assistenten und ist überrascht, dass die KI sogar Design-Elemente erzeugt, die seinem echten Logo ähneln. Zusätzlich werden spezielle visuelle Effekte wie "Liquid Metal" oder Wasser-Effekte vorgestellt, die mit einfachen Shortcuts auf Bilder angewendet werden können. Diese Funktionen machen Paper zu einer All-in-One-Plattform für visuelles Marketing und UI-Design. Die Qualität der generierten Grafiken wird als professionell eingestuft, wobei noch Raum für iterative Verbesserungen bleibt.

6. 08:29 - 10:30

   Farbpräzision und Code-Analyse-Features

   Zum Abschluss geht das Video auf technische Feinheiten wie den weltweit ersten einheitlichen Farbwähler ein, der Farbunterschiede zwischen Design-Tool und Browser eliminiert. Ein besonders spannendes Feature ist die Analyse bestehender Codebasen, um daraus automatisch Design-Systeme in Paper zu visualisieren. Obwohl der Sprecher im Video an ein API-Limit stößt, erklärt er den hohen Nutzen dieses Prozesses für die Dokumentation und Anpassung vorhandener Projekte. Er resümiert, dass Paper ein unverzichtbares Werkzeug für die Erstellung von Demo-Komponenten und Marketing-Assets ist, da man Texte und Details viel leichter als in reinen Screenshots bearbeiten kann. Das Video endet mit einer klaren Empfehlung für das Tool und einem Ausblick auf die Pro-Version.