Screenshot-to-Frontend From Vibe Coding to Agentic Coding - VideoQuiz

{{#ev:youtube|https://www.youtube.com/watch?v=ZNjyqJnWNYE%7C500%7Ccenter}}

BLOCKIERT: Für dieses Video liegt in diesem Lauf kein ausreichend verwertbares Transkript für 10 belastbare Quizfragen vor; es wurde keine YouTube-Beschreibung als Ersatz verwendet.

Teste Dein Wissen

Was bedeutet der Begriff 'Screenshot-to-Frontend'? (Die Übersetzung einer visuellen Vorlage in funktionierenden Programmcode.) (!Das einfache Fotografieren eines Computerbildschirms.) (!Das automatische Hochladen von Bildern in soziale Netzwerke.) (!Das Bearbeiten von Grafiken mit einem Bildbearbeitungsprogramm.)

Welche Metapher wird im Video verwendet, um das Verhältnis von Design und Code zu beschreiben? (Ein Eisberg, bei dem das Design nur die sichtbare Spitze ist.) (!Ein Baum, dessen Wurzeln die Datenbanken sind.) (!Ein Auto, bei dem das Design die Karosserie ist.) (!Ein Haus, bei dem das Design das Dach darstellt.)

Was sieht man auf einem statischen Screenshot im Gegensatz zu einem echten Interface meistens nicht? (Ladezustände, Fehlerbehandlung und Barrierefreiheit.) (!Die verwendeten Farben und Abstände.) (!Die Anordnung der einzelnen Elemente.) (!Den Text, der auf den Buttons steht.)

Warum ist Responsivität bei Webseiten wichtig? (Damit die Website auf verschiedenen Bildschirmgrößen wie Smartphones und PCs richtig dargestellt wird.) (!Damit die Website schneller geladen werden kann.) (!Damit die Farben auf jedem Bildschirm genau gleich aussehen.) (!Damit die Website vor Hackerangriffen geschützt ist.)

Was passiert laut Video, wenn man einer KI keine genauen Vorgaben zu einem Designsystem macht? (Sie erzeugt isolierten, schwer wartbaren Code und erfindet Elemente neu.) (!Sie weigert sich, überhaupt Code zu schreiben.) (!Sie erstellt automatisch eine perfekte, barrierefreie Website.) (!Sie löscht das hochgeladene Bild sofort wieder.)

Was sind 'Design Tokens'? (Festgelegte Variablen für Farben, Abstände und Schriftarten in einem Designsystem.) (!Kleine Bilder, die als Icons auf einer Website verwendet werden.) (!Sicherheits-Codes für den Login-Bereich einer Website.) (!Spezielle Programmierwerkzeuge zur Fehlerbehebung.)

Welche unsichtbare Hürde für Barrierefreiheit wird im Video genannt? (Fehlender Alternativtext für Bilder und mangelnde Tastatursteuerung.) (!Zu große Schriftarten auf mobilen Geräten.) (!Die Verwendung von zu vielen unterschiedlichen Farben.) (!Ein zu schnelles Laden der Website-Inhalte.)

Was sind 'ARIA-Tags' im Webcode? (Unsichtbare Wegweiser im Code, die Screenreadern helfen, die Seite für sehbehinderte Menschen zu erklären.) (!Spezielle Grafikeffekte für moderne Webseiten.) (!Befehle, mit denen man die Ladegeschwindigkeit einer Seite erhöht.) (!Programmiercodes zur Verschlüsselung von Nutzerdaten.)

Wie sieht ein schlechter Prompt für eine Screenshot-to-Frontend-KI aus? (Mach daraus einfach eine Website.) (!Nutze unser Designsystem und füge ARIA-Labels für Barrierefreiheit hinzu.) (!Erstelle ein responsives Layout mit großen Touch-Zielen für Smartphones.) (!Verwende React und Tailwind CSS für die Umsetzung dieses Entwurfs.)

Wie verändert sich die Rolle von Frontend-Entwicklerinnen und -Entwicklern durch KI? (Sie schreiben weniger Standardcode selbst und konzentrieren sich mehr auf Logik, Qualität und Barrierefreiheit.) (!Sie werden komplett überflüssig und müssen nicht mehr programmieren können.) (!Sie müssen nur noch screenshots machen und diese manuell abzeichnen.) (!Sie arbeiten ausschließlich an der optischen Gestaltung von Flyern.)

Offene Aufgaben

Leicht

Skizze erstellen: Erstelle eine einfache Handskizze für eine Startseite deiner eigenen Website und beschreibe kurz, wo sich Buttons und Bilder befinden sollen.
Responsivität erklären: Erkläre mit eigenen Worten, warum eine Website auf einem Smartphone anders aussehen muss als auf einem großen Computerbildschirm.
Alternativtexte suchen: Suche auf einer Website deiner Wahl nach einem Bild und prüfe, ob ein Alternativtext (Alt-Text) hinterlegt ist. Warum ist das wichtig?
Einfacher Prompt: Schreibe einen einfachen Prompt auf, mit dem du einer KI erklären würdest, wie ein roter Button auf einer Website aussehen soll.

Standard

Bedienung vergleichen: Vergleiche die Bedienung einer Website mit einer Maus und mit dem Touchscreen eines Smartphones. Welche Unterschiede bei den Klickflächen gibt es?
Design Tokens entwerfen: Entwirf ein einfaches Farbschema für eine Schul-Website. Definiere drei Hauptfarben als 'Design Tokens' (z.B. Primärfarbe, Sekundärfarbe, Hintergrund).
Tastatur-Test: Versuche, eine bekannte Website nur mit der Tabulatortaste deiner Tastatur zu bedienen. Welche Elemente kannst du erreichen, welche nicht?
Design vs. Funktion: Erkläre den Unterschied zwischen dem reinen Aussehen (Design) einer Website und ihrer Funktionalität anhand des Beispiels eines Kontaktformulars.

Schwer

Profi-Prompt schreiben: Schreibe einen detaillierten, professionellen Prompt für eine Screenshot-to-Frontend-KI. Berücksichtige dabei das Framework, Barrierefreiheit (ARIA) und Responsivität.
Eisberg-Modell analysieren: Analysiere das Konzept des 'Eisberg-Modells' für Softwareentwicklung aus dem Video. Welche technischen Schichten liegen unter der Oberfläche einer modernen Web-App?
Usability-Test planen: Entwickle ein Konzept für einen Usability-Test, mit dem Schülerinnen und Schüler die Barrierefreiheit eurer Schul-Website überprüfen können.
Verantwortung diskutieren: Diskutiere die Frage aus dem Video: 'Wer übernimmt die Verantwortung für die Nutzer, wenn KI den Code schreibt?' Verfasse dazu eine kurze Stellungnahme.

type=create break=no preload=CHAT GPT TEXT HIER EINFÜGEN default= width=30 placeholder= Dein MOOC Titel buttonlabel=MOOC erstellen </inputbox>

Links

Frontend-Entwicklung

aiMOOC-Projekte

Schulfach+

Prüfungsliteratur 2026
Bundesland	Bücher	Kurzbeschreibung
Baden-Württemberg	Abitur Der zerbrochne Krug - Heinrich von Kleist Heimsuchung - Jenny Erpenbeck Mittlere Reife Der Markisenmann - Jan Weiler oder Als die Welt uns gehörte - Liz Kessler Ein Schatten wie ein Leopard - Myron Levoy oder Pampa Blues - Rolf Lappert	Abitur Dorfrichter-Komödie über Wahrheit/Schuld; Roman über einen Ort und deutsche Geschichte. Mittlere Reife Wahllektüren (Roadtrip-Vater-Sohn / Jugendroman im NS-Kontext / Coming-of-age / Provinzroman).
Bayern	Abitur Der zerbrochne Krug - Heinrich von Kleist Heimsuchung - Jenny Erpenbeck	Abitur Lustspiel über Machtmissbrauch und Recht; Roman als Zeitschnitt deutscher Geschichte an einem Haus/Grundstück.
Berlin/Brandenburg	Abitur Der zerbrochne Krug - Heinrich von Kleist Woyzeck - Georg Büchner Der Biberpelz - Gerhart Hauptmann Heimsuchung - Jenny Erpenbeck	Abitur Gerichtskomödie; soziales Drama um Ausbeutung/Armut; Komödie/Satire um Diebstahl und Obrigkeit; Roman über Erinnerungsräume und Umbrüche.
Bremen	Abitur Nach Mitternacht - Irmgard Keun Mario und der Zauberer - Thomas Mann Emilia Galotti - Gotthold Ephraim Lessing oder Miss Sara Sampson - Gotthold Ephraim Lessing	Abitur Roman in der NS-Zeit (Alltag, Anpassung, Angst); Novelle über Verführung/Massenpsychologie; bürgerliche Trauerspiele (Moral, Macht, Stand).
Hamburg	Abitur Der zerbrochne Krug - Heinrich von Kleist Das kunstseidene Mädchen - Irmgard Keun	Abitur Justiz-/Machtkritik als Komödie; Großstadtroman der Weimarer Zeit (Rollenbilder, Aufstiegsträume, soziale Realität).
Hessen	Abitur Der zerbrochne Krug - Heinrich von Kleist Woyzeck - Georg Büchner Heimsuchung - Jenny Erpenbeck Der Prozess - Franz Kafka	Abitur Gerichtskomödie; Fragmentdrama über Gewalt/Entmenschlichung; Erinnerungsroman über deutsche Brüche; moderner Roman über Schuld, Macht und Bürokratie.
Niedersachsen	Abitur Der zerbrochene Krug - Heinrich von Kleist Das kunstseidene Mädchen - Irmgard Keun Die Marquise von O. - Heinrich von Kleist Über das Marionettentheater - Heinrich von Kleist	Abitur Schwerpunkt auf Drama/Roman sowie Kleist-Prosatext und Essay (Ehre, Gewalt, Unschuld; Ästhetik/„Anmut“).
Nordrhein-Westfalen	Abitur Der zerbrochne Krug - Heinrich von Kleist Heimsuchung - Jenny Erpenbeck	Abitur Komödie über Wahrheit und Autorität; Roman als literarische „Geschichtsschichtung“ an einem Ort.
Saarland	Abitur Heimsuchung - Jenny Erpenbeck Furor - Lutz Hübner und Sarah Nemitz Bahnwärter Thiel - Gerhart Hauptmann	Abitur Erinnerungsroman an einem Ort; zeitgenössisches Drama über Eskalation/Populismus; naturalistische Novelle (Pflicht/Überforderung/Abgrund).
Sachsen (berufliches Gymnasium)	Abitur Der zerbrochne Krug - Heinrich von Kleist Woyzeck - Georg Büchner Irrungen, Wirrungen - Theodor Fontane Der gute Mensch von Sezuan - Bertolt Brecht Heimsuchung - Jenny Erpenbeck Der Trafikant - Robert Seethaler	Abitur Mischung aus Klassiker-Drama, sozialem Drama, realistischem Roman, epischem Theater und Gegenwarts-/Erinnerungsroman; zusätzlich Coming-of-age im historischen Kontext.
Sachsen-Anhalt	Abitur (keine fest benannte landesweite Pflichtlektüre veröffentlicht; Themenfelder)	Abitur Schwerpunktsetzung über Themenfelder (u. a. Literatur um 1900; Sprache in politisch-gesellschaftlichen Kontexten), ohne feste Einzeltitel.
Schleswig-Holstein	Abitur Der zerbrochne Krug - Heinrich von Kleist Heimsuchung - Jenny Erpenbeck	Abitur Recht/Gerechtigkeit und historische Tiefenschichten eines Ortes – umgesetzt über Drama und Gegenwartsroman.
Thüringen	Abitur (keine fest benannte landesweite Pflichtlektüre veröffentlicht; Orientierung am gemeinsamen Aufgabenpool)	Abitur In der Praxis häufig Orientierung am gemeinsamen Aufgabenpool; landesweite Einzeltitel je nach Vorgabe/Handreichung nicht einheitlich ausgewiesen.
Mecklenburg-Vorpommern	Abitur (Quelle aktuell technisch nicht abrufbar; Beteiligung am gemeinsamen Aufgabenpool bekannt)	Abitur Land beteiligt sich am länderübergreifenden Aufgabenpool; konkrete, veröffentlichte Einzeltitel konnten hier nicht ausgelesen werden.
Rheinland-Pfalz	Abitur (keine landesweit einheitliche Pflichtlektüre; schulische Auswahl)	Abitur Keine landesweite Einheitsliste; Auswahl kann schul-/kursbezogen erfolgen.