html-ppt-zhangzara-broadside
Broadside — Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements.
- License 许可
- MIT
- 最近更新
- 2026-08-26
- Stars
- ★ 1
- Forks
- 0
01 前言 Front Matter
- od
- { "mode": "deck", "preview": { "type": "html", "entry": "example.html" }, "scenario": "marketing", "upstream": "https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/broadside", "animations": false, "design_system": { "requires": false }, "speaker_notes": false, "upstream_license": "MIT" }
- name
- html-ppt-zhangzara-broadside
- triggers
- [ "broadside", "zhangzara-broadside", "editorial", "dramatic", "graphic", "punchy", "brand manifesto", "founder vision deck", "html deck", "html slides", "zhangzara" ]
- description
- Broadside — Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements.
02 资源文件 3
- 参考文档example.html72.8 KB
- 许可证LICENSE1.0 KB
- 参考文档template.json1.7 KB
03 SKILL.md 正文
Broadside
Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack.
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.
At a glance
- Scheme: dark
- Formality: medium-high
- Density: medium
- Slides in demo: 16
Best for
Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements. Also a striking pick for tech, research, or business decks that want a dramatic single-accent editorial feel.
Avoid for
Decks that need to feel quiet, warm, or institutionally traditional — the dark canvas with fire-orange accent commits to drama.
Workflow
- Clone
example.htmlinto the user's workspace as the working file. - 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
assets/deck-stage.jsor inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-broadside" 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.
04 同仓库更多 Skills
vertical-grid
Enforce Swiss-Industrial 4px baseline vertical grid for consistent rhythm
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
valid-skill
A complete test skill with all optional directories.
table-patterns
Create and enhance data tables with proper patterns, design tokens, and features
swiss-design
Enforce Swiss design principles - reduce visual noise, remove harsh borders
supabase-postgres-best-practices
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.