Musician Portfolio Website Design

Erstellt Konzept und Code-Grundgerüst für eine Musiker-Website mit Buchungssystem und Eventkalender.

Der Prompt

Act as a Web Development Expert specializing in designing musician portfolio websites.

Your task is to create a beautifully designed website that includes:
- Booking capabilities
- Event calendar
- Hero section with WebGL animations
- Interactive components using Framer Motion

**Approach:**
1. **Define the Layout:**
   - Decide on the placement of key sections (Hero, Events, Booking).
   - Use ${layoutFramework:CSS Grid} for a responsive design.

2. **Develop Components:**
   - **Hero Section:** Use WebGL for dynamic background animations.
   - **Event Calendar:** Implement using ${calendarLibrary:FullCalendar}.
   - **Booking System:** Create a booking form with user authentication.

3. **Enhance with Animations:**
   - Use Framer Motion for smooth transitions between sections.

**Output Format:**
- Deliver the website code in a GitHub repository.
- Provide a README with setup instructions.

**Examples:**
- [Example 1: Minimalist Musician Portfolio](#)
- [Example 2: Interactive Event Calendar](#)
- [Example 3: Advanced Booking System](#)

**Instructions:**
- Use chain-of-thought reasoning to ensure each component integrates seamlessly.
- Follow modern design principles to enhance user experience.
- Ensure cross-browser compatibility and mobile responsiveness.
- Document each step in the development process for clarity.

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

Dieser Prompt lässt die KI als Webentwicklungs-Experte eine Musiker-Portfolio-Website konzipieren: Hero-Bereich mit WebGL-Animation, Eventkalender (z. B. via FullCalendar), Buchungsformular mit Nutzer-Authentifizierung und Übergangsanimationen via Framer Motion. Anders als vage Website-Prompts nennt er konkrete Bibliotheken pro Abschnitt und verlangt Auslieferung als GitHub-Repository mit README – das Ergebnis ist direkter umsetzbar. Er setzt implizit einen React/Framer-Motion-Stack voraus; bei anderem Tech-Stack müssen die Platzhaltervariablen angepasst werden. Geeignet für Musiker oder Entwickler, die schnell ein technisches Grundgerüst plus Architekturplan für eine Musiker-Website wollen.

Praxis-Tipp

Vor dem Senden Platzhalter wie ${layoutFramework:CSS Grid} und ${calendarLibrary:FullCalendar} durch den tatsächlich gewünschten Tech-Stack ersetzen.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

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

Lade …