{"id":"7159e3ec-ec7f-47d0-b45f-9cd4e1342d47","shortId":"gXk2Va","kind":"skill","title":"html-ppt-zhangzara-studio","tagline":"Studio — Black canvas with electric-yellow type; high-voltage design studio aesthetic. Anything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work.","description":"# Studio\n\n> Black canvas with electric-yellow type; high-voltage design studio aesthetic.\n\nA single self-contained HTML deck — typography, palette, decorative system,\nand slide vocabulary are all tuned together. Mixing layouts across templates\nbreaks the system; stay inside this one.\n\n## At a glance\n\n- **Scheme:** dark\n- **Formality:** medium\n- **Density:** medium\n- **Slides in demo:** 12\n\n## Best for\n\nAnything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work. Also a striking unexpected choice for tech, research, or business decks where the speaker wants the deck to *be* a brand statement.\n\n## Avoid for\n\nContexts that should feel quiet or institutional — the black-and-electric-yellow palette is the loudest in the library.\n\n## Workflow\n\n1. **Clone `example.html`** into the user's workspace as the working file.\n2. **Replace placeholder content** with the user's real headlines, body copy,\n numbers, names, dates, and section labels. Match existing dimensions when\n swapping image placeholders.\n3. **Preserve the design system.** Never substitute fonts, recolor the palette,\n restructure the layout grid, or strip decorative elements (corner brackets,\n paper grain, geometric shapes, illustrated SVGs). They are part of the\n identity.\n4. **Adjust deck length by duplicating layouts.** If the user has more content\n than the demo holds, duplicate an existing slide of the most appropriate\n layout. If less, drop slides from the bottom. Update page-number labels.\n5. **Designing missing layouts:** if a slide needs a layout the template\n doesn't have, design it from scratch using the same fonts, palette,\n decorative vocabulary, spacing rhythm, and component grammar — never bail\n to a different template.\n6. **Keep the navigation runtime as shipped.** If the deck ships an\n `assets/deck-stage.js` or inline keyboard handler, leave it intact.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\n## Source & license\n\nVendored from upstream MIT-licensed\n[`zarazhangrui/beautiful-html-templates`](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/studio).\n\nThe full upstream MIT license text — including the original copyright notice — ships in this skill at\n[`LICENSE`](./LICENSE) and must be redistributed alongside any copy of `example.html`,\n`template.json`, or any vendored `assets/` runtime. See `template.json` for the upstream metadata snapshot.","tags":["html","ppt","zhangzara","studio","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-studio","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-studio","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,647 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:24.203Z","embedding":null,"createdAt":"2026-05-08T06:51:50.819Z","updatedAt":"2026-05-11T06:52:24.203Z","lastSeenAt":"2026-05-11T06:52:24.203Z","tsv":"'/license':370 '/zarazhangrui/beautiful-html-templates/tree/main/templates/studio).':352 '1':171 '12':99 '2':183 '3':208 '4':241 '5':279 '6':316 'across':78 'adjust':242 'aesthet':19,57 'agenc':32,114 'alongsid':375 'also':126 'anyth':20,102 'appropri':265 'art':37,119 'art-direct':36,118 'asset':384 'assets/deck-stage.js':328 'avoid':148 'bail':311 'best':100 'black':7,45,159 'black-and-electric-yellow':158 'bodi':193 'bottom':273 'bracket':228 'brand':34,42,116,124,146 'break':80 'busi':135 'canva':8,46 'choic':130 'clone':172 'compon':308 'contain':62 'content':186,253 'context':150 'contract':337 'copi':194,377 'copyright':362 'corner':227 'creativ':31,113 'credenti':30,112 'dark':91 'date':197 'deck':64,136,142,243,325 'decor':67,225,303 'demo':98,256 'densiti':94 'design':17,27,55,109,211,280,294 'design-l':26,108 'differ':314 'dimens':203 'direct':38,120 'doesn':291 'drop':269 'duplic':246,258 'electr':11,24,49,106,161 'electric-yellow':10,48 'element':226 'emit':338 'example.html':173,379 'exist':202,260 'fashion':40,122 'feel':23,105,153 'file':182 'font':215,301 'formal':92 'full':354 'geometr':231 'github.com':351 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/studio).':350 'glanc':89 'grain':230 'grammar':309 'grid':222 'handler':332 'headlin':192 'high':15,53 'high-voltag':14,52 'hold':257 'html':2,63 'html-ppt-zhangzara-studio':1 'ident':240 'illustr':233 'imag':206 'includ':359 'inlin':330 'insid':84 'institut':156 'intact':335 'keep':317 'keyboard':331 'label':200,278 'layout':77,221,247,266,282,288 'leav':333 'led':28,110 'length':244 'less':268 'librari':169 'licens':342,348,357,369 'loudest':166 'match':201 'medium':93,95 'metadata':391 'miss':281 'mit':347,356 'mit-licens':346 'mix':76 'must':372 'name':196 'navig':319 'need':286 'never':213,310 'notic':363 'number':195,277 'one':86 'origin':361 'output':336 'page':276 'page-numb':275 'palett':66,163,218,302 'paper':229 'part':237 'pitch':33,115 'placehold':185,207 'ppt':3 'preserv':209 'quiet':154 'real':191 'recolor':216 'redistribut':374 'replac':184 'research':133 'restructur':219 'review':39,121 'rhythm':306 'runtim':320,385 'scheme':90 'scratch':297 'section':199 'see':386 'self':61 'self-contain':60 'shape':232 'ship':322,326,364 'showcas':35,117 'singl':59 'skill':367 'skill-html-ppt-zhangzara-studio' 'slide':70,96,261,270,285 'snapshot':392 'sneaker':41,123 'sourc':341 'source-nexu-io' 'space':305 'speaker':139 'statement':147 'stay':83 'strike':128 'strip':224 'studio':5,6,18,29,44,56,111 'substitut':214 'svgs':234 'swap':205 'system':68,82,212 'tag':340 'tech':132 'templat':79,290,315 'template.json':380,387 'text':358 'togeth':75 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'tune':74 'type':13,51 'typographi':65 'unexpect':129 'updat':274 'upstream':345,355,390 'use':298 'user':176,189,250 'vendor':343,383 'vocabulari':71,304 'voltag':16,54 'want':140 'work':43,125,181 'workflow':170 'workspac':178 'yellow':12,50,162 'zarazhangrui/beautiful-html-templates':349 'zhangzara':4","prices":[{"id":"1b064664-1f1f-48c0-b29b-1ac6452d8517","listingId":"7159e3ec-ec7f-47d0-b45f-9cd4e1342d47","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-08T06:51:50.819Z"}],"sources":[{"listingId":"7159e3ec-ec7f-47d0-b45f-9cd4e1342d47","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-studio","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-studio","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:50.819Z","lastSeenAt":"2026-05-11T06:52:24.203Z"}],"details":{"listingId":"7159e3ec-ec7f-47d0-b45f-9cd4e1342d47","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-studio","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"6a62a00d40fc90e930109c7704fe328e45472582","skill_md_path":"skills/html-ppt-zhangzara-studio/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-studio"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-studio","description":"Studio — Black canvas with electric-yellow type; high-voltage design studio aesthetic. Anything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-studio"},"updatedAt":"2026-05-11T06:52:24.203Z"}}