Transcription
Wenn ich heute eine richtig gute Website bauen müsste, würde ich nicht direkt in Cloud Code starten, sondern hier in Google Stitch. Stitch hat gerade ein riesiges Update bekommen [musik] und zwar so groß, dass die Figma Aktie in den letzten Tagen über 8% gefallen ist. Und das hat einen Grund, nämlich dass Stitch eines der großen Probleme von Cloud Code löst und das ist das Front-Endend Design. Und genau diese Kombination aus Cloud Code und Stitch gibt uns einen Workflow, mit [musik] dem wir konsistent richtig hochwertige Websites bauen können. In diesem Video zeige ich euch genau das, wie der Workflow funktioniert, [musik] wie ihr das Beste aus beiden rausholt, ohne dass es nach KI aussieht und wie wir das Front-Endend, das wir in Stitch erstellen, einfach per Copy und Paste in Cloud Code übergeben. Let's go.
Es wird immer und immer einfacher Websites und Webanwendungen an sich zu erstellen, aber die Optik ist halt immer noch so eine Frage. Und hier kommen Anwendungen ins Spiel, wie z.B. Stitch. Und zwar ist das eine Anwendung, die speziell aufs Designen ausgerichtet ist und hier auch ein enormes Wachstum verzeichnet. Wir haben über Stitch die Möglichkeit über z.B. Bilder oder URLs von Seiten, die uns gefallen, uns das gesamte Designsystem rauszukapseln, uns eine eigene Designvorlage genau auf dieser Grundlage zu erstellen und diese direkt beispielsweise an Cloud Code zu überführen, damit die Seite von vorne rein nach dem Designschema wird, dass wir haben möchten und das einfach nur anhand der Inspiration von z.B. mit einem Foto.
Dann ist natürlich die nächste Frage, wo kriegen wir Inspiration her? Und zum einen kennt jeder mit Sicherheit irgendeine Seite, die er schön findet, wo er sich denkt, okay, ich habe einen Anwendungsfall, wo ich jetzt gerne meine Seite erstellen würde, wo das Konzept zu passen könnte. Das ist natürlich eine Möglichkeit, aber was auch eine gute Inspirationsquelle für alles im Allgemeinen ist, speziell im Thema Design, ist Pinterest. Und hier kommt man wirklich schnell von Höckchen auf Stöckchen. Das heißt, wenn man etwas gefunden hat, was einem gut gefällt. Ich habe das jetzt z.B. gerade angeklickt, dann sehen wir, dass wir jetzt hier reinkommen, das Design Schema sehen und auf der Grundlage halt jetzt weitere passende zu sehen bekommen, die genau in dieselbe Richtung gehen. Und so kann man sehr schnell den Aufbau seiner eigenen Landing Page z.B. finden, den man selber gerne hätte. Und gerade um nicht bei null starten zu müssen, wenn wir anfangen mit dem Gentic Coding und dann z.B. in Cloud Code uns das Ganze zu erstellen, ist das hier wirklich eine gute Möglichkeit schnell voranzukommen.
Wir nehmen uns jetzt hier diese Hero Section als Grundlage und machen uns wirklich einfach nur einen Screenshot. Das reicht nämlich. Wir können das auch kopieren oder beschreiben, wie die Seite aussieht, aber alleine durch den Screenshot wird Stitch uns ein Designsystem in Worte formulieren, dass wir danach nutzen können für das nachfolgende LM, um uns dann die ganze Seite auf der Grundlage erstellen zu lassen.
Auf der Seite von Stitch angekommen, kann es dann wirklich so einfach sein, wenn wir eingeloggt sind und wir sehen, wir sind gerade in der Betaavsion, weil viele neue Features gedroppt wurden. Das sehen wir z.B. hier im Expost von Stitch und zwar wir haben AI Native Canvas, ein besseres Designsystem. Wir haben jetzt die Möglichkeit zu sprechen und das Ganze uns zu transkribieren. Ich nutze sowieso WPA Flow, das kann ich nur empfehlen und ist wirklich sehr gut. Wir haben instant Prototypes und wir bekommen direkt eine Design.md Datei, die wir nutzen können für unser Projekt. Das hierzu, aber zurück ins Stitch können wir uns jetzt hier einfach den Screenshot einfügen. Ich spreche jetzt hier, wie gesagt, mit USB Flow rein. Erstell mir bitte eine Landing Page für meine Website aibymik.de und zwar genau in dem Style von dem Screenshot. Der Screenshot zeigt eine Hero Section. Diese soll bitte eins zu eins umgesetzt werden. So, dann wechseln wir jetzt hier noch von App auf Web und ich stelle Thinking mit 3.1 Pro ein und starte das Ganze.
So, das ist sehr gut gemacht hier in Stitch. Wir haben das Bild jetzt hier reingeladen bekommen, sehen links unsere Kommunikation mit dem System. können parallel jetzt hier noch weitere Änderungen oder noch Neuheiten mit dazu nehmen. Das würde parallel ausgeführt werden. So, wir sehen, dass ich jetzt hier der erste Screen generiert und wir haben, sobald der erstellt wurde auch hier über die Sideby jetzt gleich die Möglichkeit direkt Änderungen vorzunehmen. Haben wir die Farbpalette gerade schon aus dem Bild extrahiert bekommen, die er zur Grundlage legt, um dann unsere Seiten zu erstellen. Allein das ist natürlich goldwert. Ich meine, ich habe hier auch bei mir, das ist so ein Plugin, was ich habe, ich weiß gar nicht, wie das heißt. Das nutze ich auch sehr oft, um halt mir aus dem Browser heraus direkt Farben rausholen zu können. Und das ist auch immer der Grund, falls du schon ein Video von mir gesehen hast, wo ich mit Cloud Code oder einem anderen System etwas gemacht habe, unten links immer diesen kleinen Fehler habe, aber ich möchte diese App halt nicht deinstallieren. Sie heißt Colorasilla, sehe ich gerade, weil ich sie halt einfach so oft nutze. Aber im Endeffekt macht Stitch jetzt gerade genau das, ne? Er schaut sich das Bild an, generiert die Farben daraus und arbeitet mit diesen weiter.
Was wir jetzt machen können, ist z.B. hier in unser Designsystem reingehen mit der rechten Maustaste und dann auf bearbeiten klicken. Und dann sehen wir schon hier oben, dass wir hier die Design.mdatei haben. So und diese können wir jetzt nicht nur für dieses Projekt, sondern auch für andere Projekte theoretisch direkt benutzen. Wenn wir das hier mal ausweiten, wir sehen das ist Markdown Format und wir haben immer hier ein Hashtag für die erste Überschrift, zweites Hashtag für die zweite Überschrift ist mit unter die beste Art und Weise wie LMs Text verstehen. Wenn man z.B. auch in Level Labs sich Voice Agents erstellt, dann ist das halt auch der Goto Weg, dass man diese genauso strukturiert, zumindest laut den Best Practices. Wir sehen hier, wir haben einmal den Overview, die Farben und die Oberflächenlogik, die Typografie und noch weitere Punkte, die hier ausformuliert werden, um das System zu beschreiben.
So, wir gehen mal zurück und sehen jetzt hier unsere Landing Page. Farblich, brauchen wir gar nicht drüber sprechen, ist das auf jeden Fall getroffen. Und was Stitch auch sehr stark und es uns sehr einfach macht, hier mehrere Varianten zu testen, ist neben der Inspiration, die wir uns jetzt hier geholt haben über z.B. Pinterest und einer Hero Section und wir uns dadurch ja das Designsystem ausgearbeitet haben, können wir hier auf unsere erste Vorschau per Rechtsklick drauf klicken und dann auf Variance gehen. So, jetzt haben wir hier die Möglichkeit zu sagen, er soll verschiedene Layout Varianten für uns noch erstellen, verschiedene Color Schemes, Images oder Textfonds abändern oder wir drücken auf custom. So und hier können wir jetzt entweder benutzerdefinierte Anweisung hinzufügen oder z.B. anwählen, dass wir für alle diese Punkte, alle Aspekte, sowohl Layout Color geben als auch Textfonts und Contents uns verschiedene Varianten erstellen lassen. Ich drücke jetzt einfach mal hier auf zwei. Wir drücken auf Varianten erstellen und wie wir sehen können, ist genau das jetzt passiert. Wir haben uns Varianten hieraus erstellen lassen. Hier wurden jetzt alle fünf Aspekte, die wir angeklickt haben, in insgesamt zwei Varianten überführt.
Ich muss sagen, ich fand den ersten Entwurf hier schon mal sehr gut, gehe hier noch mal mit Rechtsklick drauf Variance und ändere nur den Text font ab. Wir sehen auch hier wieder die Design Vorschauten werden gerade erstellt. Okay, da ist gerade mächtig irgendwas schief gelaufen. Ich wollte ja nur einen anderen Font haben. Wir sehen jetzt hier, er hat zwar die einzelnen Punkte, also hier die Dollars, My Goals etc. gerade drinne gelassen, aber das gesamte System zerschossen. Sieht aus wie so eine alte HTML Seite. Ich weiß jetzt nicht, ob ich einen Fehler gemacht habe, aber so sollte das normalerweise nicht aussehen. Aber was wir jetzt halt auch machen können, ist jetzt hier mit einem Rechtsklick reingehen oder unten links in unser Designsystem oder auch hier rechts in der Sidebar, dann hier auf Designsystem und hier können wir dann z.B. in die Schriftart gehen. Wenn uns etwas nicht gefällt, können wir z.B. sagen, wir wollen Monsterrad als Hauptschriftart haben. Save and Apply. Dann sehen wir, dass hier Änderungen getroffen werden. Wir sehen die neue Schriftart.
Und jetzt können wir ganz einfach sagen, wenn wir das ganze Design hier aufgesetzt haben für die Seite, drauf klicken, dann auf more und auf exportieren. Jetzt haben wir hier diverse Möglichkeiten. Wir können uns das Ganze per MCP übertragen. Wir können es in Figma reinholen oder uns den Code einfach in die Zwischenablage kopieren. Genau das machen wir auch. kopieren und jetzt können wir es uns wirklich so einfach machen, dass wir in Cloud Code reingehen, den Code dort einfügen und uns die Website von Cloud erstellen lassen.
Um jetzt hier mitmachen zu können, benötigst du Cloud Code. Das kostet 20 € im Monat, musst du dir einmal herunterladen und die CLI installieren. Das habe ich alles in einem dedizierten Video dazu gemacht. Das kannst du dir gerne hier anschauen. Und was ich machen werde, ist das Terminal zu öffnen mit CD, also Change Directory auf den Desktop zu verweisen. Wir können das auch über unsere IDI machen. Wenn du Visual Studio Code geöffnet hast, kannst du auch da ins Terminal gehen und das Ganze einfügen. Dann geben wir hier Cloud ein, starten Cloud und wir können jetzt einfach schreiben, erstelle mir bitte eine Landing Page für meine Website ai bym mic.de. Hier ist der Frontend Code. Dann fügen wir das ein, was wir uns gerade hier kopiert haben. Wie das hier rechts passieren konnte, weiß ich wirklich nicht. Wir wollten ja nur den Font ändern. Also, der hat da irgendwas in dem Designsystem zerschossen. Wir sehen wie gesagt, dass halt der ganze Text da ist, nur im HTML scheinbar irgendwo ein Fehler ist, also in der Darstellung hier. Aber vielleicht hat du es ja auch schon mal und weißt, wie du das Problem umgehen konntest. Wenn ja, dann gerne in die Kommentare mit den Tipps.
So, wir sehen, Cloud croppt das Ganze, wenn wir einen langen Text einfügen, aber 349 Zeilen haben wir jetzt hiermit übergeben und wir senden das Ganze ab. Und wie wir sehen können, sind wir jetzt hier auf unserer fertigen Seite, die eins zu ein so aussieht wie in Stitch. Wir haben schon Scroll Animation. Das Ganze ist in HTML abgebildet und ist ready, um es jetzt so wie es ist theoretisch hochzuladen.
Was wir jetzt noch machen können, das möchte ich dir noch gerne zeigen, ist auf die Seite 21st.de zu gehen. Ist eine von mehreren Möglichkeiten und Bibliotheken, wo wir hier z.B. auf Komponenten klicken können, um uns jetzt weitergehend noch mehr Inspiration zu holen von den einzelnen Komponenten, die auf der Seite eingebunden sind. Und hier sehen wir schon, wir haben Shader Animation im Background, Hover Animation, Borders, ganze Footer, aus denen wir uns Inspiration holen können und wir kratzen hier halt wirklich jetzt gerade nur an der Oberfläche. Was wir jetzt hier z.B. in Cloud noch machen können, weil wir jetzt hier ja im Terminal drinne sind. Wir können jetzt sagen, er soll die ganze Seite bitte einmal auf Deutsch übersetzen. Auch die Übersetzung hat super geklappt und jetzt können wir mit der Website hier durchstarten.
Ich denke, um das Fundament zu setzen, auf dem wir jetzt aufbauen, wobei man sagen muss, dass wir uns ja hier schon bewusst entschieden haben, in welche Richtung es im Allgemeinen gehen soll, weil wir uns das ja von Pinterest runtergeholt haben, ist das hier schon eine sehr gute Möglichkeit und ein sehr guter Starting Point. Ich hoffe, dass du etwas mitnehmen konntest. Sag mir gerne, ob du Stitch bereits nutzt und wie viele Websites du hiermit in Rekordtempo schon gebaut hast. Ich würde mich freuen, wenn du den Channel abonnierst. Mach's gut und bis bald.