{"id":"2b29f4e3-c30d-4c4d-a437-ac04e9f8b044","shortId":"rBtTTQ","kind":"skill","title":"html-ppt-xhs-white-editorial","tagline":"白底杂志风 deck — 纯白背景 + 顶部 10 色彩虹 bar、80-110px display 标题、紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组（粉/紫/蓝/绿/橙）、黑底白字 .focus pill、引用大块。同时适合发小红书图文 + 横版 PPT 双用。","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 **`xhs-white-editorial`** 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 `xhs-white-editorial` (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/xhs-white-editorial/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-xhs-white-editorial` 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-xhs-white-editorial` 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","xhs","white","editorial","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-xhs-white-editorial","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-xhs-white-editorial","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,350 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:21.824Z","embedding":null,"createdAt":"2026-05-02T06:52:42.828Z","updatedAt":"2026-05-11T06:52:21.824Z","lastSeenAt":"2026-05-11T06:52:21.824Z","tsv":"'-110':15 '/../../assets':202,297 '/html-ppt/references/full-decks.md':116 '/html-ppt/skill.md':50,138 '/lewislulu/html-ppt-skill).':398 '1':126 '10':11 '2':162 '3':186 '36':330 '4':310 '404':232 '5':340 '6':365 '80':14 'accept':87 'activ':237 'animations.css':228 'artifact':303 'asset':267 'assets/animations/animations.css':269 'attribut':378 'author':123,133 'bar':13 'base.css':227 'bodi':184 'bring':187 'card':70,91 'catalog':115 'checklist':140 'class':185,345,358 'come':388 'contain':274,281,288 'content':278,343 'content/audience':139 'copi':170,213,253,256 'css':334,353 'css/js':200 'cycl':339 'dead':242 'deck':8,66,114,125,235 'deep':208 'default':314 'demo':342 'differ':323 'direct':57 'display':17 'editori':6,63,108,183,351 'either':290 'entri':43 'exact':100 'exampl':74,82 'feel':324 'file':276,401 'fine':317 'first':131 'focus':31,42 'folder':168,207 'four':273 'full':65,113 'full-deck':64,112 'galleri':75 'github.com':397 'github.com/lewislulu/html-ppt-skill).':396 'go':368 'html':2,38,48 'html-ppt':47 'html-ppt-xhs-white-editori':1 'ident':103 'in-tre':307 'index.html':171,196,214,289 'insid':209,369 'keep':177,363,406 'keyboard':148,386 'land':54 'layout':143,381 'let':337 'lewislulu/html-ppt-skill':395 'licens':394,400 'link':197 'live':135 'local':266 'longer':224 'look':316 'master':51,129 'match':166 'mean':233 'mit':393 'mit-licens':392 'mode':146 'model':387 'navig':240 'never':152,236,371 'note':367 'one':244 'parent':220 'parent-rel':219 'per':249 'pick':72,95,243,311 'pill':32 'place':409 'pleas':405 'point':44 'ppt':3,36,39,49 'prefer':255 'present':145,155 'presenter-on':154 'project':176,217,250,265,302 'project-loc':264 'prompt':79,83,89 'put':153 'px':16 'rational':120 'read':127 'recip':248,251 'recognis':355 'redistribut':411 'relat':221 'replac':341 'resolv':225 'reus':144 'rewrit':254,271 'right':94 'rule':134,142,161 'runtim':149,190,385 'runtime.js':230,282 'scope':352 'screenshot':118 'see':109 'self':287 'self-contain':286 'share':189,199 'ship':294,359,402 'singl':285 'sit':205 'skill':52,130 'skill-html-ppt-xhs-white-editorial' 'skills/html-ppt/assets/animations/animations.css':259 'skills/html-ppt/assets/base.css':258 'skills/html-ppt/assets/fonts.css':257 'skills/html-ppt/assets/runtime.js':261 'skills/html-ppt/assets/themes':333 'skills/html-ppt/license':404 'skills/html-ppt/skill.md':137 'skills/html-ppt/templates/full-decks':210 'skills/html-ppt/templates/full-decks/xhs-white-editorial':169 'slide':160,239,377 'source-nexu-io' 'speaker':366 'start':163 'structur':357 'style.css':173 'swap':325 'system':380 'templat':67,167,193,362 'text':157,374 'theme':313,331,382 'three':206 'token':141,315 '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':180,348 'tpl-xhs-white-editori':179,347 'tree':309 'two':247 'upstream':111,195,296,391 'url':222,298 'use':77 'user':56,98,320 'verbatim':299 'via':201,335 'visibl':373 'visual':102,379 'want':99,321 'way':291 'white':5,62,107,182,350 'wire':76 'work':306 'xhs':4,61,106,181,349 'xhs-white-editori':60,105 'yield':283 '双用':37 '同时适合发小红书图文':34 '引用大块':33 '标题':18 '横版':35 '橙':22,29 '白底杂志风':7,40 '粉':25 '粉渐变文字':23 '紫':19,26 '纯白背景':9 '绿':21,28 '色彩虹':12 '蓝':20,27 '顶部':10 '马卡龙软卡片组':24 '黑底白字':30","prices":[{"id":"e492a76d-e5bb-412a-959c-ec57592f7fab","listingId":"2b29f4e3-c30d-4c4d-a437-ac04e9f8b044","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.828Z"}],"sources":[{"listingId":"2b29f4e3-c30d-4c4d-a437-ac04e9f8b044","source":"github","sourceId":"nexu-io/open-design/html-ppt-xhs-white-editorial","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-xhs-white-editorial","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:42.828Z","lastSeenAt":"2026-05-11T06:52:21.824Z"},{"listingId":"2b29f4e3-c30d-4c4d-a437-ac04e9f8b044","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-xhs-white-editorial","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-xhs-white-editorial","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:23.602Z","lastSeenAt":"2026-05-07T22:42:09.839Z"}],"details":{"listingId":"2b29f4e3-c30d-4c4d-a437-ac04e9f8b044","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-xhs-white-editorial","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":"2062dfb4836ed7cf92e26a4c639ced39868498f9","skill_md_path":"skills/html-ppt-xhs-white-editorial/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-xhs-white-editorial"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-xhs-white-editorial","description":"白底杂志风 deck — 纯白背景 + 顶部 10 色彩虹 bar、80-110px display 标题、紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组（粉/紫/蓝/绿/橙）、黑底白字 .focus pill、引用大块。同时适合发小红书图文 + 横版 PPT 双用。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-xhs-white-editorial"},"updatedAt":"2026-05-11T06:52:21.824Z"}}