doa-imagelisted

# HTML Beautiful Page → Image 将用户提供的内容（文字、数据、攻略等）生成一张格式精美、排版现代、配色雅致的 HTML 页面，用户确认后将其转为高清 PNG 长图。 ## When to Use - 需要把文字内容变成精美可视化页面 - 生成旅游攻略、活动日程、项目简报等长图 - 制作信息图表、清单、排行榜等 - 任何需要 "内容 → 精美HTML → 图片" 的场景 ## Design Principles ### 风格自动匹配 根据内容主题自动选择最合适的视觉风格： | 内容类型 | 推荐风格 | 配色方向 | |---------|---------|---------| | 旅游/自然 | 清新自然 | 绿色系、蓝绿色系 | | 商务/报告 | 专业简约 | 深蓝、灰色系 | | 美食/生活 | 温暖雅致 | 暖橙、米色系 | | 科技/产品 | 现代极简 | 深色 + 亮色点缀 | | 节日/庆祝 | 活泼明快 | 红金、多彩 | | 文化/历史 | 古典雅致 | 褐色、墨绿 | ### 通用设计规范 1. **字体**：优先使用 `Noto Serif SC`（标题）+ `Noto Sans SC`（正文），通过 Google Fonts 引入 2. **布局**：最大宽度 960px 居中，卡片式布局，圆角 + 柔和阴影 3. **间距**：充足留白，section 间距 40-48px，卡片内边距 24-32px 4. **配色**：使用 CSS 变量统一管理，主色 + 辅色 + 背景 + 文字色 5. **响应式**：添加 `@media (max-width: 600px)` 适配移动端 6. **装饰**：适度使用 emoji 增强表达，避免过度堆砌 7. **Hero 区**：渐变背景 + 标题 + 副标题 + 关键信息，营造视觉焦点 ### HTML 结构模板 ``` Hero 区（渐变背景 + 标题） ├── 总览/概要（grid 卡片） ├── 主体内容（分节卡片 + 时间线/列表） ├── 补充信息（grid 网格展示） ├── 数据/表格（简洁表格） ├── 提示/备注（tip 卡片网格） └── 页脚（点睛之笔） ``` ## Procedure ### Step 1: 理解需求 - 确认用户要生成的内容主题 - 如果内容不够充分，主动询问补充细节 - 确定视觉风格偏好（或自动匹配） ### Step 2: 生成 HTML - 创建单文件 HTML（CSS 内联在 `<style>` 中） - 遵循上述设计规范 - 文件名使用中文描述性名称，如 `湖州五一旅游攻略.html` - 输出目录：`output/{内容描述性名称}/`（每次新任务创建独立子文件夹） ### Step 3: 用户确认 - 提示用户在浏览器中预览 HTML - 等待用户确认或提出修改意见 - 如需修改，迭代调整后再次确认 ### Step 4: 转为图片 用户确认后，使用 html2image + Edge/Chrome 浏览器将 HTML 截图为 PNG。 生成转换脚本并执行： ```python import os from html2image import Html2Image # 自动查找浏览器 for p in [ r"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe", r"C: