[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M788P821SM0YRHRJ0ZXRP4VA":3,"skill-same:01M788P821SM0YRHRJ0ZXRP4VA":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":13,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M788P821SM0YRHRJ0ZXRP4VA","html-ppt-zhangzara-mat",null,"Mat — Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture \u002F interior brands, ceramics \u002F craft \u002F furniture, advisory decks.","bluesman1971\u002Fopen-design","bluesman1971","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96430007?v=4","01M788AK0TR13JE8ART2WNQZV6","01M788AK1PVB085AS9SP38WWGK",0,"MIT","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fhtml-ppt-zhangzara-mat\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fhtml-ppt-zhangzara-mat\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: html-ppt-zhangzara-mat\ndescription: |\n  Mat — Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture \u002F interior brands, ceramics \u002F craft \u002F furniture, advisory decks.\ntriggers:\n  - \"mat\"\n  - \"zhangzara-mat\"\n  - \"warm-modern\"\n  - \"considered\"\n  - \"warm\"\n  - \"design-led\"\n  - \"design studio credentials\"\n  - \"architecture \u002F interior brand\"\n  - \"html deck\"\n  - \"html slides\"\n  - \"zhangzara\"\nod:\n  mode: deck\n  scenario: marketing\n  upstream: \"https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Fbeautiful-html-templates\u002Ftree\u002Fmain\u002Ftemplates\u002Fmat\"\n  upstream_license: MIT\n  preview:\n    type: html\n    entry: example.html\n  design_system:\n    requires: false\n  speaker_notes: false\n  animations: false\n---\n\n# Mat\n\n> Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.\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:** mixed\n- **Formality:** medium\n- **Density:** medium\n- **Slides in demo:** 9\n\n## Best for\n\nAnything that should feel mid-century, tactile, and intentional: design studio credentials, architecture \u002F interior brands, ceramics \u002F craft \u002F furniture, advisory decks. Also a warm, distinctive choice for tech, research, or business decks that want a considered analog feel instead of digital-cool.\n\n## Avoid for\n\nContexts that need fast tech energy or institutional restraint — the muted sage and burnt-orange palette is intentionally warm and slow.\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\u002Fdeck-stage.js` or inline keyboard handler, leave it intact.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"zhangzara-mat\" type=\"text\u002Fhtml\" title=\"Deck Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\n## Source & license\n\nVendored from upstream MIT-licensed\n[`zarazhangrui\u002Fbeautiful-html-templates`](https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Fbeautiful-html-templates\u002Ftree\u002Fmain\u002Ftemplates\u002Fmat).\n\nThe full upstream MIT license text — including the original copyright notice — ships in this skill at\n[`LICENSE`](.\u002FLICENSE) and must be redistributed alongside any copy of `example.html`,\n`template.json`, or any vendored `assets\u002F` runtime. See `template.json` for the upstream metadata snapshot.\n","# Mat\n\n> Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.\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:** mixed\n- **Formality:** medium\n- **Density:** medium\n- **Slides in demo:** 9\n\n## Best for\n\nAnything that should feel mid-century, tactile, and intentional: design studio credentials, architecture \u002F interior brands, ceramics \u002F craft \u002F furniture, advisory decks. Also a warm, distinctive choice for tech, research, or business decks that want a considered analog feel instead of digital-cool.\n\n## Avoid for\n\nContexts that need fast tech energy or institutional restraint — the muted sage and burnt-orange palette is intentionally warm and slow.\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\u002Fdeck-stage.js` or inline keyboard handler, leave it intact.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"zhangzara-mat\" type=\"text\u002Fhtml\" title=\"Deck Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\n## Source & license\n\nVendored from upstream MIT-licensed\n[`zarazhangrui\u002Fbeautiful-html-templates`](https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Fbeautiful-html-templates\u002Ftree\u002Fmain\u002Ftemplates\u002Fmat).\n\nThe full upstream MIT license text — including the original copyright notice — ships in this skill at\n[`LICENSE`](.\u002FLICENSE) and must be redistributed alongside any copy of `example.html`,\n`template.json`, or any vendored `assets\u002F` runtime. See `template.json` for the upstream metadata snapshot.\n",{"od":24,"name":5,"triggers":32,"description":44},{"mode":25,"preview":26,"scenario":29,"upstream":30,"animations":20,"design_system":31,"speaker_notes":20,"upstream_license":14},"deck",{"type":27,"entry":28},"html","example.html","marketing","https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Fbeautiful-html-templates\u002Ftree\u002Fmain\u002Ftemplates\u002Fmat",{"requires":20},[33,34,35,36,37,38,39,40,41,42,43],"mat","zhangzara-mat","warm-modern","considered","warm","design-led","design studio credentials","architecture \u002F interior brand","html deck","html slides","zhangzara","Mat — Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture \u002F interior brands, ceramics \u002F craft \u002F furniture, advisory decks.\n","main","0467f0e19df12a6994ec7fb20ff6e9e23cd704e7","design-templates\u002Fhtml-ppt-zhangzara-mat","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fbluesman1971","2026-07-09 04:08:20",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add bluesman1971\u002Fopen-design --skill html-ppt-zhangzara-mat",{"tool":58,"command":59},"bunx","bunx skills add bluesman1971\u002Fopen-design --skill html-ppt-zhangzara-mat",{"tool":61,"command":62},"pnpm","pnpm dlx skills add bluesman1971\u002Fopen-design --skill html-ppt-zhangzara-mat","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fhtml-ppt-zhangzara-mat\u002FSKILL.md",true,[66,71,75],{"path":28,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"REFERENCE","参考文档",54168,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fhtml-ppt-zhangzara-mat\u002Fexample.html",{"path":72,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":15},"LICENSE","许可证",1067,{"path":76,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":77,"sourceHtmlUrl":78},"template.json",1761,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Fhtml-ppt-zhangzara-mat\u002Ftemplate.json",[80,88,96,104,111,118],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":84,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":19},"01M78AMRG8NAGKWKNDQE39ZZFQ","web-design-guidelines","Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[],[],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":92,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":19},"01M78AMKHTFS149JGEYNQM5AXR","web-clone","网站复刻 \u002F 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互\u002FWebGL\u002FCanvas\u002FThree.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 \u002F React-Vue-Next 内容站 \u002F WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FSKILL.md",[],[],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":100,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":19},"01M78AMH25JH2SH3AWTRSDCM9F","venice-video","Video generation and transcription workflows via the Venice.ai API.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fvenice-video\u002FSKILL.md",[],[],{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":100,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":19},"01M78AMF0M4FFKFWXFJ9NHTF5M","venice-image-generate","Image generation endpoints and available styles via the Venice.ai API.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fvenice-image-generate\u002FSKILL.md",[],[],{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":100,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":19},"01M78AMCH68X46SHNZVD284KXS","threejs","Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[],{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":100,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":19},"01M78AM7P8WSBZDNZZ42BQHGK7","taste","Brief-time anti-AI-slop taste checklist — read the room and set the\ndesign dials BEFORE generating a landing page, portfolio, or redesign,\nso the first draft doesn't need a post-generation rescue. Use at the\nstart of a visual\u002Fcreative brief, not after the artifact exists.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Ftaste\u002FSKILL.md",[],[]]