html-ppt-zhangzara-raw-grid

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Raw Grid

Raw Grid

Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette.
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.
新粗野主义风格演示文稿,带有粗边框、偏移阴影和粉/鼠尾草绿/墨黑配色方案。
这是一个独立完整的HTML演示文稿——排版、配色方案、装饰系统和幻灯片样式均已统一调校。跨模板混合布局会破坏这套设计体系,请严格遵循本模板的规范。

At a glance

概览

  • Scheme: light
  • Formality: medium-low
  • Density: high
  • Slides in demo: 10
  • 风格: 浅色
  • 正式程度: 中低
  • 信息密度:
  • 演示幻灯片数量: 10张

Best for

适用场景

Anything that should feel direct and graphic-confident: founder pitches, accelerator demos, brand decks, indie launches, creator portfolios. Strong for stat slides, comparison tables, and process flows. Equally good for tech, research, or finance when the speaker wants the deck to feel scrappy-confident rather than buttoned-up.
适用于需要展现直接、自信视觉风格的场景:创始人路演、加速器演示、品牌推介、独立产品发布、创作者作品集。尤其适合数据统计幻灯片、对比表格和流程示意图。当演讲者希望演示文稿展现出随性但自信的风格,而非刻板严谨时,也可用于科技、研究或金融领域。

Avoid for

避免场景

Contexts that need to feel soft, warm, or intentionally quiet — the brutalist borders and offset shadows commit to a graphic voice.
不适用于需要柔和、温暖或低调氛围的场景——粗野主义的边框和偏移阴影会形成强烈的视觉风格。

Workflow

使用流程

  1. Clone
    example.html
    into the user's workspace as the working file.
  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
    **到用户工作区作为工作文件。
  2. 替换占位内容为用户真实的标题、正文内容、数据、名称、日期和章节标签。替换图片占位符时请匹配原有尺寸。
  3. 保留设计体系。切勿替换字体、更改配色、重构布局网格或移除装饰元素(边角括号、纸张纹理、几何图形、SVG插画)。这些都是该模板标识的一部分。
  4. 通过复制布局调整演示文稿长度。如果用户内容超出演示模板的容量,复制最适合的现有幻灯片布局。如果内容较少,则从底部删除幻灯片,并更新页码标签。
  5. 设计缺失的布局:如果需要模板中没有的幻灯片布局,请使用相同的字体、配色、装饰元素、间距规则和组件逻辑从头设计——切勿切换到其他模板。
  6. 保留原版导航运行机制。如果演示文稿附带
    assets/deck-stage.js
    或内嵌键盘事件处理器,请保持其完整。

Output contract

输出约定

Emit between
<artifact>
tags:
<artifact identifier="zhangzara-raw-grid" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
将内容包裹在
<artifact>
标签中:
<artifact identifier="zhangzara-raw-grid" 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
获取上游元数据快照。