基于 ui-ux-pro-max-skill 的 Slides Skill用设计令牌、Chart.js 与知识数据库一键生成说服力 HTML 幻灯片【免费下载链接】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-skillslides是 ui-ux-pro-max-skill 项目中负责战略化 HTML 演示文稿设计的 AI 技能其核心子命令create的调用规范记录在 cli/assets/skills/slides/references/create.md。本指南围绕该调用规范完整拆解create工作流如何串联设计令牌design tokens、Chart.js 数据可视化和幻灯片知识数据库slide knowledge database三大支柱并给出从技能调用到可运行 HTML 演示文稿的完整实操路径。读完你将掌握如何通过$ARGUMENTS协议驱动技能、如何用设计令牌保证视觉一致性、如何嵌入 Chart.js 图表、如何用知识库 CLI 为每页幻灯片做布局/文案/策略决策。一、create 子命令的调用协议一行指令驱动整个技能create.md的核心是定义了一个极其精简的调用入口全文可概括为一条指令与一个任务占位符Invoke slides skill to create persuasive HTML slides using design tokens, Chart.js, and the slide knowledge database. ## Task task$ARGUMENTS/task这条规范揭示了create的三大技术支柱也是本文展开的主线design tokens设计令牌——保证幻灯片色彩、字体、间距全部来自统一的令牌体系杜绝硬编码Chart.js——为数据驱动型幻灯片提供浏览器端图表渲染能力slide knowledge database幻灯片知识数据库——策略、布局、文案、图表四类 CSV 数据源配合 BM25 搜索引擎给出决策建议。调用协议本身由 cli/assets/skills/slides/SKILL.md 中的路由规则定义技能先解析$ARGUMENTS的首个单词作为子命令create随后加载对应的references/{subcommand}.md即本主题所在的references/create.md再用剩余参数执行。SKILL.md的 frontmatter 同时声明了技能的入参提示格式[topic] [slide-count]也就是说一次典型的调用形如slides create 2026 SaaS 年度复盘 12其中12用于后续策略与布局的上下文计算对应--total参数。二、支柱一设计令牌——所有样式强制走 CSS 变量create强调using design tokens其含义在源码中有严格体现。幻灯片生成脚本 cli/assets/skills/design-system/scripts/generate-slide.py 的文件头注释直接写明了约束ALL styles MUST use CSS variables from design-tokens.css — NO hardcoded colors, fonts, or spacing allowed从该脚本的模板实现可以看到整份演示文稿的颜色、字号、间距、圆角、阴影全部通过var(--token-name)引用。例如正文与标题字体font-family: var(--typography-font-body)、font-family: var(--typography-font-heading)幻灯片背景与前景background: var(--color-background)、color: var(--color-foreground)标题渐变.slide-title使用background: var(--primitive-gradient-primary)配合-webkit-background-clip: text实现渐变文字卡片、按钮、徽章、进度条、图表容器等组件均使用--card-*、--button-primary-*、--primitive-spacing-*、--primitive-radius-*等令牌将令牌内联进单文件 HTMLhtml-template.md见 cli/assets/skills/slides/references/html-template.md要求把令牌输出粘贴进style的:root块中。实际操作可用仓库自带的工具 cli/assets/skills/design-system/scripts/embed-tokens.cjs 一键完成它读取assets/design-tokens.css并输出内联 CSS# 输出全部令牌 node cli/assets/skills/design-system/scripts/embed-tokens.cjs # 只输出幻灯片常用令牌间距/字号/字重/行高/圆角/光晕/渐变/品牌色/字体/卡片 node cli/assets/skills/design-system/scripts/embed-tokens.cjs --minimal # 直接包裹 style 标签便于粘贴 node cli/assets/skills/design-system/scripts/embed-tokens.cjs --style--minimal模式只保留MINIMAL_TOKENS白名单中的令牌族--primitive-spacing-、--primitive-fontSize-、--color-primary、--card-等体积更小适合幻灯片这类独立 HTML 文件。脚本会自动向上查找包含assets/design-tokens.css的项目根目录因此从仓库任意子目录运行都能正确定位令牌文件。模板中的令牌速查表html-template.md给出了最常用的令牌与用途对应关系变量用途--color-primary品牌主色CTA、高亮--color-background幻灯片背景--color-secondary次要元素--primitive-gradient-primary标题渐变--typography-font-heading标题字体--typography-font-body正文字体三、支柱二Chart.js——数据驱动幻灯片的可视化底座create的第二大支柱是 Chart.js。html-template.md给出了完整的集成方式在head中通过 CDN 引入 Chart.js 4.4.1 的 UMD 构建script srchttps://cdn.jsdelivr.net/npm/chart.js4.4.1/dist/chart.umd.min.js/script页面内通过canvas挂载图表实例模板示例中演示了折线图配置type: line也支持bar、doughnut、radardiv classchart-container stylewidth: min(80%, 600px); height: clamp(200px, 40vh, 350px); canvas idrevenueChart/canvas /div script new Chart(document.getElementById(revenueChart), { type: line, 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值得注意的实现细节options.scales中网格线与刻度颜色统一使用低透明度白色rgba(255,255,255,0.05)与浅灰#B8B8D0与暗色幻灯片背景保持一致的视觉体系。这正体现了create的目标——图表不是孤立插入的元素而是整体设计系统的一部分。如果希望完全绕开外部依赖generate-slide.py还内置了纯 CSS 柱状图实现.bar-chart.bar用height百分比表达数值配合.bar-value与.bar-label标注数据与分类适合离线或对体积敏感的场景。四、支柱三幻灯片知识数据库——策略、布局、文案、图表四域决策create的knowledge database由 cli/assets/skills/design-system/data 下的六张 CSV 构成分别覆盖slide-strategies.csv——15 种成熟演讲结构含 YC Seed Deck、Guy Kawasaki 10/20/30、Sales Pitch 等字段含slide_count、structure、goal、audience、narrative_arc、emotion_arc、sparkline_beatsslide-layouts.csv——25 种布局Title Slide、Problem Statement 等字段含content_zones、visual_weight、cta_placement、css_structure、animation_classslide-copy.csv——25 条文案公式AIDA、PAS、FAB、Cost of Inaction、Before-After-Bridge 等字段含components、example_template、emotion_trigger、slide_typeslide-charts.csv——图表选型指南Bar Chart Vertical/Horizontal 等字段含when_to_use、when_to_avoid、max_categories、accessibility_notesslide-layout-logic.csv与slide-color-logic.csv——把目标/情绪映射到布局模式、视觉权重、背景与卡片风格的规则表知识库的搜索引擎BM25 CLI直接读取 CSV 效率不高create工作流推荐使用仓库提供的检索 CLI cli/assets/skills/design-system/scripts/search-slides.py。其底层是 cli/assets/skills/design-system/scripts/slide_search_core.py 中手写的 BM25 排序实现BM25类默认k11.5, b0.75对四个域分别定义了可检索列与输出列CSV_CONFIG。基础检索用法# 自动识别域strategy 等 python cli/assets/skills/design-system/scripts/search-slides.py investor pitch # 指定域图表 / 文案 / 布局 python cli/assets/skills/design-system/scripts/search-slides.py funnel conversion -d chart python cli/assets/skills/design-system/scripts/search-slides.py headline hook -d copy python cli/assets/skills/design-system/scripts/search-slides.py two column -d layout # 全域搜索 / JSON 输出 python cli/assets/skills/design-system/scripts/search-slides.py startup funding --all python cli/assets/skills/design-system/scripts/search-slides.py metrics dashboard --json上下文增强模式contextual search会把当前是第几页、总共几页、上一页情绪代入决策python cli/assets/skills/design-system/scripts/search-slides.py problem slide --context --position 2 --total 9 python cli/assets/skills/design-system/scripts/search-slides.py cta --context --position 9 --total 9 --prev-emotion frustration该模式会同时输出推荐布局、排版primary/secondary 字号、配色处理、是否需要打破模式pattern break、是否建议 full-bleed 背景图以及动画类名直接对应slide-layout-logic.csv中的break_pattern、use_bg_image与slide-color-logic.csv中的use_full_bleed等字段。布局决策流references/layout-patterns.md见 cli/assets/skills/slides/references/layout-patterns.md把知识库的使用抽象为四步决策流1. Whats the slide goal? └─ Search layout-logic.csv 2. What emotion should it trigger? └─ Search color-logic.csv 3. Whats the content type? └─ Search typography.csv 4. Should it break pattern? └─ Check position (1/3, 2/3) → Use full-bleed常用布局与动画的对应关系节选自 layout-patterns.md布局适用场景动画类Title Slide开场/第一印象animate-fade-upProblem Statement建立痛点animate-staggerSolution Overview引入方案animate-scaleFeature Grid能力展示3-6 卡片animate-staggerMetrics DashboardKPI 展示3-4 指标animate-stagger-scaleComparison Table方案对比animate-fade-upBig Number Hero单一重磅数字animate-countPricing Cards定价层级animate-staggerCTA Closing驱动行动animate-pulse五、配套实操用 generate-slide.py 从 JSON 生成品牌合规幻灯片如果说create.md定义了技能的指挥协议那么 cli/assets/skills/design-system/scripts/generate-slide.py 就是create的执行引擎。它以 JSON 描述幻灯片数据输出完整 HTML 演示文稿所有样式强制走令牌。支持的幻灯片类型脚本通过SLIDE_GENERATORS字典将类型映射到生成函数type生成函数输出结构titlegenerate_title_slide徽章 渐变标题 副标题 双 CTA 页脚problemgenerate_problem_slide三列痛点卡片PAS 结构solutiongenerate_solution_slide功能特性列表 产品截图占位卡metrics/tractiongenerate_metrics_slide4 列指标卡渐变数字chartgenerate_chart_slideCSS 柱状图testimonialgenerate_testimonial_slide引言 作者 职位cta/closinggenerate_cta_slide渐变背景 行动号召命令行用法# 生成演示文稿含全部类型用于快速预览 python cli/assets/skills/design-system/scripts/generate-slide.py --demo # 从 JSON 文件生成 python cli/assets/skills/design-system/scripts/generate-slide.py --json slides.json --output deck.html # 查看全部参数 python cli/assets/skills/design-system/scripts/generate-slide.pyJSON 文件结构为顶层titleslides数组每个 slide 含type与对应字段例如一个完整的 7 页演示demo 模式演示数据大致为titlebadge/title/subtitle/cta→ problemheadline 三个 pain 点→ solution三个 feature→ metrics4 个 value/label→ chartbars 数组label/value/display→ testimonialquote/author/role→ ctaheadline/cta/contact。不认识的type会输出Warning: Unknown slide type并跳过因此扩展新类型不会破坏整份演示。安全设计HTML 转义与 URL 校验脚本内置了两层防注入措施值得在文章引用时说明_e()对所有用户输入做 HTML 转义基于html.escape防止文案中的特殊字符破坏页面结构_safe_url()仅放行http://、https://、#、/开头的 URL其余一律回退为#从源码注释可见这是为了预防javascript:URI 注入对应 CWE-79。这两点保证了create接收的$ARGUMENTS即使包含不可信内容产出的 HTML 也是安全的。六、完整工作流从一条指令到一份演示文稿综合上述模块create子命令的端到端工作流如下解析入参SKILL.md路由逻辑解析$ARGUMENTS首词得到create加载 cli/assets/skills/slides/references/create.md剩余参数进入task上下文策略选型用search-slides.py 主题关键词 -d strategy --json从slide-strategies.csv选取演讲结构如 YC Seed Deck 10-12 页拿到structure与emotion_arc逐页决策对每一页执行布局决策流——用--context --position N --total M模式获取布局、排版、配色、是否 full-bleed 与动画类建议同时用-d copy查询对应文案公式如 Problem 页用 PASCTA 页用 AIDA数据可视化按slide-charts.csv的选型建议选择 Chart.js 图表类型或纯 CSS 柱状图数据接入html-template.md的图表容器令牌注入用embed-tokens.cjs --style生成内联:root令牌块粘贴进模板产出 HTML将每页内容组装为.slide结构内容一律包在.slide-content内防止溢出引入html-template.md提供的进度条、导航按钮与键盘控制脚本需要批量或品牌强一致场景可直接用generate-slide.py --json生成。七、模板与动画的进一步扩展响应式与导航html-template.md中的基础模板已经内置了完整的演示文稿运行机制桌面端 16:9 锁定max-width: calc(100vh * 16 / 9)实现 letterbox768px / 480px 两档响应式断点分别收敛内边距与标题字号顶部进度条#progressBar宽度随页码变化、底部导航按钮与N / total计数器键盘支持→与空格前进、←后退点击页面空白处也会自动前进排除.nav-controls区域。动画类库模板提供四类开箱即用的动画全部为纯 CSS keyframes.animate-fade-up——上移淡入0.6s.animate-scale——缩放淡入0.5s.animate-count——数字滚动配合countUp动画.animate-stagger——子元素依次延迟 0.1s 递进入场布局知识库中每种布局都推荐了默认动画类见上文表格实现一页一个节奏的叙事感。背景图与遮罩需要全出血背景图时模板给出标准做法背景图放在 slide 容器叠加一层半透明渐变遮罩linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))内容区用position: relative; z-index: 1浮在遮罩之上保证文字可读性——这与slide-color-logic.csv中use_full_bleed的决策字段相互呼应。八、结论create.md虽是一份仅两行的调用规范却精准定义了 ui-ux-pro-max-skill 中slides技能的核心交付承诺以设计令牌保证视觉一致性以 Chart.js 承载数据叙事以知识数据库驱动策略决策。围绕这条规范仓库提供了从搜索引擎BM25 CLI、生成引擎generate-slide.py、令牌注入工具embed-tokens.cjs到完整 HTML 模板html-template.md的一整套可运行工具链。读者可以顺着 cli/assets/skills/slides/SKILL.md → cli/assets/skills/slides/references/create.md → 四个 references 文档 → 两个脚本与数据目录的路径把这份调用协议落成真正能跑起来的演示文稿生产线。【免费下载链接】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），仅供参考