Modulbeschreibung

Das Modul vermittelt die praktische Anwendung von generativen KI-Tools zur schnellen Entwicklung funktionaler Web-Prototypen. Die Studierenden lernen, Design-Ideen durch Prompts in interaktive Prototypen zu überführen, diese iterativ zu verfeinern und kritisch bezüglich Qualität, Sicherheit und Einsatz Sinnhaftigkeit zu beurteilen. Der Kurs folgt einer progressiven Logik: von einfachen Cloud-Buildern bis zur Figma-MCP-Integration und befähigt Studierende, Vibe Coding bewusst und verantwortungsvoll in ihren Designprozess zu integrieren.

• 2 Abgaben in Einzelarbeit während des Semesters 
• Projekt, Einzelabgabe am Ende des Semesters 
• Präsentation 20 Min, Einzelarbeit 

• 2 Abgaben in Einzelarbeit während des Semesters (30%)
• Projekt, Einzelabgabe am Ende des Semesters (50%)
• Präsentation 20 Min, Einzelarbeit (20%)

Fachkompetenzen:

• Sie können mit cloud-basierten GenAI-Tools (z.B. Lovable, Bolt, v0) schnell funktionale Web-Prototypen erstellen und diese systematisch verfeinern.
• Sie können präzise Prompts formulieren, die Design-Intent, User-Experience-Anforderungen und technische Constraints verbinden.
• Sie können Figma-Designs systematisch in Code überführen, indem sie GenAI-Tools mit präzisen Anweisungen zu Layout, Styling und Interaktivität steuern.
• Sie können KI-Code-Editoren (z.B. Cursor) für die Feinarbeit an generierten Prototypen einsetzen und dabei z.B. Figma über das Model Context Protocol (MCP) direkt anbinden.
• Sie können verschiedene KI-gestützte Prototyping-Tools hinsichtlich Einsatzgebiet, Codequalität und Limitationen vergleichen und situativ auswählen.
• Sie können Design Systeme mit GenAI erweitern und konsistente UI-Komponenten generieren.
• Sie können die Qualität von KI-generierten Code beurteilen und typische Schwachstellen (z.B. technische Fehler, Sicherheitslücken, fehlende Accessibility) erkennen und beheben.

Methodenkompetenzen:

• Sie können einen explorativen, iterativen Prototyping-Prozess mit GenAI-Tools planen und durchführen.
• Sie können strategisches Prompt Engineering anwenden und mittels Product Requirements Documents die KI-Generierung besser steuern.
• Sie können KI-Generierung und manuelle Anpassung sinnvoll kombinieren und wissen, wann welcher Ansatz geeignet ist.
• Sie können generierten Code mit User-Feedback verknüpfen und Prototypen auf Basis von Tests iterativ verbessern.

Selbstkompetenzen:

• Sie können Prototyping-Strategien und Prompt-Ansätze in der Gruppe teilen, diskutieren und gemeinsam weiterentwickeln.
• Sie können die Rolle von GenAI im Design-Prozess kritisch reflektieren und deren Einfluss auf die Zusammenarbeit zwischen Design und Development realistisch einschätzen.
• Sie können experimentierfreudig mit neuen Tools umgehen und aus Fehlversuchen systematisch lernen.
• Sie können einen fertigen Prototyp vor Fachpublikum präsentieren und die getroffenen Entscheidungen begründen.