mcpField
H
html-ppt-zhangzara-block-frame

html-ppt-zhangzara-block-frame

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

关于 html-ppt-zhangzara-block-frame

用于制作高密度新粗野主义风格 HTML 演示文稿的技能。柔和霓虹色块、粗黑边框与统一的幻灯片系统,适合设计导向的演示。

主要功能

  1. 01新粗野主义视觉风格
  2. 02柔和霓虹色块
  3. 03粗黑边框
  4. 04可复用幻灯片布局
  5. 05HTML 演示文稿输出

适用场景

  1. 01独立 SaaS 发布演示
  2. 02代理机构资历演示文稿
  3. 03创意评审演示
  4. 04品牌重塑演示

安装

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

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

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

包含的文件

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

example.html
LICENSE
template.json

详细介绍

BlockFrame

带有粉彩霓虹色块和粗黑边框的新粗野主义风格幻灯片。

单个自包含的 HTML 幻灯片,字体、配色、装饰系统和幻灯片词汇均经过整体调校。混用不同模板的布局会破坏整个系统;请限定使用这一套。

概览

  • 配色方案: 浅色
  • 正式程度: 中低
  • 信息密度: 高
  • 演示幻灯片数: 10

适用场景

任何应呈现流行图形感、以设计为主导的场景:独立 SaaS 产品发布、代理机构资质介绍、创意评审、品牌重塑。对于科技、金融或研究领域来说,这也是一个出人意料的好选择,尤其适合演讲者希望展现自信、现代的形象,而非刻板严肃的风格。

不适用场景

需要保持低调克制的机构风格或传统庄重感的场合(受监管信息披露、正式法律简报)。

工作流

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

输出规范

在 <artifact> 标签之间输出:

<artifact identifier="zhangzara-block-frame" 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