关于 html-ppt-zhangzara-coral
Coral 是用于制作 HTML 幻灯片的设计技能,以近黑底色搭配奶油色和珊瑚色,并使用超大 Bebas Neue 字体。适合生活方式品牌、作品集,以及希望采用温暖鲜明表达的研究或科技主题。
主要功能
- 01近黑底色搭配奶油色与珊瑚色
- 02超大 Bebas Neue 字体
- 03可复用的 HTML 幻灯片版式
- 04延续和扩展设计体系的指导
适用场景
- 01展示时尚或生活方式品牌
- 02制作创作者作品集或宣言
- 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.htmlLICENSEtemplate.json详细介绍
Coral
近黑色背景上的奶油色与珊瑚色,搭配超大号 Bebas Neue 字体。
一个单一的自包含 HTML 演示文稿 —— 字体排印、配色、装饰系统与幻灯片语汇都经过统一调校。跨模板混用布局会破坏这套系统;请始终留在这一个模板内。
概览
- 配色方案: 混合
- 正式程度: 中等
- 密度: 中等
- 演示中的幻灯片数: 10
最适合
任何需要呈现温暖图形感与编辑风格的内容:时尚、美妆、健身、餐饮、生活方式品牌、代理商资质介绍。同样适合创作者作品集、宣言,或想要温暖感与单一醒目强调色、而非企业式冷峻风格的科技 / 研究演示。
避免用于
需要呈现安静或机构感的情境 —— 珊瑚色强调与超大号 Bebas Neue 坚定地呈现出一种自信的杂志腔调。
工作流
- 克隆
example.html到用户的工作区作为工作文件。 - 替换占位内容,换成用户真实的标题、正文、数字、姓名、日期和章节标签。替换图片占位符时,请匹配现有的尺寸。
- 保留设计系统。 绝不要替换字体、改变配色、重构布局网格,或删去装饰元素(角括号、纸张纹理、几何形状、插画式 SVG)。它们是识别度的一部分。
- 通过复制布局调整演示长度。 如果用户的内容多过演示所能容纳,就复制一张已有的、布局最合适的幻灯片。如果内容更少,就从底部删减幻灯片。更新页码标签。
- 设计缺失的布局: 如果某张幻灯片需要模板没有的布局,就用相同的字体、配色、装饰语汇、间距节奏和组件语法从头设计 —— 绝不要退回到另一个模板。
- 保持导航运行时原样发布。 如果演示包含
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