Schulungsübersicht
Einführung in generative AI für Front-End
- Was ist generative AI in der Softwareentwicklung?
- Überblick über Werkzeuge: ChatGPT, GitHub Copilot, Codeium usw.
- Vorteile und Grenzen von AI in der UI-Entwicklung
Promptbasierte UI-Generierung
- Formulieren von Anweisungen für HTML-Struktur und -Komponenten
- Generieren und Modifizieren von CSS-Stilen mit AI
- Verwenden von AI zur Erstellung interaktiver Elemente in JavaScript
Prototyping von Layouts mit generativen Werkzeugen
- Erstellen von Landingsites und mehrseitigen Layouts
- Responsive-Design-Anweisungen (Flexbox, Grid)
- Vorschau und Testen in CodePen oder ähnlichen Tools
Komponentisierung und Wiederverwendbarkeit
- Generieren wiederverwendbarer UI-Komponenten (Schaltflächen, Karten, Formulare)
- Erstellen von Komponentenbibliotheken und Design-Systemen mit AI-Hilfe
- Verwenden von AI in gängigen Frameworks (React, Vue, Tailwind)
AI-gestützte Code-Überprüfung und -Fehlersuche
- Beheben von Layoutfehlern und Barrierefreiheitsproblemen mit LLMs
- Optimieren der HTML/CSS/JS-Code-Leistung
- Erklären von Fehlern und Vorschlagen von Lösungen durch AI-Anweisungen
Kollaboratives Design und Content-Generierung
- Verwenden von AI zur Generierung von Dummy-Inhalten, Kopfzeilen und Platzhaltern
- Zusammenarbeiten mit Designern zur Co-Erstellung von Wireframes und Stilen
- Exportieren von AI-generierten Ideen in verwendbare HTML-Vorlagen
Projekt: Erstellen einer AI-gestützten Web-App
- Entwerfen der UI basierend auf einem Geschäftsanforderungstext
- Erstellen von Komponenten und Interaktionen mit AI
- Ausbessern, Testen und Präsentieren des Prototyps
Zusammenfassung und Nächste Schritte
Voraussetzungen
- Grundverständnis von HTML, CSS und JavaScript
- Kenntnisse in Front-End-Frameworks oder Design-Systemen
- Interesse daran, AI zur Beschleunigung von UI/UX-Arbeitsabläufen einzusetzen
Zielgruppe
- Front-End-Entwickler
- UX-Ingenieure
- Webdesigner und kreative Technologen
Erfahrungsberichte (2)
Ich habe Wissen über die Streamlit-Bibliothek von Python erworben und werde sie sicherlich verwenden, um Anwendungen in meinem Team zu verbessern, die mit R Shiny erstellt wurden.
Michal Maj - XL Catlin Services SE (AXA XL)
Kurs - GitHub Copilot for Developers
Maschinelle Übersetzung
Kenntnisse des Dozenten im erweiterten Einsatz von Copilot & ausreichende und effiziente praktische Übungen
Tan - ViTrox Technologies Sdn Bhd
Kurs - Intermediate GitHub Copilot
Maschinelle Übersetzung