DIESER Schritt verändert dein KI-Webdesign komplett
Tim Hildesheim
0:00 / 0:00
DIESER Schritt verändert dein KI-Webdesign komplett
4 887 просмотров · 16 часов назад
Tim Hildesheim
675 подписчиков
4 887 просмотров · 16 часов назад
Du willst lernen, wie du dir mit KI Skills & Online-Marketing ein ortsunabhängiges Freelancing Business aufbauen kannst? Dann sei bei unserem kostenlosen Live-Event am 29. & 30. September dabei:
https://link.heyfreiheit.com/live-event1
Die Vorlage, die komplette Anleitung und alle Prompts aus dem Video bekommst du kostenlos in unserer Skool-Community:
https://www.skool.com/heyfreiheit/about
Deine KI-Webseiten sehen alle irgendwie gleich aus? Ich zeige dir, wie du mit einer eigenen Design Library konkrete Vorlagen für hochwertigere Webseiten sammelst und daraus direkt brauchbare Design-Briefings machst.
Im Video baue ich meine Sammlung mit Website-Links und Screenshots aus. Die KI beschreibt den Stil und bereitet die Referenzen so auf, dass ich sie in Codex oder Claude Code für neue Projekte nutzen kann.
An einem Restaurant-Beispiel zeige ich dir dann den Weg vom Design-Briefing zum ersten Website-Entwurf. Außerdem erfährst du, wie du zunächst mehrere Mockups als Bilder erstellen lässt, bevor du eine komplette Seite baust.
Für eine fertige Kundenwebsite gehören anschließend echte Inhalte, passende Bilder und geprüfte Funktionen dazu. Der schnelle Entwurf im Video zeigt dir das Prinzip.
Kapitel
00:00 Warum KI-Webseiten oft gleich aussehen
00:45 Meine persönliche Design Library
01:15 Gute Designreferenzen finden
03:25 Website hinzufügen und mit KI analysieren
04:53 Ganze Webseiten als Screenshot speichern
06:03 Designanalyse und Briefing kopieren
07:28 Eigene Design-DNA und unerwünschte Muster
08:45 Inspiration suchen und Screenshots importieren
11:28 Eigene Library mit der GitHub-Vorlage aufsetzen
12:57 Hosting mit Vercel
14:04 KI-Analyse, API-Key und Kosten
16:13 Praxisbeispiel: Restaurant-Website
18:03 Design-Briefing und Website-Prompt
20:19 Referenzbild direkt hochladen
20:55 Den neuen Website-Entwurf ansehen
21:58 Mehrere Mockups statt sofort alles programmieren
23:20 Als Freelancer damit arbeiten
24:39 Deine eigene Referenzsammlung aufbauen
Inspiration aus dem Video
Awwwards: https://www.awwwards.com/
Dribbble: https://dribbble.com/
Pinterest: https://www.pinterest.com/
Hilfreiche Tools
FireShot für Website-Screenshots: https://getfireshot.com/
Vercel für das Hosting: https://vercel.com/
Wispr Flow zum Diktieren, Empfehlungslink: https://wisprflow.ai/r?FELIX1567
Die KI-Analyse per API verursacht separate Nutzungskosten. Prüfe beim Hosting den passenden Tarif für deinen Einsatzzweck.
Die ursprüngliche Idee und Grundlage meiner Library stammen von Chase AI. Ich habe sie für meinen Workflow erweitert.
Such dir eine Branche aus und sammle deine ersten passenden Referenzen. Die Anleitung dazu findest du in der Community.
#KIWebdesign #Webdesign #Freelancing