You are being evaluated as a senior product designer, art di...

Prompt

You are being evaluated as a senior product designer, art director, UX designer, and front-end engineer simultaneously. This is a HIGH-DIFFICULTY FRONT-END DESIGN BENCHMARK. Your task is to design and build from scratch a complete, production-quality responsive landing page for a fictional premium U.S. flower-delivery brand. The quality bar is extremely high. REFERENCE / INSPIRATION Study the current UrbanStems website if web/browser access is available: https://urbanstems.com/ UrbanStems is the DESIGN REFERENCE, not a template to copy. Understand why it works: * confident editorial art direction * beautiful flower/product photography * sophisticated but approachable premium positioning * excellent visual hierarchy * strong whitespace * modern typography * commerce-first UX without feeling like a generic e-commerce template * clear discovery by occasion/product intent * editorial campaign modules mixed with shopping modules * strong product cards * subtle social proof * delivery information integrated naturally into shopping * restrained interactions * polished mobile experience * a brand personality that feels human rather than corporate DO NOT: * copy UrbanStems branding * copy its logo * copy its text * reproduce its exact page structure * recreate its components one-for-one * copy its colors mechanically * use UrbanStems photographs or proprietary assets * produce an obvious clone Instead, infer the DESIGN PRINCIPLES behind the reference and create an ORIGINAL brand and visual system that could credibly compete in the same premium U.S. market. --- ## THE FICTIONAL BRAND Brand name: MÉLORA Descriptor: Modern Flowers, Thoughtfully Sent. Positioning: MÉLORA is a design-led flower-delivery company serving major U.S. cities and nationwide next-day destinations. The brand should sit somewhere between: * contemporary fashion editorial * modern boutique florist * refined gifting company * premium direct-to-consumer e-commerce It should feel: elevated, fresh, warm, art-directed, emotionally intelligent, modern, confident, and highly desirable. It must NOT feel: corporate, wedding-template-like, overly feminine, cheap, generic Shopify, luxury-black-and-gold, artificially futuristic, or excessively minimalist. The flowers must remain the visual hero. --- ## YOUR RESPONSIBILITY Do NOT ask me design questions. Make strong creative decisions yourself. You own: * art direction * layout * typography * palette * spacing * component system * responsive behavior * interaction design * copy hierarchy * image treatment * product-card design * micro-interactions * accessibility * implementation quality Take the project from an empty workspace to a finished, runnable result. If an existing project/framework is already present, inspect it first and work within it intelligently. If the workspace is empty, create an appropriate modern React-based implementation using: * React * TypeScript * Vite * clean CSS architecture You may use a lightweight icon library if useful. Avoid heavy UI frameworks that dictate the visual language. Do not use a generic component library to design the page for you. --- ## ART DIRECTION Create an original editorial identity for MÉLORA. Suggested visual territory — interpret, do not mechanically follow: BACKGROUND warm bone / ivory rather than pure white PRIMARY INK deep botanical near-black rather than absolute black ACCENT one memorable floral color such as poppy, persimmon, raspberry, plum, or geranium SECONDARY soft botanical green or muted stem green OPTIONAL SUPPORTING TONES dusty blush pale butter soft lilac warm stone Avoid rainbow palettes. Use color purposefully. Typography should have real personality. Build a sophisticated pairing such as: * expressive editorial/display type for major statements * restrained contemporary sans-serif for commerce/UI Do NOT make every heading a generic huge serif headline. Establish hierarchy through: type scale, weight, spacing, case, line length, composition, and contrast. Use generous whitespace without creating huge meaningless empty areas. Avoid excessive rounded rectangles. Avoid making every section a card. Avoid glassmorphism. Avoid neon. Avoid generic SaaS aesthetics. Avoid excessive gradients. Avoid floating blobs. Avoid random decorative shapes whose only purpose is to make the screen look "designed." The page should feel like it was art-directed by a real premium retail design studio. --- ## PHOTOGRAPHY Flower imagery is CRITICAL. If internet/search tools are available: source a coherent set of high-quality royalty-free flower/lifestyle photographs from legitimate public sources such as Unsplash or Pexels. Do not use UrbanStems imagery. Use photography intentionally: * clean product compositions * dramatic close florals * human gifting/lifestyle imagery where appropriate * editorial crops * varied but coherent image ratios Do not simply dump unrelated stock images into boxes. The image crop, scale, placement, and surrounding typography should feel intentionally composed. If you download assets, store them locally in a sensible assets directory and use optimized web formats where practical. If network access is unavailable, provide elegant local fallbacks rather than broken images. --- ## PAGE ARCHITECTURE Build ONE complete landing/home page. It should feel substantial enough to be a real commerce homepage, but do not turn it into a 20-section marathon. Design approximately this level of content: 1. ANNOUNCEMENT STRIP A slim, elegant announcement bar. Example concept: "Fresh flowers, delivered tomorrow — order by 2 PM." It should feel integrated, not like an advertising banner. 2. PRIMARY HEADER Desktop navigation with: * Shop * Occasions * Same-Day * Subscriptions * Our Story Strong MÉLORA wordmark treatment. Utility actions: * Search * Account * Bag Create a graceful mobile header. Header behavior should become subtly sticky after scroll. Do not make the header visually heavy. 3. HERO This is the most important design moment. Do NOT make a generic: left text + right rectangular image + button SaaS hero. Create a genuinely art-directed commerce/editorial composition. Use asymmetry, image cropping, layering, unusual proportional relationships, typography, whitespace, or another intelligent device. Primary line: "Flowers worth remembering." Supporting copy should explain MÉLORA in one short emotionally intelligent statement. Primary CTA: SHOP FLOWERS Secondary CTA: SEND TODAY Include one subtle commerce/delivery reassurance. The flowers must dominate visually without destroying text legibility. The hero should look exceptional at: 1440px desktop 768px tablet 390px mobile Mobile must be intentionally redesigned rather than merely stacked. 4. GIFT-FINDER / DELIVERY MODULE Create an elegant interactive discovery strip helping the customer begin shopping. For example: "I'm sending..." [Birthday] "To..." [ZIP code] "Arriving..." [Date] [FIND FLOWERS] Make it feel premium and simple. Implement believable interactions/state. No backend is required. 5. BEST SELLERS Present approximately 6–8 fictional products. Example product naming tone: The Amelie The Sunday The Poppy The Miro The Clementine The Luna Do not necessarily use these exact names if you develop something better. Each product should have: * photograph * name * price * rating/review count * optional small badge * restrained Quick Add behavior Create excellent product cards. Important: Do NOT surround every card with borders/shadows. Use image, typography and spacing to create hierarchy. Include thoughtful hover behavior on pointer devices. Consider alternate-image reveal or subtle image zoom if appropriate. 6. EDITORIAL CAMPAIGN MOMENT Interrupt the commerce grid with a large, visually memorable editorial section. Theme example: "Say it beautifully." Use an asymmetrical image/text composition. It should look more like a fashion/editorial spread than another generic promotional card. 7. SHOP BY OCCASION Create distinctive discovery for: * Birthday * Love * Thank You * Just Because * Congratulations * Sympathy Do something more interesting than six identical rounded boxes. Use layout, cropping, type or image rhythm intelligently. 8. SOCIAL PROOF MÉLORA has: "20,000+ five-star moments" Create a tasteful review/testimonial section. Do not build a giant generic carousel with arrows everywhere. Use approximately 3 short believable customer statements. Customer names can be fictional. Keep it visually integrated into the brand. 9. BRAND / SERVICE STORY Communicate three meaningful differentiators: DESIGNED WITH INTENTION Original arrangements designed in-house. FRESHER, LONGER Flowers sourced close to growers and arranged for longevity. DELIVERED BEAUTIFULLY Thoughtful packaging and dependable nationwide delivery. Treat this as storytelling rather than three generic SaaS feature cards. 10. SUBSCRIPTION MOMENT Create a strong visual section for: "Fresh flowers. On repeat." Explain the subscription in a couple of lines. CTA: EXPLORE SUBSCRIPTIONS This section should feel visually distinct without breaking the overall design system. 11. INSTAGRAM / COMMUNITY MOMENT A compact visual strip inspired by real social content. Do not overbuild it. 12. NEWSLETTER + FOOTER Newsletter proposition: "Good flowers. Good emails." Include: * email field * tasteful CTA * navigation groups * customer care * social links * copyright * delivery/service information Make the footer feel designed rather than forgotten. --- ## INTERACTIONS Implement enough behavior to demonstrate real front-end engineering. At minimum: 1. sticky header behavior 2. functional mobile navigation 3. search overlay or expandable search experience 4. gift-finder selection interactions 5. product Quick Add 6. cart/bag drawer with item count 7. quantity adjustment/removal inside bag 8. tasteful hover states 9. accessible focus states 10. subtle scroll/reveal behavior where it genuinely improves the page Interactions should feel: fast, quiet, premium, and purposeful. Do NOT animate everything. Do NOT use excessive parallax. Do NOT make elements fly around the screen. Respect prefers-reduced-motion. --- ## MICRO-INTERACTIONS Pay close attention to details such as: * underline movement * arrow movement * image scale * navigation transitions * button press states * product Quick Add feedback * bag opening/closing * focus transitions Animation timing should generally feel refined and quick. The user should perceive polish without consciously noticing animation everywhere. --- ## COPY Write all original copy yourself. Tone: smart, warm, brief, modern, slightly playful, emotionally aware. Avoid: "Elevate your gifting experience." "Discover the perfect bouquet." "Where elegance meets..." "We believe every moment deserves..." and other generic AI marketing phrases. Write like an excellent contemporary consumer brand. Keep copy concise. --- ## RESPONSIVE DESIGN This requirement is STRICT. Design deliberately for: DESKTOP 1440px+ LAPTOP 1280px TABLET 768px MOBILE 390px SMALL MOBILE 360px Do not simply shrink desktop. At smaller widths reconsider: * hero composition * typography * image crop * content order * navigation * product grid * padding * CTA sizing * interaction affordances * touch targets There must be: * no horizontal overflow * no clipped text * no tiny controls * no overlapping UI * no unreadable type * no broken image aspect ratios Mobile should feel as carefully art-directed as desktop. --- ## ENGINEERING QUALITY Use: * semantic HTML * reusable React components * TypeScript * clean data structures for product/occasion/review content * CSS custom properties/design tokens * sensible responsive breakpoints * accessible buttons and links * alt text * keyboard navigation * visible focus states * good contrast * reduced-motion support Keep architecture appropriate for a landing page. Do NOT overengineer. Do NOT create fake complexity. Do NOT add a backend. Do NOT require authentication. No checkout backend is required. Cart behavior may be local client state. Avoid console errors and warnings. Avoid obviously duplicated CSS. Avoid hardcoding hundreds of arbitrary pixel values when a coherent system would work better. --- ## QUALITY BAR The finished page should NOT look like: * an AI-generated template * a Tailwind demo * a generic Shopify theme * a Dribbble mockup with poor commerce usability * a portfolio exercise * a wireframe * a clone of UrbanStems * a collection of disconnected trendy components It should look like a credible 2026 premium flower-commerce brand that could launch publicly. The first viewport should immediately communicate: "someone with very good taste designed this." But visual beauty alone is not enough. The page must also be commercially understandable within seconds. --- ## SELF-CRITIQUE REQUIREMENT Before declaring completion, inspect your own work critically. Ask yourself: 1. Does the page have a recognizable visual identity? 2. Is the hero genuinely art-directed or generic? 3. Is there a clear primary action? 4. Do the flowers dominate appropriately? 5. Does commerce remain easy to understand? 6. Does the typography feel intentional? 7. Does the page have enough visual rhythm and variation? 8. Are any sections overly repetitive? 9. Does anything look like generic AI-generated UI? 10. Are there unnecessary rounded cards? 11. Are animations restrained? 12. Does mobile feel intentionally designed? 13. Is there horizontal overflow? 14. Does every major section earn its place? 15. Would this credibly compete visually with leading U.S. flower-delivery brands? If the answer to any important question is no: FIX IT before finishing. --- ## VISUAL QA Run the application. If browser/screenshot capabilities are available, inspect the rendered page visually at approximately: 1440 × 1000 768 × 1024 390 × 844 Do not judge the page only from source code. Look at the actual render. Correct: * bad cropping * awkward whitespace * typography problems * alignment problems * overflow * weak hierarchy * repetitive sections * mobile composition problems * broken interactions Iterate until the page feels finished. --- ## FINAL VERIFICATION Before completion: * run the relevant build command * run lint/type-checking if configured * ensure no compile errors * ensure no obvious console errors * verify mobile navigation * verify search interaction * verify gift finder * verify Quick Add * verify cart drawer * verify quantity/remove controls * verify major CTAs * verify responsive layouts * verify keyboard focus * verify reduced-motion handling * inspect git diff if Git is available Do not claim something was verified unless you actually verified it. ---

A system prompt was added to support web rendering