产品详情页生成器 Pro

解决的问题

当产品有图、有卖点文案，但缺少可直接交付的详情页时，手工排版 HTML 往往要处理多图布局、移动端适配、动效、配色和导出。product-detail-tech-web 把这类重复工作收敛为一条生成流程：输入产品主图、细节图、场景图和卖点，输出可预览、可微调、可导出的单文件 HTML。

工作方式

核心能力围绕电商详情页展开：

• 多产品轮播：顶部选项卡切换产品，支持滑动、淡入淡出、缩放等动效
• 设计控制台：调整动效、色彩主题、背景、图标，并点击替换本地图片
• 在线文字替换：修改标题、卖点、规格等可见文本，无需改代码
• 导出能力：调用浏览器打印生成 PDF，用 html2canvas 导出 JPG，并给出 PSD 图层规格与本地 Python 脚本

关键步骤是先确认素材目录和文案结构，再分析图片外观、场景与定位，随后生成内联 CSS/JS 的响应式页面，最后通过本地 HTTP 服务预览并迭代。页面强调单文件、无外部 CDN 依赖，图片使用相对路径或本地路径引用。

注意点

它适合已有产品图片和卖点文案的详情页场景，不替代品牌视觉设计。本地双击打开 HTML 可能因跨域限制导致图片不显示，建议通过本地服务访问。PSD 导出依赖本地 Python 环境，且文字编辑默认保存在内存中，刷新后可能需要下载修改后的 HTML 持久化。