ui-ux-pro-max-skill 幻燈片 HTML 模板解析:16:9 布局、Design Tokens 注入與 Chart.js 集成【免費(fèi)下載鏈接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.項(xiàng)目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill本文以 ui-ux-pro-max-skill 倉庫中的 slides-html-template.md 為核心,完整拆解該技能體系用于生成 HTML 演示文稿的基礎(chǔ)模板:16:9 letterbox 舞臺(tái)、導(dǎo)航腳本、Chart.js 數(shù)據(jù)可視化、入場動(dòng)畫類與背景圖疊加方案,并結(jié)合倉庫內(nèi)design-system腳本的源碼,說明模板中的 CSS 變量如何由 Design Tokens 管線自動(dòng)注入、以及產(chǎn)出的幻燈片 HTML 如何被令牌合規(guī)校驗(yàn)器約束。讀完本文,你可以獨(dú)立復(fù)制并定制這套單文件幻燈片模板,理解其每個(gè)關(guān)鍵配置的作用與默認(rèn)值,并掌握從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技能將其列為知識(shí)庫之一:.claude/skills/slides/SKILL.md 的 References (Knowledge Base) 表格聲明了 4 個(gè)參考文件(布局模式、HTML 模板、文案公式、幻燈片策略),并定義了路由邏輯:解析$ARGUMENTS首個(gè)詞作為子命令,加載對(duì)應(yīng)references/{subcommand}.md后執(zhí)行。其中create子命令的入口文檔為 .claude/skills/slides/references/create.md,其內(nèi)容明確指示調(diào)用 slides 技能,使用 Design Tokens、Chart.js 與幻燈片知識(shí)庫創(chuàng)建說服性 HTML 幻燈片。從源碼結(jié)構(gòu)看,模板只是骨架,真正決定視覺一致性的數(shù)據(jù)來自design-system技能目錄下的腳本與知識(shí)庫,包括 generate-tokens.cjs、embed-tokens.cjs、generate-slide.py、html-token-validator.py,以及 slide-charts.csv、slide-backgrounds.csv 等知識(shí)庫數(shù)據(jù)文件。CLI 分發(fā)側(cè)還在 cli/assets/skills/design/references/slides-html-template.md 保留了一份同內(nèi)容副本,供init等命令寫入用戶項(xiàng)目。二、基礎(chǔ)結(jié)構(gòu):完整的單文件幻燈片 HTML文檔 Base Structure 一節(jié)給出了一份可直接運(yùn)行的完整 HTML(slides-html-template.md#L7-L202),包含令牌占位、響應(yīng)式樣式、導(dǎo)航控件與全部導(dǎo)航邏輯。以下是原文完整骨架(令牌注釋處即為embed-tokens.cjs的輸出粘貼點(diǎn)):!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下面按關(guān)鍵設(shè)計(jì)點(diǎn)逐段解析。2.1 令牌占位:standalone HTML 的唯一外部依賴style開頭標(biāo)注了/* Paste embed-tokens.cjs output here */,即把 embed-tokens.cjs 的 stdout 直接粘入,得到:root { ... }令牌塊。模板內(nèi)置的示例值(--color-primary: #FF6B6B、--color-background: #0D0D0D)只是占位,實(shí)際項(xiàng)目應(yīng)以品牌令牌替換。這種內(nèi)嵌而非外鏈的方式保證幻燈片是零構(gòu)建、零本地依賴的單文件,適合郵件分發(fā)或投屏場景。2.2 16:9 letterbox 舞臺(tái)桌面端(視口寬度 ≥ 769px)的.slide-deck使用經(jīng)典 letterbox 鎖比例方案:max-width: calc(100vh * 16 / 9)與max-height: calc(100vw * 9 / 16)互相鉗制,使舞臺(tái)在任何寬高比的屏幕上都被限制為 16:9;position: absolute; inset: 0; margin: auto將舞臺(tái)居中,多余區(qū)域顯示為body背景色,形成上下/左右黑邊;移動(dòng)端(≤ 768px)不啟用 letterbox,.slide-deck退化為100vw × 100vh,幻燈片全屏鋪滿,適配手機(jī)豎屏翻閱。2.3 幻燈片與內(nèi)容安全區(qū).slide絕對(duì)定位鋪滿舞臺(tái),默認(rèn)opacity: 0; visibility: hidden,僅.slide.active可見,切換為 0.4s 的透明度過渡;overflow: hidden防止內(nèi)容溢出舞臺(tái)(對(duì)應(yīng)注釋 Prevent content overflow);內(nèi)容一律包裹在.slide-content中,該內(nèi)層容器用max-height: 100%; overflow: hidden; gap: 16px把內(nèi)容約束在安全區(qū)內(nèi),文檔注釋明確要求 always wrap content in .slide-content;標(biāo)題.slide-title使用clamp(32px, 6vw, 80px)流式字號(hào),并用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 響應(yīng)式斷點(diǎn)模板定義了兩個(gè)降級(jí)斷點(diǎn),所有字號(hào)都采用clamp(最小, 視口比例, 最大)形式:斷點(diǎn).slide內(nèi)邊距標(biāo)題h2正文 p/li平板(≤ 768px)32px 24pxclamp(28px, 5vw, 48px)clamp(20px, 4vw, 32px)clamp(14px, 2.5vw, 18px)手機(jī)(≤ 480px)24px 16pxclamp(22px, 6vw, 36px)clamp(18px, 4.5vw, 28px)clamp(12px, 3vw, 16px)手機(jī)斷點(diǎn)還額外縮小了導(dǎo)航控件:.nav-controls下移到bottom: 16px、間距縮至 12px,.nav-btn從 40px 縮到 32px,保證小屏上手勢區(qū)不被遮擋。2.5 導(dǎo)航、進(jìn)度條與交互邏輯頂部.progress-bar(3px 高,主色)寬度由腳本驅(qū)動(dòng),直觀呈現(xiàn)當(dāng)前頁 / 總頁數(shù)的進(jìn)度;底部.nav-controls為左右圓形按鈕加 n / total 計(jì)數(shù)器,z-index: 1000保證始終浮在幻燈片之上;腳本邏輯全部收斂在showSlide(n):先鉗制頁碼范圍(n 1歸 1,n total歸 total),再批量classList.toggle(active),最后同步計(jì)數(shù)器與進(jìn)度條寬度(n / total * 100)%;輸入覆蓋三種方式:鍵盤ArrowRight/空格前進(jìn)、ArrowLeft后退(均preventDefault防止空格滾動(dòng)頁面);點(diǎn)擊頁面任意位置前進(jìn),但命中.nav-controls內(nèi)的點(diǎn)擊被排除(!e.target.closest(.nav-controls)),避免誤觸底部按鈕區(qū)域;頁面加載時(shí)執(zhí)行showSlide(1)完成初始化,total由document.querySelectorAll(.slide).length自動(dòng)計(jì)算——因此新增幻燈片只需復(fù)制.slide節(jié)點(diǎn),無需改腳本。三、Chart.js 數(shù)據(jù)可視化集成文檔 Chart.js Integration 一節(jié)給出圖表容器與初始化代碼的完整寫法(slides-html-template.md#L204-L237),依賴 head 中鎖定的chart.js4.4.1UMD 構(gòu)建: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關(guān)鍵配置說明:容器尺寸width: min(80%, 600px); height: clamp(200px, 40vh, 350px)同時(shí)用了min()與clamp(),讓圖表隨幻燈片舞臺(tái)縮放但不失控;maintainAspectRatio: false是幻燈片場景的必選項(xiàng)——否則 Chart.js 默認(rèn)按 canvas 固有比例渲染,會(huì)與.chart-container的固定高度沖突;tension: 0.4開啟輕度貝塞爾平滑,fill: true配合低透明度backgroundColor形成面積填充,契合深色底;網(wǎng)格線rgba(255,255,255,0.05)與刻度#B8B8D0是典型的暗色主題低對(duì)比處理,保證數(shù)據(jù)系列成為視覺主角;圖表類型按// or bar, doughnut, radar注釋可直接替換,datasets結(jié)構(gòu)不變。一個(gè)值得注意的細(xì)節(jié):圖表配色在模板中是硬編碼的,而倉庫的令牌校驗(yàn)器 html-token-validator.py 恰恰對(duì)script塊內(nèi)的硬編碼顏色網(wǎng)開一面(見第八節(jié))——這正是CSS 必須走令牌、JS 圖表數(shù)據(jù)可內(nèi)聯(lián)這一設(shè)計(jì)邊界在模板中的體現(xiàn)。四、入場動(dòng)畫類Animation Classes 一節(jié)(slides-html-template.md#L239-L273)提供四組開箱即用的 CSS 動(dòng)畫,均為純 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保持終態(tài);需配合幻燈片切換時(shí)機(jī)觸發(fā)(如切換.active時(shí)元素才被渲染),避免所有元素在頁面加載時(shí)一次性播完;.animate-count:預(yù)留的數(shù)字滾動(dòng)占位類(指向countUp關(guān)鍵幀),模板本身未給出關(guān)鍵幀實(shí)現(xiàn),屬于留給使用方擴(kuò)展的鉤子;.animate-scale:0.9 倍縮放至 1 并淡入,適合圖表卡片、指標(biāo)塊;.animate-stagger:作用于容器的級(jí)聯(lián)入場——直接子元素共用fadeUp,按nth-child以 0.1s 步進(jìn)延遲,最多顯式支持 4 個(gè)子元素,超過 4 個(gè)的后續(xù)元素會(huì)立即(無延遲)入場,使用時(shí)注意控制列表長度或自行補(bǔ)延遲。五、背景圖與深色遮罩Background Images 一節(jié)(slides-html-template.md#L275-L284)給出圖片幻燈片的三層結(jié)構(gòu):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要點(diǎn):圖片作為.slide的background-image,示例源為 Pexels 外鏈;.overlay用 135° 深色漸變(不透明度 0.9 → 0.7)壓住背景,保證前景文字對(duì)比度;注意其色值rgba(13,13,13,x)與模板令牌示例--color-background: #0D0D0D一致,即遮罩顏色應(yīng)跟隨品牌背景色;內(nèi)容層position: relative; z-index: 1浮于遮罩之上。這一做法與校驗(yàn)器的白名單機(jī)制互相印證:html-token-validator.py#L88-L91 的ALLOWED_EXCEPTIONS明確放行pexels.com、unsplash.com等外部素材域名,允許這類圖片 URL 出現(xiàn)在幻燈片中而不觸發(fā)外部資源告警。六、CSS 變量參考表文檔末尾的 CSS Variables Reference(slides-html-template.md#L286-L295)列出模板實(shí)際消費(fèi)的最小變量集:VariableUsage--color-primaryBrand primary (CTA, highlights)--color-backgroundSlide background--color-secondarySecondary elements--primitive-gradient-primaryTitle gradients--typography-font-headingHeadlines--typography-font-bodyBody text這 6 個(gè)變量正是第二、四節(jié)中所有var()引用的并集。模板對(duì)它們都提供了回退值,因此即使:root令牌塊缺失,頁面也能以示例色渲染——這是一個(gè)有意的優(yōu)雅降級(jí)設(shè)計(jì):令牌是增強(qiáng),不是硬依賴。七、源碼級(jí)實(shí)現(xiàn)佐證:令牌從哪里來、如何被校驗(yàn)?zāi)０遄⑨?Paste embed-tokens.cjs output here 指向一條完整的令牌管線,以下按倉庫源碼逐環(huán)說明。7.1 generate-tokens.cjs:JSON 令牌 → CSS 變量generate-tokens.cjs 是管線的源頭,命令行參數(shù)為:node generate-tokens.cjs --config tokens.json -o tokens.css node generate-tokens.cjs --config tokens.json --format tailwind其內(nèi)部實(shí)現(xiàn)(generate-tokens.cjs#L73-L98)分三步:resolveReference解析{primitive.color.blue.600}這類令牌引用,支持遞歸(解析出的$value若仍是引用會(huì)繼續(xù)解析);flattenTokens將primitive/semantic/component/dark.semantic四個(gè)命名空間展平為 CSS 變量,命名規(guī)則toCssVarName為路徑以連字符連接并加--前綴,如primitive.gradient.primary→--primitive-gradient-primary;generateCSS按/* PRIMITIVES */等分節(jié)輸出多個(gè):root塊,存在暗色令牌時(shí)額外輸出.dark { ... }塊;--format tailwind則把語義層顏色映射為theme.extend.colors的 Tailwind 配置片段。倉庫提供起始模板 design-tokens-starter.json 供項(xiàng)目初始化令牌。7.2 embed-tokens.cjs:為 standalone HTML 抽取內(nèi)嵌塊embed-tokens.cjs 專為生成獨(dú)立 HTML 文件(信息圖、幻燈片等)設(shè)計(jì),頭部注釋即如此聲明。運(yùn)行方式:node embed-tokens.cjs # 輸出完整 CSS node embed-tokens.cjs --minimal # 僅輸出常用令牌 node embed-tokens.cjs --style # 用 style 標(biāo)簽包裹實(shí)現(xiàn)要點(diǎn):findProjectRoot從當(dāng)前工作目錄逐級(jí)向上,查找含assets/design-tokens.css的目錄作為項(xiàng)目根(embed-tokens.cjs#L17-L30)——說明該腳本面向技能所操作的目標(biāo)項(xiàng)目運(yùn)行,而非本倉庫自身;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會(huì)包上style并附加 Design Tokens (embedded for standalone HTML) 注釋,輸出形態(tài)與模板style中的粘貼點(diǎn)完全吻合。7.3 generate-slide.py:嚴(yán)格令牌約束的幻燈片生成器generate-slide.py 展示了同一套令牌紀(jì)律的 Python 實(shí)現(xiàn),其文件頭注釋明確:ALL styles MUST use CSS variables from design-tokens.css, NO hardcoded colors, fonts, or spacing allowed。幾個(gè)對(duì)使用者有直接價(jià)值的工程細(xì)節(jié):輸入轉(zhuǎn)義:_e對(duì)所有用戶文案做 HTML 轉(zhuǎn)義;_safe_url只允許http://、https://、#、/四種鏈接形態(tài),明確標(biāo)注用于防止 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參考文檔中的敘事策略一一對(duì)應(yīng);其 CSS 中同樣使用background-clip: text實(shí)現(xiàn).slide-title漸變標(biāo)題、aspect-ratio: 16 / 9固定單頁比例,并以--slide-*組件令牌取代模板中的clamp()手寫字號(hào)——可以推斷,模板的clamp()方案是無生成器場景的等效兜底,兩者目標(biāo)一致:讓字號(hào)隨舞臺(tái)縮放;命令行支持--demo直接產(chǎn)出一套 7 頁演示 deck(title → problem → solution → metrics → chart → testimonial → cta),輸出至項(xiàng)目assets/designs/slides/目錄,可作為手工編寫幻燈片前的結(jié)構(gòu)范本。八、合規(guī)校驗(yàn):html-token-validator.py 的判定規(guī)則html-token-validator.py 負(fù)責(zé)驗(yàn)證產(chǎn)出的幻燈片 HTML 是否真的遵循令牌規(guī)范,運(yùn)行方式:python html-token-validator.py # 校驗(yàn)全部 HTML 資產(chǎn) python html-token-validator.py --type slides # 只校驗(yàn)幻燈片 python html-token-validator.py path/to/file.html # 校驗(yàn)指定文件 python html-token-validator.py --colors # 打印令牌中的 CSS 變量其判定邏輯(html-token-validator.py#L65-L91)與本模板的每一處硬編碼都能對(duì)上號(hào):必備 import:內(nèi)容中必須出現(xiàn)design-tokens.css字樣(外鏈或內(nèi)嵌標(biāo)記),否則直接報(bào)錯(cuò) Missing design-tokens.css import;禁止模式FORBIDDEN_PATTERNS覆蓋 hex、rgb()、rgba()、hsl() 顏色與硬編碼font-family,但存在四條例外:script塊內(nèi)一律跳過(html-token-validator.py#L170-L174)——這正是第三節(jié)中 Chart.js 配置可以寫borderColor: #FF6B6B的原因,文檔注釋也寫明 Chart.js allowed;白名單域名(pexels/unsplash/googlefonts 等)的外部 URL 跳過;品牌色透明化ALLOWED_RGBA_PATTERNS:僅品牌主/次/強(qiáng)調(diào)色與黑白、#0F172A、#070B14的rgba()形式被允許,用于CSS 無法對(duì)var()直接做透明度混合的場景——模板導(dǎo)航按鈕的rgba(255,255,255,0.1)正落在白名單內(nèi);var()回退值(如var(--typography-font-body, Inter, ...))被識(shí)別為假陽性跳過;令牌用量下限:var(--color-、var(--primitive-、var(--typography-、var(--card-、var(--button-五族引用總數(shù)低于 5 時(shí)給出 Low token usage 警告(html-token-validator.py#L211-L212)。項(xiàng)目根的定位也值得注意:腳本從工作目錄向上查找assets/design-tokens.json、assets/design-tokens.css、package.json或.git作為項(xiàng)目根,并支持DESIGN_SYSTEM_PROJECT_ROOT環(huán)境變量顯式覆蓋(html-token-validator.py#L22-L41);源碼注釋說明這是為了兼容技能安裝在用戶級(jí)目錄或作為插件、與被操作項(xiàng)目分離的部署形態(tài)。九、使用方式與適用前提綜合文檔與腳本實(shí)現(xiàn),這套模板的落地方式與邊界如下:最小可用形態(tài):復(fù)制 Base Structure 的完整 HTML,把 embed-tokens.cjs 的輸出(推薦--minimal)粘入:root占位處,按需添加.slide節(jié)點(diǎn)即可,外部依賴僅 Chart.js 4.4.1 的 CDN 腳本;令牌前提:完整的令牌管線(generate-tokens.cjs→assets/design-tokens.css→embed-tokens.cjs)依賴目標(biāo)項(xiàng)目存在assets/design-tokens.css/assets/design-tokens.json,可先以 design-tokens-starter.json 起步;本倉庫本身并不內(nèi)置這份資產(chǎn),上述腳本以被操作項(xiàng)目的工作目錄為根運(yùn)行;內(nèi)容組織:頁面敘事可配合 slide-strategies 知識(shí)庫 與 slide-charts.csv 等 CSV 數(shù)據(jù),布局選型參考 layout-patterns.md,文案參考 copywriting-formulas.md;合規(guī)收口:產(chǎn)出后運(yùn)行python html-token-validator.py --type slides,把CSS 全令牌化、JS 圖表內(nèi)聯(lián)色、外部圖走白名單域名作為驗(yàn)收標(biāo)準(zhǔn);交互注意:默認(rèn)點(diǎn)擊任意處前進(jìn)的行為在含可點(diǎn)擊圖表/鏈接的幻燈片上可能誤觸,自定義時(shí)建議保留e.target.closest(.nav-controls)同款排除邏輯,或改用按鈕導(dǎo)航;animate-count引用的countUp關(guān)鍵幀需自行實(shí)現(xiàn)。模板文件在design與slides兩個(gè)技能目錄、以及 CLI 分發(fā)資產(chǎn)cli/assets下均存在對(duì)應(yīng)副本,修改時(shí)需注意多處同步。【免費(fèi)下載鏈接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.項(xiàng)目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考