Outdoor Staircase Image Analysis
{
"environment": {
"type": "outdoor",
"location": "staircase",
"setting": "garden_or_park_entrance",
"time_of_day": "mid_day",
"weather": "sunny"
},
"camera": {
"lens": "portrait_lens",
"focal_length_estimate": "50mm_to_85mm",
"angle": "eye_level",
"framing": "medium_shot",
"focus": "sharp_on_subject"
},
"lighting": {
"general_condition": "bright_natural_light",
"sources": [
{
"type": "sun",
"angle": "overhead_left",
"color": "warm_white",
"intensity": "high",
"effect_on_objects": "creates_sharp_shadows_on_stairs_and_white_walls"
}
]
},
"subject": {
"identity": "unknown_young_female",
"orientation": {
"body_facing": "front",
"face_facing": "front",
"gaze": "direct_to_camera"
},
"emotional_state": {
"expression": "confident",
"mood": "calm",
"allure_level": "moderate_to_high"
},
"pose": {
"general": "standing_on_stairs",
"posture": "upright_slightly_arched",
"limbs": {
"feet": "standing_on_steps_one_slightly_lower",
"hands": {
"left_hand": "extended_holding_railing",
"right_hand": "down_holding_handbag"
}
},
"visibility": "knee_up"
},
"head_details": {
"structure": "oval",
"hair": {
"color": "blonde_with_dark_roots",
"style": "long_loose_waves",
"parting": "center",
"texture": "silky"
},
"face": {
"forehead": "smooth_partially_covered_by_hair_strands",
"brows": "arched_groomed_brown",
"eyes": {
"color": "blue_green",
"shape": "almond",
"makeup": "mascara_eyeliner"
},
"nose": "straight_slim",
"lips": {
"shape": "full",
"color": "pink_glossy",
"expression": "slight_smile"
},
"jawline": "defined",
"cheeks": "blushed"
}
},
"body_details": {
"skin_tone": "tanned",
"neck": "slender_visible",
"shoulders": "covered_by_jacket",
"chest_area": {
"ratio_to_body": "large",
"estimated_size": "voluptuous",
"bra_status": "no_visible_straps_likely_adhesive_or_none",
"nipple_visibility": "not_visible",
"cleavage": "deeply_visible_prominent"
},
"abdomen": {
"ratio_to_body": "slim",
"definition": "flat_toned",
"navel_visibility": "covered"
},
"hips": {
"ratio_to_waist": "high_hourglass_shape",
"width": "curvy"
},
"legs": {
"thighs": "smooth_toned",
"exposure": "visible_from_mid_thigh_down"
}
},
"clothing": {
"upper_body": {
"item": "jacket_top",
"color": "maroon_burgundy",
"style": "long_sleeve_deep_plunge_neckline_zip_front",
"fit": "tight_fitted",
"light_interaction": "absorbs_light_soft_shadows_in_folds"
},
"lower_body": {
"item": "shorts",
"color": "teal_blue",
"style": "athletic_satin_finish_drawstring",
"fit": "loose_fit",
"light_interaction": "reflects_highlights_due_to_fabric_sheen"
}
},
"accessories": [
{
"type": "necklace",
"material": "silver",
"pendant": "small_heart_shape"
},
{
"type": "earrings",
"style": "hoops",
"material": "gold_tone"
},
{
"type": "handbag",
"pattern": "multicolor_floral",
"style": "structured_mini_bag",
"held_in": "right_hand"
}
]
},
"objects": [
{
"name": "railing",
"color": "black",
"material": "metal",
"location": "sides_of_stairs",
"purpose": "safety_and_framing"
},
{
"name": "stairs",
"color": "beige_treads_white_risers",
"material": "stone_or_concrete",
"location": "center_foreground_to_midground",
"purpose": "platform_for_subject"
},
{
"name": "walls",
"color": "white",
"location": "flanking_stairs",
"purpose": "architectural_structure"
},
{
"name": "vegetation",
"type": "trees_and_bushes",
"color": "green",
"location": "background",
"purpose": "natural_backdrop"
},
{
"name": "potted_plant",
"location": "left_midground",
"type": "large_clay_pot_with_tree",
"color": "terracotta_pot_green_leaves"
}
],
"negative_prompt": "deformed hands, bad anatomy, disfigured, blurry, low quality, watermark, text, signature, extra limbs, missing fingers, cross-eyed, asymmetrical eyes, bad proportions, unnatural skin texture"
}
A night in paris
{
"subject_and_scene": {
"main_subject": "A young man with thick curly brown hair, wearing a sophisticated beige turtleneck sweater and a matching tailored wool blazer, displaying a contemplative and moody expression.",
"action": "Leaning casually against a weathered stone bridge parapet, looking away from the camera toward the Parisian cityscape.",
"environment": "Paris at night on the banks of the Seine; the Eiffel Tower stands prominently in the background, brilliantly illuminated in golden light, with city lights and river boats creating soft reflections on the dark water."
},
"cinematography": {
"camera_model": "Sony Venice 2",
"sensor_type": "Full Frame",
"shot_type": "Cowboy Shot",
"camera_angle": "Eye Level",
"movement": "Static"
},
"optics": {
"lens_type": "Spherical",
"focal_length": "35mm (Standard Wide)",
"aperture": "f/2.8 (Moderate depth of field to retain background context)",
"shutter_effects": "Standard Shutter"
},
"lighting_design": {
"setup": "Natural Night Ambience with soft fill on subject",
"style": "Low-Key with high atmospheric glow",
"atmospheric_light": "Golden Glow from the Eiffel Tower, Rim Lighting from city lights",
"color_temperature": "Warm (3000K, Amber and Gold tones)"
},
"color_and_post": {
"film_stock": "Kodak Portra 400",
"color_grading": "Warm Nostalgic Tones, Muted Log-C",
"analog_artifacts": "Heavy Film Grain, soft Halation around the golden tower lights"
},
"rendering_and_tech": {
"engine": "Octane Render",
"advanced_tech": "Subsurface Scattering on skin, Global Illumination for water reflections",
"specs": {
"aspect_ratio": "2.39:1 (CinemaScope)",
"resolution": "8K, Photorealistic, Hyper-detailed"
}
},
"directorial_style": "Denis Villeneuve (Atmospheric mood and pensive composition)"
}
GoPro Action
{
"prompt": "You will perform an image edit using the people from the provided photos as the main subjects. Preserve their core likeness. Transform Subject 1 (male) and Subject 2 (male) into adrenaline-junkie urban explorers atop a massive skyscraper. The image is a high-energy, wide-angle POV selfie taken by Subject 1, capturing both men precariously perched on the edge of a rooftop ledge with a dizzying vertical drop to the city streets below. Adhere strictly to a cinematic 1:1 aspect ratio.",
"details": {
"year": "Present Day",
"genre": "GoPro",
"location": "The rooftop ledge of a 100-story skyscraper in a dense metropolis.",
"lighting": [
"Golden hour sunlight",
"Direct harsh flares",
"Natural outdoor exposure"
],
"camera_angle": "Extreme wide-angle fisheye POV (selfie angle), high distortion on the edges, tilting downwards to show the street far below.",
"emotion": [
"Exhilarated",
"Fearless",
"Adrenaline-fueled"
],
"color_palette": [
"Sky blue",
"Sunset orange",
"Concrete grey",
"Vivid sportswear neons"
],
"atmosphere": [
"Vertigo-inducing",
"Windy",
"Epic",
"Dangerous"
],
"environmental_elements": "Tiny cars visible on the grid-like streets below, lens flare artifacts, birds flying beneath the subjects, wind blowing their clothes.",
"subject1": {
"costume": "A technical windbreaker jacket, fingerless grip gloves, and a backward baseball cap.",
"subject_expression": "A wide, shouting grin of pure excitement, looking into the lens.",
"subject_action": "Holding the camera arm extended (selfie style) while leaning out over the void."
},
"negative_prompt": {
"exclude_visuals": [
"ground level view",
"interiors",
"studio lighting",
"tripod stability",
"bokeh",
"flat lens"
],
"exclude_styles": [
"oil painting",
"sketch",
"vintage film",
"studio portrait"
],
"exclude_colors": [
"sepia",
"monochrome"
],
"exclude_objects": [
"safety railings",
"fences"
]
},
"subject2": {
"costume": "A hooded athletic vest, cargo joggers, and climbing shoes.",
"subject_expression": "Intense focus mixed with a daredevil smirk.",
"subject_action": "Balancing on one leg on the very edge of the cornice, throwing a 'peace' sign towards the camera."
}
}
}
Generate a Plan for Building the Best UI/UX
You are a senior full-stack engineer and UX/UI architect with 10+ years of experience building
production-grade web applications. You specialize in responsive design systems, modern UI/UX
patterns, and cross-device performance optimization.
---
## TASK
Generate a **comprehensive, actionable development plan** for building a responsive web application
that meets the following criteria:
### 1. RESPONSIVENESS & CROSS-DEVICE COMPATIBILITY
- Flawlessly adapts to: mobile (320px+), tablet (768px+), desktop (1024px+), large screens (1440px+)
- Define a clear **breakpoint strategy** with rationale
- Specify a **mobile-first vs desktop-first** approach with justification
- Address: touch targets, tap gestures, hover states, keyboard navigation
- Handle: notches, safe areas, dynamic viewport units (dvh/svh/lvh)
- Cover: font scaling, image optimization (srcset, art direction), fluid typography
### 2. PERFORMANCE & SMOOTHNESS
- Target: 60fps animations, <2.5s LCP, <100ms INP, <0.1 CLS (Core Web Vitals)
- Strategy for: lazy loading, code splitting, asset optimization
- Approach to: CSS containment, will-change, GPU compositing for animations
- Plan for: offline support or graceful degradation
### 3. MODERN & ELEGANT DESIGN SYSTEM
- Define a **design token architecture**: colors, spacing, typography, elevation, motion
- Specify: color palette strategy (light/dark mode support), font pairing rationale
- Include: spacing scale, border radius philosophy, shadow system
- Cover: iconography approach, illustration/imagery style guidance
- Detail: component-level visual consistency rules
### 4. MODERN UX/UI BEST PRACTICES
Apply and plan for the following UX/UI principles:
- **Hierarchy & Scannability**: F/Z pattern layouts, visual weight, whitespace strategy
- **Feedback & Affordance**: loading states, skeleton screens, micro-interactions, error states
- **Navigation Patterns**: responsive nav (hamburger, bottom nav, sidebar), breadcrumbs, wayfinding
- **Accessibility (WCAG 2.1 AA minimum)**: contrast ratios, ARIA roles, focus management, screen reader support
- **Forms & Input**: validation UX, inline errors, autofill, input types per device
- **Motion Design**: purposeful animation (easing curves, duration tokens), reduced-motion support
- **Empty States & Edge Cases**: zero data, errors, timeouts, permission denied
### 5. TECHNICAL ARCHITECTURE PLAN
- Recommend a **tech stack** with justification (framework, CSS approach, state management)
- Define: component architecture (atomic design or alternative), folder structure
- Specify: theming system implementation, CSS strategy (modules, utility-first, CSS-in-JS)
- Include: testing strategy for responsiveness (tools, breakpoints to test, devices)
---
## OUTPUT FORMAT
Structure your plan in the following sections:
1. **Executive Summary** – One paragraph overview of the approach
2. **Responsive Strategy** – Breakpoints, layout system, fluid scaling approach
3. **Performance Blueprint** – Targets, techniques, tooling
4. **Design System Specification** – Tokens, palette, typography, components
5. **UX/UI Pattern Library Plan** – Key patterns, interactions, accessibility checklist
6. **Technical Architecture** – Stack, structure, implementation order
7. **Phased Rollout Plan** – Prioritized milestones (MVP → polish → optimization)
8. **Quality Checklist** – Pre-launch verification across all devices and criteria
---
## CONSTRAINTS & STYLE
- Be **specific and actionable** — avoid vague recommendations
- Provide **concrete values** where applicable (e.g., "8px base spacing scale", "400ms ease-out for modals")
- Flag **common pitfalls** and how to avoid them
- Where multiple approaches exist, **recommend one with reasoning** rather than listing all options
- Assume the target is a **[INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]**
- Target users are **[INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]**
---
Begin with the Executive Summary, then proceed section by section.