html-ppt-zhangzara-pin-and-paper
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePin & Paper
Pin & Paper
Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.
A single self-contained HTML deck — typography, palette, decorative system,
and slide vocabulary are all tuned together. Mixing layouts across templates
breaks the system; stay inside this one.
带有安全别针插画的黄色纸张、墨蓝色手写字体Caveat、纸张纹理。
一个独立完整的HTML演示文稿——排版、配色、装饰系统以及幻灯片样式都已协调统一。跨模板混合布局会破坏这套系统,请仅使用本模板内的布局。
At a glance
概览
- Scheme: light
- Formality: medium
- Density: medium
- Slides in demo: 11
- 配色方案: 浅色
- 正式程度: 中等
- 内容密度: 中等
- 演示幻灯片数量: 11张
Best for
适用场景
Anything that should feel hand-crafted, warm, and literary: qualitative research findings, founder reflections, longform brand stories, workshop debriefs. The signature safety-pin illustrations and paper-grain texture make it especially good for any deck — including tech or business — that wants personality and warmth over polish.
适用于所有需要体现手工感、温暖感与文艺感的内容:定性研究结果、创始人反思、长篇品牌故事、工作坊总结。标志性的安全别针插画与纸张纹理让它尤其适合那些想要个性与温暖感而非精致感的演示文稿——包括技术或商务类演示。
Avoid for
不适用场景
Decks that need to feel digital-native polished or rigorously data-driven — handwritten Caveat is intentionally informal.
需要体现数字化精致感或严谨数据驱动风格的演示文稿——手写字体Caveat特意设计为非正式风格。
Workflow
使用流程
- Clone AND the
example.htmlfolder into the user's workspace. This template ships anassets/runtime (keyboard navigation, stage rendering) and anassets/deck-stage.jsstylesheet. The HTML references them asassets/styles.cssandassets/deck-stage.js, so both must sit next to the cloned HTML or those paths will 404 in the generated artifact and navigation/styling will silently break. Inlining the JS/CSS into a singleassets/styles.css/<script>block in the HTML is an acceptable alternative when a single self-contained file is preferred.<style> - Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
- Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
- Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
- Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
- Keep the navigation runtime as shipped. If the deck ships an
or inline keyboard handler, leave it intact.
assets/deck-stage.js
- 将和
example.html文件夹克隆到用户的工作区。 本模板包含assets/运行时(键盘导航、舞台渲染)和assets/deck-stage.js样式表。HTML文件中引用它们的路径为assets/styles.css和assets/deck-stage.js,因此两者必须与克隆的HTML文件放在同一目录下,否则生成的产物中这些路径会返回404错误,导航和样式会失效。如果偏好单个独立文件,将JS/CSS内联到HTML的assets/styles.css/<script>块中也是可行的替代方案。<style> - 替换占位内容为用户实际的标题、正文、数字、名称、日期和章节标签。替换图片占位符时请匹配现有尺寸。
- 保留设计系统。切勿替换字体、更改配色、重构布局网格或移除装饰元素(角落括号、纸张纹理、几何形状、插画SVG)。这些都是本模板标识的一部分。
- 通过复制布局调整演示文稿长度。如果用户的内容比演示版多,复制最适合的现有幻灯片布局。如果内容更少,从底部删除幻灯片。更新页码标签。
- 设计缺失的布局:如果需要模板中没有的幻灯片布局,请使用相同的字体、配色、装饰元素、间距规则和组件语法从头设计——切勿切换到其他模板。
- 保留原版导航运行时。如果演示文稿包含或内联键盘处理程序,请保持其完整。
assets/deck-stage.js
Output contract
输出约定
Emit between tags:
<artifact><artifact identifier="zhangzara-pin-and-paper" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>在标签之间输出:
<artifact><artifact identifier="zhangzara-pin-and-paper" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>Source & license
来源与许可证
Vendored from upstream MIT-licensed
.
zarazhangrui/beautiful-html-templatesThe full upstream MIT license text — including the original copyright notice — ships in this skill at
and must be redistributed alongside any copy of ,
, or any vendored runtime. See for the upstream metadata snapshot.
LICENSEexample.htmltemplate.jsonassets/template.json源自上游MIT许可证的。
zarazhangrui/beautiful-html-templates完整的上游MIT许可证文本——包括原始版权声明——随本技能一同发布在中,并且必须与、或任何第三方运行时的副本一同分发。有关上游元数据快照,请参阅。
LICENSEexample.htmltemplate.jsonassets/template.json