{"id":"04f302cb-c3b6-4195-9a5f-2d2b0139bd3b","shortId":"ZZShrY","kind":"skill","title":"html-ppt-zhangzara-monochrome","tagline":"Monochrome — Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all. Anything that should feel like a hand-typeset ledger: user research synthesis, white papers, longform reports, academic and policy briefs, advisory deliverables, bilingual EN/CN","description":"# Monochrome\n\n> Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all.\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:** light\n- **Formality:** high\n- **Density:** high\n- **Slides in demo:** 16\n\n## Best for\n\nAnything that should feel like a hand-typeset ledger: user research synthesis, white papers, longform reports, academic and policy briefs, advisory deliverables, bilingual EN/CN reports. Equally good for tech, design, or brand decks that want their words to be the only thing on the page.\n\n## Avoid for\n\nDecks that need visual personality or color-led storytelling — the all-ink palette is intentionally austere.\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/monochrome).\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","monochrome","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-monochrome","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-monochrome","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,648 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:23.102Z","embedding":null,"createdAt":"2026-05-08T06:51:49.791Z","updatedAt":"2026-05-11T06:52:23.102Z","lastSeenAt":"2026-05-11T06:52:23.102Z","tsv":"'/license':377 '/zarazhangrui/beautiful-html-templates/tree/main/templates/monochrome).':359 '1':178 '16':108 '2':190 '3':215 '4':248 '5':286 '6':323 'academ':41,128 'across':87 'adjust':249 'advisori':45,132 'all-black':11,54 'all-ink':170 'alongsid':382 'anyth':24,111 'appropri':272 'asset':391 'assets/deck-stage.js':335 'auster':176 'avoid':157 'bail':318 'best':109 'bilingu':47,134 'black':13,56 'bodi':19,62,200 'bottom':280 'bracket':235 'brand':143 'break':89 'brief':44,131 'clone':179 'color':21,64,166 'color-l':165 'compon':315 'contain':71 'content':193,260 'contract':344 'copi':201,384 'copyright':369 'corner':234 'date':204 'deck':73,144,159,250,332 'decor':76,232,310 'deliver':46,133 'demo':107,263 'densiti':103 'design':141,218,287,301 'differ':321 'dimens':210 'doesn':298 'drop':276 'duplic':253,265 'element':233 'emit':345 'en/cn':48,135 'equal':137 'example.html':180,386 'exist':209,267 'feel':27,114 'file':189 'font':222,308 'formal':101 'full':361 'geometr':238 'github.com':358 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/monochrome).':357 'glanc':98 'good':138 'grain':237 'grammar':316 'grid':229 'hand':31,118 'hand-typeset':30,117 'handler':339 'headlin':17,60,199 'high':102,104 'hold':264 'html':2,72 'html-ppt-zhangzara-monochrom':1 'ident':247 'illustr':240 'imag':213 'includ':366 'ink':172 'inlin':337 'insid':93 'intact':342 'intent':175 'ivori':7,50 'jost':18,61 'keep':324 'keyboard':338 'label':207,285 'layout':86,228,254,273,289,295 'leav':340 'led':167 'ledger':8,33,51,120 'length':251 'less':275 'licens':349,355,364,376 'light':100 'like':28,115 'longform':39,126 'lora':15,58 'match':208 'metadata':398 'miss':288 'mit':354,363 'mit-licens':353 'mix':85 'monochrom':5,6,49 'must':379 'name':203 'navig':326 'need':161,293 'never':220,317 'notic':370 'number':202,284 'one':95 'origin':368 'output':343 'page':156,283 'page-numb':282 'palett':75,173,225,309 'paper':9,38,52,125,236 'part':244 'person':163 'placehold':192,214 'polici':43,130 'ppt':3 'preserv':216 'real':198 'recolor':223 'redistribut':381 'replac':191 'report':40,127,136 'research':35,122 'restructur':226 'rhythm':313 'runtim':327,392 'scheme':99 'scratch':304 'section':206 'see':393 'self':70 'self-contain':69 'serif':16,59 'shape':239 'ship':329,333,371 'singl':68 'skill':374 'skill-html-ppt-zhangzara-monochrome' 'slide':79,105,268,277,292 'snapshot':399 'sourc':348 'source-nexu-io' 'space':312 'stay':92 'storytel':168 'strip':231 'substitut':221 'svgs':241 'swap':212 'synthesi':36,123 'system':77,91,219 'tag':347 'tech':140 'templat':88,297,322 'template.json':387,394 'text':365 'thing':153 'togeth':84 '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':83 'type':14,57 'typeset':32,119 'typographi':74 'updat':281 'upstream':352,362,397 'use':305 'user':34,121,183,196,257 'vendor':350,390 'visual':162 'vocabulari':80,311 'want':146 'white':37,124 'word':148 'work':188 'workflow':177 'workspac':185 'zarazhangrui/beautiful-html-templates':356 'zhangzara':4","prices":[{"id":"aa9525aa-0f74-4e4e-bca5-b0e3f8f0c4a5","listingId":"04f302cb-c3b6-4195-9a5f-2d2b0139bd3b","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:49.791Z"}],"sources":[{"listingId":"04f302cb-c3b6-4195-9a5f-2d2b0139bd3b","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-monochrome","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-monochrome","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:49.791Z","lastSeenAt":"2026-05-11T06:52:23.102Z"}],"details":{"listingId":"04f302cb-c3b6-4195-9a5f-2d2b0139bd3b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-monochrome","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":"affd35fdd0e67ea0cd148b90c1bedd9802d35db6","skill_md_path":"skills/html-ppt-zhangzara-monochrome/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-monochrome"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-monochrome","description":"Monochrome — Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all. Anything that should feel like a hand-typeset ledger: user research synthesis, white papers, longform reports, academic and policy briefs, advisory deliverables, bilingual EN/CN reports."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-monochrome"},"updatedAt":"2026-05-11T06:52:23.102Z"}}