关于 html-slide-render
html-slide-render 是一项技能，可根据设计说明、幻灯片计划和实现提示构建可编辑、由浏览器渲染的幻灯片。默认输出 HTML 项目；按需可生成独立文件。
主要功能
- 01构建可编辑的 HTML 幻灯片
- 02采用语义化 HTML 和集中管理的 CSS 变量
- 03支持项目目录或独立 index.html
- 04检查文本可读性和溢出
适用场景
- 01实现规划好的 HTML 幻灯片
- 02创建便于携带的独立幻灯片文件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/html-slide-render确认已加载。
详细介绍
HTML 幻灯片渲染
在以下场景中使用此技能：
$html-slide-render- “构建 HTML 幻灯片”
- “将幻灯片渲染为 HTML”
- “实现 html_slide_prompts.json”
目标
根据规划的设计和提示词，构建可在浏览器中渲染且可编辑的幻灯片。
输入
DESIGN.mdslide_plan.jsonhtml_slide_prompts.json
默认输出
在项目本地创建一个文件夹，例如：
slides-html/
├── index.html
├── styles.css
├── slides.js
└── assets/
仅当用户要求提供便于移植的独立文件时，才使用更简单的单文件 index.html。
实现规则
- 首屏应直接展示实际幻灯片，而不是着陆页。
- 保留提取出的设计系统。
- 使用稳定的 16:9 幻灯片尺寸，除非用户指定其他格式。
- 使用语义化 HTML 编写幻灯片内容。
- 让 CSS 令牌易于阅读并集中管理。
- 仅当有助于呈现幻灯片内容时，才使用 SVG、CSS 或图表库。
- 确保文本清晰易读且不会溢出。
- 尽可能在浏览器中验证。
硬性规则
- 不要将 Codex 原生图像生成功能用作主要渲染器。
- 不要将内容密集的分析型幻灯片简化成通用卡片网格。
- 不要将生成的资源放在工作区之外。
- 报告最终 HTML 入口路径以及执行过的验证。
评论
支持 Markdown