prompts.txt

Of course. Here is a detailed and structured prompt designed to guide an AI in generating the complex front-end for your "ChordCraft" application.
This prompt is structured to be fed into a UI generation platform like Vercel's v0. It describes the application's layout, components, features, and aesthetic in detail to maximize the quality of the generated code.
AI Prompt for ChordCraft UI
Create a sophisticated, modern, and highly interactive web application interface for ChordCraft, an AI-powered music production studio that translates music into editable code. The application should be built as a single-page application using React and styled with Tailwind CSS. All UI components should be based on shadcn/ui, ensuring a cohesive and professional aesthetic.
The overall theme is a dark, futuristic interface with a neon-gradient color scheme (vibrant cyan, magenta, and electric purple) for accents, interactive elements, highlights, and data visualizations.
The application layout is a three-panel design:
 * Left Panel (Collapsible): Project Management & Asset Library
 * Center Panel: Main Workspace (dynamic, toggles between Studio and Code Editor)
 * Right Panel (Collapsible): AI Companion & Inspector
## 1. Header & Main Navigation
 * Sticky Header: Contains the application logo (a stylized 'CC' with a neon glow), the current project title (editable on click), and a user profile section.
 * Project Actions: A group of buttons on the right: Save Project (icon: Save), Export (Download), and a primary Share button.
 * User Profile: An Avatar component with a dropdown Menubar for "Settings," "Billing," and "Logout."
## 2. Left Panel: Project Manager
 * A resizable, collapsible sidebar using ResizablePanel.
 * Project Browser: Use an Accordion component with three sections:
   * "My Projects": A list of user projects. Each item shows the project name and last modified date. Clicking a project loads it into the main workspace. Includes a + New Project button.
   * "Audio Assets": A file browser for uploaded audio files (WAV, MP3). Each file has a play icon button next to it for previewing.
   * "AI Tools": A list of available AI models, e.g., "Stem Separator," "Harmonic Analyzer," "Rhythm Generator."
 * File Upload: A prominent Dropzone area at the bottom of the panel for dragging and dropping audio files.
## 3. Center Panel: The Workspace
This is the core of the application, using a Tabs component to switch between two primary views: "Studio" and "Code Editor."
### Studio View (DAW Interface)
 * Transport Controls: A fixed control bar at the top of this panel with Buttons for: Play, Pause, Stop, Record, Toggle Loop, and a display for the current playhead time.
 * Timeline & Tracks:
   * A multi-track horizontal timeline. The top ruler should show time markers (e.g., 0:00, 0:05, 0:10).
   * Each track is a horizontal container with:
     * Track Header (Left): Track name, a Mute button, a Solo button, a volume Slider, and a pan Slider.
     * Track Lane (Right): A visual representation of the audio waveform. This should be a placeholder component that looks like a colorful, detailed waveform using the neon gradient.
     * Users can drag audio clips onto these lanes from the Left Panel.
 * Action Button: A large, vibrant, gradient-background Button with an icon (Wand2) that says "Analyze & Convert to Code."
### Code Editor View
 * Monaco Editor Integration: The entire panel should be an instance of the Monaco code editor, pre-configured with a dark theme that matches the application's aesthetic.
 * Generated Code Display: This view will display the AI-generated code representation of the music from the Studio view. The code should have syntax highlighting.
 * Editor Toolbar: A toolbar above the editor with three key actions:
   * Render Audio: A primary Button with a Play icon. This converts the current code back into an audio preview.
   * Analyze Code: A secondary Button that sends the code to the AI Companion for analysis.
   * Format: A Button to auto-format the code.
## 4. Right Panel: AI Companion & Inspector
 * A resizable, collapsible sidebar that provides context-aware information.
 * Uses a Tabs component to switch between "AI Companion" and "Inspector."
### AI Companion View
 * This panel is for AI-driven feedback and analysis.
 * Display analysis results in Card components. For example:
   * A Card titled "Harmonic Analysis" displaying the song's Key, BPM, and a list of detected Chords using Badge components (e.g., Cm7, G#, A#).
   * A Card titled "AI Suggestions" with actionable suggestions like "Try resolving this F#dim chord to a Gm" or "The rhythm in measure 4 is off-beat."
### Inspector View
 * This panel displays properties for the currently selected item (e.g., an audio clip, a track, a line of code).
 * When an audio clip is selected in the Studio: Show its filename, duration, sample rate, and controls for gain (Slider) and pitch shifting (Slider).
 * When a track is selected: Show advanced options like assigning it to a mixer channel or adding placeholder effects (e.g., Reverb, EQ).