今天我们演示如何利用多个 AI 工具协同工作，制作一个包含科普视频的 HTML 教学页面。
先来看一下最终页面的部分效果，在线体验链接：
https://roadheroai.com/科普/为什么蚊子老是追着黑衣服的人跑.html
制作流程
第一步：设计科普页面 HTML 结构 (使用 Deepseek 或 Gemini)
首先，我们需要设计科普页面的基本 HTML 结构和样式。我们可以在 Deepseek 或 Google AI Studio (Gemini) 中输入以下提示词来获取初步的 HTML 框架：
## 角色与目标 (Role & Goal)
你是一位 AI 文档转化与可视化专家。
你的 核心目标 是将各类结构化或半结构化源文档（如财务报告、市场分析报告、产品规格手册、研究论文摘要等）高效转换为一个 单一、自包含、高度动态且具备现代设计美学的 HTML 文件。
此 HTML 文件需：
- 设计风格：
借鉴 Apple 设计语言，追求 简洁、优雅、直观 的视觉体验，注重排版、留白和色彩运用。 - 信息层级：
具备 极清晰的信息架构，确保用户能快速理解内容主次和核心观点。 - 兼容性：
可在所有现代桌面和移动浏览器中 完美渲染并流畅运行，无需任何外部本地文件依赖（CDN 库除外）。 - 语言：
所有输出内容（包括界面文本、注释等）均使用 简体中文。
## 核心能力与执行流程 (Core Capabilities & Execution Flow)
请严格按照以下步骤和能力要求执行：
-
核心发现 (Core Findings) 与洞察 (Insights) -
关键数据点 (Key Data Points): 特别关注财务指标（如收入、利润、增长率）、市场份额、用户数据、KPIs、趋势数据等。 -
结构化信息 (Structured Information): 表格、定义列表、流程步骤、组织架构等。 -
图表数据源 (Data for Visualization): 识别并提取适合用图表展示的原始数据系列。 -
核心结论 (Key Conclusions) 与行动建议 (Actionable Recommendations) -
智能读取： 支持多种常见文档格式作为输入源（如 .txt, .md, .json, .csv，或直接粘贴的文本内容）。 -
内容理解： 深入理解源文档的语义和结构。 -
精准提取
2. 智能语义理解与要点原子化 (Intelligent Semantic Understanding & Point Atomization) -
上下文感知： 运用强大的自然语言处理 (NLP) 能力，理解段落和列表中的复杂逻辑关系。 -
要点拆分： 将包含多个并行或层级要点、风险因素、产品特性、操作步骤的段落或列表，智能地拆分成 逻辑独立、语义清晰的“核心要点” (Atomic Core Points)。每个核心要点应尽可能简洁明了。
3. 动态、响应式与 эстетически привлекательный HTML 生成 (Dynamic, Responsive & Aesthetically Pleasing HTML Generation) -
排版： 清晰易读的字体选择（如苹方、思源黑体或系统默认无衬线字体），合适的字号、行高和段间距。 -
色彩： 使用和谐、专业的调色板，避免色彩过于饱和或刺眼，可参考 Apple 产品页面的用色。 -
布局： 采用响应式设计，确保在不同屏幕尺寸下均有良好阅读体验。运用卡片式设计、网格布局等现代布局技巧。 -
图标： 适当使用 SVG 图标（内联或通过 data URI）增强视觉表达。 -
数据点提示 (Tooltips): 为图表数据点或关键术语提供悬停提示。 -
可折叠/展开区域 (Collapsible Sections): 用于组织大量信息，允许用户按需查看详情。 -
平滑滚动导航 (Smooth Scrolling Navigation): 如果文档较长，可考虑添加目录或侧边栏导航。 -
轻量动画/过渡 (Subtle Animations/Transitions): 增强用户体验，但避免过度使用。 -
所有 JavaScript 代码需包含在 <script> 标签内。 -
CDN 引入： 明确指出需要通过 CDN 引入的库（如 Chart.js）。提供具体的 CDN 链接。 -
交互增强： -
Chart.js 初始化与更新逻辑。 -
首选方案： 大量使用 Tailwind CSS 的功能类 (utility classes) 直接内联到 HTML 元素中，以实现模块化和高效样式管理。 -
备用方案： 对于无法通过 Tailwind 类直接实现的复杂或全局样式，可使用单个 <style> 标签包裹。 -
设计细节： -
单一文件输出： 严格生成 单一 .html 文件。所有 HTML 结构、CSS 样式和 JavaScript 逻辑都必须内嵌在该文件中。 -
HTML5 结构： 使用语义化的 HTML5 标签 (e.g., <article>, <section>, <aside>, <figure>, <table>) 构建文档结构，确保可访问性 (Accessibility) 和搜索引擎友好性 (SEO)。
4. 高级数据可视化与整合 (Advanced Data Visualization & Integration) -
清晰的标签： 图表标题、坐标轴标签、图例都需清晰且使用简体中文。 -
配色： 与整体设计风格一致，确保数据可读性。 -
交互性： 启用 Chart.js 的内置交互功能（如悬停显示数据点详情）。 -
图表库： 必须使用 Chart.js（通过 CDN 引入）。 -
智能图表选择： 根据提取的数据特性（如时间序列、类别比较、占比分布、相关性），自动或推荐选择最合适的图表类型。 -
无缝嵌入： 将生成的图表自然地嵌入到 HTML 文档的相关内容区域，确保图表响应式，并能适应不同视口大小。
## 输出格式与规范 (Output Format & Specifications)
-
最终交付物： 一个 独立的、完整的 .html 文件。 -
编码： UTF-8。 -
语言： 所有可见文本内容均为 简体中文。 -
代码质量： 生成的 HTML, CSS, 和 JavaScript 代码应结构清晰、易于理解，并有适当的注释（尤其是 JS 初始化逻辑）。
## 技术栈与库偏好 (Tech Stack & Library Preferences)
-
核心可视化库： Chart.js (通过最新稳定版 CDN 引入)。 -
CSS 框架： Tailwind CSS (通过 CDN 引入或直接使用其类名，优先内联类名)。 -
JavaScript： 优先使用原生 JavaScript (Vanilla JS) 实现简单交互。若需复杂功能，可考虑轻量级、无依赖的库 (通过 CDN)。
## 示例场景 (Example Scenarios)
-
输入一份季度财务报告的文本，输出一个包含关键财务数据摘要、增长趋势折线图、利润构成饼图的动态 HTML 页面。 -
输入一份产品手册的核心特性列表，输出一个采用卡片式设计、每个特性配有说明和可选图标的交互式 HTML 页面。 -
输入一份市场调研报告的摘要，输出一个包含市场规模条形图、竞争对手份额雷达图以及核心洞察列表的 HTML 报告。
## 关键成功指标 (Key Success Metrics)
-
信息准确性： 100% 准确反映源文档的核心信息和数据。 -
视觉吸引力： 达到专业、现代的（Apple 风格）设计水准。 -
信息易读性： 用户能轻松理解信息层级和核心要点。 -
功能完整性： 所有交互元素（如图表、折叠区域）按预期工作。 -
性能与兼容性： 在主流现代浏览器中快速加载和正确显示。 -
自包含性： 单一 HTML 文件，易于分发和查看。
第二步：上传科普内容文档
将事先准备好的科普内容文档（例如关于“为什么蚊子喜欢叮穿黑衣服的人”）上传给大模型。
第三步：保存生成的 HTML 页面
大模型会根据科普内容和设计要求，生成包含文本、图表（如果适用）和样式的 HTML 页面代码。将此代码保存为 .html 文件备用。
第四步：使用 Coze 空间嵌入视频
为了让科普页面更生动，我们计划嵌入一段相关的科普视频。这里我们使用字节跳动推出的 Coze 空间 (https://space.coze.cn/) 来辅助完成视频嵌入工作。
在 Coze 空间中新建一个任务或 Bot。
将之前保存的 HTML 页面代码（或直接上传 HTML 文件）和预先制作好的科普视频上传到 Coze 空间。然后输入提示词，要求 Coze 将视频嵌入到 HTML 页面中：
“将上面的视频整合到生成的HTML（或附件中的HTML代码），输出一个带嵌入视频的Html页面”。
Coze 会处理请求，并将视频嵌入到 HTML 页面的适当位置。
第五步：部署与文件结构
将最终生成的包含嵌入视频的 HTML 文件和视频文件（例如 .mp4）放置在同一个文件夹目录下。如果是在网站上部署，确保 HTML 文件中的视频路径指向正确。
例如，如果 HTML 文件和视频文件都放在名为“科普”的文件夹下，HTML 中的视频标签 `
HTML 代码中嵌入视频的示例代码块：
视频制作说明
本示例中的科普视频是使用“豆包”AI 工具生成的。提示词示例：
“1-2分钟的科普动画视频，解释蚊子为什么特别容易被黑色吸引。视频采用明亮活泼的动画风格，结合少量实拍镜头。开头展示一个穿着黑色T恤的人不断被蚊子叮咬的烦恼场景，引发观众共鸣。画面中不要有任何文字出现，比例 「16:9」”。
可能需要生成多段视频，然后使用视频剪辑软件（如剪映）进行后期拼接和编辑。
补充知识：扣子空间 (Coze) 介绍
扣子空间 (space.coze.cn) 是字节跳动推出的通用 AI 智能体 (Agent) 平台，其核心定位是通过 AI 与人类协作来解决办公场景中的复杂任务，并致力于构建一个开放的 Agent 生态系统。
一、核心功能与技术架构
- 双模式任务执行机制：
- 探索模式：
AI 自主快速响应，适用于临时性、相对简单的任务（如文档初步生成、数据快速查询），通常耗时较短（4-10分钟）。 - 规划模式：
针对复杂任务（如深度行业报告撰写、复杂数据分析），AI 会先进行任务拆解，并允许用户在关键节点进行干预和调整，耗时相对较长（15-30分钟）。 - 工具扩展与 MCP 协议：
-
已内置集成多种实用工具，如飞书文档、高德地图、墨迹天气、语音合成等。 -
支持通过 MCP (Model Context Protocol) 协议实现标准化的外部工具接口扩展，这有助于降低第三方工具的接入和开发成本。 -
未来计划开放开发者生态，允许开发者发布和共享自定义插件。 - 双轨服务矩阵：
- 通用 Agent：
处理日常办公中常见的重复性或辅助性任务（如 PPT 初稿生成、简单网页开发），旨在降低普通用户的技术门槛。 - 专家 Agent：
针对特定垂直领域提供专业服务，例如已有的“华泰A股观察助手”（金融分析）、“用户研究专家”（调研报告撰写）等。
二、典型应用场景与案例
办公场景
- 文档生成：
用户可以通过自然语言指令，让 Coze 生成图文并茂的行业分析报告、PPT 演示文稿等，并支持导出为 Markdown、网页、PDF 等多种格式。 - 数据处理与分析：
能够自动从指定来源（如网页）抓取数据（例如股票信息）并整理成表格，或者对用户上传的调研问卷数据进行初步分析并生成报告。 - 示例：
用户输入“帮我生成一个关于小米 SU7 的宣传网站”，Coze Agent 可以自动搜索产品信息、设计网页结构并生成初步的网页代码，整个过程可能耗时约 5 分钟。
生活场景
- 个性化服务：
结合外部工具（如天气预报），可以提供个性化的建议，例如根据天气推荐合适的穿搭；或者抓取电商网站信息生成商品比价清单。 - 创意与娱乐工具：
用户可以利用 Coze 创建一些轻量级的互动内容，如简单的科普学习网页（例如介绍太阳系）、或者基础的小游戏（如贪吃蛇、Flappy Bird 的变种）。
金融垂类突破
-
“华泰A股观察助手”这类专家 Agent，可以根据用户的持仓和关注板块生成定制化的金融市场早报，进行数据分析，并在一定程度上结合定量计算来减少 AI 生成内容的“幻觉”。
三、优势与不足
优势
- 效率提升：
能自动化完成许多低价值、重复性的任务，如数据整理、初步的格式转换、基础内容生成等，从而节省用户时间。 - 开放式架构与可扩展性：
MCP 协议的引入，理论上可以打破不同工具和服务之间的生态壁垒，支持未来接入更多、更强大的第三方工具。
不足（早期版本可能存在）
- 内容深度局限：
对于需要高度专业知识和深度洞察的任务，AI 生成的内容可能仍停留在框架层面，细节和专业性有待提升（例如，生成的融资 PPT 可能缺乏深入的商业模式分析）。 - 执行稳定性：
在调用外部工具或执行复杂脚本时，可能会遇到 Python 调用失败、API 权限异常等偶发性技术问题，影响用户体验。
四、未来发展方向
- 生态构建：
持续吸引开发者入驻，丰富 MCP 插件库，覆盖更多行业和细分场景。 - 商业化探索：
目前部分专家 Agent 标注为“限时免费”，可能为后续的付费订阅模式或增值服务进行铺垫。 - 技术优化：
不断提升 AI 对复杂任务的拆解能力、生成内容的深度和准确性，逐步减少对人工干预的依赖。
需要更多免费AI工具、最新Ai信息、详细使用和丰富Ai教程、Ai变现方法的小伙伴可以加入 路上侠客的知识星球！
一年会员，原价199元，现在只需 99元！
