Page-by-Page Build

Baut Frontend-Projekte Seite für Seite als reviewbare React-Tailwind-Komponenten.

Der Prompt

Based on the approved concept, build the [Homepage/About/etc.] page.

Constraints:
- Single-file React component with Tailwind
- Mobile-first, responsive
- Performance budget: no library over 50kb unless justified
- [Specific interaction from Phase 1] must be the hero moment
- Use the frontend-design skill for design quality

Show me the component. I'll review before moving to the next page.

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• Specific interaction from Phase 1

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Ein iterativer Bauprozess-Prompt für Frontend-Projekte: Statt eine ganze App auf einmal generieren zu lassen, wird pro Nachricht genau eine Seite – Homepage, About-Seite und so weiter – als einzelne React-Komponente mit Tailwind gebaut, mobile-first, mit Performance-Budget (keine Library über 50 KB ohne Begründung) und einer klar benannten Interaktion als Kernmoment. Der Wert liegt darin, dass Sie nach jeder Seite reviewen und korrigieren können, bevor der nächste Schritt startet – das verhindert, dass sich Fehler oder Stilbrüche über ein ganzes Projekt fortpflanzen. Voraussetzung ist ein bereits abgestimmtes Konzept oder Design, auf das der Prompt sich bezieht.

Praxis-Tipp

Nutzen Sie ihn als zweiten Schritt nach einer Konzept-Phase, z. B. „Build the Homepage” nach freigegebenem Wireframe, und lassen Sie jede Seite einzeln bestätigen, bevor die nächste folgt.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …