KI Challenge

17 Tutorials. Ein Weg. Unsere Evolution.

Eine offene Lern-Challenge für alle, die KI-gestütztes Webdesign lernen wollen — mit Tutorials, Team-Projekten und KI als Coding-Partner.

Die Reise entdecken

Die Idee

Die Herausforderung
„KI schreibt den Code. Aber wer denkt die Architektur?"

KI-Tools wie ChatGPT, Claude und Copilot produzieren heute Code in Sekundenschnelle. Doch ohne klare Struktur entsteht schnell Chaos: Unwartbarer Code, widersprüchliche Styles, Merge-Konflikte. Die eigentliche Kompetenz liegt nicht im Tippen — sondern im Denken in Systemen. Diese Challenge begleitet dich auf einem dreiteiligen Weg von „Code schreiben" zu „Architektur denken".

Prompting als Kompetenz

Du lernst, KI so zu instruieren, dass sie innerhalb eines Design Systems arbeitet — mit ITCSS-Layern, BEM-Namespace und klaren Regeln. Nicht dagegen.

Team-Skalierung

Mehrere Personen arbeiten parallel an einem Codebase — dank BEM-Namespace und klarer ITCSS-Layer ohne Merge-Katastrophe.

Legacy → Modern

Die Evolution von klassischem Webdesign zu modernen Design-Systemen wird in interaktiven Tutorials und Team-Projekten erlebbar.

Für wen? Entwickler, Designer und Neugierige mit heterogenen Vorkenntnissen — von ersten HTML-Tags bis zu mehreren Semestern Erfahrung. Ergebnis: Ein Portfolio aus Team-Projekten, das du überall einsetzen kannst.

So startest du

Drei Wege. Wähle den, der zu dir passt.

01

Allein lernen

Durchlaufe die 15 Tutorials in deinem Tempo. Lerne ITCSS, BEM, Vite und KI-Prompting Schritt für Schritt.

Tutorials entdecken
02

Im Team arbeiten

Wähle eine Rolle, tritt einem Team bei und baue SYNTHESE oder PRISMA. KI hilft dir — du denkst die Architektur.

Team-Projekte ansehen
03

Direkt coden

Du kennst dich schon aus? Starte direkt mit einem der Team-Projekte und nutze KI als Coding-Partner.

Projekte erkunden

Legacy vs. Modern

Der Unterschied, den Architektur macht

2019 — Klassisch 

<table width="100%" border="1">
  <tr>
    <td bgcolor="#C0C0C0">
      <font face="Comic Sans MS">
        Meine erste Website
      </font>
    </td>
  </tr>
</table>
  • Inline-Styles & Tabellen-Layout
  • Keine Trennung von Content & Design
  • Relativierte Pfade (../../../)
  • Keine Mobile-Unterstützung
VS

Heute — Modern 

<article class="challenge-card">
  <h3 class="challenge-card__title">
    Meine moderne Website
  </h3>
  <p class="challenge-card__text">
    Mit ITCSS, BEM und Vite
  </p>
</article>
  • ITCSS + BEM + @layer
  • Design Tokens & Custom Properties
  • Root-relative Pfade (/tutorials/...)
  • Mobile-First & i18n

Die Zeitleiste

Von den ersten HTML-Tags bis zu KI und modernen Design-Systemen — eine Zeitreise durch das Web.

Die Erkenntnis

Wenn KI den Code schreibt, ist Architektur alles.

KI + Chaos Schneller Start, langsames Ende. Unwartbarer Code, widersprüchliche Styles, Merge-Konflikte.
VS
KI + Struktur Schneller Start, schnelles Ende. Klare Architektur, skalierbar, wartbar, erweiterbar.

Die KI Challenge

Zwei Teams. Zwei Projekte. Ein Ziel: Architektur > Code.

SYNTHESE

Das Medien-Kompendium — Wissen strukturiert, zugänglich, interaktiv.

Projekt erkunden
Bereit für die Challenge?