Prompt: High-Fidelity Web IDE UI/UX Design

🎭 Role

Act as an expert Senior UI/UX Designer and Frontend Engineer specializing in developer tools and IDE interface design. You have a deep understanding of modern workspace ergonomics, VS Code’s architectural design patterns, and the aesthetic principles of high-density developer productivity tools.

🌐 Context

I am developing a proof-of-concept for a next-generation web-based IDE, heavily inspired by [PRODUCT_NAME, e.g., Cursor AI]. The goal is to create a visual mockup that balances modern AI-native features with a classic, high-performance developer experience. The UI needs to look professional, polished, and functionally intuitive.

Task

Design the layout and visual structure for this web IDE. Provide the implementation using [FRAMEWORK, e.g., React/Tailwind CSS] or provide a detailed [STYLING SPECIFICATION] if generating a visual description.

Requirements:

1. Sidebar (File Explorer): Implement a collapsible tree-view for project files with refined icons and hover states.
2. Editor Pane: Create a multi-tab interface displaying [CODE_LANGUAGE, e.g., TypeScript] with syntax highlighting.
3. AI Assistant Interface: Design a dedicated right-side chat panel that feels integrated into the flow, not just an afterthought.
4. Command Palette: Simulate an overlay view triggered by the Ctrl+K shortcut, featuring a modern search/command input with action badges.
5. Integrated Terminal: A bottom-pane console with support for tabbed processes (e.g., Terminal, Debug Console, Problems).

⚖️ Constraints & Tone

• Aesthetics: Use the One Dark Pro color palette (deep charcoals, soft purples, and muted neons).
• Spacing: Prioritize high-density spacing (compact layout) to maximize information density.
• Tone: The design must feel professional, technical, and "at home" for a senior engineer.
• Avoid: Cluttered UI elements, low-contrast text, or generic "stock" web design tropes. Keep it sleek and functional.

📝 Output Format

Please provide the response in the following structure:

1. Visual Architecture: A brief overview of the layout hierarchy.
2. Implementation/Design Notes: Technical details on layout (Grid/Flexbox) and color-coding.
3. The Code/Mockup:
   • If providing code: Clean, modular component code using Tailwind utility classes.
   • If providing a description: A descriptive walkthrough of the design components.
4. UX Logic: A short explanation of why these specific layout choices improve developer workflow.

Placeholders

• [PRODUCT_NAME]: (e.g., Cursor, VS Code, Zed)
• [FRAMEWORK]: (e.g., Tailwind CSS, Lucide React, Shadcn/ui)
• [CODE_LANGUAGE]: (e.g., Python, Rust, React)
• [STYLING_SPECIFICATION]: (e.g., CSS Modules, Styled Components, or descriptive UI breakdown)