{"id":"48424491-b1aa-4938-b01a-c2b35f0332d4","shortId":"Z4FdWE","kind":"skill","title":"html-ppt-knowledge-arch-blueprint","tagline":"奶油蓝图架构 deck — 奶油纸 #F0EAE0 底色 + 单一锈红 #B5392A 高亮、48px 蓝图网格 mask、2px 黑边硬卡片、pipeline 步骤盒（其中一个抬高）、右侧锈红 insight callout、Playfair 衬线大字、SVG 虚线反馈环。零渐变零软阴影，认真且印刷友好。","description":"# HTML PPT · 奶油蓝图架构\n\nA focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`knowledge-arch-blueprint`** full-deck template.\n\n## When this card is picked\n\nThe Examples gallery wires \"Use this prompt\" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of `knowledge-arch-blueprint` (see the upstream [full-decks catalog](../html-ppt/references/full-decks.md) for screenshots and rationale).\n\n## How to author the deck\n\n1. **Read the master skill first.** All authoring rules live in\n   [`skills/html-ppt/SKILL.md`](../html-ppt/SKILL.md) — content/audience checklist,\n   token rules, layout reuse, presenter mode, the keyboard runtime, and the\n   \"never put presenter-only text on the slide\" rule.\n2. **Start from the matching template folder:**\n   `skills/html-ppt/templates/full-decks/knowledge-arch-blueprint/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-knowledge-arch-blueprint` body class.\n3. **Bring the shared runtime with the template.** The upstream\n   `index.html` links the shared CSS/JS via `../../../assets/...` because it\n   sits three folders deep inside `skills/html-ppt/templates/full-decks/`.\n   Once you copy `index.html` into the project, those parent-relative URLs\n   no longer resolve and `base.css`, `animations.css`, and `runtime.js`\n   will 404 — meaning the deck never activates and slide navigation is\n   dead. Pick one of these two recipes per project:\n   - **Recipe A — copy + rewrite (preferred):** copy\n     `skills/html-ppt/assets/fonts.css`, `skills/html-ppt/assets/base.css`,\n     `skills/html-ppt/assets/animations/animations.css`, and\n     `skills/html-ppt/assets/runtime.js` into a project-local\n     `assets/` (with `assets/animations/animations.css`), then rewrite the\n     four `<link>`/`<script>` tags in `index.html` from\n     `../../../assets/...` to the matching project-local paths\n     (`assets/fonts.css`, `assets/base.css`,\n     `assets/animations/animations.css`, `assets/runtime.js`).\n   - **Recipe B — inline:** read the same four files and replace each\n     `<link rel=\"stylesheet\" href=\"../../../assets/...\">` with a\n     `<style>...</style>` containing the file's contents, and the\n     `<script src=\"../../../assets/runtime.js\">` with a\n     `<script>...</script>` containing `runtime.js`. Yields a single\n     self-contained `index.html`.\n   Either way, do not ship the upstream `../../../assets/...` URLs\n   verbatim into a project artifact — they only work in-tree.\n4. **Pick a theme.** Default tokens look fine; if the user wants a different\n   feel, swap in any of the 36 themes from `skills/html-ppt/assets/themes/*.css`\n   via `<link id=\"theme-link\">` and let `T` cycle.\n5. **Replace demo content, not classes.** The `.tpl-knowledge-arch-blueprint` scoped CSS only\n   recognises the structural classes shipped in the template — keep them.\n6. **Speaker notes go inside `<aside class=\"notes\">` or `<div class=\"notes\">`** — never as visible text on the slide.\n\n## Attribution\n\nVisual system, layouts, themes and the runtime keyboard model come from\nthe upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill). The\nLICENSE file ships at `skills/html-ppt/LICENSE`; please keep it in place when\nredistributing.","tags":["html","ppt","knowledge","arch","blueprint","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-knowledge-arch-blueprint","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-knowledge-arch-blueprint","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 (3,376 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:20.821Z","embedding":null,"createdAt":"2026-05-02T06:52:42.062Z","updatedAt":"2026-05-11T06:52:20.821Z","lastSeenAt":"2026-05-11T06:52:20.821Z","tsv":"'/../../assets':196,291 '/html-ppt/references/full-decks.md':110 '/html-ppt/skill.md':44,132 '/lewislulu/html-ppt-skill).':392 '1':120 '2':156 '2px':18 '3':180 '36':324 '4':304 '404':226 '48px':15 '5':334 '6':359 'accept':81 'activ':231 'animations.css':222 'arch':5,56,101,176,344 'artifact':297 'asset':261 'assets/animations/animations.css':263 'attribut':372 'author':117,127 'b5392a':13 'base.css':221 'blueprint':6,57,102,177,345 'bodi':178 'bring':181 'callout':25 'card':64,85 'catalog':109 'checklist':134 'class':179,339,352 'come':382 'contain':268,275,282 'content':272,337 'content/audience':133 'copi':164,207,247,250 'css':328,347 'css/js':194 'cycl':333 'dead':236 'deck':8,60,108,119,229 'deep':202 'default':308 'demo':336 'differ':317 'direct':51 'either':284 'entri':37 'exact':94 'exampl':68,76 'f0eae0':10 'feel':318 'file':270,395 'fine':311 'first':125 'focus':36 'folder':162,201 'four':267 'full':59,107 'full-deck':58,106 'galleri':69 'github.com':391 'github.com/lewislulu/html-ppt-skill).':390 'go':362 'html':2,32,42 'html-ppt':41 'html-ppt-knowledge-arch-blueprint':1 'ident':97 'in-tre':301 'index.html':165,190,208,283 'insid':203,363 'insight':24 'keep':171,357,400 'keyboard':142,380 'knowledg':4,55,100,175,343 'knowledge-arch-blueprint':54,99 'land':48 'layout':137,375 'let':331 'lewislulu/html-ppt-skill':389 'licens':388,394 'link':191 'live':129 'local':260 'longer':218 'look':310 'mask':17 'master':45,123 'match':160 'mean':227 'mit':387 'mit-licens':386 'mode':140 'model':381 'navig':234 'never':146,230,365 'note':361 'one':238 'parent':214 'parent-rel':213 'per':243 'pick':66,89,237,305 'pipelin':20 'place':403 'playfair':26 'pleas':399 'point':38 'ppt':3,33,43 'prefer':249 'present':139,149 'presenter-on':148 'project':170,211,244,259,296 'project-loc':258 'prompt':73,77,83 'put':147 'rational':114 'read':121 'recip':242,245 'recognis':349 'redistribut':405 'relat':215 'replac':335 'resolv':219 'reus':138 'rewrit':248,265 'right':88 'rule':128,136,155 'runtim':143,184,379 'runtime.js':224,276 'scope':346 'screenshot':112 'see':103 'self':281 'self-contain':280 'share':183,193 'ship':288,353,396 'singl':279 'sit':199 'skill':46,124 'skill-html-ppt-knowledge-arch-blueprint' 'skills/html-ppt/assets/animations/animations.css':253 'skills/html-ppt/assets/base.css':252 'skills/html-ppt/assets/fonts.css':251 'skills/html-ppt/assets/runtime.js':255 'skills/html-ppt/assets/themes':327 'skills/html-ppt/license':398 'skills/html-ppt/skill.md':131 'skills/html-ppt/templates/full-decks':204 'skills/html-ppt/templates/full-decks/knowledge-arch-blueprint':163 'slide':154,233,371 'source-nexu-io' 'speaker':360 'start':157 'structur':351 'style.css':167 'svg':28 'swap':319 'system':374 'templat':61,161,187,356 'text':151,368 'theme':307,325,376 'three':200 'token':135,309 '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' 'tpl':174,342 'tpl-knowledge-arch-blueprint':173,341 'tree':303 'two':241 'upstream':105,189,290,385 'url':216,292 'use':71 'user':50,92,314 'verbatim':293 'via':195,329 'visibl':367 'visual':96,373 'want':93,315 'way':285 'wire':70 'work':300 'yield':277 '其中一个抬高':22 '单一锈红':12 '右侧锈红':23 '奶油纸':9 '奶油蓝图架构':7,34 '底色':11 '步骤盒':21 '蓝图网格':16 '虚线反馈环':29 '衬线大字':27 '认真且印刷友好':31 '零渐变零软阴影':30 '高亮':14 '黑边硬卡片':19","prices":[{"id":"dfb08413-5ad8-4bac-bf01-dac66cb099b9","listingId":"48424491-b1aa-4938-b01a-c2b35f0332d4","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-02T06:52:42.062Z"}],"sources":[{"listingId":"48424491-b1aa-4938-b01a-c2b35f0332d4","source":"github","sourceId":"nexu-io/open-design/html-ppt-knowledge-arch-blueprint","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-knowledge-arch-blueprint","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:42.062Z","lastSeenAt":"2026-05-11T06:52:20.821Z"},{"listingId":"48424491-b1aa-4938-b01a-c2b35f0332d4","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-knowledge-arch-blueprint","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-knowledge-arch-blueprint","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:22.753Z","lastSeenAt":"2026-05-07T22:42:08.827Z"}],"details":{"listingId":"48424491-b1aa-4938-b01a-c2b35f0332d4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-knowledge-arch-blueprint","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":"d9ef1b2635bf7a46d4dfae61d94b67cbda52d92f","skill_md_path":"skills/html-ppt-knowledge-arch-blueprint/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-knowledge-arch-blueprint"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-knowledge-arch-blueprint","description":"奶油蓝图架构 deck — 奶油纸 #F0EAE0 底色 + 单一锈红 #B5392A 高亮、48px 蓝图网格 mask、2px 黑边硬卡片、pipeline 步骤盒（其中一个抬高）、右侧锈红 insight callout、Playfair 衬线大字、SVG 虚线反馈环。零渐变零软阴影，认真且印刷友好。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-knowledge-arch-blueprint"},"updatedAt":"2026-05-11T06:52:20.821Z"}}