mcpField
H
html-ppt-zhangzara-coral

html-ppt-zhangzara-coral

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

关于 html-ppt-zhangzara-coral

Coral 是用于制作 HTML 幻灯片的设计技能,以近黑底色搭配奶油色和珊瑚色,并使用超大 Bebas Neue 字体。适合生活方式品牌、作品集,以及希望采用温暖鲜明表达的研究或科技主题。

主要功能

  1. 01近黑底色搭配奶油色与珊瑚色
  2. 02超大 Bebas Neue 字体
  3. 03可复用的 HTML 幻灯片版式
  4. 04延续和扩展设计体系的指导

适用场景

  1. 01展示时尚或生活方式品牌
  2. 02制作创作者作品集或宣言
  3. 03为研究或科技演示加入编辑风格

安装

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

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

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

包含的文件

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

example.html
LICENSE
template.json

详细介绍

Coral

近黑色背景上的奶油色与珊瑚色,搭配超大号 Bebas Neue 字体。

一个单一的自包含 HTML 演示文稿 —— 字体排印、配色、装饰系统与幻灯片语汇都经过统一调校。跨模板混用布局会破坏这套系统;请始终留在这一个模板内。

概览

  • 配色方案: 混合
  • 正式程度: 中等
  • 密度: 中等
  • 演示中的幻灯片数: 10

最适合

任何需要呈现温暖图形感与编辑风格的内容:时尚、美妆、健身、餐饮、生活方式品牌、代理商资质介绍。同样适合创作者作品集、宣言,或想要温暖感与单一醒目强调色、而非企业式冷峻风格的科技 / 研究演示。

避免用于

需要呈现安静或机构感的情境 —— 珊瑚色强调与超大号 Bebas Neue 坚定地呈现出一种自信的杂志腔调。

工作流

  1. 克隆 example.html 到用户的工作区作为工作文件。
  2. 替换占位内容,换成用户真实的标题、正文、数字、姓名、日期和章节标签。替换图片占位符时,请匹配现有的尺寸。
  3. 保留设计系统。 绝不要替换字体、改变配色、重构布局网格,或删去装饰元素(角括号、纸张纹理、几何形状、插画式 SVG)。它们是识别度的一部分。
  4. 通过复制布局调整演示长度。 如果用户的内容多过演示所能容纳,就复制一张已有的、布局最合适的幻灯片。如果内容更少,就从底部删减幻灯片。更新页码标签。
  5. 设计缺失的布局: 如果某张幻灯片需要模板没有的布局,就用相同的字体、配色、装饰语汇、间距节奏和组件语法从头设计 —— 绝不要退回到另一个模板。
  6. 保持导航运行时原样发布。 如果演示包含 assets/deck-stage.js 或内联键盘处理器,请保持其完整无损。

输出契约

在 <artifact> 标签之间输出:

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