Prompt pack · 25 prompts
Build better product pages, carts, pricing layouts, checkout flows, and storefront UI faster with AI.
Instant download after checkout. All sales are final — every prompt is listed below.
What's inside
Every one of these is in the download as a full, copy-paste prompt.
A premium product card featuring a drag-to-rotate 360-degree viewer powered by CSS 3D transforms, plus a smooth hover zoom effect that lets shoppers inspect every detail before adding to cart.
Best forPremium product showcases, fashion, electronics
A smooth slide-out cart drawer that animates in from the right edge, complete with lazy-loaded upsell recommendations that appear only when the cart is open and scrolled — maximizing average order value without slowing the page.
Best forMini carts, AOV boosts, cross-sell funnels
A modern 3-tier pricing table with frosted glassmorphism panels, each with varying opacity and blur, plus a custom yearly/monthly toggle that smoothly animates price changes using requestAnimationFrame.
Best forSaaS pricing, subscription tiers, plan comparisons
A polished multi-step checkout with a horizontal progress tracker that highlights the current step via animated underlines, plus conditional step gating that only unlocks the next stage when required fields validate.
Best forGuided checkouts, conversion flows, multi-stage forms
A product grid with quick-view modals that open via click or keyboard Enter, rendered through React portals above the grid for zero layout shifts and smooth opacity fade transitions.
Best forCategory pages, catalog browsing, fast-preview UX
A clean, minimalist product page with a sticky Add-to-Cart bar that appears after scrolling past product details, plus a live inventory badge that dynamically updates the button state when stock runs low.
Best forDTC brands, minimalist stores, mobile-first PDPs
An interactive size guide modal that accepts user measurements, instantly highlights recommended sizes with colored ring utilities, and shows real-time inline validation to prevent mis-sized purchases and returns.
Best forApparel, footwear, return-rate reduction
A rich review section with a drag-and-drop photo upload zone showing instant previews, plus an accessible star rating input styled with gradient fills and smooth hover transitions.
Best forUGC reviews, social proof, trust signals
A dynamic pricing calculator driven by range sliders with live-updating totals, plus animated progress bars that visualize each option's impact on the base price for instant clarity.
Best forConfigurable products, quotes, build-to-order
A customer-friendly subscription portal with pause and cancel actions that trigger confirmation modals, plus dynamic status badges that reflect active, paused, or canceled states in real time.
Best forSubscription billing, retention UX, self-serve portals
A wide product comparison table with sticky headers that remain visible while scrolling, and color-coded highlights calling out the lowest price and best feature values per column.
Best forSpec comparisons, buyer decision pages, B2B catalogs
A personal wishlist grid with full HTML5 drag-and-drop reordering, local storage persistence so layouts survive refresh, and subtle shadow and scale transforms that provide crisp visual feedback while dragging.
Best forSaved items, customer accounts, gift planning
A horizontal order tracking timeline with colored SVG status icons for completed, current, and upcoming steps, animating progress bar widths and icon fills whenever the order status advances.
Best forShipping updates, post-purchase UX, fulfillment
A refined filter sidebar with custom dual-handle range sliders for min/max price selection and grouped filter checkboxes enhanced with ARIA roles for full screen reader accessibility.
Best forCatalog filtering, faceted search, large inventories
A clickable color swatch selector that dynamically swaps the main product image on selection, complete with accessible focus rings and full keyboard navigation for inclusive UX.
Best forVariant selection, color options, apparel
A checkout page with an inline promo code field that validates asynchronously, showing clear success or error messages and disabling the apply button during validation to prevent duplicate submissions.
Best forDiscount campaigns, promo validation, cart recovery
A drag-and-drop bundle builder powered by SortableJS that lets shoppers assemble custom kits from product tiles, recalculating total bundle price in real time with bold monospace emphasis.
Best forKit builders, AOV lifts, customizable bundles
A minimalist invoice layout with clean grid separation for line items and totals, plus print and PDF download buttons that trigger native print and HTML-to-PDF conversion for instant delivery.
Best forBilling, receipts, B2B invoicing, order records
A horizontally scrollable recommendation carousel with snap-x alignment and clickable pagination dots, personalizing product items based on the shopper's browsing history for higher relevance.
Best forRelated products, personalization, AOV growth
An interactive Leaflet.js store locator map with distance radius slider controls, dynamically updating markers and sidebar listings via debounced handlers for snappy, performant filtering.
Best forOmnichannel retail, local stores, BOPIS, find-in-store
A checkout page offering multiple payment gateways as selectable cards with an animated ring-offset highlight on selection, plus conditional input fields that appear based on the chosen payment method.
Best forGlobal stores, flexible payments, multi-gateway setups
A product page with responsive HTML5 video demonstrations locked to 16:9 aspect ratios, plus collapsible transcript toggles beneath each video with smooth max-height transitions for accessibility and SEO.
Best forDemo-driven products, tutorials, complex items
A subscription box customizer with real-time visual previews of box contents that update as users pick options, plus draggable reorder handles so customers can arrange their curated picks exactly how they want.
Best forSubscription boxes, personalization, curated commerce
A celebratory order confirmation page with on-load confetti animation matching your brand palette, plus social sharing buttons that open pre-filled share dialogs to turn happy buyers into organic promoters.
Best forPost-purchase moments, referral lift, celebration UX
A high-performance product catalog using the Intersection Observer API for infinite scroll and native lazy-loaded images with low-quality image placeholders — smooth browsing at any catalog size.
Best forLarge catalogs, mobile browsing, performance-first stores
Preview
Interactive Product Card with 360-Degree Viewer
Act as a Senior Frontend Architect and UI/UX Expert. The Task: Write the complete, production-ready code for a [Interactive Product Card with 360-Degree Viewer]. Tech Stack & Environment: - Strictly a SINGLE HTML file containing everything. - Use plain HTML5. - Use the Tailwind CSS CDN (<script src="https://cdn.tailwindcss.com"></script>) in the head for all styling. - Use plain Vanilla JavaScript enclosed in <script> tags for any interactivity. - Use inline SVG paths for any icons (do not use external icon libraries). Strict Requirements: - Visual Excellence: It must look like a premium, modern SaaS product (subtle shadows, rounded corners, clean borders, smooth hover/focus effects). - Responsive: Must look perfect on mobile, tablet, and desktop using Tailwind utility classes.
The feature-by-feature build steps continue in the pack — along with the other 24 prompts.
How to use it
Four steps. Zero setup. Every prompt in this pack is engineered to output a complete, single HTML file you can open directly in any browser.
Open any prompt page in this pack and copy the full prompt block to your clipboard.
Paste into Claude, ChatGPT, Gemini, Cursor, or any AI coding tool. No modifications required.
The AI returns a single complete HTML file. Copy the entire code block it produces.
Save it as index.html and double-click to open in your browser. Done.
What you get
Digital download from Gumroad, available right after checkout. Nothing ships.
Best for
Store owners, affiliate marketers, SaaS builders, freelancers, creators, and anyone who wants better storefront and sales-focused website sections without starting from scratch every time.
All sales are final, per the Gumroad listing.
Questions
The pack’s own instructions name Claude, ChatGPT, Gemini, and Cursor. Paste a prompt into any of them, or a similar AI coding tool.
Each prompt asks the AI for one complete HTML file you can save and open in a browser. What comes back depends on the model you use — the pack recommends a strong one.
No build tools. Copy a prompt, paste it into your AI tool, save the HTML it returns, and open it in your browser.
No. All sales are final, as stated on the Gumroad listing. Every prompt in the pack is listed on this page so you can check it covers what you need first.
A prompt pack gives you single copy-paste prompts for individual UI features. The Mission Vault is a structured set of missions, safety rules, and build checklists for building complete dashboards with Claude Code.
More packs
Analytics dashboards, KPI grids, data tables, charts & kanban boards.
See the pack →Bold, high-converting hero sections that grab attention instantly.
See the pack →Navbars, mega-menus, sidebars & mobile navigation that just works.
See the pack →Login screens, account dashboards, settings & role-based UI.
See the pack →Landing pages, lead-gen funnels, popups & CTAs built to sell.
See the pack →Toasts, modals, slide-overs, loaders & animation that feels alive.
See the pack →Blog layouts, article pages, content blocks & editorial UI.
See the pack →Profiles, feeds, comments & community interface components.
See the pack →Footers, bottom bars, newsletter blocks & end-of-page sections.
See the pack →