← Zurück zur Übersicht
🖥️ Arbeitsblatt · Unsere Firma · Phase 2

Die Verkaufsseite für das Steam Deck OLED

Jetzt wird gebaut. Du machst aus deiner Produktbeschreibung eine echte Seite mit Bewegung — nach dem Vorbild der Wendekreis-Rösterei. Die eigentliche Frage dabei ist nicht, ob sie hübsch wird, sondern ob deine sorgfältig geprüften Inhalte den Bau überleben. Erfahrungsgemäß tun sie das nicht von allein.

⏱ ca. 55 Min.🎯 7 Etappen💶 kostenlos lösbar🔨 du baust wirklich etwas🎬 mit Motion📧 Versand + PDF
📄
Du brauchst deine Produktbeschreibung. Dieses Blatt baut direkt auf dem Arbeitsblatt zur Produktbeschreibung auf. Wenn du es noch nicht gemacht hast, hol das zuerst nach — sonst fehlt der Inhalt für die Seite.
🔧
Wie man mit KI eine Website baut, steht woanders. Das erklären Meine erste Website mit KI und Website bauen mit Claude Code. Hier geht es um etwas anderes: eine Seite, die etwas verkaufen soll — mit allem, was daran hängt.
💶
Du brauchst nichts zu installieren und nichts zu bezahlen. Eine kostenlose KI im Browser liefert dir den Code, du speicherst ihn als Datei und öffnest sie mit einem Doppelklick. Wie das geht, steht in Etappe 3, Schritt für Schritt.
⚠️
Was der kostenlose Zugang nicht kann: Bei langem Code bricht die Antwort mittendrin ab, und die Zahl der Nachrichten pro Tag ist begrenzt. Mit „mach weiter" geht es weiter — beide Teile nacheinander in dieselbe Datei einfügen. Plane deshalb keine zweite Vollgenerierung ein: Änderungen machst du später direkt in der Datei, nicht durch Neubauen.
🙋
Gar kein KI-Zugang? Dann arbeite zu zweit — oder geh die Etappen 3 bis 6 an der Seite deines Nachbarn durch und notiere, was du anders angewiesen hättest. Die Etappen 1, 2 und 7 gehen ohnehin ohne.
🌐
Nichts davon geht ins Internet. Deine Seite liegt auf deinem Rechner und ist nur für dich sichtbar. Veröffentlicht wird in diesem Blatt nichts.
🛒 Was auf eine Verkaufsseite gehört Checkliste für Etappe 1
ElementWofürWoher
ÜberschriftWas ist das, in drei Sekunden erfassbarProduktbeschreibung, Etappe 2
EinleitungFür wen ist es gedachtProduktbeschreibung, Etappe 2
Merkmale als NutzenWarum es sich lohntProduktbeschreibung, Etappe 3
Ehrliche GrenzenVerhindert RücksendungenProduktbeschreibung, Etappe 4
Preismit Stichtag — Preise ändern sich779 € (512 GB) · 919 € (1 TB), gültig seit der Valve-Ankündigung vom 27.05.2026, geprüft am 03.08.2026
VerfügbarkeitLieferbar oder nicht, und bis wanneigene Angabe
KaufknopfWas soll der Besucher tuneigene Entscheidung
Kompatibilitätshinweis„Läuft mein Spiel?" ist die Fragedie vier Stufen — Verified · Playable · Unsupported · Unknown, erklärt in Die Sprache der Spiele-Hardware
Technische Datenzum Nachschlagen, nicht zum Überredennur belegte Werte
⚠️ Was hier bewusst fehlt
Impressum, Datenschutzerklärung, Widerrufsbelehrung, Versandkosten, Zahlungsarten. Ohne die darf man in Deutschland nichts verkaufen — aber sie gehören nicht in dieses Blatt, sondern in Phase 1 des Fahrplans. In Etappe 7 sammelst du, was fehlt.
1
Etappe 1 · planen

Was steht auf deiner Seite — in welcher Reihenfolge?

⏱ 8 Min

Bevor eine Zeile Code entsteht: Leg die Reihenfolge der Abschnitte fest. Nutze die Checkliste im aufklappbaren Kasten oben — sie sagt, was auf eine Verkaufsseite gehört und woher du es hast.

Die entscheidende Frage ist nicht, was draufkommt, sondern was zuerst kommt. Die meisten Besucher lesen nur den oberen Bildschirmausschnitt. Was muss dort stehen, damit jemand weiterliest?

Und eine Entscheidung, die weh tut: Wo stehen die ehrlichen Grenzen? Ganz unten liest sie niemand. Direkt unter dem Preis liest sie jeder — auch die, die dann nicht kaufen.

✓
Danach hast du den Bauplan. Ohne ihn baut die KI, was sie für üblich hält — und das ist immer dasselbe Werbemuster.
2
Etappe 2 · beauftragen

Schreib die Bauanweisung — mit Schutzregeln

⏱ 8 Min

Jetzt die Anweisung für das Werkzeug. Sie hat zwei Teile: was gebaut wird und was dabei nicht passieren darf. Der zweite Teil ist der wichtigere.

HTML ist die Textform, in der Webseiten geschrieben sind — eine einzige Datei mit dieser Endung genügt für eine vollständige Seite.

Baue eine einzelne HTML-Datei: eine Produktseite für das Steam Deck OLED. Aufbau in dieser Reihenfolge: [deine Reihenfolge aus Etappe 1] Diese Texte übernimmst du WÖRTLICH, ohne sie umzuformulieren: [deine Überschrift, Einleitung, Merkmale und Grenzen aus der Produktbeschreibung] Regeln: - Füge KEINE technischen Angaben hinzu, die ich dir nicht gegeben habe. - Erfinde keine Kundenstimmen, Bewertungen, Sterne oder Rabatte. - Der Abschnitt mit den Einschränkungen bleibt vollständig erhalten. - Jeder Preis steht mit dem Datum, an dem er gilt. - Alles in eine Datei, kein Nachladen aus dem Internet. - Muss auf einem Handybildschirm lesbar sein.
⚠️ Warum die Verbote nötig sind
Ein Werkzeug, das eine „Produktseite" bauen soll, kennt tausende davon — und die meisten haben Sterne, Rabattbanner und Sätze wie „Jetzt zugreifen, nur kurze Zeit!". Ohne ausdrückliches Verbot baut es dieses Muster nach und erfindet dafür auch die passenden Inhalte.
✓
Danach hast du eine Anweisung, die nicht nur beschreibt, was entstehen soll, sondern auch, was zerstört werden könnte.
3
Etappe 3 · bauen

Seite erzeugen und im Browser öffnen

⏱ 10 Min

Mit Claude Code oder Codex: Anweisung eingeben, Datei wird angelegt, fertig. Weiter bei Etappe 4.

Ohne Bezahlzugang — mit ChatGPT, Claude oder Gemini im Browser — geht es so:

1
Anweisung aus Etappe 2 eingeben. Ergänze: „Gib mir den vollständigen Code als eine einzige Datei."
2
Den ganzen Code kopieren — von <!DOCTYPE html> bis </html>. Meist gibt es dafür einen Kopierknopf.
3
Einen Editor öffnen — ein Programm, das reinen Text ohne Formatierung speichert. Ab hier unterscheiden sich Windows und Mac: nimm die passende Spalte unten.
WindowsMac
Zuerst Dateiendungen sichtbar machen. Explorer öffnen → Reiter Ansicht → Einblenden → Häkchen bei Dateinamenerweiterungen.

Ohne diesen Schritt siehst du nicht, ob die Datei wirklich .html heißt — und der häufigste Fehler bleibt unsichtbar.		 Zuerst die intelligenten Anführungszeichen abschalten. TextEdit öffnen → Menü TextEdit → Einstellungen → Neues Dokument → Häkchen bei Intelligente Anführungszeichen entfernen.

Sonst macht TextEdit aus geraden Anführungszeichen krumme — und zerstört damit jede Zeile Code.
Editor (Notepad) öffnen und den Code einfügen. Menü Format → In reinen Text umwandeln, dann den Code einfügen.
Speichern unter → Desktop → Dateiname steamdeck.html → bei „Dateityp" Alle Dateien wählen → bei „Codierung" UTF-8 stehen lassen. Sichern → Schreibtisch → Name steamdeck.html → auf die Rückfrage „Erweiterung .txt verwenden?" mit „.html verwenden" antworten.
4
Doppelklick auf die Datei auf dem Desktop. Sie öffnet sich im Browser. Das ist deine Seite.
💡 Falls etwas schiefgeht
Der Code hört mittendrin auf: Das ist bei kostenlosen Zugängen normal — die Antwortlänge ist begrenzt. Schreib „mach weiter", dann kommt der Rest. Beide Teile nacheinander in dieselbe Datei einfügen.
Es öffnet sich der Editor statt des Browsers: Rechtsklick auf die Datei → Öffnen mit → Browser wählen.
Du siehst den Code statt der Seite: Die Datei heißt noch .txt. Auf Windows zuerst die Dateiendungen einblenden (siehe Tabelle), sonst benennst du ins Leere um.
Umlaute sehen aus wie ä und ö: Beim Speichern war die Codierung nicht UTF-8. Nochmal speichern, diesmal UTF-8 wählen.
✓
Danach hast du eine Seite, die du im Browser ansehen kannst — gebaut aus deinen eigenen Texten.
4
Etappe 4 · beleben

Bewegung einbauen — dosiert

⏱ 8 Min

Eine Verkaufsseite ohne jede Bewegung wirkt tot. Eine mit zu viel Bewegung wirkt wie Werbung aus dem Netz von 2005. Drei Bewegungen reichen für eine Produktseite. Alle drei sind an unserem Vorbild, der Wendekreis-Rösterei, im Einsatz — das Motion-Modul behandelt an derselben Seite noch weitere Muster.

BewegungWoWozu
Einblenden beim Scrollen Abschnitte, sobald sie in den Sichtbereich kommen Führt das Auge, gliedert lange Seiten. Technisch übernimmt das ein IntersectionObserver — eine im Browser eingebaute Funktion, die meldet, sobald ein Abschnitt in den Sichtbereich rutscht.
Rückmeldung beim Zeigen Kaufknopf und Verweise, beim Darüberfahren Zeigt: Hier kann man klicken. Gemacht wird das mit einer transition — der Anweisung, eine Änderung weich über eine kurze Zeit laufen zu lassen statt sprunghaft; transform steht dabei für Verschieben oder Vergrößern.
Ein Auftakt Überschrift und erster Absatz, einmal beim Laden Gibt der Seite einen Anfang. Einmal — nicht in Schleife.

CSS ist der Teil einer Webseite, der das Aussehen festlegt — Farben, Abstände, Bewegung. Und prefers-reduced-motion ist das Codewort für die Systemeinstellung „Bewegung reduzieren", die es in Windows und macOS gibt.

Ergänze deine Bauanweisung um diesen Block. Bitte dabei nur um den geänderten Teil, nicht um die ganze Seite — das spart bei kostenlosen Zugängen eine komplette Generierung:

Ergänze zurückhaltende Bewegung: - Abschnitte blenden sanft ein, sobald sie beim Scrollen sichtbar werden (IntersectionObserver, etwa 400 Millisekunden, leichte Verschiebung nach oben). - Kaufknopf und Verweise bekommen einen weichen Übergang beim Darüberfahren. - Überschrift und erster Absatz haben einen einmaligen Auftakt beim Laden. Pflicht: - Alles über CSS-Übergänge oder kurze Animationen, nichts läuft in Schleife. - Nichts blinkt, nichts springt, nichts bewegt sich von allein länger als eine halbe Sekunde. - Bei prefers-reduced-motion: reduce werden ALLE Animationen abgeschaltet — und die Inhalte sind dann sofort sichtbar, nicht unsichtbar.
🎯 Warum die letzte Zeile die wichtigste ist
Manche Menschen bekommen von bewegten Oberflächen Kopfschmerzen oder Übelkeit — deshalb gibt es in jedem Betriebssystem die Einstellung „Bewegung reduzieren". Eine gute Seite respektiert sie.

Unser Vorbild macht das gründlich: Die Wendekreis-Seite behandelt diese Einstellung an mehr als einem Dutzend Stellen und ersetzt ein bewegtes Element sogar durch ein Standbild mit dem Hinweis „Bewegung aus". In Etappe 6 prüfst du, ob deine Seite das auch schafft.
✓
Danach hat deine Seite Bewegung, die führt statt ablenkt — und sie funktioniert auch für Menschen, die keine Bewegung vertragen.
5
Etappe 5 · nachzählen

Ist dein Text noch da?

⏱ 8 Min

Das ist die eigentliche Aufgabe dieses Blattes. Du hast der KI geprüfte, sorgfältig formulierte Inhalte gegeben. Jetzt vergleichst du Zeile für Zeile mit deiner Produktbeschreibung.

PrüfpunktWorauf du achtest
Die GrenzenStehen alle drei Einschränkungen noch da — vollständig, oder abgeschwächt? Aus „läuft nicht jedes Spiel ohne Einstellungen" wird schnell „läuft mit den meisten Spielen".
Neue ZahlenSteht irgendwo eine technische Angabe, die du nicht geliefert hast? Besonders diese fünf, die Valve nirgends veröffentlicht: Helligkeit in nits · Arbeitsspeicher · Kernzahl · VRR (variable Bildwiederholrate) · Grafikeinheit (etwa „RDNA 2").
ErfundenesKundenstimmen, Sterne, „Bestseller", Rabatte, Countdown, „nur noch 3 verfügbar".
Der PreisSteht das Datum dabei? Oder nur die Zahl?
WerbespracheSind Wörter zurückgekommen, die du in der Produktbeschreibung gestrichen hattest?
🎯 Die Erwartung
Wahrscheinlich ist mindestens einer dieser Punkte verletzt — selbst mit den Schutzregeln aus Etappe 2. Das ist kein Versagen deiner Anweisung, sondern der Normalfall: Das Werkzeug ist auf übliche Produktseiten trainiert, und übliche Produktseiten sind Werbung.

Genau deshalb kann keine Produktseite ungeprüft online gehen. Nicht wegen der Gestaltung — wegen der Inhalte.

Repariere, was du findest. Am schnellsten geht das direkt in der Datei: Öffne sie im Editor, such die Stelle, ändere sie, speichere und lade die Seite im Browser neu. Eine zweite Vollgenerierung brauchst du dafür nicht.
✓
Danach weißt du, was beim Bauen mit den Inhalten passiert — und warum die Freigabe durch einen Menschen keine Formalie ist.
6
Etappe 6 · prüfen

Handy, Kontrast, Tastatur — und Bewegung aus

⏱ 8 Min

Vier Prüfungen, die jede Seite bestehen muss. Alle gehen ohne Werkzeug, direkt im Browser.

1
Handy: Drück F12, dann Strg + Umschalt + M (Mac: Cmd + Alt + M) — der Browser zeigt die Seite jetzt in Handybreite. Stell 390 Pixel ein. Bleibt alles lesbar, oder muss man seitlich scrollen? Seitliches Scrollen ist ein Fehler. Ohne F12 geht es notdürftig auch, indem du das Fenster so schmal wie möglich ziehst.
2
Kontrast: Kneif die Augen zusammen — was verschwindet, ist zu blass. Dann nachmessen: Farbwerte in webaim.org/resources/contrastchecker eingeben. Unter 4,5:1 ist zu wenig für normalen Text. Der Prüfer ist kostenlos und braucht kein Konto.
3
Tastatur: Klick oben in die Seite und drück wiederholt die Tabulatortaste. Springt der Rahmen sichtbar von Element zu Element? Kommst du zum Kaufknopf?
4
Bewegung aus: Stell in den Systemeinstellungen „Bewegung reduzieren" ein — Windows unter Einstellungen → Barrierefreiheit → Visuelle Effekte → Animationseffekte aus · Mac unter Systemeinstellungen → Bedienungshilfen → Anzeige → Bewegung reduzieren. Dann die Seite neu laden. Ist alles noch da und lesbar?
⚠️ Der häufigste Motion-Fehler
Inhalte, die per Einblende-Effekt erscheinen, sind vorher meist unsichtbar gesetzt. Läuft die Animation nicht — weil „Bewegung reduzieren" aktiv ist —, bleiben sie unsichtbar. Die halbe Seite ist dann leer, und niemand merkt es, weil Entwickler diese Einstellung selten aktiviert haben.

Prüf das ernsthaft. Wenn Text fehlt, muss die Anweisung lauten: bei reduzierter Bewegung sofort sichtbar, nicht nur „ohne Animation".

Ausführlicher steht das an zwei Stellen: Kontrast und Alt-Texte im Barrierefreiheits-Check, Mobilansicht, Tastaturbedienung und reduzierte Bewegung in Die Sprache guter KI-Websites.

💡 Warum das Geld kostet, wenn man es lässt
Ein großer Teil der Besucher kommt vom Handy. Eine Seite, auf der man seitlich scrollen muss, verliert sie — bevor sie den Preis gesehen haben.

Und: Bei diesem Kursmaterial ist genau dieser Fehler passiert. Im Modul über Barrierefreiheit stand Text unlesbar hell auf hell, wochenlang, bis jemand es gemeldet hat. Solche Fehler sieht man nicht, wenn man nur schaut, ob es „gut aussieht".
✓
Danach ist deine Seite auf dem Handy benutzbar und für Menschen lesbar, die nicht perfekt sehen oder keine Maus benutzen.
7
Etappe 7 · einordnen

Was fehlt bis zum echten Shop?

⏱ 6 Min

Deine Seite sieht aus wie ein Shop. Sie ist keiner. Sammle, was fehlen würde, wenn wir damit morgen verkaufen wollten.

Zwei Sorten: Was rechtlich vorgeschrieben ist — und was technisch fehlt, damit überhaupt eine Bestellung ankommt.

⚖️ Zum Nachdenken, nicht zum Nachschlagen
Was passiert eigentlich, wenn jemand auf deinen Kaufknopf drückt? Wo geht die Bestellung hin? Wer bekommt das Geld? Was hat der Kunde in diesem Moment rechtlich zugestimmt?

Diese Fragen sind der Grund, warum Phase 1 des Fahrplans vor Phase 2 steht — und warum wir sie trotzdem in dieser Reihenfolge machen: Man versteht besser, was fehlt, wenn man einmal gesehen hat, wie leicht die Hülle gebaut ist.

Zum Schluss die ehrliche Frage: Wie lange hat dein Bau gedauert — und wie lange würde wohl das dauern, was jetzt noch fehlt? Wenn die Antwort weit auseinandergeht: Das ist die wichtigste Erkenntnis dieses Blattes.

✓
Fertig. Du hast eine Verkaufsseite gebaut, geprüft — und weißt, was zwischen ihr und einem Geschäft liegt.
✓
Zum Schluss

Abschicken oder als PDF behalten

Trag deinen Namen ein und schick die sieben Etappen ab. Bring deine Seite zum nächsten Termin mit — wir sehen uns die Ergebnisse gemeinsam an. Wer lieber offline arbeitet, nimmt den PDF-Knopf ganz unten.

🔒 Datenschutzhinweis

Verantwortlicher: Daniel Wagmann · danielwagmann@amzmanager.de

Zweck: Auswertung des Lernfortschritts im Rahmen des KI-Kurses.

Erhobene Daten: Name, optionale Firmenzugehörigkeit, deine Antworten, Datum.

Weitergabe: Ausschließlich an den Kursleiter. Technische Übermittlung über Web3Forms. Keine Weitergabe an Dritte.

Speicherung: Keine dauerhafte Speicherung auf dem Server. Keine Cookies.

Deine gebaute Seite bleibt bei dir. Sie wird nicht übermittelt und nicht veröffentlicht — sie liegt als Datei auf deinem Rechner.

Bitte keine echten Kunden-, Bestell- oder Zugangsdaten eintragen. Das gilt auch für die Texte, die du in ein KI-Werkzeug eingibst.

♻️ Worauf dieses Blatt aufbaut und wo es im Fahrplan steht
Etappebaut auf
1 und 2 · InhaltDie Produktbeschreibung — ohne sie fehlt der Text für die Seite
3 · bauenMeine erste Website mit KI · Website bauen mit Claude Code — dort über Lovable beziehungsweise Claude Code und Netlify; der Weg über Editor und Datei steht nur hier
4 · belebenVon der KI-Website zum Web-Erlebnis — dort stehen Dauer, Endzustand und Abnahmekriterium je Bewegung
5 · nachzählenDie Sprache der Spiele-Hardware — die Angaben, die Valve nicht veröffentlicht
6 · prüfenBarrierefreiheits-Check · Die Sprache guter KI-Websites
7 · einordnenPhase 1 des Fahrplans — Impressum, Widerruf, Verpackungs- und Elektrogesetz. Der EU AI Act gehört ebenfalls dorthin, betrifft aber andere Pflichten

📍 Phase 2 — Der Auftritt

Im Fahrplan ist das die Phase, in der zum ersten Mal etwas Sichtbares entsteht. Sie kommt nach der Produktentscheidung (Phase 0) und dem rechtlichen Rahmen (Phase 1) — hier wird sie vorgezogen, weil man leichter versteht, was rechtlich fehlt, wenn man die Hülle einmal gebaut hat.

Was danach kommt: In Phase 4 bekommt die Seite eine Wissensbasis, die die häufigste Kundenfrage beantwortet — „Läuft mein Spiel darauf?". Und in Phase 6 wird gemessen, ob überhaupt jemand auf den Kaufknopf drückt.

Lieber offline arbeiten? Speichere dieses Arbeitsblatt mit deinen Antworten als PDF.
Klicke auf den Button und wähle „Als PDF speichern".

Kein Login · Keine Cookies · Keine Weitergabe an Dritte
danielwagmann@amzmanager.de