Prompts zum Kopieren

ROLLE

Du bist ein erfahrener Webdesigner und Frontend-Entwickler für lokale Gastronomie. Du baust Webseiten, die hochwertig und eigenständig wirken und nicht nach KI-Vorlage aussehen. Nutze die installierten Skills design-taste-frontend, ui-ux-pro-max und impeccable als Maßstab für Gestaltung und Prüfung. Starte aus keinem Skill einen eigenen Ablauf: kein eigenes Interview, kein Konzept-Würfeln, keine Entscheidungsseite, keine PRODUCT.md oder DESIGN.md, keine Prüfagenten. Von impeccable nutzt du nur die Regeln in craft-floor.md und den Detektor. Den Befehl "impeccable context" startest du nicht. Rückfragen und Prüfschleife stehen hier im Auftrag. Bei einem Widerspruch zwischen einem Skill und diesem Auftrag gilt dieser Auftrag.

KONTEXT

Wir bauen die Webseite für "Morgenrot Kaffeebar", eine kleine Specialty-Coffee-Bar mit eigener Rösterei in einer Altstadt. Das Café ist fiktiv und ein Demo-Projekt.

- Zielgruppe: Menschen zwischen 25 und 45, die guten Kaffee schätzen, gern frühstücken und einen ruhigen Ort suchen.

- Stimmung: schwarz und warm, Kupfer als einzige Akzentfarbe, große klare Schrift, ein starkes Bild im Startbereich. Eine normale, hochwertige Webseite, keine Spielerei.

- Visuelle Referenz 1: https://21st.dev/@youcefbnm/components/hero-gallery-scroll-animation

Übernimm die Idee und baue sie ohne Framework nach: Beim Start steht in der Mitte ein großes Bild, darum herum kleinere Fotos in einem Raster. Beim Scrollen bleibt der Bereich stehen, das Mittelbild wächst bis auf die volle Bildschirmgröße, die kleinen Fotos ziehen nach außen und blenden aus, die Überschrift verschwindet.

- Visuelle Referenz 2: siehe referenz.png im Projektordner

Übernimm davon: große Überschrift, viel Luft, kleine ruhige Begleittexte. Nicht übernehmen: Farben und Schnörkel. Die Seite bleibt schwarz, ein heller Modus ist nicht nötig.

AUFGABE

Baue in diesem Ordner eine einseitige Webseite mit diesen Abschnitten. Die Hauptdatei heißt index.html und liegt direkt im Projektordner:

1. Hero: Name, ein kurzer Satz ("Frisch geröstet. Jeden Morgen."), Button "Tisch reservieren", der zum Abschnitt Öffnungszeiten und Anfahrt führt, ein starkes Bild mit Scroll-Animation wie in Referenz 1.

2. Über uns: kurze Geschichte der Rösterei in drei bis vier Sätzen.

3. Karte: Kaffee, Frühstück und Kuchen mit Preisen in Euro, übersichtlich in drei Gruppen.

4. Öffnungszeiten und Anfahrt: Zeiten als Tabelle, die Adresse "Musterstraße 12, 12345 Musterstadt" (genau so geschrieben) und direkt darüber der Satz, wie man reserviert, mit einem Telefon-Platzhalter.

5. Footer: Instagram-Link als Platzhalter "#", Impressum-Link als Platzhalter "#" und der Hinweis "Demo-Projekt, fiktives Café".

Technik:

- Nur HTML, CSS und JavaScript. Kein Framework, kein Build-Schritt, kein npm. Die Seite muss beim Doppelklick auf index.html funktionieren.

- Fotos: Nutze ausschließlich die Fotos aus dem Ordner bilder/. Erzeuge keine Bilder, weder mit einem Bildgenerator noch als Zeichnung, und lade keine aus dem Netz. Ist ein Foto zu klein oder unscharf, lass es weg und sag es mir. Liegt im Ordner nichts, frag mich.

- Schriften: Nimm frei lizenzierte Schriften von Google Fonts und lege die Dateien lokal im Projekt ab, ohne externe Einbindung. Prüfe Umlaute, ß und Ziffern in der gewählten Schrift am echten Text.

- Die Scroll-Animation muss auch in Firefox und Safari laufen oder dort sauber ohne Animation stehen.

- Alle Texte auf Deutsch, echte Formulierungen, kein Lorem ipsum.

ERGEBNIS: FERTIG IST DIE SEITE, WENN

- alle fünf Abschnitte mit echtem Inhalt stehen,

- sie auf dem Handy (390 px breit, zusätzlich ein kleines Handy mit 360 × 640) und am Laptop (1440 px breit) sauber aussieht: nichts überlappt, nichts wird abgeschnitten, kein seitliches Scrollen,

- die Scroll-Animation flüssig läuft und bei "Bewegung reduzieren" im Betriebssystem abgeschaltet ist,

- alle Bilder laden und einen Alternativtext haben,

- der Kontrast der Texte gut lesbar ist.

RÜCKFRAGEN

Stell mir vor dem Bauen höchstens fünf Fragen ohne Fachbegriffe, nur zu dem, was du nicht selbst sinnvoll entscheiden kannst, und warte auf meine Antworten. Geschichte, Karte, Preise und Zeiten darfst du für dieses Demo plausibel erfinden.

PRÜFSCHLEIFE

Nutze zum Prüfen den eingebauten Browser von Claude Code. Fehlt er oder kann er etwas nicht, zum Beispiel "Bewegung reduzieren", darfst du ein Prüfwerkzeug außerhalb des Projektordners installieren, das "kein npm" gilt nur für die Seite selbst. Kannst du gar nicht prüfen, sag es mir, statt es zu behaupten. Bevor du mir Bescheid gibst: Öffne die Seite im Browser, lass alle Bilder laden, mache je Breite (390 px und 1440 px) Screenshots vom Startbild, mitten in der Scroll-Animation und vom Seitenende. Prüfe die Seite auch mit "Bewegung reduzieren", beim Öffnen per Doppelklick und auf Fehler in der Browser-Konsole. Prüfe alles gegen jeden Punkt unter ERGEBNIS. Findest du einen Fehler, behebe ihn und prüfe erneut. Melde dich erst, wenn alle Punkte erfüllt sind, und schreib mir kurz, was du geprüft hast.

Nutze den Skill scroll-craft und gib dieser Seite einen einzigen großen Effekt im Startbereich. Alles darunter bleibt eine normale, saubere Webseite. Inhalte und Preise bleiben gleich, erfinde keine neuen Aussagen.

- Stell mir zuerst deine Fragen und warte auf meine Antworten.

- Der Effekt läuft mit einem einzigen starken Objekt, groß und im Studiolicht, davor große klare Schrift. Nimm dafür meine Bilder und Videos aus dem Ordner bilder. Erzeuge keine Bilder und keine Videos, ohne vorher die Kosten zu nennen und mich zu fragen.

- Keine eingeblendeten Sätze zwischen den Abschnitten.

Prüfe danach die Seite Scrollposition für Scrollposition am Handy (390 px) und am Laptop (1440 px), auch mit „Bewegung reduzieren“, und melde dich erst, wenn nichts überlappt und alle Bilder laden.