mcpField
H
html-ppt-zhangzara-editorial-tri-tone

html-ppt-zhangzara-editorial-tri-tone

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

关于 html-ppt-zhangzara-editorial-tri-tone

用于制作编辑风格演示文稿的 HTML 技能,采用灰粉、芥末黄和酒红配色。它指导替换内容与调整页数,同时保留模板的字体和视觉系统。

主要功能

  1. 01三色编辑风格配色
  2. 02Bricolage 与 Instrument Serif 字体
  3. 03可复用的 HTML 幻灯片布局
  4. 04键盘导航运行时
  5. 05演示文稿页数调整指南

适用场景

  1. 01编辑与时尚品牌提案
  2. 02生活方式媒体演示
  3. 03艺术指导评审

安装

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

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

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

包含的文件

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

example.html
LICENSE
template.json
assets/
deck-stage.js

详细介绍

编辑三色调

三色编辑系统:灰粉色、芥末奶油色和深酒红色,搭配 Bricolage + Instrument Serif。

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

概览

  • 配色方案: 混合
  • 正式程度: 中高
  • 内容密度: 中等
  • 演示幻灯片数: 8

适用场景

适合任何需要呈现时尚杂志版面的内容:编辑提案、时尚品牌演示文稿、生活方式媒体、艺术指导评审。也适合任何希望采用三色调规范和衬线体/无衬线体对比,而非常见中性色的演示文稿,包括科技、研究或商业主题。

不适用场景

需要营造柔和或令人安心氛围的演示文稿——酒红、粉色和奶油色构成的三色调刻意采用了高对比度和鲜明风格。

工作流

  1. 将 example.html 和 assets/ 文件夹复制到用户的工作区。 此模板附带 assets/deck-stage.js 运行时(键盘导航、舞台渲染);HTML 将其引用为 assets/deck-stage.js,因此该文件必须与克隆的 HTML 文件放在一起,否则生成的文件中该路径会返回 404,导航也会失效且不显示提示。若需要单个自包含文件,也可以将 JS 内联到 HTML 的单个 <script> 块中。
  2. 将占位内容替换为用户的实际标题、正文、数字、姓名、日期和章节标签。替换图片占位内容时,请保持现有尺寸。
  3. 保留设计系统。 切勿替换字体、重设配色、重构布局网格或移除装饰元素(角括号、纸张纹理、几何形状、插画 SVG)。这些都是设计标识的一部分。
  4. 通过复制布局调整演示文稿的长度。如果用户的内容超出示例所能容纳的范围,请复制布局最合适的现有幻灯片;如果内容较少,则从底部删除幻灯片。更新页码标签。
  5. 设计缺失的布局: 如果幻灯片需要模板中没有的布局,请使用相同的字体、配色、装饰元素、间距节奏和组件规则从头设计;切勿改用其他模板。
  6. 保持导航运行时原样。 如果演示文稿附带 assets/deck-stage.js 或内联键盘处理程序,请保持不变。

输出约定

在 <artifact> 标签之间输出:

<artifact identifier="zhangzara-editorial-tri-tone" 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