mcpField
H
html-slide

html-slide

github.com/humantonylee文档处理151113 次安装21 周前更新
代码仓库

关于 html-slide

html-slide 是用于制作可编辑、在浏览器中呈现的 HTML 幻灯片的编排技能。它按顺序引导提取设计、规划幻灯片、编写逐页提示词、实现页面并在浏览器中验证。

主要功能

  1. 01提取参考视觉设计
  2. 02生成幻灯片计划
  3. 03创建逐页提示词
  4. 04实现 HTML 演示文稿
  5. 05浏览器验证

适用场景

  1. 01将视觉参考转为 HTML 演示文稿
  2. 02规划可编辑的幻灯片演示
  3. 03创建并检查浏览器渲染的幻灯片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/humantonylee/future-slide --skill html-slide

安装后在 Claude Code 中输入/html-slide确认已加载。

详细介绍

HTML 幻灯片工作流

用户要求完整的 HTML 幻灯片工作流时使用此技能，例如：

  • $html-slide
  • “创建 HTML 幻灯片”
  • “根据此参考内容制作浏览器渲染的幻灯片”
  • “构建可编辑的 Web 幻灯片”

这是 HTML 编排器。如果用户只要求其中一个步骤，请改用对应的步骤技能：

  • $slide-design 用于 DESIGN.md
  • $html-slide-plan 用于 slide_plan.json
  • $html-slide-prompt 用于 html_slide_prompts.json
  • $html-slide-render 用于最终的 HTML/CSS/JS 幻灯片文件

必需流程

按顺序执行以下阶段：

  1. 从参考视觉内容中提取 DESIGN.md。
  2. 根据 DESIGN.md、用户文件和幻灯片请求构建 slide_plan.json。
  3. 编写 html_slide_prompts.json，其中包含每张幻灯片的实现说明。
  4. 实现 HTML 幻灯片，并尽可能在浏览器中验证。

输出约定

完整工作流应在工作区中生成以下文件：

  • DESIGN.md
  • slide_plan.json
  • html_slide_prompts.json
  • HTML 幻灯片，通常位于 slides-html/ 下

路由规则

如果用户要求 GPT 原生图像生成、PNG 页面或 imagegen 输出，请改用 gpt-image-slide 技能系列。

评论

支持 Markdown