html-ppt-zhangzara-mat
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 / interior brands, ceramics / craft / furniture, advisory decks.
- License 许可
- MIT
- 最近更新
- 2026-07-09
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- od
- { "mode": "deck", "preview": { "type": "html", "entry": "example.html" }, "scenario": "marketing", "upstream": "https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/mat", "animations": false, "design_system": { "requires": false }, "speaker_notes": false, "upstream_license": "MIT" }
- name
- html-ppt-zhangzara-mat
- triggers
- [ "mat", "zhangzara-mat", "warm-modern", "considered", "warm", "design-led", "design studio credentials", "architecture / interior brand", "html deck", "html slides", "zhangzara" ]
- description
- 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 / interior brands, ceramics / craft / furniture, advisory decks.
02 资源文件 3
- 参考文档example.html52.9 KB
- 许可证LICENSE1.0 KB
- 参考文档template.json1.7 KB
03 SKILL.md 正文
Mat
Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.
A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.
At a glance
- Scheme: mixed
- Formality: medium
- Density: medium
- Slides in demo: 9
Best for
Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks. Also a warm, distinctive choice for tech, research, or business decks that want a considered analog feel instead of digital-cool.
Avoid for
Contexts that need fast tech energy or institutional restraint — the muted sage and burnt-orange palette is intentionally warm and slow.
Workflow
- Clone
example.htmlinto the user's workspace as the working file. - Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
- Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
- Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
- Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
- Keep the navigation runtime as shipped. If the deck ships an
assets/deck-stage.jsor inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-mat" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
Source & license
Vendored from upstream MIT-licensed
zarazhangrui/beautiful-html-templates.
The full upstream MIT license text — including the original copyright notice — ships in this skill at
LICENSE and must be redistributed alongside any copy of example.html,
template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.
04 同仓库更多 Skills
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.
web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。
venice-video
Video generation and transcription workflows via the Venice.ai API.
venice-image-generate
Image generation endpoints and available styles via the Venice.ai API.
threejs
Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
taste
Brief-time anti-AI-slop taste checklist — read the room and set the design dials BEFORE generating a landing page, portfolio, or redesign, so the first draft doesn't need a post-generation rescue. Use at the start of a visual/creative brief, not after the artifact exists.