mcpField
H
html-ppt-zhangzara-studio

html-ppt-zhangzara-studio

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

关于 html-ppt-zhangzara-studio

用于制作设计导向演示文稿的 HTML 技能,以黑色画布和亮黄色字体营造工作室风格。它指导调整现有幻灯片布局,同时保留模板的视觉标识与导航行为。

主要功能

  1. 01黑色与亮黄色配色
  2. 02设计工作室视觉风格
  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-studio

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

包含的文件

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

example.html
LICENSE
template.json

详细介绍

工作室

黑色画布搭配亮电黄色字体;呈现高压感的设计工作室美学。

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

概览

  • 配色方案: 深色
  • 正式程度: 中等
  • 信息密度: 中等
  • 演示中的幻灯片数: 12

适用场景

任何需要呈现电力十足、以设计为主导的内容:工作室资历介绍、创意机构提案、品牌展示、艺术指导评审、时尚/运动鞋品牌作品。对于希望让幻灯片本身成为品牌宣言的演讲者来说,这也是科技、研究或商业演示中一个引人注目的意外之选。

不适用场景

需要保持安静或机构风格的场合——黑色与亮电黄色的配色是整个模板库中最醒目的。

工作流

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

输出约定

在 <artifact> 标签之间输出:

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