About this skill

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.

Editor's note

Written for AI Agent Hub. This is separate from the publisher description above.

What problem it solves

You have photos and selling copy and you need a detail page with a gallery and a mobile layout, without hand-building the same HTML for every SKU. The skill's job is that layout. The name on the card is misspelled in the canonical id. Judge the prompt, not the typo.

Who it is for

A merchant or a developer who already has rights to the images and the claims, and who will host the HTML themselves. You can read HTML well enough to delete a sentence.

Who should skip it

Skip it if you have no copy and want the skill to invent benefits, certifications, or "customers love this." That is an advertising problem, not a CSS problem. The design category intro says to search the output for claims you did not supply. Skip it if the images are unreleased and the agent uses a hosted model your policy forbids. Skip it if you need a slide deck in an office suite. That is office efficiency.

First three steps

Prepare one product, two images, and three sentences of true copy. No reviews.
Generate the page and search the HTML for words that were not in the three sentences.
Open it on a narrow viewport. If the layout works and the copy is unchanged, keep the skill for the next SKU. If it added a testimonial, delete the file and the skill.

Alternatives on this site

Content-creation skills draft the sentences. This one should lay them out. Do not ask it to do market research. A web-tool plugin is a Harness feature, not a storefront builder.

Questions

Will the page be accessible and fast? Not automatically. You still owe alt text and a check that images are not huge. The skill did not run Lighthouse for you.

Can I publish the HTML unchanged? Only after you read it. Generated pages pick up stray claims.

Screenshots

Use Cases

E-commerce operations receives product shots, scene images, and 3-6 selling points, then quickly generates a previewable HTML detail page and tests color themes.
A cross-border seller builds a comparison page for multiple SKUs, switching products with top tabs and setting different glow accents per model.
A content editor turns a product seeding image brief into a web version, edits copy inline, and exports a JPG for social publishing.
A brand designer delivers an interactive client demo as a single-file HTML page without CDN dependencies, then swaps local assets in the console.

Best For

E-commerce operations owners responsible for Taobao/Shopify detail pages who need to turn images and copy into deliverable HTML quickly.
Marketing staff producing product catalogs or brochures who need multi-product carousels, theme switching, and JPG export.
Frontend engineers delivering brand website pages who need a single-file page with inline CSS/JS and local HTTP preview iteration.
Content editors preparing product seeding visuals who need inline copy edits, image replacement, and PDF/JPG export.

Related Skills

PDF to Speech

@user_cac68f26/pdf-to-speech

Extract text from PDF/DOCX/TXT, detect chapters, and synthesize MP3 with Edge TTS, auto-segmentation, and CLI.

Design & Media 2026.08.29 ↓ 271

🎨

Poster Layout

@user_3c6cb52e/self-ent-art-poster-layout

Text-only guidance for poster and flyer design: message priority, visual hierarchy, grids, whitespace, the 60-30-10 color rule, and hands-on A3 layout practice.

Design & Media 2026.08.29 ↓ 252

GPT-Image-2 Fast Image Generator

@user_a125fe92/gpt-image-2-fast

Generate images via an OpenAI-compatible gpt-image-2 API in one python -c flow—decode b64_json to PNG with credentials read only from environment variables.

Design & Media 2026.08.30 ↓ 272