Html Ppt Zhangzara Playful
- 63 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
Helps with ai & agent building tasks during AI-assisted development.
About
html-ppt-zhangzara-playful is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.
- html-ppt-zhangzara-playful
- AI & Agent Building
- AI-coding skill
Html Ppt Zhangzara Playful by the numbers
- 63 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #6,243 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill html-ppt-zhangzara-playfulAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 63 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Helps with ai & agent building tasks during AI-assisted development.
Files
Playful
Sun-warm peach background with Syne display: a friendly indie launch deck.
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: light
- Formality: low
- Density: medium
- Slides in demo: 10
Best for
Anything that should feel warm, indie, and approachable: creator portfolios, indie product launches, lifestyle brands, small-business pitches, newsletter / community decks. Also welcoming for any deck — including tech or research — that wants to feel friendly and human rather than corporate.
Avoid for
Contexts where institutional credibility matters more than warmth — the peach palette is intentionally informal.
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.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-playful" 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Template</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg: #F0C8A0;
--bg-alt: #E8B88E;
--text: #1A1A1A;
--accent: #1A1A1A;
--light: #F7DEC6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
background: var(--bg);
font-family: 'Space Grotesk', sans-serif;
color: var(--text);
}
.presentation {
width: 100vw;
height: 100vh;
position: relative;
}
.slide {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, visibility 0.6s ease;
overflow: hidden;
padding: 3rem 4rem;
display: flex;
flex-direction: column;
background: var(--bg);
}
.slide.active {
opacity: 1;
visibility: visible;
}
/* Navigation */
.nav-controls {
position: fixed;
bottom: 2rem;
right: 3rem;
z-index: 1000;
display: flex;
gap: 1rem;
align-items: center;
}
.nav-btn {
width: 48px;
height: 48px;
border: 2px solid var(--text);
background: transparent;
color: var(--text);
font-family: 'Space Grotesk', sans-serif;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.nav-btn:hover {
background: var(--text);
color: var(--bg);
}
.slide-counter {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.progress-bar {
position: fixed;
bottom: 0;
left: 0;
height: 4px;
background: var(--text);
z-index: 1000;
transition: width 0.4s ease;
}
/* Doodle SVGs */
.doodle {
position: absolute;
pointer-events: none;
}
.blob-frame {
border: 3px solid var(--text);
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
background: transparent;
}
.blob-fill {
background: var(--text);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.rough-box {
border: 3px solid var(--text);
position: relative;
}
.rough-box::before {
content: '';
position: absolute;
top: -3px; left: -3px; right: -3px; bottom: -3px;
border: 3px solid var(--text);
transform: rotate(0.5deg);
pointer-events: none;
}
.torn-edge {
clip-path: polygon(
0% 2%, 3% 0%, 7% 1%, 12% 0%, 18% 2%, 25% 0%, 32% 1%, 40% 0%,
48% 2%, 55% 0%, 62% 1%, 70% 0%, 78% 2%, 85% 0%, 92% 1%, 100% 0%,
100% 15%, 98% 25%, 100% 35%, 99% 45%, 100% 55%, 98% 65%, 100% 75%,
99% 85%, 100% 95%, 98% 100%, 90% 99%, 82% 100%, 75% 98%, 68% 100%,
60% 99%, 52% 100%, 45% 98%, 38% 100%, 30% 99%, 22% 100%, 15% 98%,
8% 100%, 2% 99%, 0% 100%, 1% 90%, 0% 80%, 2% 70%, 0% 60%, 1% 50%,
0% 40%, 2% 30%, 0% 20%, 1% 10%
);
}
.scribble-line {
stroke: var(--text);
stroke-width: 2;
fill: none;
stroke-linecap: round;
}
/* Typography */
.font-display {
font-family: 'Syne', sans-serif;
font-weight: 800;
line-height: 0.85;
letter-spacing: -0.02em;
}
.font-body {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
line-height: 1.5;
}
/* ========================================
SLIDE 1 - TITLE / OPENING
======================================== */
.slide-1 {
justify-content: center;
padding: 4rem 5rem;
}
.slide-1 .date-large {
font-family: 'Syne', sans-serif;
font-size: clamp(4rem, 10vw, 9rem);
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.03em;
margin-bottom: 1rem;
}
.slide-1 .title-main {
font-family: 'Syne', sans-serif;
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 700;
line-height: 1;
margin-bottom: 2rem;
max-width: 70%;
}
.slide-1 .subtitle {
font-size: 1.1rem;
font-weight: 500;
max-width: 400px;
line-height: 1.6;
}
.slide-1 .doodle-blob-1 {
width: 280px;
height: 320px;
right: 8%;
top: 15%;
border: 3px solid var(--text);
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
display: flex;
align-items: center;
justify-content: center;
}
.slide-1 .doodle-blob-1::after {
content: '';
width: 180px;
height: 200px;
background: var(--text);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.slide-1 .doodle-blob-2 {
width: 160px;
height: 180px;
right: 25%;
bottom: 18%;
border: 3px solid var(--text);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
background: var(--bg);
}
.slide-1 .vertical-text {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%) rotate(90deg);
font-family: 'Syne', sans-serif;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.1em;
}
/* ========================================
SLIDE 2 - TABLE OF CONTENTS
======================================== */
.slide-2 {
padding: 3rem 4rem;
}
.slide-2 .section-label {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 2rem;
opacity: 0.7;
}
.slide-2 .toc-title {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
margin-bottom: 3rem;
max-width: 60%;
}
.slide-2 .toc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 900px;
}
.toc-item {
border: 3px solid var(--text);
padding: 1.5rem;
position: relative;
background: var(--bg);
}
.toc-item::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
right: -6px;
bottom: -6px;
border: 2px solid var(--text);
z-index: -1;
}
.toc-item .num {
font-family: 'Syne', sans-serif;
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.5rem;
}
.toc-item .label {
font-size: 1rem;
font-weight: 500;
}
.slide-2 .doodle-scribble {
position: absolute;
right: 5%;
top: 20%;
width: 200px;
height: 200px;
}
/* ========================================
SLIDE 3 - ABOUT / VISION
======================================== */
.slide-3 {
justify-content: center;
align-items: flex-start;
padding: 4rem 5rem;
}
.slide-3 .big-statement {
font-family: 'Syne', sans-serif;
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 700;
line-height: 1.1;
max-width: 75%;
margin-bottom: 3rem;
}
.slide-3 .body-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
max-width: 800px;
}
.slide-3 .body-text {
font-size: 1rem;
line-height: 1.7;
opacity: 0.9;
}
.slide-3 .doodle-frame {
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
width: 220px;
height: 280px;
border: 3px solid var(--text);
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.slide-3 .doodle-frame::after {
content: '';
position: absolute;
top: 15px;
left: 15px;
width: 190px;
height: 250px;
background: var(--text);
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
/* ========================================
SLIDE 4 - DATA / CHART
======================================== */
.slide-4 {
padding: 3rem 4rem;
}
.slide-4 .chart-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 3rem;
}
.slide-4 .chart-title {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
max-width: 50%;
}
.slide-4 .chart-legend {
display: flex;
gap: 1.5rem;
font-size: 0.85rem;
font-weight: 500;
}
.legend-dot {
width: 12px;
height: 12px;
display: inline-block;
margin-right: 0.5rem;
vertical-align: middle;
}
.chart-area {
flex: 1;
display: flex;
align-items: flex-end;
gap: 2rem;
padding-bottom: 2rem;
position: relative;
}
.chart-bars {
display: flex;
align-items: flex-end;
gap: 1.5rem;
height: 100%;
flex: 1;
padding-left: 3rem;
border-left: 3px solid var(--text);
border-bottom: 3px solid var(--text);
padding-bottom: 1rem;
padding-top: 2rem;
}
.bar-group {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
gap: 0.5rem;
}
.bar {
width: 100%;
max-width: 80px;
background: var(--text);
transition: height 0.8s ease;
position: relative;
}
.bar.alt {
background: transparent;
border: 3px solid var(--text);
}
.bar-label {
font-size: 0.8rem;
font-weight: 600;
text-align: center;
}
.y-axis {
position: absolute;
left: 0;
top: 0;
bottom: 3rem;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.75rem;
font-weight: 500;
padding-right: 0.5rem;
}
.slide-4 .doodle-star {
position: absolute;
right: 8%;
top: 30%;
width: 150px;
height: 150px;
}
/* ========================================
SLIDE 5 - TEAM / PEOPLE
======================================== */
.slide-5 {
padding: 3rem 4rem;
}
.slide-5 .team-title {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 0.5rem;
}
.slide-5 .team-sub {
font-size: 1rem;
opacity: 0.7;
margin-bottom: 3rem;
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
flex: 1;
align-content: center;
}
.team-card {
border: 3px solid var(--text);
padding: 1.5rem;
position: relative;
background: var(--bg);
}
.team-card:nth-child(2) {
transform: rotate(1deg);
}
.team-card:nth-child(3) {
transform: rotate(-1deg);
}
.team-card:nth-child(4) {
transform: rotate(0.5deg);
}
.team-card .avatar-placeholder {
width: 60px;
height: 60px;
background: var(--text);
border-radius: 50%;
margin-bottom: 1rem;
}
.team-card .name {
font-family: 'Syne', sans-serif;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.team-card .role {
font-size: 0.85rem;
opacity: 0.7;
}
.slide-5 .doodle-squiggle {
position: absolute;
bottom: 10%;
right: 5%;
width: 180px;
height: 100px;
}
/* ========================================
SLIDE 6 - SERVICES / OFFERINGS
======================================== */
.slide-6 {
padding: 3rem 4rem;
justify-content: center;
}
.slide-6 .services-title {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
margin-bottom: 3rem;
max-width: 50%;
}
.services-collage {
display: grid;
grid-template-columns: 1.2fr 0.8fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1.5rem;
flex: 1;
max-height: 55vh;
}
.service-block {
border: 3px solid var(--text);
padding: 1.5rem;
position: relative;
background: var(--bg);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-block.filled {
background: var(--text);
color: var(--bg);
}
.service-block:nth-child(1) { transform: rotate(-0.5deg); }
.service-block:nth-child(2) { transform: rotate(0.8deg); }
.service-block:nth-child(3) { transform: rotate(-0.3deg); }
.service-block:nth-child(4) { transform: rotate(0.5deg); }
.service-block:nth-child(5) { transform: rotate(-0.7deg); }
.service-block .block-num {
font-family: 'Syne', sans-serif;
font-size: 2rem;
font-weight: 800;
}
.service-block .block-title {
font-family: 'Syne', sans-serif;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.service-block .block-desc {
font-size: 0.9rem;
line-height: 1.5;
opacity: 0.8;
}
/* ========================================
SLIDE 7 - TIMELINE / PROCESS
======================================== */
.slide-7 {
padding: 3rem 4rem;
justify-content: center;
}
.slide-7 .timeline-title {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 3rem;
}
.timeline-track {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
flex: 1;
max-height: 50vh;
padding-top: 2rem;
}
.timeline-track::before {
content: '';
position: absolute;
top: 40px;
left: 5%;
right: 5%;
height: 3px;
background: var(--text);
border-radius: 2px;
}
.timeline-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
position: relative;
}
.step-node {
width: 64px;
height: 64px;
border: 3px solid var(--text);
border-radius: 50%;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Syne', sans-serif;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.step-node.filled {
background: var(--text);
color: var(--bg);
}
.step-title {
font-family: 'Syne', sans-serif;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.5rem;
max-width: 140px;
}
.step-desc {
font-size: 0.8rem;
opacity: 0.7;
max-width: 160px;
line-height: 1.4;
}
.slide-7 .doodle-arrow {
position: absolute;
bottom: 15%;
right: 10%;
width: 120px;
height: 80px;
}
/* ========================================
SLIDE 8 - STATISTICS / BIG NUMBERS
======================================== */
.slide-8 {
padding: 3rem 4rem;
justify-content: center;
}
.slide-8 .stats-title {
font-family: 'Syne', sans-serif;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 700;
margin-bottom: 3rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
flex: 1;
align-content: center;
}
.stat-item {
position: relative;
}
.stat-num {
font-family: 'Syne', sans-serif;
font-size: clamp(4rem, 8vw, 7rem);
font-weight: 800;
line-height: 1;
margin-bottom: 1rem;
}
.stat-label {
font-size: 1rem;
font-weight: 500;
opacity: 0.8;
max-width: 200px;
}
.stat-item:nth-child(1) .stat-num { transform: rotate(-1deg); }
.stat-item:nth-child(2) .stat-num { transform: rotate(0.5deg); }
.stat-item:nth-child(3) .stat-num { transform: rotate(-0.5deg); }
.slide-8 .doodle-blob-big {
position: absolute;
right: 5%;
bottom: 10%;
width: 250px;
height: 250px;
background: var(--text);
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
opacity: 0.08;
}
/* ========================================
SLIDE 9 - GALLERY / WORK SAMPLES
======================================== */
.slide-9 {
padding: 3rem 4rem;
}
.slide-9 .gallery-title {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 0.5rem;
}
.slide-9 .gallery-sub {
font-size: 1rem;
opacity: 0.7;
margin-bottom: 2.5rem;
}
.gallery-collage {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1rem;
flex: 1;
max-height: 60vh;
}
.gallery-item {
border: 3px solid var(--text);
position: relative;
overflow: hidden;
background: var(--bg-alt);
}
.gallery-item:nth-child(1) {
grid-row: 1 / 3;
transform: rotate(-0.5deg);
}
.gallery-item:nth-child(2) {
transform: rotate(0.5deg);
}
.gallery-item:nth-child(3) {
transform: rotate(-0.3deg);
}
.gallery-item:nth-child(4) {
grid-column: 2 / 4;
transform: rotate(0.3deg);
}
.gallery-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Syne', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
opacity: 0.5;
}
.gallery-tag {
position: absolute;
bottom: 1rem;
left: 1rem;
background: var(--text);
color: var(--bg);
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
font-weight: 600;
}
/* ========================================
SLIDE 10 - CLOSING / CONTACT
======================================== */
.slide-10 {
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem;
}
.slide-10 .closing-big {
font-family: 'Syne', sans-serif;
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 800;
line-height: 0.9;
margin-bottom: 2rem;
}
.slide-10 .closing-sub {
font-size: 1.2rem;
font-weight: 500;
opacity: 0.8;
margin-bottom: 3rem;
}
.slide-10 .contact-block {
border: 3px solid var(--text);
padding: 2rem 3rem;
display: inline-block;
position: relative;
}
.slide-10 .contact-block::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: -8px;
bottom: -8px;
border: 3px solid var(--text);
z-index: -1;
}
.slide-10 .contact-line {
font-size: 1rem;
font-weight: 500;
margin: 0.5rem 0;
}
.slide-10 .doodle-circle {
position: absolute;
left: 10%;
top: 20%;
width: 100px;
height: 100px;
border: 3px solid var(--text);
border-radius: 50%;
}
.slide-10 .doodle-rect {
position: absolute;
right: 12%;
bottom: 25%;
width: 140px;
height: 100px;
border: 3px solid var(--text);
transform: rotate(10deg);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.slide {
padding: 2rem;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.stats-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.services-collage {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.gallery-collage {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
}
.gallery-item:nth-child(1) {
grid-row: 1 / 2;
}
.gallery-item:nth-child(4) {
grid-column: 1 / 3;
}
.timeline-track {
flex-direction: column;
gap: 2rem;
}
.timeline-track::before {
display: none;
}
.slide-3 .body-columns {
grid-template-columns: 1fr;
}
.slide-2 .toc-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<div class="presentation">
<!-- ==================== SLIDE 1: TITLE ==================== -->
<div class="slide slide-1 active" data-index="0">
<div class="date-large">02.05.26</div>
<div class="title-main">Creative Direction & Visual Systems</div>
<div class="subtitle">A template presentation for bold ideas, raw expression, and unfiltered storytelling. Built with expressive typography and organic forms.</div>
<div class="doodle-blob-1 doodle"></div>
<div class="doodle-blob-2 doodle"></div>
<div class="vertical-text">SCROLL DOWN →</div>
<svg class="doodle" style="position:absolute; bottom:15%; left:5%; width:120px; height:60px;" viewBox="0 0 120 60">
<path class="scribble-line" d="M5,30 Q20,5 35,30 T65,30 T95,30" />
<path class="scribble-line" d="M10,40 Q25,20 40,40 T70,40" />
</svg>
</div>
<!-- ==================== SLIDE 2: TABLE OF CONTENTS ==================== -->
<div class="slide slide-2" data-index="1">
<div class="section-label">Overview</div>
<div class="toc-title">What We Will Cover Today</div>
<div class="toc-grid">
<div class="toc-item">
<div class="num">01</div>
<div class="label">Vision & Mission Statement</div>
</div>
<div class="toc-item">
<div class="num">02</div>
<div class="label">Market Analysis & Data Insights</div>
</div>
<div class="toc-item">
<div class="num">03</div>
<div class="label">Team Structure & Leadership</div>
</div>
<div class="toc-item">
<div class="num">04</div>
<div class="label">Core Services & Offerings</div>
</div>
<div class="toc-item">
<div class="num">05</div>
<div class="label">Process & Workflow Timeline</div>
</div>
<div class="toc-item">
<div class="num">06</div>
<div class="label">Results, Metrics & Impact</div>
</div>
</div>
<svg class="doodle-scribble" viewBox="0 0 200 200" style="position:absolute; right:5%; top:15%;">
<path class="scribble-line" d="M20,100 C40,40 80,20 100,60 C120,100 160,80 180,120 C200,160 160,180 120,160 C80,140 40,160 20,100" />
<path class="scribble-line" d="M50,100 C60,70 90,60 110,90 C130,120 150,100 160,130" />
</svg>
</div>
<!-- ==================== SLIDE 3: VISION ==================== -->
<div class="slide slide-3" data-index="2">
<div class="big-statement">We believe in raw expression over polished perfection. Every project begins with a question and ends with a statement.</div>
<div class="body-columns">
<div class="body-text">Our approach combines strategic thinking with intuitive design. We build visual systems that adapt, evolve, and resonate with audiences across cultures and contexts.</div>
<div class="body-text">Founded in 2019, we have partnered with independent artists, cultural institutions, and forward-thinking brands to create work that challenges conventions.</div>
</div>
<div class="doodle-frame doodle"></div>
<svg class="doodle" style="position:absolute; left:5%; bottom:15%; width:100px; height:100px;" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" class="scribble-line" fill="none" />
<circle cx="50" cy="50" r="25" class="scribble-line" fill="none" />
</svg>
</div>
<!-- ==================== SLIDE 4: CHART / DATA ==================== -->
<div class="slide slide-4" data-index="3">
<div class="chart-header">
<div class="chart-title">Growth Metrics Over Four Quarters</div>
<div class="chart-legend">
<span><span class="legend-dot" style="background:var(--text);"></span>Revenue</span>
<span><span class="legend-dot" style="background:transparent; border:2px solid var(--text);"></span>Engagement</span>
</div>
</div>
<div class="chart-area">
<div class="y-axis">
<span>100</span>
<span>75</span>
<span>50</span>
<span>25</span>
<span>0</span>
</div>
<div class="chart-bars">
<div class="bar-group">
<div class="bar" style="height: 45%;"></div>
<div class="bar alt" style="height: 30%;"></div>
<div class="bar-label">Q1</div>
</div>
<div class="bar-group">
<div class="bar" style="height: 60%;"></div>
<div class="bar alt" style="height: 50%;"></div>
<div class="bar-label">Q2</div>
</div>
<div class="bar-group">
<div class="bar" style="height: 75%;"></div>
<div class="bar alt" style="height: 65%;"></div>
<div class="bar-label">Q3</div>
</div>
<div class="bar-group">
<div class="bar" style="height: 90%;"></div>
<div class="bar alt" style="height: 85%;"></div>
<div class="bar-label">Q4</div>
</div>
<div class="bar-group">
<div class="bar" style="height: 100%;"></div>
<div class="bar alt" style="height: 95%;"></div>
<div class="bar-label">Q5</div>
</div>
</div>
</div>
<svg class="doodle-star" viewBox="0 0 150 150" style="position:absolute; right:8%; top:25%;">
<path class="scribble-line" d="M75,10 L85,55 L130,55 L95,85 L105,130 L75,100 L45,130 L55,85 L20,55 L65,55 Z" fill="none" />
</svg>
</div>
<!-- ==================== SLIDE 5: TEAM ==================== -->
<div class="slide slide-5" data-index="4">
<div class="team-title">The Collective</div>
<div class="team-sub">Four perspectives, one shared obsession with craft.</div>
<div class="team-grid">
<div class="team-card">
<div class="avatar-placeholder"></div>
<div class="name">Alex Chen</div>
<div class="role">Creative Director</div>
</div>
<div class="team-card">
<div class="avatar-placeholder"></div>
<div class="name">Mira Okafor</div>
<div class="role">Strategy Lead</div>
</div>
<div class="team-card">
<div class="avatar-placeholder"></div>
<div class="name">Jonas Weber</div>
<div class="role">Visual Designer</div>
</div>
<div class="team-card">
<div class="avatar-placeholder"></div>
<div class="name">Suki Tanaka</div>
<div class="role">Motion Artist</div>
</div>
</div>
<svg class="doodle-squiggle" viewBox="0 0 180 100" style="position:absolute; bottom:10%; right:5%;">
<path class="scribble-line" d="M10,50 Q30,10 50,50 T90,50 T130,50 T170,50" />
<path class="scribble-line" d="M20,70 Q40,40 60,70 T100,70" />
</svg>
</div>
<!-- ==================== SLIDE 6: SERVICES ==================== -->
<div class="slide slide-6" data-index="5">
<div class="services-title">What We Do Best</div>
<div class="services-collage">
<div class="service-block">
<div class="block-num">01</div>
<div>
<div class="block-title">Brand Identity</div>
<div class="block-desc">Visual systems that capture essence and scale across every touchpoint.</div>
</div>
</div>
<div class="service-block filled">
<div class="block-num">02</div>
<div>
<div class="block-title">Art Direction</div>
<div class="block-desc">Creative vision for campaigns, editorial, and cultural projects.</div>
</div>
</div>
<div class="service-block">
<div class="block-num">03</div>
<div>
<div class="block-title">Motion Design</div>
<div class="block-desc">Animation and kinetic identity that brings static brands to life.</div>
</div>
</div>
<div class="service-block">
<div class="block-num">04</div>
<div>
<div class="block-title">Digital Experiences</div>
<div class="block-desc">Websites and interactive platforms with personality and purpose.</div>
</div>
</div>
<div class="service-block filled">
<div class="block-num">05</div>
<div>
<div class="block-title">Typography</div>
<div class="block-desc">Custom letterforms and type systems for distinctive voices.</div>
</div>
</div>
</div>
</div>
<!-- ==================== SLIDE 7: TIMELINE ==================== -->
<div class="slide slide-7" data-index="6">
<div class="timeline-title">Our Process in Five Steps</div>
<div class="timeline-track">
<div class="timeline-step">
<div class="step-node filled">1</div>
<div class="step-title">Discover</div>
<div class="step-desc">Research, interviews, and competitive landscape analysis</div>
</div>
<div class="timeline-step">
<div class="step-node">2</div>
<div class="step-title">Define</div>
<div class="step-desc">Strategic positioning and core narrative development</div>
</div>
<div class="timeline-step">
<div class="step-node filled">3</div>
<div class="step-title">Design</div>
<div class="step-desc">Visual exploration, prototyping, and iteration cycles</div>
</div>
<div class="timeline-step">
<div class="step-node">4</div>
<div class="step-title">Develop</div>
<div class="step-desc">Production, asset creation, and implementation support</div>
</div>
<div class="timeline-step">
<div class="step-node filled">5</div>
<div class="step-title">Deploy</div>
<div class="step-desc">Launch support and ongoing performance measurement</div>
</div>
</div>
<svg class="doodle-arrow" viewBox="0 0 120 80" style="position:absolute; bottom:15%; right:10%;">
<path class="scribble-line" d="M10,40 L100,40 L80,20 M100,40 L80,60" />
</svg>
</div>
<!-- ==================== SLIDE 8: BIG NUMBERS ==================== -->
<div class="slide slide-8" data-index="7">
<div class="stats-title">Impact by the Numbers</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-num">47</div>
<div class="stat-label">Projects delivered across three continents in the last year</div>
</div>
<div class="stat-item">
<div class="stat-num">12</div>
<div class="stat-label">Industry awards and recognitions for creative excellence</div>
</div>
<div class="stat-item">
<div class="stat-num">98%</div>
<div class="stat-label">Client retention rate with ongoing partnerships</div>
</div>
</div>
<div class="doodle-blob-big doodle"></div>
<svg class="doodle" style="position:absolute; left:8%; bottom:20%; width:80px; height:80px;" viewBox="0 0 80 80">
<rect x="10" y="10" width="60" height="60" class="scribble-line" fill="none" rx="5" />
<rect x="20" y="20" width="40" height="40" class="scribble-line" fill="none" rx="3" />
</svg>
</div>
<!-- ==================== SLIDE 9: GALLERY ==================== -->
<div class="slide slide-9" data-index="8">
<div class="gallery-title">Selected Works</div>
<div class="gallery-sub">A glimpse into recent collaborations and independent projects.</div>
<div class="gallery-collage">
<div class="gallery-item">
<div class="gallery-placeholder">IMG 01</div>
<div class="gallery-tag">Editorial</div>
</div>
<div class="gallery-item">
<div class="gallery-placeholder">IMG 02</div>
<div class="gallery-tag">Identity</div>
</div>
<div class="gallery-item">
<div class="gallery-placeholder">IMG 03</div>
<div class="gallery-tag">Motion</div>
</div>
<div class="gallery-item">
<div class="gallery-placeholder">IMG 04</div>
<div class="gallery-tag">Campaign</div>
</div>
</div>
</div>
<!-- ==================== SLIDE 10: CLOSING ==================== -->
<div class="slide slide-10" data-index="9">
<div class="closing-big">Thank You<br>Let Us Talk</div>
<div class="closing-sub">Questions, projects, or just a conversation about ideas.</div>
<div class="contact-block">
<div class="contact-line">hello@example.studio</div>
<div class="contact-line">+1 (555) 000 1234</div>
<div class="contact-line">www.example.studio</div>
</div>
<div class="doodle-circle doodle"></div>
<div class="doodle-rect doodle"></div>
<svg class="doodle" style="position:absolute; left:15%; bottom:20%; width:100px; height:50px;" viewBox="0 0 100 50">
<path class="scribble-line" d="M5,25 Q25,5 50,25 T95,25" />
</svg>
</div>
</div>
<div class="nav-controls">
<button class="nav-btn" id="prevBtn">←</button>
<span class="slide-counter"><span id="currentSlide">1</span> / <span id="totalSlides">10</span></span>
<button class="nav-btn" id="nextBtn">→</button>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const currentSlideEl = document.getElementById('currentSlide');
const totalSlidesEl = document.getElementById('totalSlides');
const progressBar = document.getElementById('progressBar');
let current = 0;
const total = slides.length;
totalSlidesEl.textContent = total;
function updateSlide() {
slides.forEach((slide, index) => {
slide.classList.toggle('active', index === current);
});
currentSlideEl.textContent = current + 1;
progressBar.style.width = ((current + 1) / total * 100) + '%';
}
function next() {
if (current < total - 1) {
current++;
updateSlide();
}
}
function prev() {
if (current > 0) {
current--;
updateSlide();
}
}
nextBtn.addEventListener('click', next);
prevBtn.addEventListener('click', prev);
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
next();
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
prev();
}
});
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
document.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, { passive: true });
function handleSwipe() {
const swipeThreshold = 50;
if (touchEndX < touchStartX - swipeThreshold) {
next();
} else if (touchEndX > touchStartX + swipeThreshold) {
prev();
}
}
updateSlide();
</script>
</body>
</html>
MIT License
Copyright (c) 2026 Zara Zhang
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
{
"slug": "zhangzara-playful",
"name": "Playful",
"tagline": "Sun-warm peach background with Syne display: a friendly indie launch deck.",
"mood": [
"warm",
"approachable",
"indie",
"friendly"
],
"occasion": [
"creator portfolio",
"indie product launch",
"lifestyle brand",
"small-business pitch",
"newsletter / community"
],
"tone": [
"upbeat",
"informal",
"welcoming"
],
"formality": "low",
"density": "medium",
"palette": {
"bg": "#F0C8A0",
"bg_alt": "#E8B88E",
"text": "#1A1A1A",
"light": "#F7DEC6",
"description": "warm peach / sand backgrounds with ink-black structure and lighter cream cards; single warm temperature throughout"
},
"typography": {
"display": "Syne",
"body": "Space Grotesk",
"style": "geometric variable display with personality + clean grotesk body"
},
"scheme": "light",
"best_for": "Anything that should feel warm, indie, and approachable: creator portfolios, indie product launches, lifestyle brands, small-business pitches, newsletter / community decks. Also welcoming for any deck — including tech or research — that wants to feel friendly and human rather than corporate.",
"avoid_for": "Contexts where institutional credibility matters more than warmth — the peach palette is intentionally informal.",
"slide_count": 10,
"navigation": "inline keyboard handler with on-page slide counter",
"source": "https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/playful"
}
Related skills
Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k
Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k
CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k
Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k
Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72
Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10AI & Agent Buildingagents