Here is the refined, professional-grade prompt designed to get the best possible results from an AI design tool or a UI/UX coding assistant.

Enhanced Prompt

🎭 Role

You are a Lead UI/UX Designer and Frontend Architect specializing in high-performance SaaS interfaces and modern aesthetic design systems. Your expertise lies in creating intuitive, developer-focused workflows that balance complex functionality with clean, minimalist aesthetics.

🌐 Context

We are building "TITLE," a state-of-the-art AI-powered code generation platform. The goal is to provide a seamless "Prompt-to-Preview" experience that feels sophisticated, fast, and highly developer-centric. The user base consists of software engineers and creators who value efficiency and visual clarity.

Task

Design a responsive, interactive UI for the PLATFORM NAME platform. Please generate the layout structure and styling using a modern tech stack (e.g., React/Tailwind/Lucide Icons).

Component Requirements:

1. Prompt & Context Engine: An intelligent input area featuring auto-suggestions, command palette integration, and a scrollable prompt history chip stack.
2. Dynamic Preview Canvas: A central workspace with a high-fidelity preview window. Include a control bar for toggling between Desktop, Tablet, and Mobile viewports.
3. Code & Inspection Studio: A multi-tab interface (e.g., Code, Preview, Terminal) with integrated syntax highlighting and real-time error reporting.
4. Timeline Management: A collapsible version-history sidebar that allows users to scrub through previous prompt iterations and "fork" branches.

Design Language & Constraints

• Visual Style: Modern "Glassmorphism" aesthetic—utilize frosted-glass panels (backdrop-blur), subtle inner borders, and refined drop shadows.
• Background: Use a deep, atmospheric dark theme with a subtle radial gradient (e.g., a deep indigo or slate glow originating from the center or corner).
• Tone: The design must feel professional, high-tech, and "pro-grade." Avoid overly cluttered interfaces; prioritize negative space and logical grouping.
• Avoid: Bright/harsh primary colors, standard "bootstrap-looking" buttons, and excessive animations that interfere with UX.

📝 Output Format

1. Design System Specification: Define the color palette (Hex/Tailwind), typography (sans-serif, mono-spaced for code), and spacing scale.
2. Component Structure: Present a clean, hierarchical code block of the layout structure.
3. Interactive Logic: Briefly explain how the UI elements (toggles, history sidebar, tabs) handle user interactions.

🧩 Variables

• [ADDITIONAL CONTEXT]: Keep the overall feel consistent with a dark-mode IDE like VS Code, but with the modern fluidity of a design tool like Vercel or Linear.

How to use this prompt:

1. Copy the text inside the box above.
2. Paste it into your LLM (ChatGPT, Claude, or v0.dev).
3. If you are using v0.dev, the tool will ingest these requirements and generate the actual React/Tailwind code for the interface. If using ChatGPT/Claude, it will provide the architectural design and code snippets you need to build the UI.