ui-ux-pro-max-skill 幻灯片 HTML 模板解析:16:9 布局、Design Tokens 注入与 Chart.js 集成【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill本文以 ui-ux-pro-max-skill 仓库中的 slides-html-template.md 为核心,完整拆解该技能体系用于生成 HTML 演示文稿的基础模板:16:9 letterbox 舞台、导航脚本、Chart.js 数据可视化、入场动画类与背景图叠加方案,并结合仓库内design-system脚本的源码,说明模板中的 CSS 变量如何由 Design Tokens 管线自动注入、以及产出的幻灯片 HTML 如何被令牌合规校验器约束。读完本文,你可以独立复制并定制这套单文件幻灯片模板,理解其每个关键配置的作用与默认值,并掌握从design-tokens.json到最终style块的完整令牌链路。一、模板在技能体系中的位置该模板文件位于design技能的参考文档目录:技能入口:.claude/skills/design/references/slides-html-template.md,同目录还有 slides.md、slides-create.md、slides-layout-patterns.md、slides-strategies.md 等配套参考文档;slides技能将其列为知识库之一:.claude/skills/slides/SKILL.md 的 References (Knowledge Base) 表格声明了 4 个参考文件(布局模式、HTML 模板、文案公式、幻灯片策略),并定义了路由逻辑:解析$ARGUMENTS首个词作为子命令,加载对应references/{subcommand}.md后执行。其中create子命令的入口文档为 .claude/skills/slides/references/create.md,其内容明确指示调用 slides 技能,使用 Design Tokens、Chart.js 与幻灯片知识库创建说服性 HTML 幻灯片。从源码结构看,模板只是骨架,真正决定视觉一致性的数据来自design-system技能目录下的脚本与知识库,包括 generate-tokens.cjs、embed-tokens.cjs、generate-slide.py、html-token-validator.py,以及 slide-charts.csv、slide-backgrounds.csv 等知识库数据文件。CLI 分发侧还在 cli/assets/skills/design/references/slides-html-template.md 保留了一份同内容副本,供init等命令写入用户项目。二、基础结构:完整的单文件幻灯片 HTML文档 Base Structure 一节给出了一份可直接运行的完整 HTML(slides-html-template.md#L7-L202),包含令牌占位、响应式样式、导航控件与全部导航逻辑。以下是原文完整骨架(令牌注释处即为embed-tokens.cjs的输出粘贴点):!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePresentation Title/title script srchttps://cdn.jsdelivr.net/npm/chart.js4.4.1/dist/chart.umd.min.js/script style /* Paste embed-tokens.cjs output here */ :root { --color-primary: #FF6B6B; --color-background: #0D0D0D; /* ... more tokens */ } /* Base slide styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--color-background); color: #fff; font-family: var(--typography-font-body, Inter, sans-serif); overflow: hidden; } /* 16:9 Aspect Ratio Container (desktop) */ .slide-deck { position: relative; width: 100vw; height: 100vh; overflow: hidden; } media (min-width: 769px) { .slide-deck { /* Lock to 16:9 — letterbox if viewport ratio differs */ max-width: calc(100vh * 16 / 9); max-height: calc(100vw * 9 / 16); margin: auto; position: absolute; inset: 0; } } .slide { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px; opacity: 0; visibility: hidden; transition: opacity 0.4s; background: var(--color-background); overflow: hidden; /* Prevent content overflow */ } .slide.active { opacity: 1; visibility: visible; } /* Slide inner wrapper — constrains content within safe area */ .slide-content { width: 100%; max-width: 100%; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } /* Typography */ h1, h2 { font-family: var(--typography-font-heading, Space Grotesk, sans-serif); } .slide-title { font-size: clamp(32px, 6vw, 80px); background: var(--primitive-gradient-primary, linear-gradient(135deg, #FF6B6B, #FF8E53)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } /* RESPONSIVE BREAKPOINTS */ /* Tablet (portrait) */ media (max-width: 768px) { .slide { padding: 32px 24px; } .slide-title { font-size: clamp(28px, 5vw, 48px); } h2 { font-size: clamp(20px, 4vw, 32px); } p, li { font-size: clamp(14px, 2.5vw, 18px); } } /* Mobile */ media (max-width: 480px) { .slide { padding: 24px 16px; } .slide-title { font-size: clamp(22px, 6vw, 36px); } h2 { font-size: clamp(18px, 4.5vw, 28px); } p, li { font-size: clamp(12px, 3vw, 16px); } .nav-controls { bottom: 16px; gap: 12px; } .nav-btn { width: 32px; height: 32px; font-size: 14px; } } /* Navigation */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--color-primary); transition: width 0.3s; z-index: 1000; } .nav-controls { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; z-index: 1000; } .nav-btn { background: rgba(255,255,255,0.1); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; } .nav-btn:hover { background: rgba(255,255,255,0.2); } .slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; } /style /head body !-- Progress Bar -- div classprogress-bar idprogressBar/div !-- Slide Deck Container (16:9 on desktop) -- div classslide-deck !-- Slides -- div classslide active div classslide-content h1 classslide-titleTitle Slide/h1 pSubtitle or tagline/p /div /div !-- More slides... (always wrap content in .slide-content) -- /div!-- /.slide-deck -- !-- Navigation -- div classnav-controls button classnav-btn onclickprevSlide()←/button span classslide-counterspan idcurrent1/span / span idtotal9/span/span button classnav-btn onclicknextSlide()→/button /div script let current 1; const total document.querySelectorAll(.slide).length; document.getElementById(total).textContent total; function showSlide(n) { if (n 1) n 1; if (n total) n total; current n; document.querySelectorAll(.slide).forEach((s, i) { s.classList.toggle(active, i n - 1); }); document.getElementById(current).textContent n; document.getElementById(progressBar).style.width (n / total * 100) %; } function nextSlide() { showSlide(current 1); } function prevSlide() { showSlide(current - 1); } document.addEventListener(keydown, (e) { if (e.key ArrowRight || e.key ) { e.preventDefault(); nextSlide(); } if (e.key ArrowLeft) { e.preventDefault(); prevSlide(); } }); document.addEventListener(click, (e) { if (!e.target.closest(.nav-controls)) nextSlide(); }); showSlide(1); /script /body /html下面按关键设计点逐段解析。2.1 令牌占位:standalone HTML 的唯一外部依赖style开头标注了/* Paste embed-tokens.cjs output here */,即把 embed-tokens.cjs 的 stdout 直接粘入,得到:root { ... }令牌块。模板内置的示例值(--color-primary: #FF6B6B、--color-background: #0D0D0D)只是占位,实际项目应以品牌令牌替换。这种内嵌而非外链的方式保证幻灯片是零构建、零本地依赖的单文件,适合邮件分发或投屏场景。2.2 16:9 letterbox 舞台桌面端(视口宽度 ≥ 769px)的.slide-deck使用经典 letterbox 锁比例方案:max-width: calc(100vh * 16 / 9)与max-height: calc(100vw * 9 / 16)互相钳制,使舞台在任何宽高比的屏幕上都被限制为 16:9;position: absolute; inset: 0; margin: auto将舞台居中,多余区域显示为body背景色,形成上下/左右黑边;移动端(≤ 768px)不启用 letterbox,.slide-deck退化为100vw × 100vh,幻灯片全屏铺满,适配手机竖屏翻阅。2.3 幻灯片与内容安全区.slide绝对定位铺满舞台,默认opacity: 0; visibility: hidden,仅.slide.active可见,切换为 0.4s 的透明度过渡;overflow: hidden防止内容溢出舞台(对应注释 Prevent content overflow);内容一律包裹在.slide-content中,该内层容器用max-height: 100%; overflow: hidden; gap: 16px把内容约束在安全区内,文档注释明确要求 always wrap content in .slide-content;标题.slide-title使用clamp(32px, 6vw, 80px)流式字号,并用background-clip: text将--primitive-gradient-primary渐变裁剪为文字填充色——注意它提供了渐变回退值linear-gradient(135deg, #FF6B6B, #FF8E53),即使令牌缺失也能正常渲染;body与h1/h2的字体均通过var(--typography-font-body, Inter, sans-serif)/var(--typography-font-heading, Space Grotesk, sans-serif)取令牌并带回退值。2.4 响应式断点模板定义了两个降级断点,所有字号都采用clamp(最小, 视口比例, 最大)形式:断点.slide内边距标题h2正文 p/li平板(≤ 768px)32px 24pxclamp(28px, 5vw, 48px)clamp(20px, 4vw, 32px)clamp(14px, 2.5vw, 18px)手机(≤ 480px)24px 16pxclamp(22px, 6vw, 36px)clamp(18px, 4.5vw, 28px)clamp(12px, 3vw, 16px)手机断点还额外缩小了导航控件:.nav-controls下移到bottom: 16px、间距缩至 12px,.nav-btn从 40px 缩到 32px,保证小屏上手势区不被遮挡。2.5 导航、进度条与交互逻辑顶部.progress-bar(3px 高,主色)宽度由脚本驱动,直观呈现当前页 / 总页数的进度;底部.nav-controls为左右圆形按钮加 n / total 计数器,z-index: 1000保证始终浮在幻灯片之上;脚本逻辑全部收敛在showSlide(n):先钳制页码范围(n 1归 1,n total归 total),再批量classList.toggle(active),最后同步计数器与进度条宽度(n / total * 100)%;输入覆盖三种方式:键盘ArrowRight/空格前进、ArrowLeft后退(均preventDefault防止空格滚动页面);点击页面任意位置前进,但命中.nav-controls内的点击被排除(!e.target.closest(.nav-controls)),避免误触底部按钮区域;页面加载时执行showSlide(1)完成初始化,total由document.querySelectorAll(.slide).length自动计算——因此新增幻灯片只需复制.slide节点,无需改脚本。三、Chart.js 数据可视化集成文档 Chart.js Integration 一节给出图表容器与初始化代码的完整写法(slides-html-template.md#L204-L237),依赖 head 中锁定的chart.js4.4.1UMD 构建:div classchart-container stylewidth: min(80%, 600px); height: clamp(200px, 40vh, 350px); canvas idrevenueChart/canvas /div script new Chart(document.getElementById(revenueChart), { type: line, // or bar, doughnut, radar data: { labels: [Sep, Oct, Nov, Dec], datasets: [{ label: MRR ($K), data: [5, 12, 28, 45], borderColor: #FF6B6B, backgroundColor: rgba(255, 107, 107, 0.1), borderWidth: 3, fill: true, tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { color: rgba(255,255,255,0.05) }, ticks: { color: #B8B8D0 } }, y: { grid: { color: rgba(255,255,255,0.05) }, ticks: { color: #B8B8D0 } } } } }); /script关键配置说明:容器尺寸width: min(80%, 600px); height: clamp(200px, 40vh, 350px)同时用了min()与clamp(),让图表随幻灯片舞台缩放但不失控;maintainAspectRatio: false是幻灯片场景的必选项——否则 Chart.js 默认按 canvas 固有比例渲染,会与.chart-container的固定高度冲突;tension: 0.4开启轻度贝塞尔平滑,fill: true配合低透明度backgroundColor形成面积填充,契合深色底;网格线rgba(255,255,255,0.05)与刻度#B8B8D0是典型的暗色主题低对比处理,保证数据系列成为视觉主角;图表类型按// or bar, doughnut, radar注释可直接替换,datasets结构不变。一个值得注意的细节:图表配色在模板中是硬编码的,而仓库的令牌校验器 html-token-validator.py 恰恰对script块内的硬编码颜色网开一面(见第八节)——这正是CSS 必须走令牌、JS 图表数据可内联这一设计边界在模板中的体现。四、入场动画类Animation Classes 一节(slides-html-template.md#L239-L273)提供四组开箱即用的 CSS 动画,均为纯 CSS、无 JS 依赖:/* Fade Up */ .animate-fade-up { animation: fadeUp 0.6s ease-out forwards; opacity: 0; } keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Count Animation */ .animate-count { animation: countUp 1s ease-out forwards; } /* Scale */ .animate-scale { animation: scaleIn 0.5s ease-out forwards; } keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Stagger Children */ .animate-stagger * { opacity: 0; animation: fadeUp 0.5s ease-out forwards; } .animate-stagger *:nth-child(1) { animation-delay: 0.1s; } .animate-stagger *:nth-child(2) { animation-delay: 0.2s; } .animate-stagger *:nth-child(3) { animation-delay: 0.3s; } .animate-stagger *:nth-child(4) { animation-delay: 0.4s; }.animate-fade-up:从下方 30px 淡入,0.6s,forwards保持终态;需配合幻灯片切换时机触发(如切换.active时元素才被渲染),避免所有元素在页面加载时一次性播完;.animate-count:预留的数字滚动占位类(指向countUp关键帧),模板本身未给出关键帧实现,属于留给使用方扩展的钩子;.animate-scale:0.9 倍缩放至 1 并淡入,适合图表卡片、指标块;.animate-stagger:作用于容器的级联入场——直接子元素共用fadeUp,按nth-child以 0.1s 步进延迟,最多显式支持 4 个子元素,超过 4 个的后续元素会立即(无延迟)入场,使用时注意控制列表长度或自行补延迟。五、背景图与深色遮罩Background Images 一节(slides-html-template.md#L275-L284)给出图片幻灯片的三层结构:div classslide slide-with-bg stylebackground-image: url(https://images.pexels.com/...) div classoverlay stylebackground: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))/div div classcontent styleposition: relative; z-index: 1; !-- Slide content -- /div /div要点:图片作为.slide的background-image,示例源为 Pexels 外链;.overlay用 135° 深色渐变(不透明度 0.9 → 0.7)压住背景,保证前景文字对比度;注意其色值rgba(13,13,13,x)与模板令牌示例--color-background: #0D0D0D一致,即遮罩颜色应跟随品牌背景色;内容层position: relative; z-index: 1浮于遮罩之上。这一做法与校验器的白名单机制互相印证:html-token-validator.py#L88-L91 的ALLOWED_EXCEPTIONS明确放行pexels.com、unsplash.com等外部素材域名,允许这类图片 URL 出现在幻灯片中而不触发外部资源告警。六、CSS 变量参考表文档末尾的 CSS Variables Reference(slides-html-template.md#L286-L295)列出模板实际消费的最小变量集:VariableUsage--color-primaryBrand primary (CTA, highlights)--color-backgroundSlide background--color-secondarySecondary elements--primitive-gradient-primaryTitle gradients--typography-font-headingHeadlines--typography-font-bodyBody text这 6 个变量正是第二、四节中所有var()引用的并集。模板对它们都提供了回退值,因此即使:root令牌块缺失,页面也能以示例色渲染——这是一个有意的优雅降级设计:令牌是增强,不是硬依赖。七、源码级实现佐证:令牌从哪里来、如何被校验模板注释 Paste embed-tokens.cjs output here 指向一条完整的令牌管线,以下按仓库源码逐环说明。7.1 generate-tokens.cjs:JSON 令牌 → CSS 变量generate-tokens.cjs 是管线的源头,命令行参数为:node generate-tokens.cjs --config tokens.json -o tokens.css node generate-tokens.cjs --config tokens.json --format tailwind其内部实现(generate-tokens.cjs#L73-L98)分三步:resolveReference解析{primitive.color.blue.600}这类令牌引用,支持递归(解析出的$value若仍是引用会继续解析);flattenTokens将primitive/semantic/component/dark.semantic四个命名空间展平为 CSS 变量,命名规则toCssVarName为路径以连字符连接并加--前缀,如primitive.gradient.primary→--primitive-gradient-primary;generateCSS按/* PRIMITIVES */等分节输出多个:root块,存在暗色令牌时额外输出.dark { ... }块;--format tailwind则把语义层颜色映射为theme.extend.colors的 Tailwind 配置片段。仓库提供起始模板 design-tokens-starter.json 供项目初始化令牌。7.2 embed-tokens.cjs:为 standalone HTML 抽取内嵌块embed-tokens.cjs 专为生成独立 HTML 文件(信息图、幻灯片等)设计,头部注释即如此声明。运行方式:node embed-tokens.cjs # 输出完整 CSS node embed-tokens.cjs --minimal # 仅输出常用令牌 node embed-tokens.cjs --style # 用 style 标签包裹实现要点:findProjectRoot从当前工作目录逐级向上,查找含assets/design-tokens.css的目录作为项目根(embed-tokens.cjs#L17-L30)——说明该脚本面向技能所操作的目标项目运行,而非本仓库自身;extractTokens用正则/:root\s*\{([^}])\}/g抽取全部:root块,再以--[\w-]:\s*[^;];收集变量并去重(embed-tokens.cjs#L61-L82);--minimal按MINIMAL_TOKENS前缀白名单过滤(embed-tokens.cjs#L41-L59),白名单恰好覆盖模板所需的全部变量族:--primitive-spacing-、--primitive-fontSize-、--primitive-fontWeight-、--primitive-lineHeight-、--primitive-radius-、--primitive-shadow-glow-、--primitive-gradient-、--primitive-duration-、--color-*(primary/secondary/accent/background/surface/foreground/border)、--typography-font-、--card-;--style会包上style并附加 Design Tokens (embedded for standalone HTML) 注释,输出形态与模板style中的粘贴点完全吻合。7.3 generate-slide.py:严格令牌约束的幻灯片生成器generate-slide.py 展示了同一套令牌纪律的 Python 实现,其文件头注释明确:ALL styles MUST use CSS variables from design-tokens.css, NO hardcoded colors, fonts, or spacing allowed。几个对使用者有直接价值的工程细节:输入转义:_e对所有用户文案做 HTML 转义;_safe_url只允许http://、https://、#、/四种链接形态,明确标注用于防止 javascript: URI 注入(CWE-79)(generate-slide.py#L21-L29);幻灯片类型映射SLIDE_GENERATORS支持title/problem/solution/metrics(别名traction)/chart/testimonial/cta(别名closing)八种语义页型(generate-slide.py#L624-L634),与slides-strategies参考文档中的叙事策略一一对应;其 CSS 中同样使用background-clip: text实现.slide-title渐变标题、aspect-ratio: 16 / 9固定单页比例,并以--slide-*组件令牌取代模板中的clamp()手写字号——可以推断,模板的clamp()方案是无生成器场景的等效兜底,两者目标一致:让字号随舞台缩放;命令行支持--demo直接产出一套 7 页演示 deck(title → problem → solution → metrics → chart → testimonial → cta),输出至项目assets/designs/slides/目录,可作为手工编写幻灯片前的结构范本。八、合规校验:html-token-validator.py 的判定规则html-token-validator.py 负责验证产出的幻灯片 HTML 是否真的遵循令牌规范,运行方式:python html-token-validator.py # 校验全部 HTML 资产 python html-token-validator.py --type slides # 只校验幻灯片 python html-token-validator.py path/to/file.html # 校验指定文件 python html-token-validator.py --colors # 打印令牌中的 CSS 变量其判定逻辑(html-token-validator.py#L65-L91)与本模板的每一处硬编码都能对上号:必备 import:内容中必须出现design-tokens.css字样(外链或内嵌标记),否则直接报错 Missing design-tokens.css import;禁止模式FORBIDDEN_PATTERNS覆盖 hex、rgb()、rgba()、hsl() 颜色与硬编码font-family,但存在四条例外:script块内一律跳过(html-token-validator.py#L170-L174)——这正是第三节中 Chart.js 配置可以写borderColor: #FF6B6B的原因,文档注释也写明 Chart.js allowed;白名单域名(pexels/unsplash/googlefonts 等)的外部 URL 跳过;品牌色透明化ALLOWED_RGBA_PATTERNS:仅品牌主/次/强调色与黑白、#0F172A、#070B14的rgba()形式被允许,用于CSS 无法对var()直接做透明度混合的场景——模板导航按钮的rgba(255,255,255,0.1)正落在白名单内;var()回退值(如var(--typography-font-body, Inter, ...))被识别为假阳性跳过;令牌用量下限:var(--color-、var(--primitive-、var(--typography-、var(--card-、var(--button-五族引用总数低于 5 时给出 Low token usage 警告(html-token-validator.py#L211-L212)。项目根的定位也值得注意:脚本从工作目录向上查找assets/design-tokens.json、assets/design-tokens.css、package.json或.git作为项目根,并支持DESIGN_SYSTEM_PROJECT_ROOT环境变量显式覆盖(html-token-validator.py#L22-L41);源码注释说明这是为了兼容技能安装在用户级目录或作为插件、与被操作项目分离的部署形态。九、使用方式与适用前提综合文档与脚本实现,这套模板的落地方式与边界如下:最小可用形态:复制 Base Structure 的完整 HTML,把 embed-tokens.cjs 的输出(推荐--minimal)粘入:root占位处,按需添加.slide节点即可,外部依赖仅 Chart.js 4.4.1 的 CDN 脚本;令牌前提:完整的令牌管线(generate-tokens.cjs→assets/design-tokens.css→embed-tokens.cjs)依赖目标项目存在assets/design-tokens.css/assets/design-tokens.json,可先以 design-tokens-starter.json 起步;本仓库本身并不内置这份资产,上述脚本以被操作项目的工作目录为根运行;内容组织:页面叙事可配合 slide-strategies 知识库 与 slide-charts.csv 等 CSV 数据,布局选型参考 layout-patterns.md,文案参考 copywriting-formulas.md;合规收口:产出后运行python html-token-validator.py --type slides,把CSS 全令牌化、JS 图表内联色、外部图走白名单域名作为验收标准;交互注意:默认点击任意处前进的行为在含可点击图表/链接的幻灯片上可能误触,自定义时建议保留e.target.closest(.nav-controls)同款排除逻辑,或改用按钮导航;animate-count引用的countUp关键帧需自行实现。模板文件在design与slides两个技能目录、以及 CLI 分发资产cli/assets下均存在对应副本,修改时需注意多处同步。【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考