KI hat menschliche Fähigkeiten in verschiedenen Bereichen erreicht, aber Design war lange einer der Bereiche, in denen KI Schwierigkeiten hat. Ich denke jedoch, dass viele Menschen leicht missverstehen, was es bedeutet, "mit KI zu gestalten."
In diesem Artikel, basierend auf dem Beitrag "How To Actually Design With AI" von Leon Lin (@LexnLin), habe ich praktische Methoden für die Gestaltung mit KI auf Japanisch sorgfältig zusammengestellt.
Am Ende des Artikels verteile ich ein Designsystem-Kit für die Erstellung hochwertiger Designs mit Claude.
Sie können es am Ende des Artikels erhalten.
Voraussetzungen, die Sie beachten sollten
"Mit KI gestalten" bedeutet nicht, alles der KI zu überlassen. Ideen, Richtung, Intuition und Kreativität kommen letztlich von Ihnen selbst. Es ist einfacher zu verstehen, wenn man KI als etwas betrachtet, das diesen Dingen "Gestalt verleiht" (sie umsetzt).
Der allgemeine Ablauf besteht aus diesen 3 Schritten:
- Entwickeln Sie selbst Ideen
- Sammeln Sie Inspiration
- Übersetzen Sie Ihre Gedanken in Prompts und lassen Sie die KI erstellen
Sie können jedes Tool oder jede Umgebung (Harness) wie Cursor, Codex oder Claude verwenden. Das Wesentliche liegt darin, "Ihre Gedanken in Anweisungen umzuwandeln."
KI ist sehr gut in der Ausführung, besitzt aber noch keine echte Kreativität. Sie versteht "Designregeln" wie Weißraum, Typografie, Farbtheorie und Hierarchie. Allerdings kann sie nicht verstehen, was sich "wirklich gut," "originell" oder "bedeutungsvoll" anfühlt – mit anderen Worten, Geschmack.
Das ist die größte Lücke. Im Moment kann man KI keinen echten Geschmack verleihen, aber man kann diese Einschränkung umgehen, indem man annimmt, dass er existiert.
Methode 1: Verwendung von Design-Fähigkeiten
Dies ist der schnellste Ansatz. Wenn Sie wenig Zeit haben oder etwas Kleines erstellen, ist es effektiv, sich auf vorbereitete "Design-Fähigkeiten" zu stützen.
Beispiele hierfür sind:
- Impeccable (impeccable.style
- Emil Kowalskis UI-Fähigkeiten (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
Der Prozess ist sehr einfach:
- Fügen Sie Design-Fähigkeiten hinzu
- Geben Sie der KI Kontext
- Senden Sie ein paar Prompts, um eine Website, App oder ein Poster zu erstellen
- Beheben Sie offensichtliche Probleme
- Veröffentlichen Sie
Die Ergebnisse sind in der Regel "ordentlich gut." Sie mögen anderen KI-generierten Designs ähneln, aber die Verwendung hochwertiger Fähigkeiten vermeidet die schlimmsten Fehler und den "KI-Look." Dies ist die Methode, die viele Leute tatsächlich verwenden.
Methode 2: Selbst mit KI gestalten
Wenn Sie etwas schaffen wollen, das "wirklich heraussticht," müssen Sie einen Schritt weiter gehen. Sie möchten, dass Benutzer das Gefühl haben, dass Ihr Produkt "durchdacht" ist, wenn sie es berühren – dafür ist ein bewussterer Prozess erforderlich.
Ob es sich um eine mobile App, Desktop-App, Website, Landingpage, ein Dashboard oder Poster handelt, Sie brauchen zunächst eine klare Richtung. Wenn Sie nicht wissen, was Sie machen wollen, wird die KI es nicht für Sie finden.
Beginnen Sie mit der "Bedeutung"
Definieren Sie zuallererst die Grundlage. Versuchen Sie, diese Fragen zu beantworten:
- Für wen ist das gedacht?
- Welches Problem löst es?
- Wie soll es sich anfühlen?
- Was verkörpert es?
Die UI spiegelt die "Bedeutung" eines Produkts wider. Schreiben Sie diese auf. Sie können hier auch KI einsetzen, aber der Trick ist, sie zu nutzen, um Ihnen Fragen zu stellen und nicht für das Design.
Lassen Sie sich zum Beispiel von der KI fragen:
- Worum geht es bei diesem Produkt?
- Wer sind die vorgesehenen Benutzer?
- Welche Emotionen möchten Sie vermitteln?
- Wie soll die Markenatmosphäre sein?
- Welche Farben und Schriftarten passen?
- Minimalistisch / Verspielt / Hochwertig / Technisch / Experimentell – welche Richtung?
Inspiration sammeln
Sobald die Richtung festgelegt ist, beginnen Sie mit dem Sammeln von Referenzen. Eine gute Quelle ist Mobbin, das tatsächliche Produktbildschirme aus verschiedenen Kategorien enthält.
Das Wichtige hier ist, nicht nur zu schauen und zu denken "das sieht gut aus." Fragen Sie sich warum es gut ist.
- Ist es das Layout?
- Der Weißraum?
- Die Typografie?
- Die Struktur?
- Die Interaktion?
Speichern Sie Dinge, die Ihnen gefallen, und organisieren Sie sie in Ordnern wie:
- Navigation
- Hero
- Preise
- Karten
- Mobile Bildschirme
- Dashboard
- Animation
- Typografie
Wenn Sie sich die Zeit nehmen, auf diese Weise Ihre eigene Referenzbibliothek aufzubauen, kultivieren Sie "Geschmack."
Weitere hilfreiche Quellen sind Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee und Lummi.
Hinweis: Vermeiden Sie es, Designs komplett zu kopieren. Es ist wichtig, mehrere Ideen zu kombinieren und sie zu etwas zu erheben, das zu Ihrem Produkt passt.
Struktur abbilden
Als nächstes definieren Sie, was Sie tatsächlich bauen müssen. Für eine Website könnte das Navigation, Hero, Funktionen, Preise, Testimonials, CTA und Footer sein.
Für eine App könnte es Onboarding, Startseite, Suche, Profil, Einstellungen, Kernabläufe und leere Zustände sein.
Jeder Abschnitt benötigt klare Inhalte. Für einen Hero-Bereich brauchen Sie eine Überschrift, Beschreibung, CTA und visuelle Elemente. KI kann bei den Texten helfen, aber "Klarheit" kommt letztlich von Ihnen.
Komponentenbasiert aufbauen
Schließlich ist es Zeit zu produzieren. Nehmen Sie die einzelnen Ideen, auf die Sie sich bezogen haben, und bauen Sie sie neu auf, um sie an Ihr Produkt anzupassen.
Anstatt zu sagen "mach eine ganze Website," ist der Schlüssel zu sagen: "Erstelle auf Basis dieses Stils einen Hero-Bereich, der auf meine Marke zugeschnitten ist."
Gehen Sie Schritt für Schritt vor: Navigation → Hero → Karten → Buttons → Typografie → Details. KI ist viel besser bei kleinen Aufgaben, und so behalten Sie die Kontrolle.
Benutzerdefinierte Assets erstellen
Nutzen Sie bei Bedarf Bildgenerierung. Bildgenerierungstools sind inzwischen leistungsfähig genug. Der Trick ist, Kontext wie Farbe, Stil, Komposition und Zweck klar zu vermitteln.
Vermeiden Sie generische Stockbilder. Die Verwendung von benutzerdefinierten visuellen Elementen schafft ein Gefühl der Einheit im gesamten Werk.
Gesamter Arbeitsablauf
Zusammenfassend sieht der Ablauf so aus:
- Idee definieren
- Zweck und Benutzer klären
- Markenrichtung festlegen
- Referenzen sammeln
- Diese organisieren
- Struktur abbilden
- Komponenten erstellen
- Assets generieren
- Interaktionen hinzufügen
- Das Ganze verfeinern
Sie erzielen viel bessere Ergebnisse als mit einem einzigen Prompt.
Methode 3: Verwendung von Inspirationsboards
Es gibt auch einen etwas schnelleren "Mittelweg." Anstatt alles einzeln zusammenzustellen, geben Sie der KI eine kuratierte Sammlung von Referenzen.
Sammeln Sie Screenshots von Mobbin, Awwwards, Webflow usw. und fragen Sie:
Bitte kombinieren Sie den Stil und die Richtung dieser Referenzen, um ein Design für mein Produkt zu erstellen. Kopieren Sie sie jedoch nicht exakt.
Dies setzt natürlich voraus, dass Sie genügend Kontext bereitgestellt und die KI zuerst Fragen stellen lassen haben. Es ist schneller als manuelle Arbeit, liefert aber viel bessere Ergebnisse als ein generischer Einmal-Prompt.
Zusammenfassung der 3 Ansätze
- Methode 1: Design-Fähigkeiten — Schnell, ordentliche Ergebnisse
- Methode 2: Komponentenbasiert — Langsamer, aber höchste Qualität
- Methode 3: Inspirationsboard — Ausgewogen
Andere nützliche Werkzeuge
- SVG-Generierung: Tools wie Quiver können SVGs erstellen. Da die Elemente getrennt sind, lassen sie sich leichter animieren.
- Video: Tools wie Google Flow. Können Hero-Bereiche, Hintergründe und Produktdemos verbessern.
- Bildbibliotheken: Plattformen wie Lummi. Aber wählen Sie Bilder, die zur Marke passen.
- Schichtung: Fügen Sie Tiefe, Bewegung und Interaktion durch Hintergrundentfernung und Schichtung hinzu. Die Anhäufung von Details macht einen großen Unterschied.
Fazit
KI ist kein Ersatz für Ihr Denken.
- Was Sie machen
- Warum es wichtig ist
- Für wen es ist
- Wie es sich anfühlen soll
Sie sind immer derjenige, der diese Dinge entscheidet. KI führt sie nur schneller aus. Die besten Ergebnisse erzielen Sie nicht durch bessere Prompts, sondern durch besseren Geschmack.
*Dieser Artikel wurde basierend auf Leon Lins (@LexnLin) X-Beitrag "How To Actually Design With AI" auf Deutsch rekonstruiert.
Ich verteile das "Claude Design System Kit" kostenlos auf LINE.
▼ Registrieren Sie sich auf LINE, um das "Claude Design System Kit" zu erhalten
https://t.co/90omRA4UQ7
Bitte treten Sie dem Open Chat (LINE OpenChat) bei und senden Sie dann von der in den Notizen genannten offiziellen LINE Folgendes:
Design System
und Sie werden in der Lage sein, die Leistung zu erhalten.
※ Bitte senden Sie keine Schlüsselwörter innerhalb des Open Chats selbst.
Ich empfehle, die Vorlage unverändert in Claude Design einzufügen und zu versuchen, nur ein Dokument zu erstellen. Das allein sollte Ihnen ein Gefühl für die Verwendung eines Designsystems geben.
▼ Registrieren Sie sich auf LINE, um das "Claude Design System Kit" zu erhalten
