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 an outer navigation rail and **three primary vertical panels**, leaning firmly into the structural ergonomics of Image 1 while incorporating the compiler philosophy: --- ### Outer Navigation Rail (Far Left) * A slender vertical utility sidebar featuring a brand glyph at the top, followed by workspace tool icons (`Compiler`, `Projects`, `Presets`, `Style Guides`, `Assets`, `History`), and utility toggles (`Settings`, `Help`, user profile avatar) at the bottom. --- ### 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) * **Header Bar:** Includes project configurations (`Project: Untitled Project`, `Model: VPC 2.1 Pro`, `Style Guide: Cinematic 2024`) 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: 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 accent) *(and continuing through the full 7-stage architectural depth)* * **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* or *Lighting & Atmosphere*). * **Footer Controls:** A tactile **Creative Freedom** slider ranging from *Precision* to *Creativity*, alongside an **AVOID (Optional)** negative constraint chip bar (`Low quality`, `Blurry`, `Text`, `Watermark`). --- ### Panel 3 — Dual-Mode Inspector & Compiled Output (Right) * **Tabbed Header:** A segmented control toggling between **COMPILED PROMPT** and **PROPERTIES / INSPECTOR** (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, 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 massive industrial **GENERATE IMAGE** action button rendered in bright safety orange with hazard stripes, a sparkle icon, and an integrated token counter (`126 / 2048 tokens`). --- ### 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.