日常
ミュージシャンのポートフォリオウェブサイトデザイン
Musician Portfolio Website Design
- テスト済みモデル:
- GPT-4o
- 有効性スコア:
- 90/100
- プロンプトアーカイブ
日本語バージョン
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.値を入れて実行
このプロンプトには5か所の空欄があります。入力すると完成版を組み立てます。
残り5か所
完成したプロンプト
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.- ChatGPTで開く （新しいタブで開きます）
- Claudeで開く （新しいタブで開きます）
- Geminiで開く （新しいタブで開きます）
Geminiはリンクでプロンプトを渡せないため、先にコピーしてください。
- Perplexityで開く （新しいタブで開きます）
新しいタブが開き、プロンプトが入力済みの状態になります。ログインが必要な場合があります。
このプロンプトの使い方
- 角かっこで囲まれた部分を自分の内容に置き換えてから送信してください。
- モデルによって結果は変わります。期待した出力でなければ、別のモデルを試すか、具体例を1つ追加してください。
- プロンプトは1つのメッセージにまとめて送ってください。分割すると指示が弱まります。