面向建筑师/设计师，将PDF设计汇报快速转换为防复制、响应式HTML展示页面。
一、产品定位
目标用户：建筑师、室内设计师、景观设计师
核心场景：上传PDF设计汇报 → 提取内容 → AI匹配模板 → 用户预览确认 → 生成HTML
输出物：可部署的静态网站（防复制、防下载、防打印、响应式）
视觉风格：固定DNA（暖米色背景、衬线字体、四角装饰、GSAP动画），仅主题色可变
二、整体架构
PDF上传
▼ ┌─────────────────────────────────────────────┐ │ Step 1: extract_pdf.py │ │ - 提取每页文字 │ │ - 提取每页图片 │ │ - 生成每页PDF原页缩略图 │ │ 输出: extracted/pages.json + images/ + thumbs/│ └─────────────────────────────────────────────┘
▼ ┌─────────────────────────────────────────────┐ │ Step 2: generate_config.py │ │ - 逐页分析内容特征 │ │ - 引用 templates.json 匹配推荐模板 │ │ - 生成文字摘要 │ │ 输出: pages_config.json │ └─────────────────────────────────────────────┘
▼ ┌─────────────────────────────────────────────┐ │ Step 3: build_preview.py │ │ - 为每页生成独立预览HTML │ │ - 浏览器截图生成缩略图 │ │ - 部署临时预览站点 │ │ 输出: preview_site/ (可访问URL) │ └─────────────────────────────────────────────┘
▼ ┌─────────────────────────────────────────────┐ │ Step 4: 用户预览确认（强制步骤） │ │ - 展示交互式预览表格 │ │ - 用户可下拉修改每页模板 │ │ - 用户可发送文本指令修改 │ │ - 用户确认后更新 pages_config.json │ └─────────────────────────────────────────────┘
▼ ┌─────────────────────────────────────────────┐ │ Step 5: build_site.py │ │ - 按用户确认的模板组装slides数据 │ │ - 复制前端模板 + 图片 │ │ - 生成 data.js │ │ 输出: dist/ (完整站点) │ └─────────────────────────────────────────────┘
▼ ┌─────────────────────────────────────────────┐ │ Step 6: deploy_website │ │ - 部署为静态网站 │ │ 输出: 可访问URL │ └─────────────────────────────────────────────┘
三、文件结构
pdf-to-html-slides/
├── SKILL.md # Skill入口：触发条件 + 6步流程
├── references/ │ ├── templates.json # 【单一数据源】8模板自适应规则 │ └── matching-rules.md # PDF内容→模板匹配详细规则
├── scripts/ │ ├── extract_pdf.py # Step 1: PDF提取 │ ├── generate_config.py # Step 2: AI逐页匹配模板 │ ├── build_preview.py # Step 3: 生成交互式预览 │ └── build_site.py # Step 5: 构建最终站点
└── assets/ └── frontend/ # 前端模板（基于原始代码改造） ├── index.html # 入口：加载data.js + 主JS + 防复制 ├── index-DOH3o7du.css # 样式 + 响应式 + 防打印 ├── index-B1kQhas-.js # 8模板组件 + 幻灯片引擎 + 防复制 ├── preview.html # 交互式预览页面 └── data.js.template # 数据占位（运行时替换）