00:00:00Ich werde euch zusammen mit hunderten anderen Designern ein wirklich cooles Experiment präsentieren.
00:00:06Ich möchte sehen, wie weit wir KI-Design bringen können, und dieses Mal geht es speziell um Claude Code,
00:00:13um einen Hero-Bereich für ein und dieselbe fiktive Geschäftsidee zu erstellen.
00:00:19Aktuell läuft auf designcourse.com eine 30-tägige UI-Design-Challenge.
00:00:24Sie ist zu 100 % kostenlos.
00:00:25Wir hatten bereits eine Challenge mit über 200 Einsendungen, und dies ist nun die
00:00:30zweite Challenge.
00:00:31Ich zeige euch, wie ihr Claude Code nutzt und es mit einer speziellen Design-Fähigkeit ausstattet,
00:00:37um wirklich gute Designs zu entwerfen.
00:00:40Das Ziel dieser Challenge ist: Ich gebe euch allen dieselbe fiktive Geschäftsidee,
00:00:44aber wir schauen mal, wie gut eure Prompting-Skills sind, um das bestmögliche UI
00:00:50für diese Aufgabe zu erstellen.
00:00:52In Kürze zeige ich euch genau, wie ihr heute an dieser Challenge teilnehmen könnt.
00:00:56Egal, wann ihr das seht – es könnte Monate später sein –,
00:00:58ihr könnt immer teilnehmen, um zu sehen, was andere so machen.
00:01:01Zuerst zeige ich euch aber, wie ihr alles Notwendige einrichtet.
00:01:04Zuerst braucht ihr natürlich Claude Code, alles klar?
00:01:07Das hier ist die Seite für die Einrichtung.
00:01:10Es gibt verschiedene Umgebungen.
00:01:11Ich werde das nicht alles durchgehen, also verlinke ich einfach die Setup-Seite.
00:01:15Ihr findet selbst heraus, wie ihr es installiert, falls noch nicht geschehen.
00:01:17Sobald es bereit ist, müsst ihr nur „Claude“ eingeben und es sollte direkt hier
00:01:22geladen werden.
00:01:23Okay.
00:01:24Der nächste Schritt ist sicherzustellen, dass ihr es mit einem speziellen Skill ausstattet.
00:01:26Ein Skill ist eigentlich nur ein Satz von Anweisungen, die in den Kontext der KI
00:01:30eingespeist werden.
00:01:31Und es gibt eine ganze Reihe verschiedener Skills.
00:01:32Bevor ich euch den Skill zeige: So installiert ihr Skills auf eurem System.
00:01:37Ihr müsst euren Claude-Code-Ordner finden, basierend auf eurem Betriebssystem und der Umgebung,
00:01:43die ihr verwendet.
00:01:44Dann nehmt ihr einfach diese Markdown-Datei, die den Skill enthält, und schiebt sie in
00:01:49diesen Ordner.
00:01:50Der spezielle Skill, von dem ich spreche, heißt „Front End Design“, genau hier.
00:01:55Ich werde ihn hier in der Beschreibung verlinken, damit ihr darauf zugreifen könnt.
00:01:58Klickt dann auf „Skills“, „Front End Skills“, „Skill.md“ und dann
00:02:03hier auf „Download Raw File“, alles klar?
00:02:06Sobald ihr diese Skill-Datei habt, nehmt ihr sie und sucht euren Claude-Code-Ordner unter
00:02:12der URL, die ich euch gerade gezeigt habe.
00:02:14Mein Ordner hier unter Windows 11 liegt unter C:\Benutzer\Gary\.claude.
00:02:21Darin habt ihr vielleicht noch keinen „skills“-Ordner.
00:02:24Falls nicht, erstellt ihn einfach.
00:02:25Ich habe ihn schon.
00:02:26Doppelklick darauf und erstellt dann einen Ordner namens „Designer“.
00:02:31Dort hinein fügt ihr dann die Skill-Datei „Skill.md“ ein.
00:02:35Falls Claude bereits läuft, schließt es zuerst, indem ihr ein paar Mal
00:02:39Strg+C drückt.
00:02:41Tippt erneut „Claude“ und dann einfach „/skills“, um alle verfügbaren Skills aufzulisten.
00:02:47Im Moment habe ich nur drei.
00:02:48Hier sehen wir „Front End Design“.
00:02:51Und darauf greift ihr über „/frontend-design“ zu.
00:02:56Danach fügt ihr euren Prompt ein.
00:02:58Lassen mich euch das in Aktion zeigen.
00:03:00Wenn ich also „/frontenddesigner“ eingebe: „Designe einen Hero-Bereich einer Landingpage für einen
00:03:06KI-Identitätsprüfungsdienst“.
00:03:07„Er sollte einen hellbeigen Hintergrund haben, zwei Spalten, eine starke Überschrift und einen
00:03:11Text links mit einem Call-to-Action“.
00:03:13„Rechts soll eine fiktive, aber simple UI-Animation sein, die das Konzept der
00:03:16Identitätsprüfung veranschaulicht – Entschuldigung, Identitätsprüfung“.
00:03:20„Pack das in eine HTML-Datei mit CSS und verwende Variablen“.
00:03:23Das ist mein ganzer Prompt, und das hier ist das Ergebnis.
00:03:28Ich weiß nicht, wie ihr das seht, aber das ist wirklich solide, und es hat beim ersten Versuch geklappt.
00:03:33Und ihr habt den Prompt gesehen.
00:03:35Er ist sehr kurz.
00:03:36Jetzt zeige ich euch die Challenge und die Geschäftsidee für den Prompt,
00:03:41den ihr für das fiktive Unternehmen nutzen sollt, und ich bin gespannt auf eure Ergebnisse.
00:03:46Die Idee ist, ihn mit euren eigenen Design-Vorlieben zu ergänzen, damit etwas
00:03:51Einzigartiges und von mir aus auch Animiertes entsteht.
00:03:53Der erste Schritt: Geht auf [designcourse.com/foundations-challenge](https://www.google.com/search?q=https://designcourse.com/foundations-challenge).
00:03:58Der Link ist irgendwo hier unten.
00:04:00Hier seht ihr die Seite – bereits 613 Studenten und 197 Einsendungen
00:04:06für die erste Challenge, die wir schon hatten.
00:04:08Das hier ist für die zweite Challenge.
00:04:09Klickt einfach hier, dann seht ihr: „Hol dir das 2026 UI/UX Figma-Template“.
00:04:16Darin findet ihr Challenge Nummer zwei, und die sollt ihr verwenden.
00:04:20Das Ganze sieht so aus.
00:04:23Das ist Challenge Nummer zwei, und hier sind die Anweisungen.
00:04:27Das ist ein Teil des Prompts, den ihr einfügen sollt.
00:04:29Das ist die fiktive Geschäftsidee.
00:04:31Ich möchte nicht, dass ihr eine andere Idee verwendet.
00:04:32Wir sollen alle dieselbe Idee nutzen: Ein KI-basiertes Unternehmen für Hausinspektionen.
00:04:37Es nutzt Computer Vision, um Kriechkeller, Dächer und Fundamente auf Mängel zu prüfen
00:04:42und automatisch standardisierte Inspektionsberichte zu erstellen.
00:04:45Unser Ziel ist es, die KI mit diesem initialen Prompt hier anzuweisen,
00:04:50um mit unserem Claude-Code-Designer-Skill einen erstklassigen Hero-Bereich zu erstellen.
00:04:56Und hier drüben stehen die Anweisungen.
00:04:58Nutzt Claude Code, um einen Hero-Bereich für die fiktive Geschäftsidee zu generieren,
00:05:03die rechts in diesem Rahmen gezeigt wird.
00:05:05Achtet darauf, das als Teil eures Prompts einzufügen.
00:05:08Nennt die Geschäftsidee, aber fügt auch eure eigenen Design- und Styling-Präferenzen hinzu.
00:05:13So habe ich es auch gemacht, um diese kleine animierte Karte zu erstellen,
00:05:17die wir gerade gesehen haben.
00:05:18Ihr könnt so viele Prompts wie nötig verwenden, um das Ergebnis zu verfeinern.
00:05:22Ihr könnt Animationen integrieren, wenn ihr möchtet.
00:05:24Gebt bei der Abgabe bitte zuerst an, wie viele Prompts ihr bis zum Endergebnis gebraucht habt,
00:05:29da ich möchte, dass ihr das Ergebnis bei Bedarf verfeinert.
00:05:32Fügt außerdem den Prompt selbst in das Kommentarfeld ein.
00:05:36Ihr könnt auch das „Claude Code to Figma“-Plugin nutzen, um einen Figma-Prototyp
00:05:42eures Designs einzureichen, aber das ist kein Muss.
00:05:44Ein Screenshot reicht völlig aus.
00:05:47Mit dem „Claude Code to Figma“-Plugin könnt ihr euer UI-Endergebnis
00:05:53einfach nach Figma übertragen.
00:05:54Ich zeige das hier nicht im Detail, da ich erst gestern ein Video dazu hochgeladen habe,
00:05:58das genau das erklärt.
00:06:00Wie gesagt, das müsst ihr nicht tun.
00:06:01Ein Screenshot ist für eure Einreichung absolut okay.
00:06:04Wie ihr euren Beitrag einreicht, wird hier erklärt.
00:06:09Nehmen wir an, ihr entscheidet euch dafür, ein Figma-Dokument eurer Arbeit zu teilen,
00:06:14was mir Korrekturen ermöglichen würde, falls ich euren Entwurf reviewe – dann klickt einfach
00:06:18hier auf „Teilen“.
00:06:20Klickt auf „Prototyp-Link kopieren“, stellt sicher, dass jeder ihn sehen kann, und reicht ihn ein.
00:06:25zusammen mit eurem Beitrag.
00:06:26Das wird eine wirklich coole Challenge, denn wir werden sehen: Werden die Ergebnisse
00:06:30sehr ähnlich ausfallen?
00:06:32Das werden sie, wenn ihr nicht viel vorgebt oder kein eigenes kreatives Interesse
00:06:37an den Stylings und euren eigenen Ideen einfließen lasst.
00:06:40Aber wenn ihr das tut, werden wir sicher viele interessante Variationen und Konzepte
00:06:47zu sehen bekommen.
00:06:48Gebt also das gewünschte Farbschema an, sowie interessante Illustrationen
00:06:53oder Animationen.
00:06:55Das Ziel ist es, das Maximum aus dem herauszuholen, was KI produzieren kann.
00:06:58Alles klar, ich hoffe, dass alle bei dieser Challenge mitmachen.
00:07:01Das ist eine wirklich feine Sache.