Skip to main content
Prompts Musician Portfolio Website with Booking and Animations

model coding template risk: medium

Musician Portfolio Website with Booking and Animations

Instructs the model to act as a web development expert and create a responsive musician portfolio website including a hero section with WebGL animations, event calendar using FullC…

  • External action: high

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.

INPUTS

layoutFramework

Layout framework to use, defaults to CSS Grid

e.g. CSS Grid

calendarLibrary

Calendar library to implement event calendar, defaults to FullCalendar

e.g. FullCalendar

OPTIONAL CONTEXT

  • Examples of portfolios

ROLES & RULES

Role assignments

  • Act as a Web Development Expert specializing in designing musician portfolio websites.
  1. Use chain-of-thought reasoning to ensure each component integrates seamlessly.
  2. Follow modern design principles to enhance user experience.
  3. Ensure cross-browser compatibility and mobile responsiveness.
  4. Document each step in the development process for clarity.

EXPECTED OUTPUT

Format
markdown
Schema
github_repository · Website code in a GitHub repository, README with setup instructions
Constraints
  • Deliver website code simulating a GitHub repository
  • Include README with setup instructions
  • Document each development step

SUCCESS CRITERIA

  • Create booking capabilities
  • Include event calendar
  • Add hero section with WebGL animations
  • Include interactive components using Framer Motion
  • Use CSS Grid for responsive layout
  • Integrate components seamlessly
  • Enhance with Framer Motion animations

FAILURE MODES

  • May not deliver code in a GitHub repository format
  • Could ignore specified libraries like FullCalendar or Framer Motion
  • Might skip chain-of-thought reasoning or step documentation
  • May produce non-responsive or non-compatible design
  • Could overlook user authentication in booking system

EXAMPLES

Includes three examples: Minimalist Musician Portfolio, Interactive Event Calendar, and Advanced Booking System.

CAVEATS

Missing context
  • Musician-specific details (name, bio, photo, sample events data).
  • Base frontend framework (e.g., React, vanilla JS).
  • Backend integration for booking (e.g., API, database).
  • Design preferences (colors, fonts, style).
Ambiguities
  • Unclear how an AI can 'deliver the website code in a GitHub repository'.
  • Examples links are placeholders or broken (#).
  • Scope of 'user authentication' in booking system is vague (method, backend).

QUALITY

OVERALL
0.80
CLARITY
0.85
SPECIFICITY
0.75
REUSABILITY
0.85
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add placeholders for musician data like ${musicianName}, ${bio}, ${eventsJson}.
  • Change output to 'Provide complete, self-contained code files (HTML/CSS/JS bundle or React app structure)' instead of GitHub repo.
  • Specify a default framework e.g., 'Use ${framework:Next.js}' and provide alternatives.
  • Replace example links with descriptions or embedded code snippets.
  • Clarify authentication e.g., 'Use Firebase Auth for booking form'.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL