mcpField
H
html-ppt-zhangzara-raw-grid

html-ppt-zhangzara-raw-grid

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

关于 html-ppt-zhangzara-raw-grid

用于制作新粗野主义 HTML 演示文稿的技能,采用粗边框、偏移阴影以及粉色、鼠尾草绿和墨色配色。它指导内容编辑与布局调整,同时保留模板的图形体系。

主要功能

  1. 01新粗野主义视觉风格
  2. 02粗边框与偏移阴影
  3. 03粉色、鼠尾草绿和墨色
  4. 04可复用的幻灯片布局
  5. 05HTML 制作流程

适用场景

  1. 01创始人路演与加速器演示
  2. 02品牌演示与独立产品发布
  3. 03创作者作品集
  4. 04对比表与流程展示

安装

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

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

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

包含的文件

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

example.html
LICENSE
template.json

详细介绍

Raw Grid

带有粗边框、错位阴影,以及粉色/鼠尾草绿/墨色配色的粗野主义风格幻灯片。

一份完全自包含的 HTML 幻灯片——字体、配色、装饰系统和幻灯片元素都经过协同调校。混用不同模板的布局会破坏这套系统;请始终使用这一套。

概览

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

适用场景

适用于希望呈现直接、大胆图形风格的内容:创始人路演、加速器演示、品牌幻灯片、独立产品发布、创作者作品集。尤其适合数据幻灯片、对比表和流程图。科技、研究或金融主题也同样适用,尤其适合希望幻灯片显得朴实自信,而非拘谨正式的演讲者。

不适用场景

需要营造柔和、温暖或刻意安静氛围的场合——粗野主义风格的边框和错位阴影会带来鲜明的图形表达。

工作流

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

输出约定

在 <artifact> 标签之间输出:

<artifact identifier="zhangzara-raw-grid" 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