Use the reference image only as inspiration for overall composition and quality....

Use the reference image only as inspiration for overall composition and quality. Do not copy the layout. Design a premium desktop SaaS application called **Visual Prompt Compiler**, shown as a polished UI mockup in dark mode. The application should resemble high-end creative software inspired by Figma, DaVinci Resolve, Unreal Engine, Adobe Substance, and tactile industrial hardware design. Use deep matte obsidian backgrounds, oxidized slate panels, subtle glass accents, precision-milled borders, exposed alignment grids, restrained shadows, generous spacing, and clean Grotesk typography. The interface should feel premium, spacious, tactile, and highly engineered. The layout consists of three primary vertical panels embodying the philosophy: **"Don't edit prompts. Edit intent."** --- ### Left Panel — Asset Drawer & Presets * Display a clean two-column grid of visual preset cards representing creative intent rather than raw prompts. * Include filter categories at the top (`All`, `Character`, `Environment`, `Style`, `Mood`) and a search input. * Curated preset cards (such as *Cinematic Sci-Fi*, *Portrait Master*, *Architectural*, *Fantasy Realm*, *Product Studio*, *Urban Night*, *Nature Documentary*, *Vintage Film*) featuring clean thumbnails, metadata badges, and a custom preset creation button at the bottom. --- ### Center Panel — Creative Reasoning Pipeline * The core workspace styled as a live semantic projection engine. * At the top, include a header bar with project configuration dropdowns (`Project`, `Model`, `Style Guide`) and an **Auto-Enhance** toggle switch. * Display a vertical semantic pipeline with visually distinct stages connected by a smooth node flow indicator: 1. **Creative Direction & Scene** (Signal Green accent) 2. **Cinematography / Camera & Composition** (Cobalt Blue accent) 3. **Lighting & Atmosphere** (Brass / Yellow accent) 4. **Visual Style & Aesthetic** (Safety Orange / Red accent) * Each pipeline card features an inline thumbnail preview, structured semantic text fragments/chips, interactive suggestion pills (e.g., *Epic scale*, *Sense of discovery*, *Wild angle*, *Volumetric light*), a refresh/recompile action button, and a dedicated **Relationship Intelligence** insight block explaining semantic consequences. * At the bottom of the center panel, display the tactile **Creative Freedom** slider ranging from *Precision* to *Creativity*, alongside an **AVOID (Optional)** negative constraint token bar with removable chips (`Low quality`, `Blurry`, `Text`, `Watermark`). --- ### Right Panel — Dual-Mode Inspector & Compiled Output * At the top, feature a tabbed header toggling between **Compiled Prompt** (the generated code artifact) and **Properties / Inspector** (for deep parameter tuning). * **Compiled Prompt View:** Displays the structured, categorized output layout broken down by semantic section headers: * `# Creative Direction` * `# Camera & Composition` * `# Lighting & Atmosphere` * `# Visual Style & Aesthetic` With a top-right **Copy** button and a live interactive token cursor. * **Semantic Traceability Section:** Below the prompt, include a live mapping panel showing semantic relationship links across the pipeline (highlighting active nodes like *Lighting & Atmosphere* with confidence metrics and traceability notes). * **Bottom Status & Action Bar:** * Token counter readout (`126 / 2048` tokens) and active model badge. * A large industrial **Generate Image** button rendered in bright safety orange with a subtle sparkle/compile icon. --- ### Visual Style & Typography * Dark matte obsidian color palette with precision glowing border states. * Distinct semantic stage accent colors (**Signal Green**, **Cobalt Blue**, **Brass**, **Safety Orange**) providing clear visual hierarchy. * High-end desktop app ergonomics: compact padding, sharp corners, hardware-inspired borders, and a Dribbble-quality product showcase finish.