关于 html-ppt-zhangzara-neo-grid-bold
用于制作新粗野主义编辑风格 HTML 演示文稿的设计技能,适合设计师按模板调整内容,同时保持统一的视觉系统。
主要功能
- 01米白底色与霓虹黄点缀
- 02编辑式新粗野主义视觉系统
- 03可复用的幻灯片布局
- 04调整演示文稿长度的指引
- 05HTML 输出规范
适用场景
- 01设计导向的提案演示
- 02品牌展示
- 03数据密集型比较与流程图
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-neo-grid-bold安装后在 Claude Code 中输入/html-ppt-zhangzara-neo-grid-bold确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
example.htmlLICENSEtemplate.jsonassets/deck-stage.js详细介绍
Neo-Grid Bold
以米白色纸张为底,采用新野兽派编辑风格,并以单一霓虹黄色作为点缀。
这是一个独立的 HTML 演示文稿,字体排印、配色、装饰系统和幻灯片元素都经过统一调整。混用不同模板的版式会破坏系统;请始终遵循本模板。
概览
- 配色方案: 浅色
- 正式程度: 中等
- 信息密度: 高
- 演示幻灯片数: 12
适用场景
适合任何需要呈现自信、具有编辑设计感的场合:以设计为主导的提案、品牌项目、创始人演讲和大会主题演讲。非常适合数据密集型幻灯片、比较内容和流程展示。如果演讲者希望给人以设计为主导而非企业风格的印象,它同样适用于科技、研究或金融主题。
不适用场景
需要营造安静、传统或温暖氛围的场合——霓虹黄色点缀和大写展示字体会形成自信的编辑风格。
工作流
- 将
example.html和assets/文件夹一并克隆到用户的工作区。 此模板附带assets/deck-stage.js运行时(用于键盘导航和舞台渲染);HTML 会引用assets/deck-stage.js,因此该文件必须与克隆的 HTML 文件放在同一目录下,否则生成的文件中该路径会返回 404,导航也会在不提示的情况下失效。如果更倾向于使用单个独立文件,也可以将 JS 内嵌到 HTML 的单个<script>块中。 - 用用户的实际标题、正文、数字、姓名、日期和章节标签替换占位内容。替换图片占位内容时,请保持现有尺寸。
- 保留设计系统。 切勿替换字体、更改配色、重组布局网格或移除装饰元素(角括号、纸张纹理、几何形状、SVG 插画)。它们都是设计风格的一部分。
- 通过复制版式调整演示文稿长度。 如果用户的内容多于演示示例所能容纳的内容,请复制最适合的现有幻灯片。如果内容较少,请从末尾删除幻灯片。更新页码标签。
- 设计缺失的版式: 如果某张幻灯片需要模板中没有的版式,请使用相同的字体、配色、装饰元素、间距节奏和组件规则从头设计;切勿改用其他模板。
- 保留随附的导航运行时。 如果演示文稿附带
assets/deck-stage.js或内联键盘处理程序,请保持原样。
输出要求
在 <artifact> 标签之间输出:
<artifact identifier="zhangzara-neo-grid-bold" 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