00:00:00Hey, im heutigen Video geht es um Paper. Paper ist im Grunde wie Figma, aber für Claude Code oder
00:00:05Cursor. Hier seht ihr ein Beispiel. Wir haben die Paper-Desktop-App laufen, aber man kann
00:00:10alles über Claude Code steuern, was ihr hier gerade seht. Es ist
00:00:14außerdem wirklich praktisch, weil man sehr einfach zwischen seinen Komponenten
00:00:19und dem Code hin- und herwechseln kann. Unternehmen wie Vercel nutzen es, auch Z oder Dub. Viele
00:00:24coole Produkte verwenden es also. So sieht die App aus, wenn man startet.
00:00:28Das ist das Demo-Projekt, das ihr beim ersten Mal erhaltet. Ihr könnt
00:00:31die App unter paper.design/downloads herunterladen. Der nächste Schritt
00:00:35ist die Installation eines MCP-Servers. Wenn ihr das in
00:00:40Cursor installieren wollt, klickt ihr einfach diesen Button, was ich bereits getan habe. Aber jetzt
00:00:43probieren wir es mal in Claude Code aus. Wir kopieren das hier rüber. Das
00:00:47fügt den Paper-MCP-Server im User-Scope hinzu, was bedeutet, dass jedes
00:00:53Projekt auf dem Computer darauf zugreifen kann. Normalerweise ist ein MCP-Server auf das Projekt beschränkt,
00:00:57aber hier sieht man, dass der Transport lokal erfolgt. Das wird
00:01:01sich mit der Paper-Desktop-App verbinden. Ich werde es also hier installieren.
00:01:06Nachdem es installiert ist, öffnen wir Claude. Ich habe hier
00:01:11vier Fenster in Ghosty geöffnet, im Tmux-Stil angeordnet.
00:01:17Da wir vier verschiedene Fenster haben, werden wir ein paar
00:01:19verschiedene Demos machen. Ich dachte mir, warum nicht mehrere Fenster gleichzeitig nutzen? Als Nächstes
00:01:22kopieren wir diesen Prompt in ein Terminal. Wir werden
00:01:28eine Ausgaben-Tracker-App in Paper erstellen. Mal sehen, wie das aussieht. Man sieht,
00:01:33dass so eine Demo dabei herauskommt, aber wir schauen uns das jetzt live an. In der Zwischenzeit
00:01:36lasse ich noch ein paar andere Aufgaben parallel laufen. "Erstelle mir eine
00:01:40Demo-Landingpage in Paper und beeindrucke mich." Mal sehen, ob das klappt. "Erstelle
00:01:44ein Dashboard für eine Finanz-App." Das machen wir auch, und:
00:01:48"Erstelle ein Design-System für eine App wie Twitter." Ich lasse das
00:01:53alles parallel laufen. Ich weiß selbst noch nicht, was dabei rauskommt, also mal schauen.
00:01:56Hier sieht man den vorherigen Durchlauf, den wir gestartet haben.
00:02:00Wir haben ein Design-Briefing, eine Farbpalette. Das ist Claude Code, wie es alles durchdenkt
00:02:04und zur Paper-App hinzufügt. Aber gehen wir mal ganz nach unten.
00:02:08Okay, es ist fertig. Schauen wir uns das Ergebnis an. Wir zoomen mal raus,
00:02:13um zu sehen, wo es ist. Oh, man sieht, dass unsere anderen Apps
00:02:17ebenfalls gerade gebaut werden. Und hier ist unsere App zur Ausgabenerfassung, was echt cool ist.
00:02:22Das Design ist ziemlich solide. Als ich es vorhin getestet habe,
00:02:25kam eine etwas andere App dabei heraus. Hier sieht man, dass alle anderen
00:02:30parallel generiert werden. Das Tolle an Paper ist,
00:02:34dass es im Grunde wie Figma funktioniert. Alles, was man von Figma kennt,
00:02:39sieht hier sehr ähnlich aus. Ich kann hier Dinge ändern und sogar
00:02:43nachträglich Anpassungen vornehmen. Zum Beispiel den Upload-Bereich entfernen und durch etwas anderes ersetzen.
00:02:53Mal sehen, was dann passiert. Alle diese Prozesse laufen immer noch
00:02:56im Hintergrund. Wenn wir hier zurückgehen, wird der Upload-Bereich hoffentlich
00:03:00entfernt. Unsere Landingpage sieht schon ziemlich ordentlich aus. "Design mit Intention,
00:03:04Kreation ohne Grenzen". Übrigens sehen wir hier, wie all die anderen
00:03:09Komponenten zusammengefügt werden. Das Design-System sieht richtig professionell aus.
00:03:12Man hätte einem Designer tausende Dollar zahlen können, um genau das zu bekommen.
00:03:16Ziemlich cool. Und natürlich lässt sich alles komplett bearbeiten,
00:03:20genau wie in Figma. So sieht die Landingpage am Ende aus.
00:03:24Gleich werden wir das mit Tailwind in React umsetzen. Hier ist das
00:03:28Dashboard, und die andere Aufgabe ist auch abgeschlossen. Hier sieht man die geteilte Ansicht,
00:03:33das wurde also auch angepasst. Man erhält diese wirklich professionellen Designs,
00:03:36und alles, was wir getan haben, war ein einfacher Prompt. Dafür können wir
00:03:42das bestehende Ökosystem an Fähigkeiten nutzen, die Claude Code oder Cursor uns bieten.
00:03:46Wir könnten auch den Front-End-Design-Skill nutzen, um das alles zu entwerfen,
00:03:50wenn wir wollten. Ich frage jetzt nach einer HTML-Seite mit diesem Design für meinen
00:03:54Browser. Mal sehen, wie das funktioniert. Zurück in Paper zeige ich euch
00:03:58noch ein paar andere Dinge. Ich habe hier diese Komponente und kann
00:04:03einfach "Copy as Tailwind" oder "Copy as React CSS" wählen. So kann ich es kopieren
00:04:08und direkt einfügen. Aber wir werden gleich sehen, dass
00:04:13Claude Code das auch für uns laden kann. Wir können es also im Browser öffnen und –
00:04:17wow, seht euch das an, es hat tatsächlich funktioniert. Das ist wirklich erstaunlich.
00:04:20Hier ist der Button. Das ist einfach großartig. Wenn wir uns
00:04:24den Quelltext der Seite ansehen, schauen wir mal, was erzeugt wurde.
00:04:29Hier wurde einfach nur HTML und CSS verwendet, aber wir hätten es auch mit
00:04:35React und Tailwind machen lassen können. Man kann Dinge bauen wie in Figma,
00:04:40es ist im Grunde exakt dasselbe. Hier an der Seite können wir alles anpassen,
00:04:44zum Beispiel die Farbe ändern. Es ist praktisch identisch mit Figma. Ich habe
00:04:48diese Komponente auch erstellt, weil ich sehen wollte, wie es aussieht,
00:04:51wenn ich sie einfach in eine normale App kopiere. Und hier sieht man,
00:04:55genau das ist passiert. Es ist im Grunde exakt so geworden, wie ich es wollte.
00:05:00Hier sieht man, was reinkopiert wurde. Das ist die Hintergrund-Komponente. Ich zeige
00:05:05es euch nochmal, da ich das vorhin schon gemacht habe: Ich klicke auf "Copy as Tailwind",
00:05:10gehe rüber zu Cursor und füge es einfach ein. Man sieht direkt das Ergebnis.
00:05:14Ich mache das jetzt mal rückgängig. Das hier ist eine Komponente, die ich
00:05:20zuvor für die Ausgaben-App eingefügt hatte. Man sieht die Top-Bar, den Betrag-Bereich und
00:05:26so weiter. Das ist also React und Tailwind für im Grunde dasselbe,
00:05:29was wir gerade gemacht haben. Hier sieht man den echten React-Code in unserer App.
00:05:34Das ist eine weitere Variante von einem Prompt vor 20 Minuten. Das ist
00:05:40Version eins. Die andere Version wurde mit regulärem HTML und CSS erstellt,
00:05:44und beide sind sehr gut geworden. Ich will sehen, wie die anderen Apps in
00:05:49Claude Code werden. Ich frage nach einer HTML-Version für alle Bildschirme,
00:05:53die wir gerade entworfen haben. Was ich auch gerade gemacht habe: Ich habe
00:05:58"Copy as React CSS" gewählt, bin zu Cursor gewechselt und habe es eingefügt. Das ist eine echte App.
00:06:04Sie läuft auf localhost:3001. Das ist Teil von Inbox Zero, nur eine
00:06:09Demo-Seite, die ich hinzugefügt habe. Man sieht, dass es perfekt funktioniert,
00:06:13was wirklich toll ist. Im ersten Anlauf ist es noch nicht responsiv, aber ansonsten
00:06:18schon sehr solide. Es braucht noch etwas Arbeit für die Mobile-Ansicht, aber das Konzept
00:06:22ist auf jeden Fall extrem cool. Und hier ist die HTML-Version, die gerade
00:06:26geladen wurde. Diese ist schon etwas responsiver. Hier
00:06:33stößt sie zwar an ihre Grenzen, aber sie ist immerhin besser als die andere Version.
00:06:36Das ist also ziemlich cool. Jetzt möchte ich euch zeigen, dass man auch
00:06:41Bilder generieren kann. Mit Command + I probieren wir das mal aus.
00:06:46Wir lassen uns ein Bild erstellen. Mein Prompt lautet: "Erstelle
00:06:50eine schöne Anzeige für Inbox Zero, einen KI-E-Mail-Assistenten, der hilft, den Posteingang
00:06:54schnell auf Null zu bringen." Es gibt verschiedene Modelle, wie zum Beispiel Nano Banana
00:06:59Pro. Wir probieren erst mal das "Variety Pack" aus. Hoffentlich klappt es.
00:07:05Und ja, man sieht, dass die Erstellung von vier Bildern begonnen hat. Ich möchte es
00:07:10aber gleich noch mal mit Nano Banana Pro versuchen. Klicken wir auf
00:07:14"Create image". Da wird noch ein Bild erstellt, und ich hoffe,
00:07:19dass sie bald fertig sind. Oh, hier sieht man die ersten Anzeigen. Die
00:07:25sehen ordentlich aus. Natürlich muss man noch etwas nachbessern, aber als erster Versuch
00:07:29ist das ziemlich cool. Schaut euch das an: "Inbox Zero". Es gibt Designer,
00:07:35die schlechtere Entwürfe abliefern. Von den vieren gefällt mir dieser hier
00:07:39am besten. Aber klar, das war nur ein einziger Versuch; man könnte
00:07:43da noch viel weiter iterieren. Mal sehen, was Nano Banana Pro liefert. Das könnte
00:07:47am beeindruckendsten sein. "Your fast track to calm – The AI Email Assistant".
00:07:51Ganz ehrlich, für einen einzigen Versuch ist das eine echt gute Grafik. Ich finde es
00:07:55auch interessant, dass die KI anscheinend unser Logo kennt. Hat sie das Logo von
00:08:00Inbox Zero wirklich erkannt, oder ist es Zufall, dass der Text unserem Logo so ähnlich sieht?
00:08:04Bevor wir zum Ende kommen, möchte ich euch noch zwei Dinge zeigen. Wenn ich auf
00:08:09dieses Bild klicke und "S" drücke, kann ich verschiedene Effekte anwenden. Hier sieht man
00:08:13einen Wasser-Effekt auf diesem Bild. Wenn ich erneut "S" drücke, erscheint dieser "Liquid Metal"-Effekt.
00:08:18Ich bin nicht sicher, wie genau das funktioniert oder ob es überhaupt mit unserem Bild zusammenhängt,
00:08:21aber man kann damit wirklich coole Effekte erstellen und sie auf der
00:08:24Landingpage verwenden. Hier ist noch eine Version des erstellten Bildes.
00:08:27Und noch eine Sache, die toll ist: Die Farben sollen angeblich
00:08:33konsistent und präzise sein. Paper hat den weltweit ersten einheitlichen Farbwähler,
00:08:37der den Umgang mit Farben erleichtert. Falls ihr das nicht kennt: Manchmal hat man eine Farbe
00:08:41in Figma und eine andere auf der Website, und sie stimmen nicht exakt überein. Das ist
00:08:45wirklich nervig. Wir hatten das Problem mit den Blautönen auf unserer Website, wo Figma
00:08:48etwas anderes anzeigte als die Seite, obwohl die Hex-Codes eigentlich
00:08:52identisch sein sollten. Wenn ihr also dieses Problem auch schon mal hattet,
00:08:56dann ist das ein wirklich schönes Feature. Und als allerletztes zeige ich euch:
00:08:59"Erstelle ein Design-System in Paper basierend auf unserer bestehenden Codebasis".
00:09:04Man sieht, dass die Analyse der Codebasis beginnt. Das ist ganz normaler Claude-Code.
00:09:08Er hat unsere Schriftarten erkannt. Jetzt haben wir allerdings ein Problem, da wir anscheinend
00:09:12das wöchentliche MCP-Tool-Limit für Paper Pro in diesem Video erreicht haben.
00:09:17Wir können also nicht sehen, wie das Endergebnis ausgesehen hätte. Aber kurz gesagt:
00:09:20Wir hätten unsere Codebasis einlesen und dann in Paper visualisieren können.
00:09:23Dort hätten wir Änderungen vornehmen und den Code direkt wieder in unser Projekt
00:09:28übertragen können. Das ist ein extrem hilfreiches Feature. Ein typischer Anwendungsfall
00:09:32wäre für uns bei der Erstellung von Design-Komponenten für Demos. Wenn wir einen
00:09:35Screenshot für eine Landingpage machen, ist es normalerweise einfacher,
00:09:39einfach ein Bildschirmfoto zu machen. Aber oft möchte ich den Text noch ein bisschen anpassen,
00:09:43echte E-Mails ausblenden oder Details ändern. Das in Figma oder Paper zu haben,
00:09:47ist so viel einfacher, weil ich einfach direkt tippen und bearbeiten kann.
00:09:50Dann ist es kein einfacher Screenshot mehr, sondern ich kann es als echtes Bild
00:09:55wie PNG oder JPEG exportieren. Hier ist die Twitter-Social-App, die wir gerade
00:09:58gebaut haben – auch diese Designs sind wirklich cool. Wie auch immer, ich hoffe,
00:10:03euch hat das Video gefallen, auch wenn es ein bisschen hin und her ging.
00:10:07Wir haben viele Dinge parallel laufen lassen. So programmiere ich heutzutage oft,
00:10:10und das ist wohl auch ein bisschen ins Video eingeflossen. Ich hoffe,
00:10:14ihr fandet es hilfreich. Lasst mich wissen, was ihr mit Paper so baut.
00:10:17Ich finde es ein extrem nützliches Tool und kann mir vorstellen,
00:10:20schon bald auf die Pro-Version umzusteigen. Und vergesst nicht,
00:10:24für zukünftige Videos zu abonnieren.