网页工程师 Skill

根据用户提供的主题或需求,生成带粒子特效的精美HTML可视化网页。适用于教学展示、商业宣传、学术演示、数据可视化等多种场景。

MCP Access: Use mcporter

完成此技能任务时,必须通过 mcporter 技能操作 MCP。 不要直接调用 MCP 工具,所有 MCP 操作都通过 mcporter 路由。

• 配置: 全局 MCP 配置位于 ~/.openclaw/workspace/config/mcporter.json。读取此文件,仅使用此技能所需的 MCP 配置(参见此技能的 compatibility/工具列表)。不要使用配置中的其他 MCP——仅使用为此技能声明的那些。
• 列出服务器/工具: mcporter list,或 mcporter list <server> --schema 查看特定服务器。
• 调用工具: mcporter call <server.tool> key=value (例如 mcporter call gen_html.gen_html title="我的网页" content="...")。
• 此技能的 compatibility 列表(或工具列表)定义了此技能可以使用哪些 MCP 服务器/工具;仅通过 mcporter 调用这些工具,使用全局文件中的配置。

工作流程

1. 理解用户需求

首先分析用户输入的主题或需求:

• 明确网页的目标受众和使用场景(教学、商业、学术等)
• 识别需要的内容类型(说明性、数据展示、图文并茂等)
• 确定输出格式(普通HTML网页、PPT式网页、图片/视频转PPT)

2. 信息收集与内容准备

根据主题通过 mcporter 调用搜索工具收集相关信息:

通用搜索:

mcporter call so-search.aiso_do_search query="网页主题关键词" r=true

学术内容搜索(根据主题选择合适的平台):

• 计算机/AI领域: mcporter call so-search.aiso_arxiv query="主题" max_results=10
• 医学生物: mcporter call so-search.aiso_pubmed query="主题" max_results=10
• 工程技术: mcporter call so-search.aiso_ieee_xplore query="主题" max_results=10
• 计算机会议论文: mcporter call so-search.aiso_acm query="主题" max_results=10
• 综合学术: mcporter call so-search.aiso_bing_academic query="主题" max_results=10

多媒体资源搜索:

• 视频内容: mcporter call so-search.aiso_bilibili_search query="主题" page=1 page_size=10
• 图片素材: mcporter call so-search.multi_engine_image_search query="主题关键词" limit=10 use_for="网页插图"

3. 内容整理与结构化

将收集到的信息整理成清晰的 Markdown 格式:

• 使用标题层级组织内容结构
• 段落清晰,逻辑连贯
• 重点信息突出显示
• 如有数据,使用列表或表格呈现

重要: 输出的正文内容必须使用 Markdown 格式,不要输出代码块。

4. 生成精美HTML网页

根据不同需求选择合适的生成方式:

方式A: 生成带粒子特效的精美HTML网页

使用 gen_html 工具通过 mcporter 生成:

mcporter call gen_html.gen_html title="网页标题" content="Markdown格式的内容" style="modern"

参数说明:

• title: 网页标题,简洁明了
• content: Markdown格式的网页主体内容
• style: 可选样式风格(如 modern, elegant, tech 等)

方式B: 生成PPT式网页

当用户需要演示型网页时,使用 gen_ppt_html:

mcporter call gen_html.gen_ppt_html title="演示标题" slides='[{"title":"幻灯片1标题","content":"内容"},{"title":"幻灯片2标题","content":"内容"}]'

方式C: 图片/视频转PPT网页

当用户提供图片或视频URL需要转换为PPT时:

mcporter call gen_html.image_to_ppt_html image_url_list='["图片URL1","图片URL2"]' video_url_list='["视频URL1"]'

5. 质量检查

生成网页后检查:

• 内容准确性和完整性
• 粒子特效是否正常显示
• 排版是否美观清晰
• 结构是否符合用户需求
• HTML文件是否可直接运行

输出格式

最终输出应包含:

1. Markdown格式的正文内容(不含代码块)
2. 生成的HTML文件及其说明
3. 内容来源说明(如使用了哪些搜索平台)

示例输出结构:

# [网页主题]

## 内容概述
[简要说明网页内容]

## 主要内容
[Markdown格式的详细内容,分段落清晰呈现]

## 数据/资源来源
- 学术资料: arXiv/PubMed/IEEE等
- 图片素材: [来源平台]
- 视频资料: B站等

## 生成文件
已生成精美HTML网页文件: [文件名].html
- 包含粒子特效
- 响应式设计
- 可直接在浏览器中打开

注意事项

1. 内容准确性: 搜索到的信息需要筛选和验证,确保准确可靠
2. 版权意识: 使用图片、视频等资源时注意版权,优先使用可商用素材
3. 用户体验: 网页设计要考虑可读性和美观性的平衡
4. 技术兼容: 生成的HTML应在主流浏览器中正常显示
5. Markdown规范: 输出正文严格遵循Markdown格式,段落清晰,不输出代码块

适用场景

• 教学课件制作
• 商业产品宣传页
• 学术成果展示
• 数据可视化报告
• 在线演示文稿
• 专题网页制作
• 活动宣传页面

通过结合强大的信息搜索能力和精美的HTML生成能力,为用户提供专业、美观、内容丰富的可视化网页解决方案。