E-commerce Homepage - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\uded2 E-commerce Homepage<\/h2>\n <p>High-Converting Online Store Homepage with Product Discovery & Checkout Flow<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 45\u201365 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ HTML\/CSS \/ Webflow<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Design a high-converting e-commerce homepage for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf Store Identity & Context:<\/strong><\/p>\n <p>\u2022 Store Name: <span class=\"placeholder\">[Brand Name]<\/span><\/p>\n <p>\u2022 Product Category: <span class=\"placeholder\">[Fashion & Apparel \/ Electronics \/ Home & Garden \/ Beauty & Cosmetics \/ Food & Beverage \/ Sports & Outdoors \/ Books \/ Handmade\/Artisan]<\/span><\/p>\n <p>\u2022 Target Audience: <span class=\"placeholder\">[Demographics, shopping behavior, price sensitivity]<\/span><\/p>\n <p>\u2022 Brand Positioning: <span class=\"placeholder\">[Luxury \/ Affordable \/ Eco-friendly \/ Tech-forward \/ Minimalist \/ Trendy]<\/span><\/p>\n <p>\u2022 Unique Value Proposition: <span class=\"placeholder\">[Free shipping \/ Best prices \/ Curated selection \/ Sustainable \/ Fast delivery]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfd7\ufe0f Homepage Structure (10 Key Sections):<\/strong><\/p>\n <p><strong>1. Header\/Navigation (Sticky Top Bar)<\/strong><\/p>\n <p>\u2022 Logo: <span class=\"placeholder\">[Position: left \/ centered, Size: 120\u2013150px width]<\/span><\/p>\n <p>\u2022 Main Navigation: <span class=\"placeholder\">[5\u20138 categories: Shop \/ New Arrivals \/ Sale \/ About \/ Contact]<\/span><\/p>\n <p>\u2022 Search Bar: <span class=\"placeholder\">[Prominent, center or right side, autocomplete suggestions, \"Search products...\" placeholder]<\/span><\/p>\n <p>\u2022 Utility Icons: <span class=\"placeholder\">[Account\/Login, Wishlist (heart icon), Cart with item count badge]<\/span><\/p>\n <p>\u2022 Promo Banner Above Header: <span class=\"placeholder\">[Optional \u2014 \"Free Shipping Over $50\" \/ \"20% Off Sitewide \u2014 Code: SAVE20\"]<\/span><\/p>\n <br>\n <p><strong>2. Hero Section (Above the Fold)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Full-width image\/video + text overlay \/ Split 50\/50 image-text \/ Carousel with 3\u20135 slides]<\/span><\/p>\n <p>\u2022 Hero Image: <span class=\"placeholder\">[Lifestyle photo showing product in use \/ Product close-up \/ Brand story visual]<\/span><\/p>\n <p>\u2022 Headline: <span class=\"placeholder\">[Benefit-driven, 5\u20138 words: \"Elevate Your Style with Timeless Pieces\"]<\/span><\/p>\n <p>\u2022 Subheadline: <span class=\"placeholder\">[Supporting text, 10\u201315 words, clarifies offer]<\/span><\/p>\n <p>\u2022 CTA Button: <span class=\"placeholder\">[Primary action: \"Shop Now\" \/ \"Explore Collection\" \/ \"Get Started\", prominent color, 48px height]<\/span><\/p>\n <p>\u2022 Auto-Play Carousel: <span class=\"placeholder\">[Yes\/No \u2014 if yes, 5-second interval, pause on hover, navigation dots]<\/span><\/p>\n <br>\n <p><strong>3. Featured Categories (Quick Navigation)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[3\u20136 category tiles in horizontal grid]<\/span><\/p>\n <p>\u2022 Category Tile: <span class=\"placeholder\">[Image background, category name overlay, hover effect (zoom\/darken)]<\/span><\/p>\n <p>\u2022 Categories: <span class=\"placeholder\">[Women \/ Men \/ Accessories \/ New Arrivals \/ Sale \/ Best Sellers]<\/span><\/p>\n <p>\u2022 Tile Size: <span class=\"placeholder\">[Equal sizes OR hero tile (larger) + smaller tiles]<\/span><\/p>\n <br>\n <p><strong>4. Featured\/Best-Selling Products<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"Best Sellers\" \/ \"Trending Now\" \/ \"Customer Favorites\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4-column grid on desktop \/ 2-column on tablet \/ 1-column on mobile]<\/span><\/p>\n <p>\u2022 Product Card Components: <span class=\"placeholder\">[Product image (square ratio), Name, Price, \"Add to Cart\" button, Star rating (optional), \"Sale\" badge (if discounted)]<\/span><\/p>\n <p>\u2022 Hover Effects: <span class=\"placeholder\">[Secondary image on hover \/ Quick-view modal \/ Add-to-cart button appears]<\/span><\/p>\n <p>\u2022 Show: <span class=\"placeholder\">[8\u201312 products, \"View All\" link at bottom]<\/span><\/p>\n <br>\n <p><strong>5. Promotional Banner (Mid-Page CTA)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Full-width image banner \/ Split image-text \/ Video background]<\/span><\/p>\n <p>\u2022 Message: <span class=\"placeholder\">[\"Limited Time: 30% Off Spring Collection\" \/ \"Join Our Loyalty Program \u2014 Earn Points on Every Purchase\"]<\/span><\/p>\n <p>\u2022 CTA Button: <span class=\"placeholder\">[\"Shop Sale\" \/ \"Learn More\" \/ \"Sign Up Now\"]<\/span><\/p>\n <p>\u2022 Design Style: <span class=\"placeholder\">[Bold typography, high contrast, urgency indicators (countdown timer optional)]<\/span><\/p>\n <br>\n <p><strong>6. New Arrivals \/ Seasonal Collection<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"New Arrivals\" \/ \"Spring 2026 Collection\" \/ \"Just Dropped\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Horizontal scrollable carousel OR 4-column grid]<\/span><\/p>\n <p>\u2022 Product Cards: <span class=\"placeholder\">[Same structure as Best Sellers, \"New\" badge]<\/span><\/p>\n <p>\u2022 Show: <span class=\"placeholder\">[8\u201312 products]<\/span><\/p>\n <br>\n <p><strong>7. Social Proof \/ Testimonials<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"What Our Customers Say\" \/ \"Loved by Thousands\" \/ \"Real Reviews\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[3-column testimonial cards \/ Carousel \/ Masonry grid]<\/span><\/p>\n <p>\u2022 Testimonial Card: <span class=\"placeholder\">[Customer photo\/avatar, Name, Star rating, Review text (2\u20133 sentences), Product image (optional)]<\/span><\/p>\n <p>\u2022 Trust Badges: <span class=\"placeholder\">[Below testimonials \u2014 \"5000+ 5-Star Reviews\" \/ Trustpilot logo \/ \"As Seen In\" media logos]<\/span><\/p>\n <br>\n <p><strong>8. Instagram Feed \/ User-Generated Content<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"Shop Our Instagram\" \/ \"#YourBrandName\" \/ \"Join the Community\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4\u00d72 grid of Instagram posts \/ Carousel of tagged photos]<\/span><\/p>\n <p>\u2022 Post Display: <span class=\"placeholder\">[Square images, Instagram icon overlay on hover, click to view full post or tag to shop]<\/span><\/p>\n <p>\u2022 CTA: <span class=\"placeholder\">[\"Follow Us on Instagram\" button]<\/span><\/p>\n <br>\n <p><strong>9. Value Propositions \/ Trust Indicators<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4-column icon grid \/ Horizontal banner with icons]<\/span><\/p>\n <p>\u2022 Icons + Text: <span class=\"placeholder\">[Free Shipping (truck icon), Easy Returns (return arrow), Secure Checkout (lock icon), 24\/7 Support (chat icon)]<\/span><\/p>\n <p>\u2022 Style: <span class=\"placeholder\">[Simple line icons, short headline, 1-line description]<\/span><\/p>\n <br>\n <p><strong>10. Footer (Comprehensive)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4-column grid on desktop \/ Stacked on mobile]<\/span><\/p>\n <p>\u2022 Column 1 \u2014 About: <span class=\"placeholder\">[Logo, Short brand description, Social media icons]<\/span><\/p>\n <p>\u2022 Column 2 \u2014 Shop: <span class=\"placeholder\">[Links: All Products, New Arrivals, Sale, Gift Cards]<\/span><\/p>\n <p>\u2022 Column 3 \u2014 Customer Service: <span class=\"placeholder\">[Links: Contact, Shipping Info, Returns, FAQ, Size Guide]<\/span><\/p>\n <p>\u2022 Column 4 \u2014 Newsletter Signup: <span class=\"placeholder\">[Email input field, \"Subscribe\" button, \"Get 10% off your first order\"]<\/span><\/p>\n <p>\u2022 Bottom Bar: <span class=\"placeholder\">[Copyright text, Payment method icons (Visa, Mastercard, PayPal, etc.), Legal links (Privacy, Terms)]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Visual Design System:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Brand Color: <span class=\"placeholder\">[HEX code \u2014 CTAs, accents, links]<\/span><\/p>\n <p>\u2022 Secondary Color: <span class=\"placeholder\">[HEX code \u2014 secondary buttons, badges]<\/span><\/p>\n <p>\u2022 Background: <span class=\"placeholder\">[White #ffffff OR light gray #f9fafb]<\/span><\/p>\n <p>\u2022 Text Colors: <span class=\"placeholder\">[Headings: #1f2937 dark gray \/ Body: #4b5563 medium gray \/ Muted: #9ca3af light gray]<\/span><\/p>\n <p>\u2022 Sale\/Discount Color: <span class=\"placeholder\">[Red #ef4444 OR orange #f59e0b]<\/span><\/p>\n <br>\n <p><strong>2. Typography<\/strong><\/p>\n <p>\u2022 Heading Font: <span class=\"placeholder\">[Playfair Display \/ Montserrat \/ Lora \u2014 serif or sans-serif depending on brand]<\/span><\/p>\n <p>\u2022 Body Font: <span class=\"placeholder\">[Inter \/ Open Sans \/ Roboto \u2014 clean sans-serif]<\/span><\/p>\n <p>\u2022 Font Sizes: <span class=\"placeholder\">[Hero H1: 48\u201364px \/ Section H2: 32\u201340px \/ Product name: 16\u201318px \/ Body: 16px \/ Small: 14px]<\/span><\/p>\n <br>\n <p><strong>3. Product Card Design<\/strong><\/p>\n <p>\u2022 Image Aspect Ratio: <span class=\"placeholder\">[1:1 square \/ 3:4 portrait \/ 4:3 landscape]<\/span><\/p>\n <p>\u2022 Image Hover Effect: <span class=\"placeholder\">[Zoom in \/ Fade to second image \/ Quick-view overlay]<\/span><\/p>\n <p>\u2022 Sale Badge: <span class=\"placeholder\">[Top-left corner, red circle, \"Sale\" OR \"-30%\" text]<\/span><\/p>\n <p>\u2022 Wishlist Icon: <span class=\"placeholder\">[Top-right corner, heart outline, fill on click]<\/span><\/p>\n <p>\u2022 Add to Cart: <span class=\"placeholder\">[Button below price \/ Icon-only bottom-right \/ Appears on hover]<\/span><\/p>\n <p>\u2022 Spacing: <span class=\"placeholder\">[16px padding inside card, 24px gap between cards]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Responsive Design:<\/strong><\/p>\n <p>\u2022 Desktop (1440px+): <span class=\"placeholder\">[4-column product grid, full header, side-by-side sections]<\/span><\/p>\n <p>\u2022 Tablet (768\u20131024px): <span class=\"placeholder\">[2\u20133 column grid, condensed header, stacked sections]<\/span><\/p>\n <p>\u2022 Mobile (< 768px): <span class=\"placeholder\">[1-column grid, hamburger menu, touch-optimized buttons (48px minimum), sticky \"Add to Cart\" bar on product pages]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udd27 Conversion Optimization Features:<\/strong><\/p>\n <p>\u2022 Quick Add to Cart: <span class=\"placeholder\">[Add products from homepage without leaving page]<\/span><\/p>\n <p>\u2022 Persistent Cart Icon: <span class=\"placeholder\">[Always visible with item count, smooth slide-out cart drawer]<\/span><\/p>\n <p>\u2022 Urgency Indicators: <span class=\"placeholder\">[Low stock warnings: \"Only 3 left!\" \/ Countdown timer for sales]<\/span><\/p>\n <p>\u2022 Exit-Intent Popup: <span class=\"placeholder\">[Offer discount when user moves to close tab: \"Wait! Get 10% off your first order\"]<\/span><\/p>\n <p>\u2022 Free Shipping Threshold: <span class=\"placeholder\">[Progress bar in cart: \"Add $15 more for free shipping\"]<\/span><\/p>\n <p>\u2022 Product Filters: <span class=\"placeholder\">[Size, Color, Price range, Category \u2014 sidebar OR top bar]<\/span><\/p>\n <p>\u2022 Wishlist Sync: <span class=\"placeholder\">[Save for later across devices, email reminders for price drops]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility & Performance:<\/strong><\/p>\n <p>\u2022 Page Load Speed: <span class=\"placeholder\">[Target <3 seconds \u2014 optimize images (WebP), lazy-load below fold, minify CSS\/JS]<\/span><\/p>\n <p>\u2022 Alt Text: <span class=\"placeholder\">[Descriptive alt text for all product images]<\/span><\/p>\n <p>\u2022 Keyboard Navigation: <span class=\"placeholder\">[Tab through all interactive elements, Enter to activate]<\/span><\/p>\n <p>\u2022 Color Contrast: <span class=\"placeholder\">[WCAG AA \u2014 4.5:1 for text, 3:1 for UI elements]<\/span><\/p>\n <p>\u2022 Mobile Touch Targets: <span class=\"placeholder\">[Minimum 44\u00d744px for buttons, adequate spacing to prevent mis-taps]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. Complete homepage design (desktop, tablet, mobile breakpoints)<\/p>\n <p>2. Product page template design<\/p>\n <p>3. Cart\/checkout flow wireframes<\/p>\n <p>4. Component library (buttons, cards, forms, navigation)<\/p>\n <p>5. Interactive prototype with clickable navigation<\/p>\n <p>6. Design system documentation (colors, typography, spacing)<\/p>\n <p>7. Developer handoff assets (icons, images, CSS specs)<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a conversion-optimized e-commerce homepage that balances beautiful design with sales psychology, fast performance, and seamless user experience across all devices.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Above-the-Fold Priority<\/h4>\n <p>First screen = first impression. Hero must communicate brand + value prop instantly. Clear CTA visible without scrolling. 5-second rule: visitor should know what you sell immediately.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Friction Reduction<\/h4>\n <p>Every click is a chance to lose the sale. Quick add-to-cart from homepage. Guest checkout option. Minimize form fields. Fast = conversions.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Social Proof Hierarchy<\/h4>\n <p>Trust = sales. Show reviews, ratings, \"X customers bought this\", UGC from Instagram. Place strategically near CTAs. Testimonials > brand claims.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Scarcity & Urgency<\/h4>\n <p>FOMO drives action. \"Only 3 left\" \/ countdown timers \/ \"Sale ends tonight\". Use ethically \u2014 real scarcity only. Fake urgency destroys trust.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Mobile-First Revenue<\/h4>\n <p>60%+ of e-commerce traffic = mobile. Design mobile experience first, enhance for desktop. Thumb-friendly buttons, simplified checkout, fast load times.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Visual Hierarchy for Scanning<\/h4>\n <p>Users scan, not read. Use size, color, contrast to guide eyes: Hero \u2192 Categories \u2192 Products \u2192 CTA. White space prevents overwhelm.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: Fashion & Apparel Store (Minimalist)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"Everlane Style Co.\"<br>\n <strong>Hero:<\/strong> Full-width image of model in neutral outfit, headline: \"Timeless Essentials, Made Better\" \u2014 CTA: \"Shop Women\" \/ \"Shop Men\"<br>\n <strong>Categories:<\/strong> 4 tiles \u2014 Women, Men, Sale, New Arrivals (square images with text overlay)<br>\n <strong>Products:<\/strong> 4-column grid, 8 best-sellers, clean white cards, product image + name + price + rating<br>\n <strong>Mid-Banner:<\/strong> \"Free Shipping + Returns on All Orders\" with lifestyle photo background<br>\n <strong>Social Proof:<\/strong> Instagram feed 4\u00d72 grid, \"#EverlaneStyle\" hashtag, \"Shop the Look\" tags<br>\n <strong>Colors:<\/strong> Black, white, beige, minimal accent colors<br>\n <strong>Typography:<\/strong> Serif headings (Lora), sans-serif body (Inter)\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: Electronics Store (Tech-Forward)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"TechHub Pro\"<br>\n <strong>Hero:<\/strong> Carousel (3 slides) \u2014 Slide 1: New laptop launch with specs overlay + \"Pre-Order Now\", Slide 2: Holiday sale banner, Slide 3: Trade-in program<br>\n <strong>Categories:<\/strong> 6 tiles \u2014 Laptops, Smartphones, Audio, Wearables, Gaming, Accessories<br>\n <strong>Products:<\/strong> 4-column grid, \"Featured Deals\" section, red \"Save $200\" badges, star ratings + review count<br>\n <strong>Trust Bar:<\/strong> \"Free 2-Day Shipping\" \/ \"30-Day Returns\" \/ \"Price Match Guarantee\" \/ \"Expert Support\" \u2014 icons + text<br>\n <strong>Comparison Tool:<\/strong> \"Compare Products\" sticky button sidebar<br>\n <strong>Colors:<\/strong> Electric blue primary, black, white, neon green accents<br>\n <strong>Typography:<\/strong> Modern sans-serif (Montserrat), tech-inspired\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: Beauty & Cosmetics (Luxurious)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"Glow Beauty Co.\"<br>\n <strong>Hero:<\/strong> Video background (skincare routine timelapse), headline: \"Reveal Your Natural Radiance\" \u2014 CTA: \"Discover Your Routine\"<br>\n <strong>Categories:<\/strong> 5 circular image tiles \u2014 Skincare, Makeup, Haircare, Fragrance, Gift Sets<br>\n <strong>Products:<\/strong> 3-column grid (larger product images), hover reveals \"Quick Shop\" button, ingredient callouts (\"Vegan\", \"Cruelty-Free\")<br>\n <strong>Quiz CTA:<\/strong> Banner \u2014 \"Find Your Perfect Foundation\" with interactive quiz link<br>\n <strong>Testimonials:<\/strong> Before\/after photos, 5-star reviews, beauty influencer endorsements<br>\n <strong>Colors:<\/strong> Rose gold, blush pink, ivory, soft gray<br>\n <strong>Typography:<\/strong> Elegant serif (Playfair Display), script accents\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Artisan\/Handmade Marketplace (Warm & Authentic)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"Crafted Collective\"<br>\n <strong>Hero:<\/strong> Split layout \u2014 Left: lifestyle photo of handmade pottery, Right: \"Support Local Artisans \u2014 Unique, Handcrafted Goods\" + \"Shop Collections\"<br>\n <strong>Categories:<\/strong> 4 image tiles with illustrated icons \u2014 Home Decor, Jewelry, Art Prints, Ceramics<br>\n <strong>Products:<\/strong> Masonry grid (varying heights), \"Meet the Maker\" label with artisan photo, hover reveals story snippet<br>\n <strong>Story Banner:<\/strong> \"Every Purchase Supports Small Businesses\" with artisan portraits<br>\n <strong>Trust Badges:<\/strong> \"Ethically Made\" \/ \"Small-Batch Production\" \/ \"Carbon-Neutral Shipping\"<br>\n <strong>Colors:<\/strong> Terracotta, sage green, cream, warm wood tones<br>\n <strong>Typography:<\/strong> Handwritten script (Pacifico) for headings, clean sans (Lato) for body\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: Conversion Research & Wireframing<\/h4>\n <p><strong>Prompt:<\/strong> \"Conduct competitive analysis for <span class=\"placeholder\">[product category]<\/span> e-commerce sites. Identify: (1) Common homepage sections (hero, categories, products, testimonials), (2) CTA placements and copy, (3) Trust indicators used, (4) Mobile vs. desktop priorities. Create low-fidelity wireframe for homepage showing 10 key sections in order: Header \u2192 Hero \u2192 Categories \u2192 Featured Products \u2192 Promo Banner \u2192 New Arrivals \u2192 Testimonials \u2192 Instagram Feed \u2192 Value Props \u2192 Footer.\"<\/p>\n <p><strong>Expected Output:<\/strong> Wireframe with content hierarchy and conversion optimization notes, ready for visual design.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: High-Fidelity Design Execution<\/h4>\n <p><strong>Prompt:<\/strong> \"Design high-fidelity e-commerce homepage in <span class=\"placeholder\">[Figma\/Sketch]<\/span> for <span class=\"placeholder\">[store name]<\/span> selling <span class=\"placeholder\">[product category]<\/span>. Apply wireframe structure. Brand colors: <span class=\"placeholder\">[HEX codes]<\/span>. Typography: <span class=\"placeholder\">[fonts]<\/span>. Include: (1) Hero with headline + CTA, (2) 6 category tiles, (3) 12 product cards in 4-column grid with hover states, (4) Testimonial section, (5) Footer with newsletter signup. Design 3 breakpoints: 1440px desktop, 768px tablet, 375px mobile.\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete homepage design with all sections, responsive layouts, and polished visuals.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Interactive Prototype & Optimization<\/h4>\n <p><strong>Prompt:<\/strong> \"Create interactive prototype with: (1) Clickable product cards \u2192 Product detail page, (2) Add-to-cart animation with cart icon update, (3) Category tile navigation, (4) Sticky header on scroll, (5) Mobile hamburger menu. Add conversion features: Quick-view modal for products, exit-intent popup (10% off), free shipping progress bar in cart. Export developer handoff: CSS color variables, spacing tokens (8px grid), component specs, optimized image assets.\"<\/p>\n <p><strong>Expected Output:<\/strong> Fully interactive prototype with conversion optimizations and complete developer documentation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. 5-Second Test with Real Users<\/strong>\n Show homepage for 5 seconds. Ask: \"What does this store sell?\" If they can't answer, your hero\/value prop is unclear. Simplify headline.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. Mobile Checkout Test on Device<\/strong>\n Complete a purchase on actual mobile device. If checkout takes >2 minutes or requires 10+ taps, simplify. Friction = abandoned carts.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Page Speed Reality Check<\/strong>\n Test with Google PageSpeed Insights or GTmetrix. Target: <3 seconds. If slower, compress images (use WebP), lazy-load below fold, minimize scripts.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. A\/B Test CTAs<\/strong>\n Test button copy: \"Shop Now\" vs. \"Browse Collection\" vs. \"Explore\". Test colors (brand color vs. high-contrast). Small changes = big conversion lift.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Heatmap Analysis (Post-Launch)<\/strong>\n Use Hotjar\/Crazy Egg to see where users click, how far they scroll. Move important content (products, CTAs) into hot zones. Kill dead sections.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Cart Abandonment Audit<\/strong>\n If 70%+ abandon cart, investigate: Hidden shipping costs? Forced account creation? Complex form? Fix friction points = recover sales.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,600+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>E-commerce Homepage – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\uded2 E-commerce Homepage High-Converting Online Store Homepage with Product Discovery & Checkout Flow \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 45\u201365 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ HTML\/CSS \/ Webflow \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic GPT-4o Claude 3.5 Gemini…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4571","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4571"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4571\/revisions"}],"predecessor-version":[{"id":4731,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4571\/revisions\/4731"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n E-commerce Homepage - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\uded2 E-commerce Homepage<\/h2>\n <p>High-Converting Online Store Homepage with Product Discovery & Checkout Flow<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 45\u201365 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ HTML\/CSS \/ Webflow<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Design a high-converting e-commerce homepage for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf Store Identity & Context:<\/strong><\/p>\n <p>\u2022 Store Name: <span class=\"placeholder\">[Brand Name]<\/span><\/p>\n <p>\u2022 Product Category: <span class=\"placeholder\">[Fashion & Apparel \/ Electronics \/ Home & Garden \/ Beauty & Cosmetics \/ Food & Beverage \/ Sports & Outdoors \/ Books \/ Handmade\/Artisan]<\/span><\/p>\n <p>\u2022 Target Audience: <span class=\"placeholder\">[Demographics, shopping behavior, price sensitivity]<\/span><\/p>\n <p>\u2022 Brand Positioning: <span class=\"placeholder\">[Luxury \/ Affordable \/ Eco-friendly \/ Tech-forward \/ Minimalist \/ Trendy]<\/span><\/p>\n <p>\u2022 Unique Value Proposition: <span class=\"placeholder\">[Free shipping \/ Best prices \/ Curated selection \/ Sustainable \/ Fast delivery]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfd7\ufe0f Homepage Structure (10 Key Sections):<\/strong><\/p>\n <p><strong>1. Header\/Navigation (Sticky Top Bar)<\/strong><\/p>\n <p>\u2022 Logo: <span class=\"placeholder\">[Position: left \/ centered, Size: 120\u2013150px width]<\/span><\/p>\n <p>\u2022 Main Navigation: <span class=\"placeholder\">[5\u20138 categories: Shop \/ New Arrivals \/ Sale \/ About \/ Contact]<\/span><\/p>\n <p>\u2022 Search Bar: <span class=\"placeholder\">[Prominent, center or right side, autocomplete suggestions, \"Search products...\" placeholder]<\/span><\/p>\n <p>\u2022 Utility Icons: <span class=\"placeholder\">[Account\/Login, Wishlist (heart icon), Cart with item count badge]<\/span><\/p>\n <p>\u2022 Promo Banner Above Header: <span class=\"placeholder\">[Optional \u2014 \"Free Shipping Over $50\" \/ \"20% Off Sitewide \u2014 Code: SAVE20\"]<\/span><\/p>\n <br>\n <p><strong>2. Hero Section (Above the Fold)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Full-width image\/video + text overlay \/ Split 50\/50 image-text \/ Carousel with 3\u20135 slides]<\/span><\/p>\n <p>\u2022 Hero Image: <span class=\"placeholder\">[Lifestyle photo showing product in use \/ Product close-up \/ Brand story visual]<\/span><\/p>\n <p>\u2022 Headline: <span class=\"placeholder\">[Benefit-driven, 5\u20138 words: \"Elevate Your Style with Timeless Pieces\"]<\/span><\/p>\n <p>\u2022 Subheadline: <span class=\"placeholder\">[Supporting text, 10\u201315 words, clarifies offer]<\/span><\/p>\n <p>\u2022 CTA Button: <span class=\"placeholder\">[Primary action: \"Shop Now\" \/ \"Explore Collection\" \/ \"Get Started\", prominent color, 48px height]<\/span><\/p>\n <p>\u2022 Auto-Play Carousel: <span class=\"placeholder\">[Yes\/No \u2014 if yes, 5-second interval, pause on hover, navigation dots]<\/span><\/p>\n <br>\n <p><strong>3. Featured Categories (Quick Navigation)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[3\u20136 category tiles in horizontal grid]<\/span><\/p>\n <p>\u2022 Category Tile: <span class=\"placeholder\">[Image background, category name overlay, hover effect (zoom\/darken)]<\/span><\/p>\n <p>\u2022 Categories: <span class=\"placeholder\">[Women \/ Men \/ Accessories \/ New Arrivals \/ Sale \/ Best Sellers]<\/span><\/p>\n <p>\u2022 Tile Size: <span class=\"placeholder\">[Equal sizes OR hero tile (larger) + smaller tiles]<\/span><\/p>\n <br>\n <p><strong>4. Featured\/Best-Selling Products<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"Best Sellers\" \/ \"Trending Now\" \/ \"Customer Favorites\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4-column grid on desktop \/ 2-column on tablet \/ 1-column on mobile]<\/span><\/p>\n <p>\u2022 Product Card Components: <span class=\"placeholder\">[Product image (square ratio), Name, Price, \"Add to Cart\" button, Star rating (optional), \"Sale\" badge (if discounted)]<\/span><\/p>\n <p>\u2022 Hover Effects: <span class=\"placeholder\">[Secondary image on hover \/ Quick-view modal \/ Add-to-cart button appears]<\/span><\/p>\n <p>\u2022 Show: <span class=\"placeholder\">[8\u201312 products, \"View All\" link at bottom]<\/span><\/p>\n <br>\n <p><strong>5. Promotional Banner (Mid-Page CTA)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Full-width image banner \/ Split image-text \/ Video background]<\/span><\/p>\n <p>\u2022 Message: <span class=\"placeholder\">[\"Limited Time: 30% Off Spring Collection\" \/ \"Join Our Loyalty Program \u2014 Earn Points on Every Purchase\"]<\/span><\/p>\n <p>\u2022 CTA Button: <span class=\"placeholder\">[\"Shop Sale\" \/ \"Learn More\" \/ \"Sign Up Now\"]<\/span><\/p>\n <p>\u2022 Design Style: <span class=\"placeholder\">[Bold typography, high contrast, urgency indicators (countdown timer optional)]<\/span><\/p>\n <br>\n <p><strong>6. New Arrivals \/ Seasonal Collection<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"New Arrivals\" \/ \"Spring 2026 Collection\" \/ \"Just Dropped\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[Horizontal scrollable carousel OR 4-column grid]<\/span><\/p>\n <p>\u2022 Product Cards: <span class=\"placeholder\">[Same structure as Best Sellers, \"New\" badge]<\/span><\/p>\n <p>\u2022 Show: <span class=\"placeholder\">[8\u201312 products]<\/span><\/p>\n <br>\n <p><strong>7. Social Proof \/ Testimonials<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"What Our Customers Say\" \/ \"Loved by Thousands\" \/ \"Real Reviews\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[3-column testimonial cards \/ Carousel \/ Masonry grid]<\/span><\/p>\n <p>\u2022 Testimonial Card: <span class=\"placeholder\">[Customer photo\/avatar, Name, Star rating, Review text (2\u20133 sentences), Product image (optional)]<\/span><\/p>\n <p>\u2022 Trust Badges: <span class=\"placeholder\">[Below testimonials \u2014 \"5000+ 5-Star Reviews\" \/ Trustpilot logo \/ \"As Seen In\" media logos]<\/span><\/p>\n <br>\n <p><strong>8. Instagram Feed \/ User-Generated Content<\/strong><\/p>\n <p>\u2022 Section Title: <span class=\"placeholder\">[\"Shop Our Instagram\" \/ \"#YourBrandName\" \/ \"Join the Community\"]<\/span><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4\u00d72 grid of Instagram posts \/ Carousel of tagged photos]<\/span><\/p>\n <p>\u2022 Post Display: <span class=\"placeholder\">[Square images, Instagram icon overlay on hover, click to view full post or tag to shop]<\/span><\/p>\n <p>\u2022 CTA: <span class=\"placeholder\">[\"Follow Us on Instagram\" button]<\/span><\/p>\n <br>\n <p><strong>9. Value Propositions \/ Trust Indicators<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4-column icon grid \/ Horizontal banner with icons]<\/span><\/p>\n <p>\u2022 Icons + Text: <span class=\"placeholder\">[Free Shipping (truck icon), Easy Returns (return arrow), Secure Checkout (lock icon), 24\/7 Support (chat icon)]<\/span><\/p>\n <p>\u2022 Style: <span class=\"placeholder\">[Simple line icons, short headline, 1-line description]<\/span><\/p>\n <br>\n <p><strong>10. Footer (Comprehensive)<\/strong><\/p>\n <p>\u2022 Layout: <span class=\"placeholder\">[4-column grid on desktop \/ Stacked on mobile]<\/span><\/p>\n <p>\u2022 Column 1 \u2014 About: <span class=\"placeholder\">[Logo, Short brand description, Social media icons]<\/span><\/p>\n <p>\u2022 Column 2 \u2014 Shop: <span class=\"placeholder\">[Links: All Products, New Arrivals, Sale, Gift Cards]<\/span><\/p>\n <p>\u2022 Column 3 \u2014 Customer Service: <span class=\"placeholder\">[Links: Contact, Shipping Info, Returns, FAQ, Size Guide]<\/span><\/p>\n <p>\u2022 Column 4 \u2014 Newsletter Signup: <span class=\"placeholder\">[Email input field, \"Subscribe\" button, \"Get 10% off your first order\"]<\/span><\/p>\n <p>\u2022 Bottom Bar: <span class=\"placeholder\">[Copyright text, Payment method icons (Visa, Mastercard, PayPal, etc.), Legal links (Privacy, Terms)]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Visual Design System:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Brand Color: <span class=\"placeholder\">[HEX code \u2014 CTAs, accents, links]<\/span><\/p>\n <p>\u2022 Secondary Color: <span class=\"placeholder\">[HEX code \u2014 secondary buttons, badges]<\/span><\/p>\n <p>\u2022 Background: <span class=\"placeholder\">[White #ffffff OR light gray #f9fafb]<\/span><\/p>\n <p>\u2022 Text Colors: <span class=\"placeholder\">[Headings: #1f2937 dark gray \/ Body: #4b5563 medium gray \/ Muted: #9ca3af light gray]<\/span><\/p>\n <p>\u2022 Sale\/Discount Color: <span class=\"placeholder\">[Red #ef4444 OR orange #f59e0b]<\/span><\/p>\n <br>\n <p><strong>2. Typography<\/strong><\/p>\n <p>\u2022 Heading Font: <span class=\"placeholder\">[Playfair Display \/ Montserrat \/ Lora \u2014 serif or sans-serif depending on brand]<\/span><\/p>\n <p>\u2022 Body Font: <span class=\"placeholder\">[Inter \/ Open Sans \/ Roboto \u2014 clean sans-serif]<\/span><\/p>\n <p>\u2022 Font Sizes: <span class=\"placeholder\">[Hero H1: 48\u201364px \/ Section H2: 32\u201340px \/ Product name: 16\u201318px \/ Body: 16px \/ Small: 14px]<\/span><\/p>\n <br>\n <p><strong>3. Product Card Design<\/strong><\/p>\n <p>\u2022 Image Aspect Ratio: <span class=\"placeholder\">[1:1 square \/ 3:4 portrait \/ 4:3 landscape]<\/span><\/p>\n <p>\u2022 Image Hover Effect: <span class=\"placeholder\">[Zoom in \/ Fade to second image \/ Quick-view overlay]<\/span><\/p>\n <p>\u2022 Sale Badge: <span class=\"placeholder\">[Top-left corner, red circle, \"Sale\" OR \"-30%\" text]<\/span><\/p>\n <p>\u2022 Wishlist Icon: <span class=\"placeholder\">[Top-right corner, heart outline, fill on click]<\/span><\/p>\n <p>\u2022 Add to Cart: <span class=\"placeholder\">[Button below price \/ Icon-only bottom-right \/ Appears on hover]<\/span><\/p>\n <p>\u2022 Spacing: <span class=\"placeholder\">[16px padding inside card, 24px gap between cards]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Responsive Design:<\/strong><\/p>\n <p>\u2022 Desktop (1440px+): <span class=\"placeholder\">[4-column product grid, full header, side-by-side sections]<\/span><\/p>\n <p>\u2022 Tablet (768\u20131024px): <span class=\"placeholder\">[2\u20133 column grid, condensed header, stacked sections]<\/span><\/p>\n <p>\u2022 Mobile (< 768px): <span class=\"placeholder\">[1-column grid, hamburger menu, touch-optimized buttons (48px minimum), sticky \"Add to Cart\" bar on product pages]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udd27 Conversion Optimization Features:<\/strong><\/p>\n <p>\u2022 Quick Add to Cart: <span class=\"placeholder\">[Add products from homepage without leaving page]<\/span><\/p>\n <p>\u2022 Persistent Cart Icon: <span class=\"placeholder\">[Always visible with item count, smooth slide-out cart drawer]<\/span><\/p>\n <p>\u2022 Urgency Indicators: <span class=\"placeholder\">[Low stock warnings: \"Only 3 left!\" \/ Countdown timer for sales]<\/span><\/p>\n <p>\u2022 Exit-Intent Popup: <span class=\"placeholder\">[Offer discount when user moves to close tab: \"Wait! Get 10% off your first order\"]<\/span><\/p>\n <p>\u2022 Free Shipping Threshold: <span class=\"placeholder\">[Progress bar in cart: \"Add $15 more for free shipping\"]<\/span><\/p>\n <p>\u2022 Product Filters: <span class=\"placeholder\">[Size, Color, Price range, Category \u2014 sidebar OR top bar]<\/span><\/p>\n <p>\u2022 Wishlist Sync: <span class=\"placeholder\">[Save for later across devices, email reminders for price drops]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility & Performance:<\/strong><\/p>\n <p>\u2022 Page Load Speed: <span class=\"placeholder\">[Target <3 seconds \u2014 optimize images (WebP), lazy-load below fold, minify CSS\/JS]<\/span><\/p>\n <p>\u2022 Alt Text: <span class=\"placeholder\">[Descriptive alt text for all product images]<\/span><\/p>\n <p>\u2022 Keyboard Navigation: <span class=\"placeholder\">[Tab through all interactive elements, Enter to activate]<\/span><\/p>\n <p>\u2022 Color Contrast: <span class=\"placeholder\">[WCAG AA \u2014 4.5:1 for text, 3:1 for UI elements]<\/span><\/p>\n <p>\u2022 Mobile Touch Targets: <span class=\"placeholder\">[Minimum 44\u00d744px for buttons, adequate spacing to prevent mis-taps]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. Complete homepage design (desktop, tablet, mobile breakpoints)<\/p>\n <p>2. Product page template design<\/p>\n <p>3. Cart\/checkout flow wireframes<\/p>\n <p>4. Component library (buttons, cards, forms, navigation)<\/p>\n <p>5. Interactive prototype with clickable navigation<\/p>\n <p>6. Design system documentation (colors, typography, spacing)<\/p>\n <p>7. Developer handoff assets (icons, images, CSS specs)<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a conversion-optimized e-commerce homepage that balances beautiful design with sales psychology, fast performance, and seamless user experience across all devices.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Above-the-Fold Priority<\/h4>\n <p>First screen = first impression. Hero must communicate brand + value prop instantly. Clear CTA visible without scrolling. 5-second rule: visitor should know what you sell immediately.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Friction Reduction<\/h4>\n <p>Every click is a chance to lose the sale. Quick add-to-cart from homepage. Guest checkout option. Minimize form fields. Fast = conversions.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Social Proof Hierarchy<\/h4>\n <p>Trust = sales. Show reviews, ratings, \"X customers bought this\", UGC from Instagram. Place strategically near CTAs. Testimonials > brand claims.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Scarcity & Urgency<\/h4>\n <p>FOMO drives action. \"Only 3 left\" \/ countdown timers \/ \"Sale ends tonight\". Use ethically \u2014 real scarcity only. Fake urgency destroys trust.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Mobile-First Revenue<\/h4>\n <p>60%+ of e-commerce traffic = mobile. Design mobile experience first, enhance for desktop. Thumb-friendly buttons, simplified checkout, fast load times.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Visual Hierarchy for Scanning<\/h4>\n <p>Users scan, not read. Use size, color, contrast to guide eyes: Hero \u2192 Categories \u2192 Products \u2192 CTA. White space prevents overwhelm.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: Fashion & Apparel Store (Minimalist)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"Everlane Style Co.\"<br>\n <strong>Hero:<\/strong> Full-width image of model in neutral outfit, headline: \"Timeless Essentials, Made Better\" \u2014 CTA: \"Shop Women\" \/ \"Shop Men\"<br>\n <strong>Categories:<\/strong> 4 tiles \u2014 Women, Men, Sale, New Arrivals (square images with text overlay)<br>\n <strong>Products:<\/strong> 4-column grid, 8 best-sellers, clean white cards, product image + name + price + rating<br>\n <strong>Mid-Banner:<\/strong> \"Free Shipping + Returns on All Orders\" with lifestyle photo background<br>\n <strong>Social Proof:<\/strong> Instagram feed 4\u00d72 grid, \"#EverlaneStyle\" hashtag, \"Shop the Look\" tags<br>\n <strong>Colors:<\/strong> Black, white, beige, minimal accent colors<br>\n <strong>Typography:<\/strong> Serif headings (Lora), sans-serif body (Inter)\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: Electronics Store (Tech-Forward)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"TechHub Pro\"<br>\n <strong>Hero:<\/strong> Carousel (3 slides) \u2014 Slide 1: New laptop launch with specs overlay + \"Pre-Order Now\", Slide 2: Holiday sale banner, Slide 3: Trade-in program<br>\n <strong>Categories:<\/strong> 6 tiles \u2014 Laptops, Smartphones, Audio, Wearables, Gaming, Accessories<br>\n <strong>Products:<\/strong> 4-column grid, \"Featured Deals\" section, red \"Save $200\" badges, star ratings + review count<br>\n <strong>Trust Bar:<\/strong> \"Free 2-Day Shipping\" \/ \"30-Day Returns\" \/ \"Price Match Guarantee\" \/ \"Expert Support\" \u2014 icons + text<br>\n <strong>Comparison Tool:<\/strong> \"Compare Products\" sticky button sidebar<br>\n <strong>Colors:<\/strong> Electric blue primary, black, white, neon green accents<br>\n <strong>Typography:<\/strong> Modern sans-serif (Montserrat), tech-inspired\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: Beauty & Cosmetics (Luxurious)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"Glow Beauty Co.\"<br>\n <strong>Hero:<\/strong> Video background (skincare routine timelapse), headline: \"Reveal Your Natural Radiance\" \u2014 CTA: \"Discover Your Routine\"<br>\n <strong>Categories:<\/strong> 5 circular image tiles \u2014 Skincare, Makeup, Haircare, Fragrance, Gift Sets<br>\n <strong>Products:<\/strong> 3-column grid (larger product images), hover reveals \"Quick Shop\" button, ingredient callouts (\"Vegan\", \"Cruelty-Free\")<br>\n <strong>Quiz CTA:<\/strong> Banner \u2014 \"Find Your Perfect Foundation\" with interactive quiz link<br>\n <strong>Testimonials:<\/strong> Before\/after photos, 5-star reviews, beauty influencer endorsements<br>\n <strong>Colors:<\/strong> Rose gold, blush pink, ivory, soft gray<br>\n <strong>Typography:<\/strong> Elegant serif (Playfair Display), script accents\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Artisan\/Handmade Marketplace (Warm & Authentic)<\/h4>\n <div class=\"preview-content\">\n <strong>Brand:<\/strong> \"Crafted Collective\"<br>\n <strong>Hero:<\/strong> Split layout \u2014 Left: lifestyle photo of handmade pottery, Right: \"Support Local Artisans \u2014 Unique, Handcrafted Goods\" + \"Shop Collections\"<br>\n <strong>Categories:<\/strong> 4 image tiles with illustrated icons \u2014 Home Decor, Jewelry, Art Prints, Ceramics<br>\n <strong>Products:<\/strong> Masonry grid (varying heights), \"Meet the Maker\" label with artisan photo, hover reveals story snippet<br>\n <strong>Story Banner:<\/strong> \"Every Purchase Supports Small Businesses\" with artisan portraits<br>\n <strong>Trust Badges:<\/strong> \"Ethically Made\" \/ \"Small-Batch Production\" \/ \"Carbon-Neutral Shipping\"<br>\n <strong>Colors:<\/strong> Terracotta, sage green, cream, warm wood tones<br>\n <strong>Typography:<\/strong> Handwritten script (Pacifico) for headings, clean sans (Lato) for body\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: Conversion Research & Wireframing<\/h4>\n <p><strong>Prompt:<\/strong> \"Conduct competitive analysis for <span class=\"placeholder\">[product category]<\/span> e-commerce sites. Identify: (1) Common homepage sections (hero, categories, products, testimonials), (2) CTA placements and copy, (3) Trust indicators used, (4) Mobile vs. desktop priorities. Create low-fidelity wireframe for homepage showing 10 key sections in order: Header \u2192 Hero \u2192 Categories \u2192 Featured Products \u2192 Promo Banner \u2192 New Arrivals \u2192 Testimonials \u2192 Instagram Feed \u2192 Value Props \u2192 Footer.\"<\/p>\n <p><strong>Expected Output:<\/strong> Wireframe with content hierarchy and conversion optimization notes, ready for visual design.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: High-Fidelity Design Execution<\/h4>\n <p><strong>Prompt:<\/strong> \"Design high-fidelity e-commerce homepage in <span class=\"placeholder\">[Figma\/Sketch]<\/span> for <span class=\"placeholder\">[store name]<\/span> selling <span class=\"placeholder\">[product category]<\/span>. Apply wireframe structure. Brand colors: <span class=\"placeholder\">[HEX codes]<\/span>. Typography: <span class=\"placeholder\">[fonts]<\/span>. Include: (1) Hero with headline + CTA, (2) 6 category tiles, (3) 12 product cards in 4-column grid with hover states, (4) Testimonial section, (5) Footer with newsletter signup. Design 3 breakpoints: 1440px desktop, 768px tablet, 375px mobile.\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete homepage design with all sections, responsive layouts, and polished visuals.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Interactive Prototype & Optimization<\/h4>\n <p><strong>Prompt:<\/strong> \"Create interactive prototype with: (1) Clickable product cards \u2192 Product detail page, (2) Add-to-cart animation with cart icon update, (3) Category tile navigation, (4) Sticky header on scroll, (5) Mobile hamburger menu. Add conversion features: Quick-view modal for products, exit-intent popup (10% off), free shipping progress bar in cart. Export developer handoff: CSS color variables, spacing tokens (8px grid), component specs, optimized image assets.\"<\/p>\n <p><strong>Expected Output:<\/strong> Fully interactive prototype with conversion optimizations and complete developer documentation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. 5-Second Test with Real Users<\/strong>\n Show homepage for 5 seconds. Ask: \"What does this store sell?\" If they can't answer, your hero\/value prop is unclear. Simplify headline.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. Mobile Checkout Test on Device<\/strong>\n Complete a purchase on actual mobile device. If checkout takes >2 minutes or requires 10+ taps, simplify. Friction = abandoned carts.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Page Speed Reality Check<\/strong>\n Test with Google PageSpeed Insights or GTmetrix. Target: <3 seconds. If slower, compress images (use WebP), lazy-load below fold, minimize scripts.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. A\/B Test CTAs<\/strong>\n Test button copy: \"Shop Now\" vs. \"Browse Collection\" vs. \"Explore\". Test colors (brand color vs. high-contrast). Small changes = big conversion lift.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Heatmap Analysis (Post-Launch)<\/strong>\n Use Hotjar\/Crazy Egg to see where users click, how far they scroll. Move important content (products, CTAs) into hot zones. Kill dead sections.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Cart Abandonment Audit<\/strong>\n If 70%+ abandon cart, investigate: Hidden shipping costs? Forced account creation? Complex form? Fix friction points = recover sales.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,600+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>E-commerce Homepage – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\uded2 E-commerce Homepage High-Converting Online Store Homepage with Product Discovery & Checkout Flow \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 45\u201365 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ HTML\/CSS \/ Webflow \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic GPT-4o Claude 3.5 Gemini…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4571","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4571"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4571\/revisions"}],"predecessor-version":[{"id":4731,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4571\/revisions\/4731"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}