{"id":"bcb229d1-f18e-482d-ba76-0b2e5c226903","shortId":"hTbPqL","kind":"skill","title":"html-ppt-xhs-pastel-card","tagline":"柔和马卡龙慢生活 deck — 奶油 #fef8f1 底 + 三个柔光 blob、Playfair 斜体衬线 display 标题混 sans 正文、28px 圆角马卡龙卡片（桃 / 薄荷 / 天 / 紫 / 柠 / 玫）、Playfair 斜体 01-04 序号、SVG donut 图、chip+page 顶栏。适合生活方式 / 个人成长 / 慢生活 / 情绪类内容，\"杂志、手作、不太科技\"的感觉。","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-pastel-card`** 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-pastel-card` (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-pastel-card/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-xhs-pastel-card` 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-pastel-card` 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","pastel","card","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-xhs-pastel-card","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-pastel-card","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,333 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.687Z","embedding":null,"createdAt":"2026-05-02T06:52:42.679Z","updatedAt":"2026-05-11T06:52:21.687Z","lastSeenAt":"2026-05-11T06:52:21.687Z","tsv":"'-04':31 '/../../assets':211,306 '/html-ppt/references/full-decks.md':125 '/html-ppt/skill.md':59,147 '/lewislulu/html-ppt-skill).':407 '01':30 '1':135 '2':171 '28px':20 '3':195 '36':339 '4':319 '404':241 '5':349 '6':374 'accept':96 'activ':246 'animations.css':237 'artifact':312 'asset':276 'assets/animations/animations.css':278 'attribut':387 'author':132,142 'base.css':236 'blob':13 'bodi':193 'bring':196 'card':6,72,79,100,117,192,360 'catalog':124 'checklist':149 'chip':36 'class':194,354,367 'come':397 'contain':283,290,297 'content':287,352 'content/audience':148 'copi':179,222,262,265 'css':343,362 'css/js':209 'cycl':348 'dead':251 'deck':8,75,123,134,244 'deep':217 'default':323 'demo':351 'differ':332 'direct':66 'display':16 'donut':34 'either':299 'entri':52 'exact':109 'exampl':83,91 'feel':333 'fef8f1':10 'file':285,410 'fine':326 'first':140 'focus':51 'folder':177,216 'four':282 'full':74,122 'full-deck':73,121 'galleri':84 'github.com':406 'github.com/lewislulu/html-ppt-skill).':405 'go':377 'html':2,47,57 'html-ppt':56 'html-ppt-xhs-pastel-card':1 'ident':112 'in-tre':316 'index.html':180,205,223,298 'insid':218,378 'keep':186,372,415 'keyboard':157,395 'land':63 'layout':152,390 'let':346 'lewislulu/html-ppt-skill':404 'licens':403,409 'link':206 'live':144 'local':275 'longer':233 'look':325 'master':60,138 'match':175 'mean':242 'mit':402 'mit-licens':401 'mode':155 'model':396 'navig':249 'never':161,245,380 'note':376 'one':253 'page':37 'parent':229 'parent-rel':228 'pastel':5,71,116,191,359 'per':258 'pick':81,104,252,320 'place':418 'playfair':14,28 'pleas':414 'point':53 'ppt':3,48,58 'prefer':264 'present':154,164 'presenter-on':163 'project':185,226,259,274,311 'project-loc':273 'prompt':88,92,98 'put':162 'rational':129 'read':136 'recip':257,260 'recognis':364 'redistribut':420 'relat':230 'replac':350 'resolv':234 'reus':153 'rewrit':263,280 'right':103 'rule':143,151,170 'runtim':158,199,394 'runtime.js':239,291 'san':18 'scope':361 'screenshot':127 'see':118 'self':296 'self-contain':295 'share':198,208 'ship':303,368,411 'singl':294 'sit':214 'skill':61,139 'skill-html-ppt-xhs-pastel-card' 'skills/html-ppt/assets/animations/animations.css':268 'skills/html-ppt/assets/base.css':267 'skills/html-ppt/assets/fonts.css':266 'skills/html-ppt/assets/runtime.js':270 'skills/html-ppt/assets/themes':342 'skills/html-ppt/license':413 'skills/html-ppt/skill.md':146 'skills/html-ppt/templates/full-decks':219 'skills/html-ppt/templates/full-decks/xhs-pastel-card':178 'slide':169,248,386 'source-nexu-io' 'speaker':375 'start':172 'structur':366 'style.css':182 'svg':33 'swap':334 'system':389 'templat':76,176,202,371 'text':166,383 'theme':322,340,391 'three':215 'token':150,324 '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':189,357 'tpl-xhs-pastel-card':188,356 'tree':318 'two':256 'upstream':120,204,305,400 'url':231,307 'use':86 'user':65,107,329 'verbatim':308 'via':210,344 'visibl':382 'visual':111,388 'want':108,330 'way':300 'wire':85 'work':315 'xhs':4,70,115,190,358 'xhs-pastel-card':69,114 'yield':292 '三个柔光':12 '不太科技':45 '个人成长':40 '图':35 '圆角马卡龙卡片':21 '天':24 '奶油':9 '序号':32 '底':11 '情绪类内容':42 '慢生活':41 '手作':44 '斜体':29 '斜体衬线':15 '杂志':43 '柔和马卡龙慢生活':7,49 '柠':26 '标题混':17 '桃':22 '正文':19 '玫':27 '的感觉':46 '紫':25 '薄荷':23 '适合生活方式':39 '顶栏':38","prices":[{"id":"78d5862c-1ecc-407e-a6b5-e54c8d83f40f","listingId":"bcb229d1-f18e-482d-ba76-0b2e5c226903","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.679Z"}],"sources":[{"listingId":"bcb229d1-f18e-482d-ba76-0b2e5c226903","source":"github","sourceId":"nexu-io/open-design/html-ppt-xhs-pastel-card","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-xhs-pastel-card","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:42.679Z","lastSeenAt":"2026-05-11T06:52:21.687Z"},{"listingId":"bcb229d1-f18e-482d-ba76-0b2e5c226903","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-xhs-pastel-card","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-xhs-pastel-card","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:21.453Z","lastSeenAt":"2026-05-07T22:42:08.314Z"}],"details":{"listingId":"bcb229d1-f18e-482d-ba76-0b2e5c226903","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-xhs-pastel-card","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":"b1c95631b5e1b67e3f867e85b8107a1a2d9bc99d","skill_md_path":"skills/html-ppt-xhs-pastel-card/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-xhs-pastel-card"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-xhs-pastel-card","description":"柔和马卡龙慢生活 deck — 奶油 #fef8f1 底 + 三个柔光 blob、Playfair 斜体衬线 display 标题混 sans 正文、28px 圆角马卡龙卡片（桃 / 薄荷 / 天 / 紫 / 柠 / 玫）、Playfair 斜体 01-04 序号、SVG donut 图、chip+page 顶栏。适合生活方式 / 个人成长 / 慢生活 / 情绪类内容，\"杂志、手作、不太科技\"的感觉。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-xhs-pastel-card"},"updatedAt":"2026-05-11T06:52:21.687Z"}}