Zum Inhalt springen

Kurskatalog

So wird’s schön: Design mit KI

Lerne zu erkennen, was eine Seite gut gestaltet wirken lässt, und gib deinem KI-Agenten den passenden Auftrag.

Dein KI-Agent kann in wenigen Minuten eine funktionierende Seite bauen. Sie sieht dann aus wie jede andere generierte Seite: lila Verlauf, zentrierter Hero-Bereich, sechs Emoji-Karten. In diesem Kurs lernst du an interaktiven Beispielen zum Ziehen und Anpassen, was eine gut gestaltete Seite ausmacht: Hierarchie, Abstände, Typografie und Farbe. Danach lernst du, Design-Aufträge zu formulieren: Referenzen mit Anmerkungen statt Adjektiven, Design-Tokens statt Rätselraten und Screenshots, die ein konkretes Problem zeigen. Du prüfst Barrierefreiheit, Animationen, kleine Bildschirme sowie Leer- und Fehlerzustände. Zum Abschluss erstellst du ein Design-System, das dein KI-Agent in jeder Sitzung liest: eine Token-Datei, Komponentenregeln und eine kurze DESIGN.md. Du brauchst keine Vorkenntnisse in Design oder Programmierung.

Starte mit einer kostenlosen LektionAlle Tarife vergleichen

Lehrplan

  1. Abschnitt 1

    Den Blick für Design schärfen

    Lerne die vier Merkmale kennen, die eine Seite gestaltet statt generiert wirken lassen: ein klarer Blickfang, bewusste Abstände, eine kurze Schriftgrößenskala und Farben mit einer Aufgabe.

    1. Das Wichtigste zuerst
    2. Abstand ist ein Signal
    3. Eine kurze Schriftgrößenskala
    4. Farben mit einer Aufgabe

  2. Abschnitt 2

    KI-Agenten klare Design-Aufträge geben

    Mach aus Geschmack klare Anweisungen: Benenne typische Standardmuster, nutze Referenzen statt Adjektiven, übergib Design-Tokens und sende Screenshots, die ein konkretes Problem zeigen.

    1. Den KI-Look erkennen
    2. Referenzen statt Adjektiven
    3. Die Zahlen übergeben
    4. Screenshots mit klarer Aussage

  3. Abschnitt 3

    Prüfen und nachbessern

    Verfeinere eine Seite in kurzen Prüfrunden: Kontrast, Zielflächen und Fokus prüfen, zwecklose Bewegung streichen, fürs Handy beginnen und die oft vergessenen Leer-, Lade- und Fehleransichten anfordern.

    1. Barrierefreiheit prüfen
    2. Animationen mit einer Aufgabe
    3. Zuerst fürs Handy
    4. Die vergessenen Ansichten

  4. Abschnitt 4

    Ein Design-System, dem dein KI-Agent folgt

    Halte Entscheidungen so fest, dass jede Sitzung sie findet: eine Token-Datei mit zwei Ebenen, prüfbare Komponentenregeln, eine kurze DESIGN.md mit Verweis in den Projektanweisungen und Gewohnheiten gegen schleichende Abweichungen.

    1. Eine Token-Datei, zwei Ebenen
    2. Regeln für jede Komponente
    3. Der Auftrag für jede Sitzung
    4. Dem System treu bleiben

Lernpfade

Mit KI entwickeln

Veröffentliche ein kleines Produkt, für das du einen KI-Agenten angeleitet hast: mit schriftlicher Spezifikation, einem für die Werkzeuge verständlichen Projekt, einer geprüften und getesteten Änderung und einer Landingpage, die du selbst bereitgestellt hast und erklären kannst.

Abfolge aus 9 Kursen

Deine Idee, veröffentlicht. Starte in 60 Sekunden.

7 Tage kostenlos testen bei jedem Tarif für neue Mitglieder · Jederzeit kündbar

Loslegen

Zurück zu den Kursen