html-ppt-zhangzara-pin-and-paper

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Pin & 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

使用流程

  1. Clone
    example.html
    AND the
    assets/
    folder
    into the user's workspace. This template ships an
    assets/deck-stage.js
    runtime (keyboard navigation, stage rendering) and an
    assets/styles.css
    stylesheet. The HTML references them as
    assets/deck-stage.js
    and
    assets/styles.css
    , 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 single
    <script>
    /
    <style>
    block in the HTML is an acceptable alternative when a single self-contained file is preferred.
  2. Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
  3. 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.
  4. 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.
  5. 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.
  6. Keep the navigation runtime as shipped. If the deck ships an
    assets/deck-stage.js
    or inline keyboard handler, leave it intact.
  1. example.html
    assets/
    文件夹克隆
    到用户的工作区。 本模板包含
    assets/deck-stage.js
    运行时(键盘导航、舞台渲染)和
    assets/styles.css
    样式表。HTML文件中引用它们的路径为
    assets/deck-stage.js
    assets/styles.css
    ,因此两者必须与克隆的HTML文件放在同一目录下,否则生成的产物中这些路径会返回404错误,导航和样式会失效。如果偏好单个独立文件,将JS/CSS内联到HTML的
    <script>
    /
    <style>
    块中也是可行的替代方案。
  2. 替换占位内容为用户实际的标题、正文、数字、名称、日期和章节标签。替换图片占位符时请匹配现有尺寸。
  3. 保留设计系统。切勿替换字体、更改配色、重构布局网格或移除装饰元素(角落括号、纸张纹理、几何形状、插画SVG)。这些都是本模板标识的一部分。
  4. 通过复制布局调整演示文稿长度。如果用户的内容比演示版多,复制最适合的现有幻灯片布局。如果内容更少,从底部删除幻灯片。更新页码标签。
  5. 设计缺失的布局:如果需要模板中没有的幻灯片布局,请使用相同的字体、配色、装饰元素、间距规则和组件语法从头设计——切勿切换到其他模板。
  6. 保留原版导航运行时。如果演示文稿包含
    assets/deck-stage.js
    或内联键盘处理程序,请保持其完整。

Output contract

输出约定

Emit between
<artifact>
tags:
<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-templates
.
The full upstream MIT license text — including the original copyright notice — ships in this skill at
LICENSE
and must be redistributed alongside any copy of
example.html
,
template.json
, or any vendored
assets/
runtime. See
template.json
for the upstream metadata snapshot.
源自上游MIT许可证的
zarazhangrui/beautiful-html-templates
完整的上游MIT许可证文本——包括原始版权声明——随本技能一同发布在
LICENSE
中,并且必须与
example.html
template.json
或任何第三方
assets/
运行时的副本一同分发。有关上游元数据快照,请参阅
template.json