| name | generating-html-from-content |
| description | 将文章或内容转换为专业的中文可视化HTML网页。当需要生成HTML页面、制作可视化内容展示页、将Markdown或文本转换为网页时使用。 |
内容转 HTML 可视化网页
将文章内容转换为专业的中文可视化HTML网页。遵循**“信息守恒，形式重塑”**原则，在保证核心信息完整的前提下，通过视觉设计重新组织内容，创造卓越的阅读体验。
工作流
复制此清单并跟踪进度：
任务进度：
- [ ] 步骤 1：内容解构与重组（核心！）
- [ ] 步骤 2：确定美学方向
- [ ] 步骤 3：建立设计系统（字体/色彩/空间）
- [ ] 步骤 4：视觉化映射
- [ ] 步骤 5：处理格式和细节
- [ ] 步骤 6：生成完整 HTML
步骤 1：内容解构与重组（核心基础）
不要盲目开始设计。 首先必须彻底理解内容并进行结构化重组：
- 提取核心：识别文章的主旨、关键论点、核心数据。
- 重构逻辑：原文可能是线性的，网页应该是立体的。思考如何将长文拆解为模块。
- 识别要素：找出适合可视化的元素（时间线、对比项、流程步骤、金句引用）。
- 信息分层：区分“不得不读的核心信息”和“辅助性延伸信息”。
步骤 2：确定美学方向
基于对内容的理解，选择最能烘托主题的设计风格：
| 决策项 | 说明 |
|---|---|
| Purpose | 页面解决什么问题？目标读者是谁？ |
| Tone | 选择一个鲜明风格（如：专业严谨 vs 活泼创意） |
| Differentiation | 用一句话描述设计的独特之处 |
风格灵感（仅供参考，鼓励创造新风格）：
- 常见流派：极简主义 / 极繁主义 / 复古未来 / 有机自然 / 奢华精致
- 独特质感：编辑杂志风 / 粗野主义 / 装饰艺术 / 工业实用主义 提示：请根据内容特性创造最准确的风格描述，甚至混合风格（如：“赛博朋克禅意”或“高频交易终端风”）。
步骤 3：建立设计系统
字体
禁用：Inter, Roboto, Arial 等系统默认平庸之选。 推荐（不仅限于此）：
- 代码/技术：JetBrains Mono, Fira Code, Space Grotesk
- 人文/编辑：Playfair Display, Crimson Pro, Noto Serif SC
- 现代/独特：Outfit, Syne, Bricolage Grotesque 配对原则：高对比度（如：衬线标题 + 无衬线正文）。可自由选用其他优质 Google Fonts。
色彩
- 禁用：平庸的“蓝+白”或简单的深色模式。
- 要求：由内容基调决定配色。主导色 + 锐利强调色。使用 CSS 变量管理。
空间与动态
- 空间：使用非对称布局、重叠元素、大方的负空间来打破枯燥的网格。
- 动态：必须包含精心编排的加载动画（staggered entrance）和滚动触发效果。
步骤 4：视觉化映射
将重构后的内容匹配最佳展示形式（拒绝枯燥的大段文本）：
| 内容类型 | 转化形式（示例） |
|---|---|
| 对比/比较 | 左右并列卡片、对比表格、交互式切换视图 |
| 流程/步骤 | 垂直/水平时间线、步骤条、带有连线的节点 |
| 数据/事实 | 大号数字统计卡片（Stat Box）、数据可视化图表 |
| 引用/金句 | 杂志风格的大号引用块、带有装饰图标的卡片 |
| 列表/清单 | 网格布局的卡片组、带有自定义图标的列表 |
| 代码/技术 | 带有语法高亮和行号的终端窗口样式 |
| 其他 | 根据内容创造新的可视化组件（如：对话式气泡、交互式地图、文件目录树等） |
步骤 5：格式处理
- 将 Markdown 语法转换为语义化 HTML 组件。
- 若有图片，使用占位符或 Base64（如果用户提供）。
- 清理所有原始格式标记，确保纯净。
步骤 6：输出要求
生成完整的独立 HTML 文件：
- 单文件交付：包含所有 CSS/JS。
- 响应式完备：移动端优先适配。
- 视觉惊艳：首屏必须有视觉冲击力（Hero Section）。
- 无障碍：禁用 JS 时内容仍可读。
核心原则：信息守恒，形式重塑
1. 重新定义“完整性”
完整性 ≠ 100% 照搬原文。 HTML 页面的价值在于信息增益，而非简单的格式转换。
| ❌ 错误做法 | ✅ 正确做法 |
|---|---|
| 逐字逐句复制大段文本 | 提炼核心观点，改写为精炼的短句或卡片 |
| 将 10 个列表项直接罗列 | 将列表归类分组，或转化为视觉图表 |
| 保留原本松散的结构 | 重组逻辑，使其更符合网页阅读习惯 |
| 只有文字和标题 | 增加导读、摘要、侧边栏、交互式元素 |
2. 底线：信息不丢失
在重塑形式时，严禁遗漏关键数据、核心论据或重要结论。 设计是为了让信息更易被接收，而不是为了装饰而牺牲信息密度。