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 Akzidenz-Grotesque style typography. The interface should feel premium, spacious, tactile, and highly engineered. The layout consists of **three primary vertical panels**, leaning firmly into the structural ergonomics of Image 1 while incorporating the compiler philosophy: --- ### Panel 1 — Asset Drawer & Creative Presets (Left Main) * **Header:** Title *"ASSET DRAWER & PRESETS"* with subtext and view-mode toggles. * **Search & Filters:** A search input (`Search presets...`) and filter pills (`All`, `Character`, `Environment`, `Style`, `Mood`). * **Preset Grid:** A clean, two-column grid of curated visual preset cards (e.g., *Cinematic Sci-Fi*, *Portrait Master*, *Architectural*, *Fantasy Realm*, *Product Studio*, *Urban Night*, *Nature Documentary*, *Vintage Film*). Each card contains a crisp thumbnail, category tag, title, metadata badge, rating, and quick action menu. * **Bottom Action:** A prominent button reading `+ Create Custom Preset — Build your own intent from scratch`. --- ### Panel 2 — Creative Reasoning Pipeline (Center largest of the 3 panels) * **Header Bar:** Includes project configurations (`Project: Untitled Project`, `Model: GPT Image 2`, `Style Guide: Cinematic 2026`) and an **Auto-Enhance** master toggle switch. * **Workspace Area:** Labeled *"CREATIVE REASONING PIPELINE"* with subtext *"Live Semantic Projection Engine"*. * **Vertical Semantic Pipeline:** Seven distinct, numbered stages connected by a vertical glowing node flow line: The stages are grouped beneath subtle section headers in 3 sections: * **Creative Direction** (Top Header above the two elements (1. & 2.) below) 1. **Creative Direction & Scene** (Signal Green accent) 2. **Subject** (Purple haze accent - selection active) --- * **Cinematography** (Top Header above the two elements (3. & 4.) below) 3. **Cinematography / Camera & Composition** (Cobalt Blue accent) 4. **Lighting & Atmosphere** (Brass / Yellow accent) --- * **Style** (Top Header above the two elements (5. & 6.) below) 5. **Visual Style & Rendering** (Safety Orange accent) 6. **Final Look** (Signal Green accent) * **Stage Card Design:** Each stage card features an inline visual preview thumbnail, semantic tags/chips, interactive suggestion pills (e.g., *Epic scale*, *Sense of discovery*), a recompile/refresh icon button, a **Relationship Intelligence** insight block, and a glowing selection border for the currently active node (e.g., *Subject*). * **Footer Controls:** A tactile **Creative Freedom** slider ranging from *Precision* to *Creativity*. --- ### Panel 3 — Dual-Mode Inspector & Compiled Output (Right) * **Tabbed Header:** A segmented control toggling between **PROPERTIES / INSPECTOR** and **COMPILED PROMPT** (defaulting to Properties / 3D Inspector like Image 1, with seamless access to the compiled output). * **3D Viewport & Inspector (Top View):** * At the top, a clean viewport housing an interactive wireframe 3D mannequin in a neutral standing pose, complete with viewport axis gizmos and inspection mode toggles. * Below the viewport, accordion style collapsible property sections with fine-tuned industrial dropdowns and sliders for **Identity** (Gender, Age, Height, Build, Body Type), **Pose & Expression**, **Composition**, and **Appearance**. * **Status & Metrics Footer:** * A compact status readout displaying **Semantic Quality: 97%**, *No relationship conflicts detected*, and *2 AI recommendations available*. * A large **GENERATE IMAGE** action button rendered in Cobalt Blue with minimal subtle edge notches. --- ### Visual Style & Typography * Semi-dark matte obsidian color palette similar to #474C59 with precision glowing border states. * Distinct slightly more saturated 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. Avoid: - left side toolbar - headers to the left of pipeline nodes and/or numbers