00:00:00Paper ist zurzeit vielleicht eines der angesagtesten Design-Tools für KI-native Designer,
00:00:05für KI-gestützte Workflows.
00:00:06Es ermöglicht es einem, hier auf einer Canvas zu gestalten und das Ganze in Code zu übertragen,
00:00:11aber auch umgekehrt.
00:00:13Es ist also ein komplett bidirektionaler Workflow.
00:00:15Ich werde euch zeigen, wie man es benutzt und wie man es installiert.
00:00:17Außerdem ist dies Teil meiner 30-tägigen Serie für KI-natives Design,
00:00:22in der ihr herausgefordert werdet, dieses Design hier zu nehmen,
00:00:25an dem wir in der vorherigen Challenge gearbeitet haben,
00:00:27und Paper zu nutzen, um diesen Abschnitt des Designs zu integrieren und zu vervollständigen.
00:00:32Bevor wir zu dieser Challenge kommen und wie ihr teilnehmen könnt,
00:00:36zeige ich euch erst einmal, wie man Paper eigentlich installiert.
00:00:38Geht dazu auf paper.design in den Bereich "Docs".
00:00:41Als Erstes solltet ihr die Paper Desktop-App herunterladen, okay?
00:00:46Einfach eine simple, schnelle App.
00:00:48Dann: Nutzt ihr Cursor?
00:00:50Nutzt ihr Claude Code?
00:00:51Oder Codex, Copilot, was auch immer?
00:00:54Ich persönlich nutze Claude Code.
00:00:55Die Installation ist extrem einfach.
00:00:57Ihr nehmt einfach diese Zeile hier, nachdem ihr "claude" eingetippt
00:01:00und es in eurem Terminal gestartet habt,
00:01:03fügt sie ein und es wird installiert.
00:01:05Ihr wisst, dass es funktioniert, wenn ihr den Befehl "/mcp" eingebt,
00:01:10dann seht ihr dort "paper".
00:01:13Man sieht dort auch "pencil", was wir in naher Zukunft behandeln werden.
00:01:17Okay, das hier ist also die Paper-App.
00:01:19Die müsst ihr geöffnet haben.
00:01:21Und dann öffnet ihr natürlich Cursor oder Claude Code
00:01:24und stellt sicher, dass das MCP verbunden ist.
00:01:26Was ist also der nächste Schritt?
00:01:27Nun, man kann Paper auf verschiedene Arten nutzen.
00:01:31Man kann ein Design direkt hier mit dem Frame-Tool starten,
00:01:35um sein Layout zu erstellen.
00:01:37Der Bereich hier kommt einem bekannt vor.
00:01:39Wenn ihr also Auto-Layout von Figma bereits versteht,
00:01:41werdet ihr verstehen, wie man Layouts hier von Grund auf manuell strukturiert, falls gewünscht.
00:01:46Diesen Ansatz werden wir aber nicht wählen.
00:01:48Wir werden im Grunde Claude oder was auch immer ihr nutzt fragen –
00:01:52egal ob Cursor oder ein anderes Tool –
00:01:53wir werden es bitten, Paper und den MCP-Server zu nutzen,
00:01:58um ein Layout für uns zu entwerfen.
00:02:00Danach werden wir das Design verfeinern
00:02:02und hier in Paper individuelle Änderungen vornehmen,
00:02:05um es dann wieder zurück zu portieren.
00:02:06Wir müssen die KI also bitten, ein Layout zu erstellen
00:02:09für eine Art fiktives Unternehmen.
00:02:10Vorher wollte ich aber noch ein kurzes Experiment auf coolers.co machen.
00:02:14Das gibt es schon ewig.
00:02:16Aber wenn man auf "Start the Generator" klickt
00:02:18und dann die Leertaste drückt,
00:02:20kann man verschiedene Themes generieren,
00:02:22beziehungsweise die App macht das von selbst.
00:02:24Und dann kann man die Farben selbst anpassen, wenn man möchte.
00:02:28Ich mache einfach mal weiter...
00:02:31Okay, das sieht interessant aus.
00:02:32Das ist ein eher helleres Farbschema.
00:02:33Es ist ziemlich farbenfroh und so weiter.
00:02:36Ich mache jetzt einfach einen Screenshot.
00:02:39Unten stehen die Farbcodes,
00:02:41die wir als Kontext in Claude Code oder was auch immer ihr nutzt einfügen können.
00:02:46Wir werden es anweisen, genau diese Farben für das Layout zu verwenden,
00:02:51wenn es das Design für das fiktive Unternehmen erstellt.
00:02:53Für den Prompt nutze ich hier in Claude Code den Skill "front-end design".
00:02:59Das liefert normalerweise bessere Ergebnisse.
00:03:01Aber wenn man nicht zu spezifisch wird,
00:03:04kommt meistens ein sehr standardmäßiges 08/15-Ergebnis dabei heraus.
00:03:08Wir schauen uns also an, was erstellt wird,
00:03:10und werden dieses Design dann in Paper aufwerten.
00:03:12Zuerst gebe ich "/front-end design" ein,
00:03:15wie ihr hier sehen könnt.
00:03:17Ich glaube, das ist bei Claude Code mittlerweile standardmäßig dabei,
00:03:19falls nicht, verlinke ich ein Video in der Beschreibung,
00:03:22das zeigt, wie man das als Skill integriert.
00:03:25Also: "/front-end design".
00:03:28Jetzt formuliere ich den Prompt.
00:03:29Hier ist ein sehr kurzer Prompt:
00:03:32"Nutze den Paper MCP-Server."
00:03:34Es ist sehr wichtig, das explizit anzufordern.
00:03:36"Entwirf ein modernes SaaS-Layout für ein fiktives Unternehmen,
00:03:39das KI-Technologie zur Qualitätssicherung in der Produktherstellung einsetzt."
00:03:43Klingt langweilig.
00:03:43"Es soll für Desktop optimiert sein und eine Navigationsleiste sowie eine Hero-Section haben."
00:03:47Und das war's.
00:03:47"Ich möchte, dass du das Farbschema verwendest."
00:03:49"Die Hex-Werte stehen unten bei jeder Farbe im angehängten Screenshot,"
00:03:53den man hier sieht.
00:03:54Man muss nicht alle Farben verwenden.
00:03:56Achte nur auf den richtigen Kontrast und darauf, dass es gut aussieht.
00:03:59Das ist alles.
00:04:00Ich drücke jetzt Enter,
00:04:02und wir sehen, wie Infos zum Zugriff auf den Paper MCP-Server ausgegeben werden.
00:04:07Wir können Paper laden und in Echtzeit verfolgen, was passiert.
00:04:11Leider gibt es unter Windows 11 ein Problem speziell mit meinem Computer,
00:04:15bei dem dieses Flackern auftritt.
00:04:16Ich bin bereits mit dem Gründer in Kontakt
00:04:18und habe es ihm gemeldet. Ihr werdet dieses Problem wahrscheinlich nicht haben.
00:04:21Okay, und das ist das Ergebnis.
00:04:23Meiner Meinung nach ist es ziemlich mittelmäßig,
00:04:25und man merkt dem Ganzen einfach an:
00:04:27"Hey, das wurde größtenteils von einer KI generiert."
00:04:30Wir werden Paper nutzen, um das Design visuell anzupassen
00:04:34und es dann wieder zurück zu übertragen.
00:04:36Was werde ich also tun?
00:04:37Als Erstes möchte ich das hier ein wenig vergrößern.
00:04:39Okay, wir schaffen uns hier etwas Weißraum.
00:04:42Nächster Schritt: Man muss erst mal verstehen,
00:04:45wie die Ebenen hier aufgebaut sind.
00:04:48In diesem Bereich sieht man die Ebenen,
00:04:51und wir sehen eine Hero-Section mit zwei Spalten darin, links und rechts.
00:04:56Das möchte ich so nicht.
00:04:57Ich möchte eher einen Bereich wie diesen,
00:05:01der eine zentrierte einspaltige Sektion bildet,
00:05:05und dahinter werden wir einen interessanten Bereich einfügen.
00:05:08Aber zuerst werden wir das hier nehmen
00:05:11und den gesamten Text zentrieren
00:05:15und auch die Breite davon erhöhen.
00:05:17Hier oben sieht man, dass die Breite auf "Auto" eingestellt ist.
00:05:20Wir können sie auch auf einen festen Wert setzen,
00:05:23wir können den Container ausfüllen lassen
00:05:25oder die Breite an den Inhalt anpassen.
00:05:26Inhalt anpassen ist dasselbe.
00:05:28Container ausfüllen.
00:05:29Okay, es wird also den verfügbaren Platz hier ausfüllen,
00:05:33und dann nehme ich das hier,
00:05:36und hier drüben
00:05:38sehen wir, dass es bereits als Flexbox-Container mit einem Abstand von 32 zwischen den Elementen eingerichtet ist.
00:05:44Wenn wir das also anpassen,
00:05:46sieht man, wie alles irgendwie auseinanderdriftet.
00:05:48Und ich möchte sicherstellen, dass alles in diesem Raum zentriert ist.
00:05:53Noch funktioniert nicht alles perfekt,
00:05:55weil wir noch ein paar andere Anpassungen vornehmen müssen.
00:05:57Wenn sich Dinge also nicht wie erwartet verhalten, schaut einfach genauer hin.
00:06:01Nehmen wir zum Beispiel diesen Bereich.
00:06:04Lass uns den zentrieren.
00:06:06Und wieder klicke ich einfach auf diese Zentrierungs-Optionen.
00:06:08Das hier ist Text, also können wir diesen Text zentrieren.
00:06:10Okay, das läuft schon mal gut.
00:06:12Das hier drüben, lass uns diese Sachen auch zentrieren.
00:06:15Und dann zentriere ich das hier ebenfalls.
00:06:18Alles klar. Ich kann rechtsklicken und auf "Frame Selection" gehen.
00:06:21Ah, das hat automatisch funktioniert.
00:06:24Man muss also einfach bereit sein, mit all diesen Layout-Funktionen zu experimentieren.
00:06:30Das ist genau wie bei Figma.
00:06:31Man muss verstehen, wie man mit dem Layout arbeitet,
00:06:35weil dies versucht, eine Darstellung des tatsächlichen Browsers auf der Canvas zu sein.
00:06:40Es kann also etwas knifflig sein, Dinge zu verschieben,
00:06:43wenn man nicht sicher ist, wie sie zusammenhängen.
00:06:44Nehmt euch also Zeit dafür.
00:06:46Als Nächstes mache ich einen Screenshot davon,
00:06:49um einige dieser Farben besser zu integrieren, als es die KI getan hat.
00:06:55Denn wie ihr seht, wurden zwar einige Farben übernommen, aber nicht alle.
00:06:58Nicht, dass wir das unbedingt müssten.
00:07:00Aber ich möchte euch einfach den Prozess zeigen, wie man hier zusätzliche Anpassungen vornimmt.
00:07:05Zum Beispiel, wenn wir der Header-Sektion eine spezifische Hintergrundfarbe geben wollen.
00:07:10Ich nehme diese Füllung hier
00:07:13und wir verwenden die oberste Farbe.
00:07:15Sie lautet FC6471.
00:07:19Okay, das sieht jetzt schrecklich aus, weil der Text nicht mehr passt, oder?
00:07:23Also nehme ich diesen Bereich, Auswahlfarben.
00:07:27Wir machen das einfach weiß.
00:07:28Den schwarzen Teil machen wir auch weiß.
00:07:31Und wenn wir wollen, können wir mit STRG + Linksklick darauf gehen,
00:07:35um es auszuwählen und für diesen Teil auf "fett" zu stellen.
00:07:37Okay, "Spectral AI".
00:07:39Ich werde diesen schwarzen Teil weiß machen.
00:07:43Dieser Farbverlauf gefällt mir gar nicht.
00:07:45Ja, wir haben hier natürlich Unterstützung für Gradienten.
00:07:48Vielleicht mache ich den hier hell.
00:07:51Das ist nur ein generisches, seltsames Logo, was kein großes Ding ist.
00:07:56Das stört mich nicht weiter.
00:07:57Wir schieben das rüber.
00:08:00Okay, und zum Schluss hier drüben: Dieser Kontrast ist furchtbar.
00:08:04Vielleicht können wir das hier weiß machen.
00:08:11Das hier kann schwarz werden, und diesen Text hier machen wir auch hell.
00:08:20Wie ihr seht, lassen sich Anpassungen sehr schnell und einfach vornehmen.
00:08:23Sagen wir nun, wir möchten diesen Hintergrund nehmen und etwas Cooles hinzufügen,
00:08:29wie zum Beispiel einen Shader-Effekt.
00:08:30Hier drüben klickt ihr drauf und seht "Shaders".
00:08:34Esta es una de las cosas realmente geniales de esta herramienta,
00:08:38Wir können sehr interessante, einzigartige Shader erstellen.
00:08:42Wie zum Beispiel diesen "Smoke Ring" hier.
00:08:45Alles klar, probieren wir das mal.
00:08:46Ich klicke darauf.
00:08:47Wenn man das macht, wird es als ein weiteres Element in das DOM eingefügt,
00:08:51das Document Object Model.
00:08:53Das ist Front-End-Entwickler-Kram, von dem ihr vielleicht noch nie gehört habt.
00:08:57An dieser Stelle hilft ein technischer Hintergrund.
00:09:00Wir möchten die Position dort auf "absolute" setzen.
00:09:05Dadurch bricht es aus dem herkömmlichen Box-Modell, wie es genannt wird, aus.
00:09:09Und wir können das Ding überallhin bewegen. Aber Vorsicht,
00:09:11denn wenn man über bestimmte Dinge fährt, wird es dort hinein platziert.
00:09:14Wir wollen es so strukturieren, dass es ganz oben links und rechts sitzt
00:09:20und diese gesamte Hero-Section ausfüllt.
00:09:23Um das zu erreichen, setzen wir hier oben zuerst die X-Position auf Null
00:09:28und dann die Y-Position ebenfalls auf Null.
00:09:31Die Breite setzen wir auf 100 % und die Höhe auch auf 100 %.
00:09:35Wenn wir das machen, verdecken wir erst mal alles, oder?
00:09:39Leider gibt es hier anscheinend keinen Z-Index, den ich sehen kann.
00:09:42Der Z-Index ist eine CSS-Eigenschaft für absolut positionierte Elemente,
00:09:47wo man den Stapel steuert, also den Fluss.
00:09:50Nicht den Fluss, sondern die Reihenfolge.
00:09:52Es sollte unter all diesen Dingen liegen.
00:09:54Und so sehe ich das hier leider nicht als Option,
00:09:57aber wir können das später korrigieren, nachdem wir es in Claude Code
00:10:04und zurück in unseren Browser-Code, HTML und CSS, importiert haben.
00:10:05Aber vorerst können wir es trotzdem sehen, wenn wir die Parameter direkt hier anpassen.
00:10:10Alle Shader haben individuelle Parameter, die genau hier beeinflusst werden können.
00:10:15Man kann also die Geschwindigkeit und all das andere Zeug ändern.
00:10:18Wie Sie hier sehen können, haben wir eine Füllung, die schwarz ist.
00:10:21Wenn wir das jetzt auf 0 % ändern – ah, okay, jetzt können wir Dinge dahinter sehen.
00:10:26Den Vordergrund können wir noch nicht wirklich erkennen.
00:10:28Nun, für den Vordergrund nehmen wir einfach diese Farbe und schnappen uns unseren Smoring.
00:10:36Wir werden die Füllung auf diese Farbe ändern.
00:10:39Oder vielmehr den Vordergrund auf diese Farbe.
00:10:43Oh, okay, das sieht immer noch lächerlich aus, oder?
00:10:46Lassen Sie uns also einige dieser anderen Elemente hier ändern.
00:10:50Wir haben die Skalierung, wir haben die Dicke.
00:10:54Oh, das ist interessant.
00:10:56Wir haben den Radius.
00:10:58Wie Sie sehen können, macht es unglaublich viel Spaß, damit herumzuspielen.
00:11:03Das sieht eigentlich ganz cool aus.
00:11:04Ich spiele noch ein bisschen damit herum.
00:11:07Ja, ich bin eigentlich ganz zufrieden damit.
00:11:09Lassen Sie uns jedoch mit einem anderen Shader experimentieren.
00:11:11Das Coole hier ist: Wenn wir einen dieser Werte auf 0 % Deckkraft ändern,
00:11:18können wir quasi dahinter blicken.
00:11:19Natürlich soll das im Browser nicht das Endergebnis sein.
00:11:23Wir werden also die Z-Index-Eigenschaft nutzen, sobald wir das dort beheben können,
00:11:27da ich hier noch nicht sehe, wo ich sie anpassen kann.
00:11:30Alles klar, ich mache hiermit erst mal weiter,
00:11:32und wir schauen uns an, wie es aussieht, wenn wir das Z-Index-Problem gelöst haben.
00:11:35Ich denke, wir werden einfach diesen hier verwenden.
00:11:39Wir wählen ihn also aus, um das Ganze wieder
00:11:43in Cursor oder Claude Code oder was auch immer zu bekommen.
00:11:46Und dann gehen wir zurück zu unserem Terminal.
00:11:48Ich werde Folgendes sagen: Nutze den Paper-MCP-Server,
00:11:50um das ausgewählte Design in Paper in funktionierendes Vanilla-HTML,
00:11:53CSS und JavaScript in einer index.html-Datei zu übersetzen.
00:11:56Stelle sicher, dass alles perfekt übertragen wird.
00:11:58Ich habe einen Screenshot der Shader-Einstellungen beigefügt, damit alles stimmt.
00:12:01Dieser Teil ist wichtig, denn ich habe mit dem Gründer gesprochen,
00:12:04und momentan werden noch nicht alle erforderlichen Informationen übergeben,
00:12:08zumindest nach meinen ersten Tests mit Shadern.
00:12:11Lassen Sie uns jetzt die Eingabetaste drücken und sehen, was passiert.
00:12:14Alles klar, es ist fertig.
00:12:15Los geht's.
00:12:16Hier ist es.
00:12:17Es ist kein hundertprozentig perfektes Abbild, besonders der Shader,
00:12:22den man im Hintergrund sehen kann.
00:12:24Meiner sieht ein bisschen anders aus.
00:12:28Eher wie größere, fließende Linien.
00:12:31Was man tun müsste, ist einfach einen Screenshot zu machen.
00:12:34Achten Sie darauf, die Verlaufs-Einstellungen zu fotografieren,
00:12:36oder die Mesh-Gradient-Einstellungen, was auch immer Sie verwenden,
00:12:38und versuchen Sie, es iterativ zu verbessern.
00:12:42Ich bin zuversichtlich, dass dies sehr bald behoben sein wird,
00:12:44sobald die Shader richtig integriert sind und feststeht,
00:12:47wie der MCP die Übersetzung dieser Informationen handhabt.
00:12:51Nun möchte ich, dass Sie auf designcourse.com gehen.
00:12:56Der Link ist unten eingeblendet, um bei der 30-tägigen
00:13:01„AI Native Designer“-Challenge-Serie mitzumachen.
00:13:04Und ich möchte, dass Sie Paper verwenden.
00:13:06Es gibt einen völlig kostenlosen Account, um dieses Design hier fertigzustellen.
00:13:11Das ist das Design, an dem wir in der letzten Challenge gearbeitet haben.
00:13:14In diesem dunkleren Bereich, den Sie hier sehen können,
00:13:17steht „Ihr Design hier“.
00:13:18Ich möchte, dass Sie Paper mit demselben Workflow nutzen, den wir gerade gezeigt haben.
00:13:24Laden Sie das Asset herunter, das sich direkt auf der Challenge-Seite befindet.
00:13:27Es enthält dieses HTML, das Sie hier sehen,
00:13:30und vervollständigen Sie das Design darunter mit Paper.
00:13:33Das ist die Challenge-Seite hier in Figma.
00:13:35Sie können sie als Referenz nutzen, wenn Sie möchten.
00:13:38Sie müssen es aber nicht tun.
00:13:39Aber hier sind die Anweisungen.
00:13:40Erstellen Sie einfach einen kostenlosen Account.
00:13:42Laden Sie das index.html-Asset von der Challenge-Seite herunter.
00:13:45Nutzen Sie Paper, um das Design im leeren Bereich dieses Abschnitts fertigzustellen.
00:13:49Hier kommt Ihr Design rein, genau so.
00:13:52Sie können es gestalten, wie Sie wollen, und schreiben, was Sie wollen.
00:13:54Es muss nur nahtlos sein.
00:13:56Und im nächsten Abschnitt steht es Ihnen frei zu tun, was Sie möchten.
00:13:59Sie können auch Animationen und Interaktivität einbauen.
00:14:02Falls ja, laden Sie bitte eine Videoaufnahme für Ihre Einreichung hoch,
00:14:04da unser System Video-Uploads verarbeiten kann.
00:14:07Ich bin wirklich gespannt darauf, was Sie so draufhaben.
00:14:09Ich werde etwa 8 bis 10 davon bewerten, so wie ich es bisher bei der Challenge gemacht habe.
00:14:13Das werden videobasierte Reviews sein, und wir schauen einfach mal, was Ihnen einfällt.
00:14:16Die Zukunft des Designs ist wirklich spannend.
00:14:18Wir sehen jetzt viele dieser Tools mit KI-gestützten Workflows auf den Markt kommen.
00:14:24Paper ist eines davon, Pencil ein anderes, und ich denke, wir werden noch viele mehr sehen.
00:14:28Wir werden sehen, wer sich am Ende durchsetzt.
00:14:30Könnte es Figma sein?
00:14:31Ich weiß es nicht.
00:14:32Wir werden sehen.
00:14:33Ich sehe euch alle sehr bald wieder.
00:14:34Auf Wiedersehen.