mcpField
H
html-slide-prompt

html-slide-prompt

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

关于 html-slide-prompt

html-slide-prompt 是一项技能，可将幻灯片计划和设计说明转为逐页 HTML 实现指引，适用于需要结构化构建说明、但暂不生成 HTML 的流程。

主要功能

  1. 01为每页生成一份指引对象
  2. 02规定语义结构与 CSS 布局
  3. 03说明响应式行为和无障碍要求
  4. 04列出所需素材与应避免的问题

适用场景

  1. 01准备逐页幻灯片实现说明
  2. 02将幻灯片计划转为 HTML 构建指引

安装

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

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

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

详细介绍

HTML 幻灯片提示词

用于以下命令：

  • $html-slide-prompt
  • "create html_slide_prompts.json"
  • "write implementation prompts for each HTML slide"
  • "convert the slide plan into build instructions"

目标

创建 html_slide_prompts.json：为每张幻灯片提供一个可直接用于实现的指令对象。

输入

  • DESIGN.md
  • slide_plan.json
  • 如需核实事实，则使用源文件

必需输出

仅返回有效 JSON。每张幻灯片都需包含：

  • 幻灯片编号
  • 页面类型
  • 幻灯片标题
  • HTML 布局类型
  • 内容区块
  • 语义结构
  • CSS 布局说明
  • 响应式行为
  • 图表／表格／图标说明
  • 所需素材
  • 无障碍说明
  • 需避免的反模式

硬性规则

  • 此步骤不要渲染最终 HTML。
  • 除非明确需要图像素材，否则不要使用 GPT 图像生成相关措辞。
  • 确保指令可通过常规 HTML/CSS/JS 实现。
  • 除非用户明确要求继续，否则在生成 html_slide_prompts.json 后停止。

评论

支持 Markdown