Product Detail Page Generator Pro

Problem

When product images and selling copy exist but there is no delivery-ready detail page, hand-building HTML can become repetitive: multi-image layout, mobile breakpoints, motion, color themes, and export formats all need consistent handling. product-detail-tech-web turns this into a generation workflow: input product shots, detail shots, scene images, and copy, then output a previewable, editable, exportable single-file HTML page.

How It Works

The skill focuses on product detail pages for e-commerce and brand showcase contexts:
- Multi-product carousel: top tabs switch products with slide, fade, or zoom transitions
- Design console: tune animation, color theme, background, icons, and replace local images
- Inline text editing: update titles, selling points, specs, and other visible copy without editing code
- Export options: use browser print for PDF, html2canvas for JPG, and generate a PSD layer spec plus a local Python script

The workflow starts by confirming asset folders and copy structure, then analyzes image appearance, scene, and product positioning. It generates a responsive page with inline CSS and JavaScript, avoids external CDN dependencies, and references images by relative or local paths. A local HTTP server is used for preview and iteration.

Boundaries

It works best when product images and selling points are already prepared; it is not a substitute for brand visual design. Opening the HTML directly from the local file system can cause image loading issues, so a local server is recommended. PSD output depends on a local Python environment, and in-memory text edits may need to be downloaded as modified HTML to persist.