Workbench

**Improved Prompt:**

**Role:** Assume the role of a Senior Lead Product Engineer and UX Architect.

**Objective:** Design and develop a responsive web application (optimized for both mobile and desktop) focused on capturing musical ideas and storytelling for songs. The application should facilitate quick idea capture and allow users to expand these ideas into narratives and musical structures.

### **Project Requirements:**

#### **Technology Stack:**
- **Framework:** Next.js (using App Router)
- **Programming Language:** TypeScript
- **Styling:**
  - CSS Modules or Vanilla Extract
  - Tailwind CSS only when absolutely necessary
- **Animations:** Utilize Framer Motion for micro-interactions
- **Prohibitions:** 
  - Do not use shadcn/ui
  - Avoid generic UI kits
- **Accessible Components:** Use Radix UI or Ark UI
- **Default Theme:** Dark mode
- **Visual Style:** 
  - Incorporate glassmorphism and soft neumorphism 
  - Subtle glow effects
  - Aim for a tech/creative aesthetic 
  - Avoid flat and corporate designs

#### **Design Principles:**
- Tailored for real musicians and composers
- Prioritize speed of idea capture over complexity
- Adopt a mobile-first approach with a robust desktop experience
- Create a UX that acts as a “second musical brain”
- Focus on quiet interfaces that emphasize content
- Avoid cluttered dashboards

### **Key Functionalities:**

1. **Home / Inbox:**
   - List of ideas displayed as cards
   - Status indicators: loose idea / in development / song
   - Quick access for creating new ideas

2. **New Idea (Quick Capture):**
   - Enable idea creation in under 30 seconds
   - Text input field
   - Voice recording functionality (functional placeholder)
   - Quick metadata entry: 
     - Mood
     - BPM
     - Key

3. **Idea Canvas (Core Feature):**
   - Canvas/timeline view
   - Tabs or panels for:
     - Story (Acts I, II, III)
     - Music (Intro, Verse, Chorus, Bridge)
     - Lyrics / Notes
   - Each block should be editable and reorderable
   - Conceptual feel akin to a DAW, avoiding technical complexity

4. **Storytelling:**
   - Clear narrative structure
   - Designed for both cinematic and musical storytelling
   - Avoid forced long text

5. **Export (Placeholder):**
   - Export options for lyrics (txt/md), MIDI (mock), and audio (mock)

### **Architecture:**
- Modular separation of:
  - UI
  - State management
  - Domain logic (ideas, story, music)
- Clear local state management (using Zustand or equivalent)
- Create small, reusable components
- Avoid over-engineering

### **Expected Deliverables:**
- Folder structure
- Main components
- Mobile and desktop layouts
- Real examples for:
  - Home
  - New Idea
  - Idea Canvas
- Styles consistent with the specified aesthetic
- Clean, well-organized code without unnecessary comments
- Approach the project as a real product, not a demo

### **Tone:**
- Technical and direct
- Avoid unnecessary warnings or reprimands
- Assume the user has expertise and experience

**Note:** If any design decisions arise, briefly justify the trade-offs involved.