Official Studio Manual & Blueprint Guide

Mastering designX UI/UX Intelligence

Learn how to leverage the Intelligent EkkShunya logic engine across 150+ UI styles and 300+ product archetypes to generate complete website pages, high-density dashboards, and interactive web modules.

1. How the Intelligent EkkShunya Logic Engine Operates

Unlike standard AI generators that produce repetitive, generic layouts, designX Pro fuses a multi-domain BM25 knowledge database with neural generation.

150+ Curated UI Styles: From Modern Bento Grids and Glassmorphism to Cyberpunk HUDs, Neo-Brutalism, Swiss Typography, and visionOS Spatial Glass.
300+ Product Archetypes: Instant intelligence tuning for Kubernetes telemetry, AI agent orchestrators, crypto trading desks, clinical patient EHRs, and e-commerce marketplaces.
Dynamic Token Synthesis: Automatically generates semantic CSS variables (--color-primary, --color-accent, --card-bg), Google Fonts typography pairings, and WCAG AA contrast rules before prompting the LLM.

2. Mastering the Design Dials (1-10 Sliders)

The three interactive dials in the left configuration panel give you mathematical control over the aesthetics, animation intensity, and whitespace density:

🎨 Design Variance Dial: 1 - 10

1 - 3 (Centered / Minimal): Strict symmetry, high whitespace, centered hero titles, zero clutter.

4 - 7 (Balanced / Modern): Modular bento grids, balanced multi-column hierarchies, standard SaaS layout.

8 - 10 (Bold / Asymmetric): Experimental off-grid layouts, brutalist high-contrast card overlaps, expressive type.

⚡ Motion Intensity Dial: 1 - 10

1 - 3 (Subtle / Low): Instant micro-transitions, clean hover states, zero distraction.

4 - 7 (Standard): Smooth bezier curve elevations, card borders glow on hover, tab transitions.

8 - 10 (Complex): Staggered entrance animations, live pulsating status beacons, dynamic Chart.js animations.

📐 Visual Density Dial: 1 - 10

1 - 3 (Spacious / Open): 24px+ card padding, open breathing room, optimal for landing pages & marketing.

4 - 7 (Balanced): 16px padding, comfortable enterprise multi-card layout.

8 - 10 (Dense / Dashboard): 8px padding, compact data grids, maximum information per screen.

3. Writing Effective Details & Requirement Blueprints

For best results, specify your layout requirements using structured bullet points. Mention metrics, charts, tables, and buttons you want to see:

Example: Kubernetes Cloud Telemetry Hub

• Top strip: 4 key KPI metric cards (CPU 48%, RAM 18.4GB, Network 1.2Gbps, Latency 14ms) with live sparklines or percentage progress rings.
• Main area: Interactive Chart.js time-series line graph tracking 24h cluster traffic & compute overhead.
• Split section: Active node cluster status table with HEALTHY/STANDBY tags and a live streaming JSON logs terminal.
• Include quick action buttons: "Restart Pod", "Scale Cluster", and "Export Logs".

Example: Institutional Crypto Trading Desk

• Top header: Net portfolio asset value ($148,290.40) with +12.4% 24h PnL badge and quick deposit/withdraw buttons.
• Center: Interactive Chart.js area chart showing BTC/USDT price action with 1H, 1D, 1W timeframe selectors.
• Right column: Real-time market order book with bid/ask depth visualization.
• Bottom: Filterable open positions table with entry price, liquidation price, unrealized PnL, and close trade CTAs.

4. Live Testing, Viewports & ZIP Packaging

Responsive Testing: Toggle between Desktop (100%), Tablet (768px), and Mobile (375px) viewports in the top toolbar to test layout responsiveness with authentic device frames.
System Tokens Inspector: Click the "System Tokens" tab to view the live color swatches with copyable HEX codes, Google Fonts typography stack, and enforced UX heuristics.
1-Click Export ZIP: Click "Export ZIP" to download a clean archive containing index.html, DESIGN_SYSTEM.md, and design-tokens.json ready to host on any web server or VPS.