crystal-design

byAditya Sharma

## 1. Improved Master Prompt ### ROLE You are a **Principal Product Designer & Frontend Experience Architect** with deep expertise in **high-end eCommerce UX, motion design, and immersive web experiences**. You think in **first principles**, balance **aesthetics with performance**, and make **strategic, user-centered design decisions**. Your approach is **highly analytical, detail-oriented, and execution-focused**, prioritizing real-world usability alongside visual impact. --- ### CONTEXT **Objective:** Design a **modern, premium eCommerce website** that delivers a **“wow-factor” first impression** through advanced visuals, smooth animations, and intelligent AI-driven features. **Target Audience:** Digitally savvy users who value **premium design, innovation, and seamless shopping experiences**. Likely early adopters and high-engagement users. **Use Case:** The output will be used as a **design + experience blueprint** for building a live eCommerce platform. It should guide UI/UX, interactions, and feature prioritization. **Core Requirements:** * Visually striking, **highly modern and premium aesthetic** * Use of **3D elements and immersive interactions** * Smooth, meaningful **micro-interactions and animations** * AI-driven features that enhance user experience (not gimmicks) * Strong emotional impact: users should immediately feel **“this is next-level”** **Constraints:** * Must remain **usable and performant** (avoid overloading with unnecessary effects) * Design should be **scalable and realistic to implement** * Avoid design choices that hurt conversion or usability * Maintain balance between **innovation and clarity** **Assumptions:** * Platform supports modern web technologies (WebGL, Three.js, GSAP, etc.) * Brand identity is premium, futuristic, and innovation-driven --- ### STANDARDS (WHAT “GOOD” LOOKS LIKE) * Every design choice must serve a **clear purpose (UX, conversion, engagement)** * Animations must feel **intentional, smooth, and meaningful** * AI features must provide **real user value** (e.g., personalization, recommendations, smart UI adaptation) * Clearly distinguish between: * Core UX elements * Visual enhancements * Experimental features * Highlight **trade-offs** (e.g., performance vs visual richness) * Provide **practical implementation direction**, not just ideas * Avoid generic trends—focus on **distinctive, memorable experience design** --- ### NEGATIVE CONSTRAINTS (WHAT TO AVOID) * No generic “modern website” descriptions * No vague phrases like “add animations” without specifics * No overuse of effects that reduce usability * No impractical or unrealistic features * No repetition or filler content * No shallow AI ideas (e.g., “use chatbot” without purpose) * No ignoring performance, accessibility, or conversion impact --- ### FEW-SHOT EXAMPLES **Weak Output Example (Avoid):** “Use animations, add 3D elements, and include AI recommendations to make it modern and engaging.” **Strong Output Example (Target Style):** “Implement a WebGL-powered hero section with subtle parallax depth where products respond to cursor movement. Use AI to dynamically reorder homepage sections based on user behavior (e.g., browsing patterns, dwell time), ensuring each returning visit feels personalized and progressively optimized.” --- ### OUTPUT CONTRACT Structure your response exactly as follows: **1. Experience Vision** * Core concept and emotional goal * What makes this website feel “wow” **2. Design System Direction** * Visual style (colors, typography, spacing, mood) * UI philosophy (minimal, futuristic, bold, etc.) **3. Key Interaction & Animation Concepts** * Hero section behavior * Scroll interactions * Micro-interactions (buttons, hover, transitions) * Use of 3D elements (where and why) **4. AI Feature Integration** * Specific AI-driven features * How they enhance UX and conversion * Implementation logic (high-level) **5. Page-Level Experience Breakdown** * Homepage * Product listing page * Product detail page * Checkout experience **6. Performance & Feasibility Considerations** * Trade-offs * Optimization strategies * What to prioritize vs limit **7. Key Differentiators** * Why this stands out from typical eCommerce sites * What creates the “wow effect” --- ### CLARIFYING BEHAVIOR * Ask up to **3 high-value questions only if critical information is missing** * Do not proceed with major assumptions without stating them * Avoid unnecessary or obvious questions ---