mcpField
H
html-ppt-zhangzara-scatterbrain

html-ppt-zhangzara-scatterbrain

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

关于 html-ppt-zhangzara-scatterbrain

用于制作便签纸与设计师白板风格 HTML 幻灯片的 Skill,适合头脑风暴、研讨会和创意构思,并提供统一视觉系统及可复制调整的版式。

主要功能

  1. 01柔和色调便签美学
  2. 02Caveat 手写字体
  3. 03Shrikhand 与 Zilla Slab 字体组合
  4. 04可复用 HTML 幻灯片版式

适用场景

  1. 01开展头脑风暴
  2. 02总结研讨会内容
  3. 03展示设计思维构想

安装

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

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

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

包含的文件

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

example.html
LICENSE
template.json

详细介绍

Scatterbrain

便签灵感风:柔和的便签色彩、Caveat 手写体,以及 Shrikhand 和 Zilla Slab 字体组合。

一套独立完整的 HTML 幻灯片,字体、配色、装饰系统和幻灯片布局类型都经过统一调校。混用不同模板的布局会破坏整体系统;请始终使用这一套。

概览

  • 配色方案: 浅色
  • 正式程度: 低
  • 信息密度: 高
  • 演示幻灯片数: 10

适用场景

任何希望呈现设计师白板风格的场景:头脑风暴、工作坊、创意机构资质展示、设计思维活动、创意构思提案、艺术指导评审。同样适用于任何想要体现思考过程,而非展示 polished 结论的演示文稿,包括科技、研究或商务主题。

不适用场景

需要精准表达和庄重感的场合——便签美学有意营造温暖、未完成的感觉。

工作流

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

输出约定

在 <artifact> 标签之间输出:

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