mcpField
H
html-ppt-zhangzara-capsule

html-ppt-zhangzara-capsule

github.com/nexu-io文档处理104.6k62 次安装今天更新
代码仓库

关于 html-ppt-zhangzara-capsule

Capsule 是用于制作自包含 HTML 幻灯片的技能,采用模块化胶囊形卡片和柔和色彩。它提供统一的设计系统,适用于生活方式品牌、创作者及新品发布等轻松活泼风格的演示。

主要功能

  1. 01自包含 HTML 幻灯片模板
  2. 02胶囊形模块化卡片
  3. 03暖骨色背景与柔和配色
  4. 04可复用的幻灯片版式
  5. 05保留内置导航

适用场景

  1. 01展示生活方式品牌
  2. 02创建创作者作品集
  3. 03介绍面向消费者的新品发布
  4. 04制作活泼风格的科技或研究演示

安装

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

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-capsule

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

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

example.html
LICENSE
template.json

详细介绍

Capsule

在温暖的骨白色底色上,以完整的柔和跳色调色板呈现模块化的胶囊形卡片。

这是一套独立完整的 HTML 幻灯片,字体、调色板、装饰系统和幻灯片设计语言都经过协同调校。跨模板混用布局会破坏整体系统;请始终使用这一套。

概览

  • 风格: 浅色
  • 正式程度: 中低
  • 信息密度: 中等
  • 演示幻灯片数: 10

适用场景

适合任何需要呈现模块化、现代感和些许 Y2K 风格的内容:生活方式品牌、创作者作品集、DTC 产品发布、美妆 / 健康养生、代理商资质介绍。也适合趣味十足的科技演示,或希望以波普艺术般的清晰感而非庄重感呈现的研究演示文稿。

不适用场景

需要传统机构权威感的场合——胶囊形状和柔和跳色会明显削弱庄重感。

工作流程

  1. 将 example.html 克隆到用户的工作区,作为工作文件。
  2. 用用户的实际内容替换占位内容,包括标题、正文、数字、姓名、日期和章节标签。替换图片占位符时,需匹配现有尺寸。
  3. 保留设计系统。 不要替换字体、重新配色、调整布局网格,或移除装饰元素(角括号、纸张纹理、几何图形、插画 SVG)。这些都是整体风格的一部分。
  4. 通过复制布局调整幻灯片数量。 如果用户的内容超出演示文稿的容量,请复制一个布局最合适的现有幻灯片。如果内容较少,请从底部删除幻灯片。更新页码标签。
  5. 设计缺失的布局: 如果某张幻灯片需要模板中没有的布局,请使用相同的字体、调色板、装饰语言、间距节奏和组件规范从头设计;切勿改用其他模板。
  6. 保持随附的导航运行时代码不变。 如果演示文稿包含 assets/deck-stage.js 或内联键盘处理程序,请保持原样。

输出约定

在 <artifact> 标签之间输出:

<artifact identifier="zhangzara-capsule" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

来源与许可证

移植自上游采用 MIT 许可证的 zarazhangrui/beautiful-html-templates。

完整的上游 MIT 许可证文本(包括原始版权声明)随本技能一并提供,位于 LICENSE;重新分发任何 example.html、template.json 副本或任何移植的 assets/ 运行时文件时,必须同时附上该许可证。有关上游元数据快照,请参阅 template.json。

评论

支持 Markdown